SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top and left nav

    Following on from this thread http://www.sitepoint.com/forums/showthread.php?t=164493 I'm encountering a similar problem with a new site I'm working on. Basically the layout is top nav and left nav but I want my content to extend to 100%.

    The top nav is again an unordered list, if I use display inline the top links wrap when I minimise the window, I want them to remain in place. To achieve this the only method I can find is to float them and use display block. This is ok up to a point as when I resize the window again the whole div jumps down to below the left nav. Here's the offending css and html

    Code:
    #wrapper {
     width: 100%;
    }
    #left {
     float: left;
     width: 116px;
    }
    #left ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border-right: 1px solid #2D5BB1;
    }
    #left li {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border-bottom: 1px solid #2D5BB1;
    }
    #right {
     margin-left: 130px;
    }
    #topmenu ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
    }
    #topmenu li {
     margin: 0;
     padding: 0;
     list-style-type: none;
     display: inline;
    }
    .spacer {
     clear: both;
    }
    Code:
     
    <body>
    <div id="wrapper">
    <div id="left">
     <img src="pics/image1.gif" width="116" height="95" alt="" /><br />
     <h2 class="menuhead"><span></span>Menu</h2>
     <ul>
      <li><a href="/curriculum/">Curriculum</a></li>
      <li><a href="/starting/">Starting at Ballykeigle</a></li>
      <li><a href="/timetable/">Timetable</a></li>
      <li><a href="/childprotection-policy/">Child Protection Policy</a></li>
      <li><a href="/admissions-policy/">Admissions Policy</a></li>
      <li><a href="/uniform/">Uniform</a></li>
     </ul>
    </div>
    <div id="right">
     <div id="topmenu">
     <ul>
      <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
     </ul>
     </div>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
    </div>
    </div>
    <div class="spacer">&nbsp;</div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Lancs, England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do,

    If you read what is written at

    http://www.w3.org/TR/REC-CSS2/text.h...ite-space-prop

    about white-space then you can apply this to your list style to prevent it from wrapping.

    Note that this only applies to elements with display: block; . So your list style should look like:

    }
    #topmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    white-space: nowrap;
    }

    Hope this helps =)

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Makes sense but I tried and it didn't help

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This is probably going to make things a bit too complicated but you could get around it by floating the right content first so that it won't drop below the left.

    Something like this:
    Code:
    <!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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #wrapper {
     width: 100%;
    }
    #left {
     float: left;
     width: 116px;
    margin-left:-130px;
    margin-right:-3px; 
    display:inline;
    position:relative;
    }
    #left ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border-right: 1px solid #2D5BB1;
    }
    #left li {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border-bottom: 1px solid #2D5BB1;
    }
    #right {
    margin-left: 130px;
    height:1%;
    position:relative;
    }
    #rightinner {float:right;width:99%}
    #topmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    white-space: nowrap;
    }
    #topmenu li {
     margin: 0;
     padding: 0;
     list-style-type: none;
     display: inline;
    }
    .spacer {
     clear: both;
    }
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <div id="right"> 
    	<div id="rightinner"> 
    	  <div id="topmenu"> 
    		<ul>
    		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
    		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
    		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
    		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
    		</ul>
    	  </div>
    	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
    		Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
    		et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a 
    		dolor vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies 
    		id, porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. 
    		Duis cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit 
    		vel, pellentesque id, auctor at, massa. Donec in est sed sem adipiscing 
    		tempus. Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque 
    		odio velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
    	</div>
    	<div id="left"> <img src="/pics/image1.gif" width="116" height="95" alt="" /><br />
    	  <h2 class="menuhead"><span></span>Menu</h2>
    	  <ul>
    		<li><a href="/curriculum/">Curriculum</a></li>
    		<li><a href="/starting/">Starting at Ballykeigle</a></li>
    		<li><a href="/timetable/">Timetable</a></li>
    		<li><a href="/childprotection-policy/">Child Protection Policy</a></li>
    		<li><a href="/admissions-policy/">Admissions Policy</a></li>
    		<li><a href="/uniform/">Uniform</a></li>
    	  </ul>
    	</div>
      </div>
    </div>
    <div class="spacer">&nbsp;</div>
    </body>
    </html>
    Paul

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, do you reckon that's the only solution? It's too much of a compromise I think. Maybe I should just revert to dreaded tables, I'm beginning to think maybe they're not so bad after all!!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Thanks Paul, do you reckon that's the only solution? It's too much of a compromise I think.
    Well there are probably other ways around it. Do you need the left column floated? The easiest solution is to place the left column absolutely and then you don't get a floatdrop on the right content.

    This only presents a problem if you want a full width footer but if you don't need that then its an easy solution.

    Another way would be to place the top menu absolutely and fix it in place. Then you could just use a margin-top on your content to clear it.

    Another way is to float your right content (first in the html) but that means you would need to give it a width.

    The problem is that you want a fluid layout but you don't want a fluid layout lol. You want to fix the menu in place but you want the rest of the page to be fluid.

    I don't see tables as an easier solution because they have their own problems and are just as hard (for me) to implement.

    Do you have the page online (is it the same one as the other thread)? If I could see what your whole page looks like I could make a better suggestion

    Paul

  7. #7
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul the page isn't online but I've just uploaded the work in progress to here

    http://www.acquiweb.com/clients/ballykeigle/index.asp

    For accessibility reasons I want the main menu to appear before the content which is why left should appear before right. You are right, I do want a fixed width so far as the menu is concerned but ideally I want the content below that to be fluid!

    Bearing in mind that this site is for my daughter's school (a freebie!) it's important that the layout is as rigid as possible. I don't see them having the latest version of Moz or IE.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi Daz,

    Well the simplest solution is just to absolutely place the top nav as follows.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Ballykeigle Primary School</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style>
    /* Type CSS rules here and they will be applied
    to pages from 'editcss'
    immediately as long as you keep this window open. */
    /**** LINK-tag style sheet screen.css ****/
    body {
     margin: 0px;
     padding: 0px;
     background-color: #ffffff;
     font-family: verdana, arial, sans-serif;
     font-size: 82%;
     color: #000000;
    }
    p, li, td, address {
     font-family: verdana, arial, sans-serif;
     font-size: 1.0em;
     font-style: normal;
     color: #000000;
    }
    #wrapper {
     width: 100%;
    }
    #left {
     float: left;
     width: 116px;
    }
    .menuhead, .menuhead span {
     width : 116px; 
     height : 24px;
     background-image : url(../pics/menu.gif);
     background-repeat : no-repeat;
    }
    .menuhead span { margin-bottom: -24px; }
    /* This code needs to appear only once in a style-sheet */
    h2 span 
    {
     display : block;
     position : relative;
     z-index : 1;
    }
    #left h2 {
     margin: 0;
     padding: 0;
     color: #ffffff;
     font-size: 1.0em;
    }
    #left ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border-right: 1px solid #2D5BB1;
    }
    #left li {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border-bottom: 1px solid #2D5BB1;
    }
    #left li a {
     padding: 0.3em;
     display: block;
     font-size: 0.8em;
    }
    #left li a:link {
     color: #2D5BB1;
     text-decoration: none;
    }
    #left li a:visited {
     color: #000;
     text-decoration: none;
    }
    #left li a:hover {
     background-color: #eee;
     color: #000;
     text-decoration: underline;
    }
    #right {
     margin-left: 130px;
     margin-top:40px;
    }
    #topmenu {
     position:absolute;
     left:150px;
     top:0;
     width: 630px;
     
    }
    #topmenu ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
    }
    #topmenu li {
     margin: 0;
     padding: 0;
     list-style-type: none;
     display: inline;
    }
    .spacer {
     clear: both;
    }
     
    
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <div id="left"> <img src="pics/image1.gif" width="116" height="95" alt="" /><br />
    	<h2 class="menuhead"><span></span>Menu</h2>
    	<ul>
    	  <li><a href="/curriculum/">Curriculum</a></li>
    	  <li><a href="/starting/">Starting at Ballykeigle</a></li>
    	  <li><a href="/timetable/">Timetable</a></li>
    	  <li><a href="/childprotection-policy/">Child Protection Policy</a></li>
    	  <li><a href="/admissions-policy/">Admissions Policy</a></li>
    	  <li><a href="/uniform/">Uniform</a></li>
    	</ul>
      </div>
      <div id="right"> 
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
    	  Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
    	  et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor 
    	  vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, 
    	  porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis 
    	  cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, 
    	  pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. 
    	  Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio 
    	  velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
    	  Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
    	  et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor 
    	  vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, 
    	  porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis 
    	  cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, 
    	  pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. 
    	  Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio 
    	  velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
    	  Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
    	  et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor 
    	  vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, 
    	  porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis 
    	  cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, 
    	  pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. 
    	  Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio 
    	  velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
      </div>
    </div>
    <div class="spacer">&nbsp;</div>
    <div id="footer"></div>
     <div id="topmenu">
     <ul>
      <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
     </ul>
     </div>
    </body>
    </html>
    Hardly any changes necessary with this method (changes are marked in bold and you can adjust the positions to fit).

    Paul

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,864
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by daz
    For accessibility reasons I want the main menu to appear before the content which is why left should appear before right
    General opinion is that content should come first for better accessibility as the screen reader will have to read the nav on every page it visits.

    However the problem can be easily solved by adding skip nav and skip to content links etc and then it doesn't really matter. (Apart from the fact that search engines like content first but thats a different issue )

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •