468,545 Members | 1,853 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,545 developers. It's quick & easy.

place navigation correctly

18
I have a strict doc type: However, I am still unsure about css. Problems I have now are to do with floating both navigation lists. I have used tables and divs, as layouts are just too difficult for me to take on right now, but maybe this is causing problems.

The left navigation does not sit right ie flush to the left of the page. The top navigation does not float to the right flush either. I hesitantly post this question as a previous post seemed to have caused a long thread of disputes.

Here is the HTML
[html] <td valign="top" rowspan="2" width="117">
<div id="navigation">
<ol>
<li><a href="mosaic.htm">mosaic workshop</a></li>
<li><a href="screen.htm">screen printing</a></li>
<li><a href="craft.htm">creative crafts</a></li>
<li><a href="web.htm">web design</a></li>
<li><a href="gallery.htm">gallery</a></li>
<li><a href="events.htm">events</a></li></ol></div>
<div id="leftcontent">&nbsp;<img src="images/pheonix.jpg"
alt="image of artists work - pheonix" width="110" height="145"
align="center">
</td>
</html>
[/html]
and the css
Expand|Select|Wrap|Line Numbers
  1. #table             {align: left;
  2.                     width: 750px;
  3.                     height: 700px;
  4.                     margin: 0 auto;}
  5.  
  6. #navigation        { padding: 0;
  7.                      margin: 1px;
  8.                      text-align: left;
  9.                      width: 180px;
  10.                      height: 160px;
  11.                      color: #6600CC;
  12.                      }
  13.  
  14. #navigation li     { margin-bottom: 3px; }
  15.  
  16. #navigation a      { background: #fff;
  17.                      display: block;
  18.                      color: #6600CC;
  19.                      padding: 3px;
  20.                      margin: 1px; }                       
  21.  
  22. #navigation a:hover { background: #e60073;
  23.                       text-decoration: none; }
  24.  
  25. #leftcontent        {align: left;
  26.                      float: left; }
  27.  
  28. #topnavigation    ( text-align: right;
  29.                     color: #6600CC;
  30.                     padding: 3px;
  31.                     width: 300px;
  32.                     height: 30px;
  33.                     text-decoration: none;
  34.                     margin: 0px;
  35.                     background: #fff; }
  36.  
  37. #topnavigation li  { display: inline; }
  38.  
  39. #topnavigation a   { background: #fff;
  40.                      color: #6600CC;
  41.                      padding: 3px;
  42.  
  43.                      text-align: right;
  44.                      text-decoration: none; }
  45.  
Attached Images
File Type: jpg screendump.jpg (26.4 KB, 143 views)
Dec 26 '07 #1
1 1279
Death Slaught
1,137 1GB
Please be a little more specific about what it's doing wrong. Also, is the picture what it currently looks like, or what you want it to look like?

Sorry about the other thread that was sort of my fault. That doesn't usually happen, and odds are it won't happen again.....disputes like that are some what rare.

Thanks, Death
Dec 28 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Andrew Donaldson | last post: by
reply views Thread by Veli-Pekka Tštilš | last post: by
5 posts views Thread by Prakash | last post: by
1 post views Thread by Jon Smith via DotNetMonster.com | last post: by
3 posts views Thread by Jon | last post: by
reply views Thread by snappingturtle | last post: by
reply views Thread by NPC403 | last post: by
1 post views Thread by UniDue | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.