Jump to content

Positioning div elements


DougieDa59
 Share

Recommended Posts

Hey folks, I am new to css after using tables in the past for layouts :) ..What I am after is to be able to align the div "content" at the same height, but to the right of div "navigation" (the one with the league table in it).Here is the page:http://www.newsantosfc.co.uk/v2/test.phpHere is the concerning code:

<div id="navigation"><p>League Table<br /></p><?php include ('tables.php'); ?><p>Podium4Sport<br /> <a href="http://www.podium4sport.com" target="_blank"> <img src="p4s.gif" alt="Podium 4 Sport.com" border="0" /></a></p><p>New Santos on Bebo <br /> <a href="http://newsantos.bebo.com" target="_blank"><img src="bebo.jpg" alt="New Santos on Bebo" border="0" /></a></p></div><div id="content"> <table width="600" border="0"> <tr> <td background="back.gif"> <span class="style2">_ </span><span class="style1">Welcome to the website of New Santos Football Club</span></td> </tr> </table> <br /><p><span class="style3">Latest News </span><i><img src="bebo.jpg" alt="bebo" width="134" height="150" align="right" /><br /> 20/6/2008</i><br />The Website is redesigned and updated!<br /><br />15/4/2008<br />The clubs' end of season awards were handed out last night in The Eg bar. The winners of the awards are:<br /> Simon Magee - Top Goalscorer<br /> Martin Cunningham - Clubman of the Year<br /> Martin Magee - Managers Player of the Year<br /> David Dougan - Player of the Year<br /> David Dougan - Young Player of the Year<br /> <br /> <a href="news.php">> Visit the News Page for more news.</a></p><table width="608" border="0"> <tr> <td><img src="nextmatch.gif" alt="Next Match" width="120" height="30" border="0" /><br /> <i>19/04/08</i><br /> New Santos 1 - 0 Arydoyne WMC II<br /> <i> League Match 20 </i></td> <td><img src="lastmatch.gif" alt="Last Match" width="120" height="30" border="0" /><br /> <p>Season Finished.</p> </td> </tr></table></div>
#navigation {font-family:Arial; font-size:10px; color:#FF0000;margin-left:100px;width:150px;}#content {position:relative; top:-350px; left:300px; width:600px;}
This code sets the content div too low (i.e. below the div on the left). How do I edit the properties to get it aligned properly? I don't think I should be using relative positioning but I am not sure what to do next.I also have a table within the "content" div, but I will make that 2 divs once I know how to align two divs side by side.Cheers in advance people.
Link to comment
Share on other sites

It doesn't have room for the content because the use of margins.Here's what you do:1. Back up your work and put it in a safe place so that way if you don't like I provide, you can revert back to it.2. Add the following in bold:

<body onload="MM_preloadImages('images/home2.gif','images/history2.gif','images/squad2.gif','images/fixtures2.gif','images/news2.gif','images/extras2.gif','images/contact2.gif','images/league2.gif')">[b]<div id="container">  [/b]<div id ="header">

	  <p>Season Finished.</p>	</td>  </tr></table></div>[b]</div>[/b]</body>

Now completely replace your styles within the ns.css file with this:

#header {	margin:10px 0;	width: 800px;}#navigation	{float: left;font-family:Arial; font-size:10px; color:#FF0000;width:150px;padding-right: 20px;}#content	{ padding-left: 50px; width: 600px}body	{font-family:Arial, Verdana; font-size:12px; color:#000000; margin: 0 auto; text-align: center;}a	{ text-decoration:none; color:#FF0000}a:hover	{color:#FF0000; text-decoration:underline}#container {width: 800px; margin: 0 auto; text-align: left;}

Adjust to suit.I basically set the page to be centered so that you can do away with some of the margins. Adjusted the width of the content and gave the nav some right padding so the content does not butt up against the nav.You should use proper semantics when coding. Where you have 'Latest News' you used a <span> tag and no heading tag. Where you content is you should have used <p> tags which is for paragraphs. By using those tags properly, you can give them margins so that it flows naturally like reading a book. By using paragraphs and heading tags, you can do away with break tags.Note: Tested only in Firfox.

Link to comment
Share on other sites

