Jump to content

Div Command


chrisciscoioio
 Share

Recommended Posts

Hello,I am having trouble with how my Div displays and I can't seem to find the answer myself, so I am coming for help!Question: Once you view the page, the right hand div is far to big and it throws off the rest of the web page, my question is how to force it to be smaller, I would like a full answer becaseu I have tryed many commands and none seem to work.You can look at the code below, but I would recommend that you download the zip file:Web Project.zipThe code is very long at this time because I have the css and the html together, I will change this later.Also I think I am still using some deprecated commands, I am not sure, if you spot any please tell me. I have not gone through all my code fully, so I might have missed some things.

<html><head><title></title><style type="text/css">/* Padding order: top,right,bottom,left. *//* margin order: top,right,bottom,left. */div.header {padding: 10% 30% 10% 30%;border-color: #000000;text-align: center;clear: both;background-position: center top;background-repeat: repeat-y;}div.navigation {padding: 10% 2% 10% 2%;border-color: #000000;text-align: left;clear: left;background-position: center top;background-repeat: repeat-y;line-height: 220%;}div.content {padding: 10% 10% 10% 10%;border-color: #000000;text-align: right;clear: none;background-position: center top;background-repeat: repeat-y;}div.thumbnails {padding: 10% 2% 10% 2%;margin: 0% 1% 10% 1%;border-color: #000000;background-position: center top;background-repeat: repeat-y;line-height: 1%;}div.footer {padding: 10% 30% 10% 30%;border-color: #000000;clear: both;background-position: center top;background-repeat: repeat-y;}div{background-image:url(Foreground.jpg);background-repeat:no-repeat;margin: 2% 2% 2% 2%;border-width: 2px;border-style:solid;background-position: center top;background-repeat: repeat-y;}table.layout{text-align: center;}body{background-image:url(background.jpg);background-repeat: no-repeat;background-attachment: fixed;}img.movie{float: left;}</style></head><body><table class="layout" align="center" width="90%">	<tr>		<td colspan="3">			<div class="header">			Header			</div>		</td>	</tr>	<tr>		<td>			<div class="navigation">				<p>					<h4>Main Sections</h4>					<hr />					Home<br />					Reviews<br />					Links<br />					About<br />					<hr />					<h4>Movie Sections</h4>					<hr />					Comedy<br />					Horror<br />					Fantasy<br />					Family<br />					Action<br />					Lorem ipsum<br />					Lorem ipsum<br />					Lorem ipsum<br />					<hr />					<h4>Links</h4>					<hr />					Lorem ipsum<br />					Lorem ipsum<br />					Lorem ipsum<br />				</p>			</div>		</td>		<td>			<div class="content">				<img class="movie" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="35%" /> 				<p>				<h3>Lorem ipsum</h3><br />					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sit amet mauris et 				diam lacinia pellentesque. In blandit, lacus quis pharetra suscipit, ligula orci imperdiet				metus, vulputate varius enim odio eu velit. Suspendisse feugiat quam at orci. Curabitur augue				tortor, rutrum eget, scelerisque vitae, vestibulum non, erat. Integer accumsan mattis justo. 				Donec volutpat vulputate nisl. In hac habitasse platea dictumst. Sed consequat quam. Curabitur				nisl lacus, feugiat in, consequat vel, rhoncus sed, dui. Nullam porta, odio id iaculis mollis,				tellus quam nonummy ipsum, sit amet scelerisque enim nibh vel mauris. Integer eros. 				</p>				<p>					Morbi libero neque, auctor quis, eleifend id, adipiscing porttitor, mauris. Fusce sagittis 				iaculis dui. Vestibulum blandit iaculis dolor. Aliquam orci. Aenean lobortis, dui ac 				consectetuer malesuada, arcu orci feugiat velit, eget fermentum nisi dui vitae mi. Etiam 				gravida rutrum ante. Aliquam mollis leo quis leo. Pellentesque habitant morbi tristique 				senectus et netus et malesuada fames ac turpis egestas. Mauris volutpat, lacus ut vulputate 				auctor, mauris risus dapibus dolor, vitae ullamcorper mi turpis a erat. In malesuada dui at 				ligula. Praesent dapibus, odio sit amet viverra commodo, mauris turpis viverra purus, nec tempor				ipsum nunc eleifend tellus. In nibh. Etiam laoreet, odio vel convallis blandit, lorem sem 				tincidunt diam, a tincidunt diam diam in metus. Integer malesuada, ipsum eget varius commodo,			 	tellus ligula scelerisque ligula, nec viverra eros urna ac lorem. Proin nec lorem id sapien 				volutpat semper.				</p>			</div>		</td>		<td>			<div class="thumbnails">				<p>					<h3>Quick Links</h3>					<hr />					<h5>Movie Title</h5>					<img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" />					<br />					<hr />					<h5>Movie Title</h5>					<img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" />					<br />					<hr />					<h5>Movie Title</h5>					<img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" />					<br />					<hr />					<h5>Movie Title</h5>					<img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" />					<br />					<hr />					<h5>Movie Title</h5>					<img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" />					<br />					<hr />					<h5>Movie Title</h5>					<img class="thumb" src="lipsumImage.gif" alt="Alternate text if Image does not show." width="40%" />					<br />					</p>			</div>	</tr>	<tr>		<td colspan="3">			<div class="footer">			Footer			</div>		</td>	</tr></table></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...