SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    flyout text spacing and horizontal nav bar questions

    Hi all,

    I've got one of these problems on a couple sites but it's easiest to see it here:

    http://mwebm.net/eco-final/contact/contactus.htm
    http://mwebm.net/eco-final/text-1.css

    When you go to "Head Start" there's a flyout. Then, go to "Programs & Services" where there's another flyout. The line length is too big for that box, which is ok, ( I don't mind that it wraps) but when the text flows onto the other line the space between the two lines is too great. I've tried a few things but no luck. (some of the code is probably/certainly messed up because of it. So please bear with me and let me know.) Is there a way to fix this?

    Second Question:
    the horizontal nav bar across the top,
    when you resize the window it flows in to the left and causes a break in the graphic. Is there a way to not have it cause that break and to stay on the top of the page?

    thanks very much in advance
    Marie

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

    The line is too high because you have used line-height to make the space and align the text. This is fine until the line wraps and then you get double the line-height.

    If you want to cater for both cases then it might be beter to use top and bottom padding instead of line-height. Or apply a class to the items that wrap and raget them specifically.

    I would just use some padding etc.
    Code:
    #left-nav li {
     position : relative;
     float : left;
     /*line-height : 1.25em;*/
     padding:1px 0;
     width: 160px;
     border-bottom: 3px solid #315788;
    } 
    #left-nav li ul {
     position : absolute;
     left: -999em;
     margin-left : 155px;
     margin-top : -1.23em;
     padding-left: 8px;
     background-color:#E4EEE4;
     width: 160px;
    }
    #left-nav li ul li{padding:2px 0}
    Something like that should be close

    For the second problem why don't you simply put that curved image in the background of the body and it won't move at all

  3. #3
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi
    re problem 2, I did put that into the background where it works really well and the download time didn't increase which is what I had been trying to avoid by using two images. I'd still like that navigation bar to stay along the top rather than drop down as the page resizes. It maked the left-nav jump down and looks bad, besides, I think.
    Arghh and I just looked at it fully expanded and the whole thing has completely moved over to the right in FF.

    about problem 1
    I have added the padding but there is a gap between the list items and so it doesn't work in IE. On both the underlying text shows through in the gap. Please see the page.

    and now another thing in IE:
    the center stuff jumps down upon resizing.

    http://mwebm.net/eco-final/contact/contactus.htm
    http://mwebm.net/eco-final/text-1.css

    ahhh...help
    thank you


    Marie

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    about problem 1
    I have added the padding but there is a gap between the list items and so it doesn't work in IE. On both the underlying text shows through in the gap. Please see the page
    You missed out the background colour behing the nested ul that i inserted to cover the background and keep ie in focus

    Code:
    #left-nav li ul {
     position : absolute;
     left: -999em;
     margin-left : 155px;
     margin-top : -1.23em;
     padding-left: 8px;
     background-color:#E4EEE4;
     width: 160px;
    }
    I'd still like that navigation bar to stay along the top rather than drop down as the page resizes. It maked the left-nav jump down and looks bad, besides, I think.
    Why don't you place it absolutely at the top then Something like this:

    Code:
    div#logonav
    {
     position:absolute;
     right:0;
     top:0;
     font-size: .75em;
     font-weight: bold;
     width:100%;
    }
    #logonav, #logonav ul { /* all lists */
     padding: 0;
     margin: 0;
     list-style: none;
     line-height: 1.25;
     }
    #logonav a {
     display: block;
     width: 10em;
     color: #036;
     text-decoration:none;
     padding-left: .5em;
    } 
    #logonav a:hover {
     color: #a01871;
    }
    #logonav li { /* all list items */
     float: right;
     width: 10em; /* width needed or else Opera goes nuts */
     color: #036;
     background-color: #ddd;
     border: 1px solid #036;
     text-align:center
    }
    And then move it to the top of the html:
    Code:
    <body>
    <div id="logonav"> 
      <ul>
    	<li><a href="contactus.htm">Contact Us</a></li>
      <!--  <li><a href="../information/info.htm">Information</a> 
    	  <ul>
    		<li><a href="../information/profdev.htm">Professional Development</a></li>
    		<li><a href="../information/scca.htm">Summit County Childcare</a></li>
    		<li><a href="../information/tutasst.htm">Tuition Assistance</a></li>
    		<li><a href="../information/ece.htm">ECE guide</a></li>
    		<li><a href="../information/menthealth.htm">Mental Health</a></li>
    	  </ul>
    	</li>-->
    	<li><a href="../calendar/calendar.htm">Calendar</a></li>
    	<li><a href="../index.htm">Home</a></li>
      </ul>
    </div>
    <div id="logoheader"> 
      <div id="logo"></div>
      <div class="clear-both"></div>
    </div>
    and now another thing in IE:
    the center stuff jumps down upon resizing.
    You didn't seem to have any centre content in the page at the moment. However if the page small enough then the contact information will drop below the floated left nav as it should do to find room.

    If you don't want this to happen then you may want to set a min-width expression for ie to hold the page open.

    Code:
    body {width:expression( documentElement.clientWidth < 700 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 700 ? "700" : "auto") : "700px") : "auto" );}
    That will hold the page open to 700px but is proprietary ie css although it will do no harm. You can of course shield it from the validator and other browers using conditional comments.


    Here's all the code so far (but be aware that the message board has been corrupting any anchors in the code so you may need to edit it.)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Early Childhood Options</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="keywords" content="Early childhood options, Summit County Colorado, learning, child-care, resources information, quality, preschool, infants, toddlers, birth, real project, head start, reading, always learning, tuition assistance, literacy">
    <meta name="description" content="Early Childhood Options in Summit County, Colorado works with parents, early childhood teachers and community to ensure equal access to early care and education choices.">
    <style ttpe="text/css">
    body {
     margin: 0;
     padding: 0;
     font-size: 90%;
     font-family: arial, helvetica, sans-serif;
     background-color: #E4ece3;
     color: #333;
     background-image: url(http://mwebm.net/eco-final/images/fulllogo.jpg);
     background-repeat: no-repeat;
    }
    body {width:expression( documentElement.clientWidth < 700 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 700 ? "700" : "auto") : "700px") : "auto" );}
    /*-----------------logo section----------*/
    div#logoheader
    {
     margin:0px;
     border-right: 1px solid #E4EEE4;
    }
    div#logo
    {
     float:left;
     margin: 0px;
     width: 460px;
     height: 130px;
    }
    div#logonav
    {
     position:absolute;
     right:0;
     top:0;
     font-size: .75em;
     font-weight: bold;
     width:100%;
    }
    #logonav, #logonav ul { /* all lists */
     padding: 0;
     margin: 0;
     list-style: none;
     line-height: 1.25;
     }
    #logonav a {
     display: block;
     width: 10em;
     color: #036;
     text-decoration:none;
     padding-left: .5em;
    } 
    #logonav a:hover {
     color: #a01871;
    }
    #logonav li { /* all list items */
     float: right;
     width: 10em; /* width needed or else Opera goes nuts */
     color: #036;
     background-color: #ddd;
     border: 1px solid #036;
     text-align:center
    }
    #logonav li ul { /* second-level lists */
     position: absolute;
     background-color: #ddd;
     width: 10em;
     left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    #logonav li:hover ul, #logonav li.sfhover ul { /* lists nested under hovered list items */
     left: auto;
    }
    /*------------content section-----------------*/
    div#content{
     padding: 0px;
     margin: 0px;
     /*background-image: url(http://mwebm.net/eco-final/images/navbar.jpg);
     background-repeat: no-repeat;*/
    }
    div#left-nav {
     float: left;
     width: 185px;
     height: 400;
     font-size: 1.0em;
     font-weight: bold;
    }
    div#photo {
     float: right;
     width: 300px;
     margin: 0;
     padding: 2.5em 30px 0 0;
     color: #000;
     border: 2px solid #000000;
    }
    div#center {
     margin-left: 180px;
     margin-right: 10px;
     padding: 0.05em 5px 15px 0;
    }
    /* -----------------formatting info ------------*/
    p {
     font-family: Arial, Helvetica, sans-serif;
     font-size: .9em;
     margin: 0px;
     line-height: 1.3em;
    }
    h1{
     font-size: 2.0em;
     color: #02516C;
    }
    h2 {
     font-size: 1.25em;
     color:#a01871;
     padding-top: 20px;
     margin-bottom: 0px;
    }
    h3 {
     font-size: 1.0em;
     font-weight: bold;
     color:#396451;
     padding-top: 20px;
     padding-bottom: 0px;
    }
    /*-----------------calendar navigation --------*/
    div#calendar {
     clear: both;
     font-size: 1em;
    }
    div#cal-nav {
     padding: 3px 0;
     clear: both;
     font-size: .9em;
     line-height: 20px;
     }
    div#cal-nav ul {
     list-style: none;
     margin: 20px;
     padding: 0;
     text-align:center;
    }
    div#cal-nav ul li {
     display:inline;
     border-right: solid 1px #000;
     border-left: solid 1px #000;
     
     }
    div#cal-nav li a {
     text-decoration:none;
     padding: .15em 1em;
     color:#036;
    }
    div#cal-nav li a:hover {
     color: #FFFFFF;
     background: #a01871;
    }
    div#monthhighlight {
     font-weight: bold;
    }
    /*------------------footer-------------------*/
    div#footer
    {
     font-size: 1.25em;
     color: #a01871;
     padding: 0px 0px 0px 22px;
    }
    div#footertext
    {
     border-top: 5px solid #a01871;
     font-size: .65em;
     color: #a01871;
    }
    /*------------left hand navigation-------------*/
    #home {
     padding: 0 0 0 2px;
     margin: 0 0 0 2px;
    }
    #left-nav ul {
     padding-left: 10px;
     margin: 0;
     list-style: none;
     float : left;
     width : 140px;
     font-size: 1.2em;
     }
    /* .........	 */
    #left-nav li {
     position : relative;
     float : left;
     /*line-height : 1.25em;*/
     padding:1px 0;
     width: 160px;
     border-bottom: 3px solid #315788;
    } 
    #left-nav li ul {
     position : absolute;
     left: -999em;
     margin-left : 155px;
     margin-top : -1.23em;
     padding-left: 8px;
     background-color:#E4EEE4;
     width: 160px;
    }
    #left-nav li ul li{padding:2px 0}
    /* .........  */
    #left-nav li ul li {
     padding: 2px 0;
    }
    #left-nav ul li ul li {
     font-size: .9em;
    }
    #left-nav li a {
      background-image:url(http://mwebm.net/eco-final/images/blankdot.gif);
      background-repeat: no-repeat;
      background-position: 0 .4em;
      padding-left: 10px;
      width: 160px;
      w\idth : 154px;
      display : block;
      color : #a01871;
      font-weight : bold;
      text-decoration : none;
     }
    #left-nav li a:hover {
      color: #036;
      background-image: url(http://mwebm.net/eco-final/images/purpledot.gif);
      background-repeat: no-repeat;
      background-position: 0 .4em;
      background-color: #E4EEE4;
     }
    #left-nav li ul li a {
      background-image:url(http://mwebm.net/eco-final/images/blankdot.gif);
      background-repeat: no-repeat;
      background-position: 0 .4em;
      background-color:#E4EEE4;
      width: 170px;
      w\idth : 154px;
      display : block;
      color : #a01871;
      font-weight : bold;
      text-decoration : none;
      font-size: .7em;
    } 
    #left-nav li ul li a:hover {
      color: #036;
      background-image: url(http://mwebm.net/eco-final/images/purpledot.gif);
      background-repeat: no-repeat;
      background-position: 0 .4em;
      display:block;
     }
    #left-nav li:hover ul ul, #left-nav li:hover ul ul ul, #left-nav li.sfhover ul ul, #left-nav li.sfhover ul ul ul {
      left: -999em;
     } 
    #left-nav li:hover ul, #left-nav li li:hover ul, #left-nav li li li:hover ul, #left-nav li.sfhover ul, #left-nav li li.sfhover ul, #left-nav li li li.sfhover ul { /* lists nested under hovered list items */
      left: auto;
     } 
     
     
    .clear-both {
     clear: both;
     height:1px;
     overflow:hidden;
     margin-top:-1px;
    }
    .real-img-right {
     float: right;
     width: 75px;
    }
    div#container-all {
     width: 90%;
     margin-right: auto;
     margin-left: auto;
    }
    </style>
    <!-- Javascript for the dropdown menus, from Suckerfish/HTMLL Dog -->
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("logonav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    <!-- This Javascript is for the flyout menu on the left-nav, also from Suckerfish/HTML Dog -->
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
     var sfEls = document.getElementById("left-nav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
       this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
     }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    </head>
    <body>
    <div id="logonav"> 
      <ul>
    	<li><a href="contactus.htm">Contact Us</a></li>
      <!--  <li><a href="../information/info.htm">Information</a> 
    	  <ul>
    		<li><a href="../information/profdev.htm">Professional Development</a></li>
    		<li><a href="../information/scca.htm">Summit County Childcare</a></li>
    		<li><a href="../information/tutasst.htm">Tuition Assistance</a></li>
    		<li><a href="../information/ece.htm">ECE guide</a></li>
    		<li><a href="../information/menthealth.htm">Mental Health</a></li>
    	  </ul>
    	</li>-->
    	<li><a href="../calendar/calendar.htm">Calendar</a></li>
    	<li><a href="../index.htm">Home</a></li>
      </ul>
    </div>
    <div id="logoheader"> 
      <div id="logo"></div>
      <div class="clear-both"></div>
    </div>
    <div id="content"> 
      <div id="left-nav"> 
    	<ul>
    	  <li><a href="../index.htm">Home</a></li>
    	  <li><a href="../qualitycc/qualitycc.htm">Quality Childcare</a> 
    		<!--<ul>
       <li><a href="#">item 1</a></li>
       <li><a href="#">item 2 </a></li>
       <li><a href="#">item 3</a></li>
       <li><a href="#">item 4</a></li>
      </ul>-->
    	  </li>
    	  <li><a href="../headstart/headstart.htm">Head Start</a> 
    		<ul>
    		  <li><a href="../headstart/hsinfo.htm">About Us</a></li>
    		  <li><a href="../headstart/hsapp.htm">Program & Services</a> 
    			<ul>
    			  <li><a href="../headstart/childdev.htm">Child Development - Health 
    				Services</a></li>
    			  <li><a href="../headstart/familycomm.htm">Family & Community Partnerships</a></li>
    			  <li><a href="../headstart/programdesign.htm">Program Design & Management</a></li>
    			</ul>
    		  </li>
    		  <li><a href="../headstart/hswhatsnew.htm">What's New</a></li>
    		  <li><a href="../headstart/hslinks.htm">Related Links</a></li>
    		</ul>
    	  </li>
    	  <li><a href="../real/real.htm">R.E.A.L.</a></li>
    	  <li><a href="../literacy/literacy.htm">Literacy</a></li>
    	  <li><a href="../information/profdev.htm">Prof. Development</a></li>
    	  <li><a href="../information/tutasst.htm">Tuition Assistance</a></li>
    	  <li><a href="../information/resources.htm">Resources</a> 
    		<ul>
    		  <li><a href="../information/directory.htm">Directory</a></li>
    		  <li><a href="../information/homevisitation.htm">Home Visitation</a></li>
    		  <li><a href="../information/eccouncil.htm">EC Council</a></li>
    		  <li><a href="../information/mentalhealth.htm">Mental Health</a></li>
    		  <li><a href="../information/scca.htm">SCCA</a></li>
    		</ul>
    	  </li>
    	  <li><a href="../calendar/calendar.htm">Calendar</a></li>
    	  <li><a href="../links/links.htm">Links</a></li>
    	  <li><a href="../about/aboutus.htm">About Us</a></li>
    	  <li><a href="../contact/contactus.htm">Contact Us</a></li>
    	</ul>
      </div>
      <div id="photo"> </div>
      <div id="center"> 
    	<h1>Contact Us </h1>
    	<p>Lucinda Burns, Executive Director <br>
    	  970-513-1170, extension 307<br>
    	  <a href="<A href="mailto:Lucinda@earlychildhoodoptions.org">Lucinda@earlychildhoodoptions.org</a></p">mailto:Lucinda@earlychildhoodoptions.org">Lucinda@earlychildhoodoptions.org</a></p>
    	<p>&nbsp; </p>
    	<p>Elizabeth Lowe, Outreach Specialist, <br>
    	  970-513-1170, extension 305 <br>
    	  <a href="<A href="mailto:elowe@earlychildhoodoptions.org">elowe@earlychildhoodoptions.org</a></p">mailto:elowe@earlychildhoodoptions.org">elowe@earlychildhoodoptions.org</a></p>
    	<p>&nbsp;</p>
    	<p>Sheila Groneman, Head Start</p>
    	<p>970-513-1170, extension </p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
      </div>
      <div id="footer"> Early Childhood Options 
    	<div id="footertext"> 
    	  <p>Box 3355, Dillon CO<br>
    		970-513-1170 x 305<br>
    		fax: 970-513-1167 </p>
    	</div>
      </div>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    wow, thanks for all the work; it looks great!
    most all of it made sense, but this puzzled me:

    body {width:expression( documentElement.clientWidth < 700 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 700 ? "700" : "auto") : "700px") : "auto" );}


    you're right, a couple of the anchors did get messed up. thanks for the heads up.

    I so appreciate your help!
    thanks
    Marie

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

    Sorry for the late reply but I'm just back from holiday.

    most all of it made sense, but this puzzled me:

    body {width:expression( documentElement.clientWidth < 700 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 700 ? "700" : "auto") : "700px") : "auto" );}
    The above code uses expressions which are proprietary ie code (invalid css) that allows styles to interact with js and the property values can be based on the result of the script.

    All its doing is setting the width of the body to 700px if it is less than 700px thus implementing a min-width of 700px. If the width is greater than 700px then it becomes auto width and expands accordingly.

    It's just implementing what mozilla does automatically with min-width.


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
  •