It doesn't have room for the content because the use of margins.Here's what you do:1. Back up your work and put it in a safe place so that way if you don't like I provide, you can revert back to it.2. Add the following in bold:
<body onload="MM_preloadImages('images/home2.gif','images/history2.gif','images/squad2.gif','images/fixtures2.gif','images/news2.gif','images/extras2.gif','images/contact2.gif','images/league2.gif')">[b]<div id="container">  [/b]<div id ="header">

	  <p>Season Finished.</p>	</td>  </tr></table></div>[b]</div>[/b]</body>

Now completely replace your styles within the ns.css file with this:

#header {	margin:10px 0;	width: 800px;}#navigation	{float: left;font-family:Arial; font-size:10px; color:#FF0000;width:150px;padding-right: 20px;}#content	{ padding-left: 50px; width: 600px}body	{font-family:Arial, Verdana; font-size:12px; color:#000000; margin: 0 auto; text-align: center;}a	{ text-decoration:none; color:#FF0000}a:hover	{color:#FF0000; text-decoration:underline}#container {width: 800px; margin: 0 auto; text-align: left;}

Adjust to suit.I basically set the page to be centered so that you can do away with some of the margins. Adjusted the width of the content and gave the nav some right padding so the content does not butt up against the nav.You should use proper semantics when coding. Where you have 'Latest News' you used a <span> tag and no heading tag. Where you content is you should have used <p> tags which is for paragraphs. By using those tags properly, you can give them margins so that it flows naturally like reading a book. By using paragraphs and heading tags, you can do away with break tags.Note: Tested only in Firfox.

I done your changes, and it looks perfect in Firefox, but doesn't work in IE.. in IE content is somehow below navigation. Any ideas?Any websites I done prior to this were done using FrontPage or Dreamweaver, now I am trying to use mainly coding using Dreamweaver, but for the likes of the text I edited that using Dreamweaver, and that probably explains all the span tags... I will have a look at that.Thanks for your help so far mate
Link to comment
Share on other sites

Did you validate your site? It has a lot of errors that needs to be fixed: Validation ResultsJust take the first error and fix it and then work your way down. Validate often because sometimes if you fix one error, it fixes others.I did notice you have two DocTypes, two <head> tags, two <body> tags and so on. Begin to understand the codes you are using or else you will end up a mess. Stay clear from using WYSIWYG editor's design view because it will probably give you inproper coding and an a inaccurate view of the pages.

Link to comment
Share on other sites

I've got the errors down to a mininum, only 6, and I don't think any are concerned with the layout.Heres what I have so far after deleting all tables:http://www.newsantosfc.co.uk/v2/test1.phpThe content div is still below navigation in IE, but not in Firefox... I changed the css slightly and used margin-left for the content again as that seemed to be the only way of lining them up.CSS:

#navigation {float: left;font-family:Arial; font-size:10px; color:#FF0000;width:150px;padding-right: 20px;}#content {width: 600px; margin-left:200px; background-image:url(back.gif); background-repeat:no-repeat}
How can I have them aligned beside each other in IE? This is doing my head in.
Link to comment
Share on other sites

Nearly got the design complete.. I just have 1 more problem..http://www.newsantosfc.co.uk/v2/test1.phpOn IE7 its perfect.. everything is fine.On Firefox however, the navigation div runs into the footer div and I can't get the footer div to be aligned directly underneath the content div with a space between them. Oh, and the 1px dashed border is supposed to be red, but is black in HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>New Santos test</title><link href="ns.css" rel="stylesheet" type="text/css" /><script type="text/javascript"><!--function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body onload="MM_preloadImages('images/home2.gif','images/history2.gif','images/squad2.gif','images/fixtures2.gif','images/news2.gif','images/extras2.gif','images/contact2.gif','images/league2.gif')"><div id="container"><div id ="header"><img src="header.jpg"  alt="header image" /><a href="index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home2.gif',1)"><br /><img src="images/home1.gif" name="Home" width="100" height="43" border="0" id="Home" /></a><a href="news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news2.gif',1)"><img src="images/news1.gif" name="News" width="100" height="43" border="0" id="News" /></a><a href="history.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('History','','images/history2.gif',1)"><img src="images/history1.gif" name="History" width="100" height="43" border="0" id="History" /></a><a href="squad.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Squad','','images/squad2.gif',1)"><img src="images/squad1.gif" name="Squad" width="100" height="43" border="0" id="Squad" /></a><a href="fixtures.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fixtures','','images/fixtures2.gif',1)"><img src="images/fixtures1.gif" name="Fixtures" width="100" height="43" border="0" id="Fixtures" /></a><a href="league.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('League','','images/league2.gif',1)"><img src="images/league1.gif" name="League" width="100" height="43" border="0" id="League" /></a><a href="extras.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Extras','','images/extras2.gif',1)"><img src="images/extras1.gif" name="Extras" width="100" height="43" border="0" id="Extras" /></a><a href="contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact2.gif',1)"><img src="images/contact1.gif" name="Contact" width="100" height="43" border="0" id="Contact" /></a><a name="top"></a> </div><br /><div id="navigation">  <p>League Table</p><?php include ('tables.php'); ?><p>Podium4Sport<br />  <a href="http://www.podium4sport.com" target="_blank"> <img src="p4s.gif" alt="Podium 4 Sport.com" border="0" /></a></p><p>New Santos on Bebo <br /> <a href="http://newsantos.bebo.com" target="_blank"><img src="bebo.jpg" alt="New Santos on Bebo" border="0" /></a></p></div><div id="content"><p class="h1">    Welcome to the website of New Santos F.C.<br />  </p><p  style="font-weight:bold; color:#FF0000;">Latest News </p><img src="bebo.jpg" alt="bebo" width="134" height="150" align="right" />  <p style="font-style:italic;font-size:11px;">20/6/2008</p>  The Website is redesigned and updated  <p style="font-style:italic; font-size:11px;">15/4/2008</p><p>The clubs' end of season awards were handed out last night in The Eg bar. The winners of the awards are:<br />  Simon Magee - Top Goalscorer<br />  Martin Cunningham - Clubman of the Year<br />  Martin Magee - Managers Player of the Year<br />  David Dougan - Player of the Year<br />  David Dougan - Young Player of the Year<br />  <br />  <a href="news.php">> Visit the News Page for more news.</a>  </p><br /><div id="lastmatch" style="width:50%;"><img src="lastmatch.gif" alt="Last Match" /><p style="font-style:italic">19/Apr/2008, League Match 20, Boucher</p><p>New Santos 1 - 0 Ardoyne WMC III</p></div></div><br /></div><br /><div id="footer"><p>© Copyright 2008-09 New Santos F.C.</p><p>Hosted by: <a href="http://www.Podium4Sport.com" class="white" >Podium4Sport</a>    |    <a href="#top" class="white">Go to Top of Page    |    </a>Design by: <a href="mailto:dougielfc@hotmail.com">David Dougan </a><br /><br /><a href="http://jigsaw.w3.org/css-validator/">        <img style="border:0;width:88px;height:31px"            src="http://jigsaw.w3.org/css-validator/images/vcss"            alt="Valid CSS!"/>    </a></p></div></div></body></html>

CSS:

@charset "utf-8";/* CSS Document */#header { width: 800px;}#navigation {float: left;font-family:Arial; font-size:10px; color:#FF0000;width:150px;padding-right: 20px; padding-bottom:20px; margin-bottom:20px;}#content {width: 600px; margin-left:200px;background-image:url(back.gif); background-repeat:no-repeat}body {font-family:Arial, Verdana; font-size:12px; color:#000000; margin: 0 auto; text-align: center; background-image:url(bg.png)}a { text-decoration:none; color:#FF0000}a:hover {color:#FF0000; text-decoration:underline}h1 {color:#FF0000; font-size:12px;}h2 {font-style:italic; font-size:12px;}p {margin-bottom:1px; padding-bottom:1px;} p.h1 {font-size:12px; color:#FFFFFF; font-weight:bold}#footer {font-size:11px;background-image:url(footer.gif); height:115px; width:800px; color:#FFFFFF; text-align:center; background-repeat:no-repeat; padding-top:5px}a.white {color:#FFFFFF}#container {width: 800px; margin: 0 auto; text-align: left; background-color:#FFFFFF; border:#FF0000; border:1px; border-style:dotted}
Has anyone any clue as to how to fix this? This has been my first time trying to code a site :)
Link to comment
Share on other sites

Add another division right at the bottom of (but inside) the #container division and give it a style of clear:both;Then, remove the <br /> between the container and footer and give the footer the property margin:0px auto;

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...