SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop Menu Problems

    Hello everyone,

    I have a drop menu I created from the suckerfish model. It works great except for two parts. I can't seem to center the text vertically and I can't seem to keep the sub-links at the bottom of the main link (instead it covers half).

    You can see the page at:

    www.faceproject.org/new/resources

    Code:
    ul {
    	padding:0;
    	margin:0;
    	list-style:none;
    	text-align: center;
    	vertical-align: middle;
    	}
    	
    li {
    	float:left;
    	position:relative;
    	width:90px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #000000;
    	height: 30px;
    	border-left-width: 2px;
    	border-left-style: solid;
    	border-left-color: #FFFFFF;
    	}
    li a {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-decoration: none;
    	}
    	
    li ul li {
    	border-top-width: 4px;
    	border-top-style: solid;
    	border-top-color: #F2BF49;
    	text-align: center;
    	vertical-align: middle;
    	border-left-width: 0;
    	border-left-style: none;
    	border-left-color: #000000;
    	}
    
    li ul {
    	display:none;
    	position:absolute;
    	top:1em;
    	left:0;
    	}	
    <!-- Hack for cross browser support -->
    li > ul {  
    	top:auto;
    	left:auto;
    	}
    li:hover ul, li.over ul { display:block; 
    		clear:left;
    		}
    		
    #nav {
    	position:absolute;
    	top:100px;
    	left:0;
    	z-index:5;
    	}
    
    </style>
    
    <script language="JavaScript" type="text/JavaScript">
    <!-- JS for drop menu -->
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i < navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
      }
      }
     }
    }
    }
    window.onload=startList;
    </script>
    Any Ideas?

    Thanks,

    Matt

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

    If you set line-height to the same as the height then the text will automatically align vertically (as long as it doesn't wrap).

    Just move your sublist down a bit as its absolutely positioned anyway.
    Code:
    li {
     float:left;
     position:relative;
     width:90px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #FFFFFF;
     text-decoration: none;
     background-color: #000000;
     height: 30px;
     text-align: center;
     vertical-align: middle;
     border-left-width: 2px;
     border-left-style: solid;
     border-left-color: #FFFFFF;
     line-height:30px;
     }
    li ul {
     display:none;
     position:absolute;
     top:2.5em;
     left:0;
     }
    That should sort it out for you in IE

    You do have some big problems in firefox which you should look at. I didn't have tiime right now but if you can't fix them then post back and I'll take a look for you

    Paul

  3. #3
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks again for your help. I do have one link that is too long and wraps: "Board of Directors". I could change this to "Directors" and be happy but is there any other way?

    www.faceproject.org/new/resources

    I am having some thoughts considering the direction this website is going.

    1) It looks terrible on any display setting except the one I have on my computer. So what if the user has 800x600 selected?

    2) I have FireFox, Netscape 7.1, and IE 6 SP2. It looks fine on IE 6 and bad on FireFox and Netscape. My site shows that about 89% use IE and about 10% Netscape with no listing for FireFox at all.

    What is generally done to keep things looking right on most computers (90-95%). I'm sure there are ways to make it all work but I am at a lose on how exactly it should be done.

    Do I center the site (like Macromedias)?

    If this is too much to answer in a post, is there some good reading/examples out there you know of?

    Thanks,

    Matt

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

    You can increase the length of the list if you want
    Code:
    li ul li{width:120px}
    It looks terrible on any display setting except the one I have on my computer. So what if the user has 800x600 selected?
    Most people with fix width sites will design with 800x 600 in mind and then just let the site centre so that it moves for larger windows. If you have designed an odd sized fixed width then you will make it awkward for some viewers. What most people do is have one or two fixed areas or columns and have one element that is fluid that takes up space as the window is widened or made smaller etc.

    You could make your right area fluid and let it slide in and out but would of course have to be re-designed to allow for this. The image could slide under other content at small sizes and could just reveal a background colour at larger sizes ,

    The problems in firefox, with your menu is that you have wrongly structured the list. Sub lists should be structured like this.
    <ul>
    <li>
    <ul>
    <li></li>
    </ul>
    </li>
    </ul>
    Code:
    <ul id="nav">
    <li><a href="#">Who we are</a> 
    	 <ul>
    		<li><a href="#">Mission</a></li>
    		<li><a href="#">Staff</a></li>
    		<li><a href="#">Board of Directors</a></li>
    		<li><a href="#">Inspirations</a></li>
    	 </ul>
    </li>
    	<li><a href="#">Collaborations</a></li>
    	<li><a href="#">Who we serve</a></li>
    	<li><a href="#">What's new</a></li>
    	<li><a href="#">Kudos!</a></li>
    	<li><a href="#">Contact Us</a> 
    	 <ul>
    		<li><a href="#">Email</a></li>
    		<li><a href="#">Donations</a></li>
    	 </ul>
    </li>
    </ul>
    What is generally done to keep things looking right on most computers (90-95%). I'm sure there are ways to make it all work but I am at a lose on how exactly it should be done.
    The key thing here is testing You just have to test every step of the way in the browsers you want to support. (Using valid code helps though )

    Here's the whole code in case I changed something I've forgotton about.
    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>FACE&reg; Resources. Training. Action.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash mac hiding hack \*/ 
    html, body{
    height:100%;
    } 
    /* end hack */ 
    body {
    padding:0;
    margin:0;
    background:#000000 url(http://www.faceproject.org/new/resou...osh%20copy.gif) no-repeat;
    color: #000000;
    text-align:center;
    }
    #wrapper{
    height:595px;
    margin-left:0px;
    margin-right:auto;
    text-align:left;
    margin-bottom:-52px;
    color: #000000;
    position:relative;/*stacking context*/
    }
    #greybox {
    height:331px;
    position:relative;
    top:100px;
    left:0px;
    width:230px;
    text-align:left;
    background-color: #999999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #000000;
    text-decoration: none;
    padding-top: 100px;
    padding-right: 25px;
    font-weight: normal;
    background-image: url(http://www.faceproject.org/new/resou...ACE%20copy.gif);
    background-repeat: no-repeat;
    background-position: 10px 60px;
    padding-left: 35px;
    }
    #greybox a {
    color: #AF1E2D;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
     
    #logo { position:absolute;
    top:0;
    left:0;
    }
     
    #BlueBar { position:absolute;
    bottom:0;
    left:550px;
    }
     
    #MainImage { position:absolute;
    top:100px;
    left:248px;
    }
     
    html>body #wrapper{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:#000000;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    overflow:hidden;
    color: #000000;
    text-align: left;
    }
    #footer {
    width:900px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #af1e2d;
    text-align:left;
    position:absolute;
    top:540px;
    left:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    text-decoration: none;
    text-indent: 500px;
    background-image: url(http://www.faceproject.org/new/resources/../images/footerimage%20copy.gif);
    background-repeat: no-repeat;
    background-position: left;
    color: #FFFFFF;
    padding-top: 15px;
    }
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    #clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
    div,p {margin-top:0}/*clear top margin for mozilla*/
    /* CSS code for Drop Menus*/
    ul {
    padding:0;
    margin:0;
    list-style:none;
    text-align: center;
    vertical-align: middle;
    }
     
    li {
    float:left;
    position:relative;
    width:90px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #000000;
    height: 30px;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #FFFFFF;
    line-height:30px;
    }
    li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
     
    li ul li {
    border-top-width: 4px;
    border-top-style: solid;
    border-top-color: #F2BF49;
    text-align: center;
    vertical-align: middle;
    border-left-width: 0;
    border-left-style: none;
    border-left-color: #000000;
    }
    li ul {
    display:none;
    position:absolute;
    top:30px;
    left:0;
    } 
    /* Hack for cross browser support */
    li > ul { 
    top:auto;
    left:auto;
    }
    li:hover ul, li.over ul { display:block; 
    clear:left;
    }
     
    #nav {
    position:absolute;
    top:100px;
    left:0;
    z-index:5;
    }
     
    #About {
    position:absolute;
    top:77px;
    left:566px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #AF1E2D;
    text-decoration: none;
    z-index: 5;
    }
     
    #Resources {
    position:absolute;
    top:77px;
    left:665px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    z-index: 5;
    }
    #Training {
    position:absolute;
    top:77px;
    left:764px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    z-index: 5;
    }
     
    #Action {
    position:absolute;
    top:77px;
    left:841px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    z-index: 5;
    }
    li ul li{width:120px}
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!-- JS for drop menu -->
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i < navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
    </script>
    </head>
    <body>
    <div id="wrapper"> 
    <!-- Start Drop Menus -->
    <ul id="nav">
    	<li><a href="#">Who we are</a> 
    	 <ul>
    		<li><a href="#">Mission</a></li>
    		<li><a href="#">Staff</a></li>
    		<li><a href="#">Board of Directors</a></li>
    		<li><a href="#">Inspirations</a></li>
    	 </ul>
    	</li>
    	<li><a href="#">Collaborations</a></li>
    	<li><a href="#">Who we serve</a></li>
    	<li><a href="#">What's new</a></li>
    	<li><a href="#">Kudos!</a></li>
    	<li><a href="#">Contact Us</a> 
    	 <ul>
    		<li><a href="#">Email</a></li>
    		<li><a href="#">Donations</a></li>
    	 </ul>
    	</li>
    </ul>
    <img src="http://www.faceproject.org/new/resou...father-son.jpg" id="MainImage" /> 
    <div id="greybox">FACE is a national non-profit organization that supports sensible 
    	alcohol practices through the development of messages, strategies and training 
    	designed to create publice awareness about the connection between alcohol 
    	and critical public health issues. FACE provides <a href="#">resources</a>, 
    	<a href="#">training</a> , and <a href="#">actions</a> that communities can 
    	implement to address these problems.</div>
    <div id="clearfooter"></div>
    <!-- to clear footer -->
    </div>
    <div id="footer">Enter Keyword(s)&nbsp;&nbsp; 
    <input name="txtSearch" type="text" size="20" />
    &nbsp;&nbsp; 
    <input name="btnSearch" type="button" value="Search" />
    </div>
    <div id="header"><img src="http://www.faceproject.org/new/resou...ogo%20copy.gif" id="logo"/><img src="http://www.faceproject.org/new/resou...es/BlueBar.png" id="BlueBar" /> 
    <a href="#" id="About">ABOUT FACE</a> <a href="#" id="Resources">RESOURCES</a> 
    <a href="#" id="Training">TRAINING</a> <a href="#" id="Action">ACTION</a> </div>
    </body>
    </html>
    Paul

  5. #5
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help Paul!!

    Please take a look at how the site has progressed:

    www.faceproject.org/new

    *the home page and the 4 links in blue are all working now, so you can flip through those 5 pages.

    Question:

    1) I have purchase extra images for each category. I would like to have a 2-5 images to be displayed randomly each time you visit the page (not a slide show).

    2) What is the most common screen size used on the internet? 600x800?

    FireFox/Mozilla Problems:

    1) On the home page the hover is not working properly. I can hover over training and then click about FACE and end up on the training page.

    2) On the home page the collage/image does not appear.

    3) Drop down boxes have bullets that need to be removed.

    Any help is appreciated!!


    Matt

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

    FireFox/Mozilla Problems:
    Remove the html comments that are in the middle of your stylesheet. They are probably causing a lot of the problems. If you look at the code I gave you above I had removed them from the styles. Use only css comments /* etc */ in your stylesheet.

    I don't think there is any real need to surround your stylesheet with html comments (although they won't cause you problems like the embedded comments do) unless you are supporting very old browsers and I believe in the future that some browsers may ignore the whole stylesheet if you put it in comments anyway.

    Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    1) I have purchase extra images for each category. I would like to have a 2-5 images to be displayed randomly each time you visit the page (not a slide show).
    There are plenty of scripts about that will do this for you either server side (php) or js. Just find one that suits your purpose from the many script outlets on the web.

    [/quote]2) What is the most common screen size used on the internet? 600x800?
    [/quote]
    I believe 1024x768 is the most common now with about 50%share while 800x600 is about 35%.(http://www.w3schools.com/browsers/browsers_stats.asp)

    Paul

  8. #8
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, good information, good link!

    I removed the html comments from the page. It looks fine in Firefox now.

    I'm still working on getting the links to work properly on the home page and getting the collage image to show in Firefox.

    Thanks for all the effort Paul, I really appreciate it!

    Matt

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I'm still working on getting the links to work properly
    Its because you have made the span to high and it covers all the links at once. Reduce the height and it should work.



    Code:
     li a span {
     position:absolute;
     top:-75px;
     left:75px;
     width:700px;
     height:65px;
     visibility:hidden;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13pt;
     font-weight: normal;
     color: #f2bf49;
     text-decoration: none;}/*hide text initially*/
    Paul

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    getting the collage image to show in Firefox.
    Its because you have used a negative z-index on the image. This has put the image behind the body which means its invisible. Negative z-indexes should be used with care. What you need is a z-index of 1 on that img element and then a z-index of 2 on the footer to place it above the image (if that's what you wanted).

    Now that you've sorted those problems out you should probably recode that page as there are some bad points in there. You have font tags and hundreds of &nbsp; in there that are not needed with css as css will make the space and the positioning.

    You have a horizontal scrollbar because your header is 100% wide but you have added 265px padding which makes it much too big. You can make the header 100% but apply the padding to an inner elements such as a paragraph tag and then the scrollbar will not appear.

    You have also lost the dynamics of the 100% footer because you have absolutely placed most of the content so the footer has nothing to foot. You need to get some flow back into the document by statically palcing some elements. You can use margin top on an element to position it away from other absolute elements then everything underneath comes back into the flow.

    The footer, clearfooter and the negative margin-bottom on #outer all work together to control the footer. If you change one then you must change all three. You also need to account for the broken box model where you have added padding/borders to elements with widths defined.

    Apart from that.........

    Paul

  11. #11
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apart from that.......
    Thanks Paul

    I believe I put the negative z-index in there so I could place the image under a graphical swoosh image. I will need to figure something else out for that anyway.

    Is there a way to make an image semi-transparent in CSS?

    I will work on getting those &nbsp;'s out of there, as well as fixing the footer problems.

    Thanks for all the help!

    Matt

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

  13. #13
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone,

    Things are starting to get better. I have been redesigning my site to work better with 600x800 and 1024x768.

    I am now having a problem with using the footer and list items. Can you take a look at this page and tell me what I'm doing wrong? I'd like the footer placed properly (I thought using margin controls would keep the HTML "flow") and I'd like the list items to be bulleted.

    http://www.faceproject.org/new/About/whoweserve.html

    Thanks,

    Matt

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You still have problems with positioning

    You have used relative positioning in a few places and while it seems to work initially you are finding that elements overlap later on (such as your footer).

    This is because relative positioning doesn't physically move anything it only visually moves it. Therefore everything else behaves as if the relative element is in its original position. You should the margin property to move elements that are in the flow and thus preserve the flow.

    The problems with your lists are that you have defined all lists when you defined your main nav. You should have isolated the nav by referencing the list using the id #nav.

    Also you have given some elements heights when they are supposed to be a fluid height. If you give an element a set height then good browsers will obey and content will spill out if greater. (IE will expand the element to compensate when it shouldn't).

    Here is a quick revision of your code to take some of those remarks into account. The page will now also display ok in firefox where it was broken before.

    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>FACE&reg; Resources. Training. Action.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash mac hiding hack  \*/ 
    html, body{
     height:100%;
    } 
    /* end hack */ 
    body {
     padding:0;
     margin:0;
     background-color: #000000;
    }
    #wrapper{
    min-height:100%;
     margin-left:0px;
     margin-right:auto;
     width:800px;
     margin-bottom:-52px;
     position:relative;/*stacking context*/
    }
    * html #wrapper{height:100%}
    #greybox {
     position:relative;
     padding-top:120px;
     width:800px;
     text-align:left;
     background-color: #999999;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #000000;
     text-decoration: none;
     font-weight: normal;
     background-image: url(http://www.faceproject.org/new/About...ion%20copy.gif);
     background-repeat: no-repeat;
     background-position: 10px 120px;
      }
    #greybox p {
     margin-left: 35px;
     margin-top:15px;
    }
    #title {
     margin-left:80px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 24px;
     color: #AF1E2D;
     font-weight: bold;
     }
    #plain {
     margin-top:10px;
     margin-left:25px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #000000;
     background-color: #999999;
     text-align: left;
     padding: 0px;
     width: 500px;
     border: 0px 0;
     font-weight: normal;
     list-style-type: circle;
     line-height: 15px;
    }
     
    
    </style>
    <script language="JavaScript" type="text/JavaScript">
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i < navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
      }
      }
     }
    }
    }
    window.onload=startList;
    </script>
    <style>
    /* CSS Document */
    #logo { position:absolute;
      top:0;
      left:0;
      }
      
    #BlueBar { position:absolute;
      bottom:0;
      left:450px;
      }
      
    html>body #wrapper{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
     position:absolute;
     top:0;
     left:0;
     width:800px;
     height:80px;
     background:#000000;
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     overflow:hidden;
     color: #000000;
     text-align: left;
    }
    #footer {
     width:800px;
     clear:both;
     height:50px;
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     background-color: #af1e2d;
     text-align:left;
     position:relative;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-decoration: none;
     color: #FFFFFF;
    }
    #tag {
     Position:absolute;
     top:13px;
     left:15px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 9px;
     color: #F2BF49; 
    }
    #footer p {
     margin-top: 15px;
     margin-left: 450px;
      
    }
    * html #footer {/*only ie gets this style*/
     \height:52px;/* for ie5 */
     he\ight:50px;/* for ie6 */
    }
    #clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    /* CSS Document */
    ul#nav  {
     padding:0;
     margin:0;
     list-style:none;
     text-align: center;
     vertical-align: middle;
     }
    ul#nav ul{ 
     padding:0;
     margin:0;
    } 
    #nav li {
     float:left;
     position:relative;
     width:80px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color: #FFFFFF;
     text-decoration: none;
     background-color: #000000;
     height: 25px;
     border-left-width: 2px;
     border-left-style: solid;
     border-left-color: #FFFFFF;
     line-height:25px;
     }
    #nav li a {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color: #FFFFFF;
     text-decoration: none;
     }
     
    #nav li ul li {
     border-top-width: 4px;
     border-top-style: solid;
     border-top-color: #F2BF49;
     text-align: center;
     vertical-align: middle;
     border-left-width: 0;
     border-left-style: none;
     border-left-color: #000000;
     width: 100px;
     }
     
    a:hover {
     color: #AF1E2D;
     }
    #nav li ul {
     display:none;
     position:absolute;
     top:25px;
     left:0;
     } 
    #nav li > ul {  
     top:auto;
     left:auto;
     }
    #nav li:hover ul, #nav li.over ul { display:block; 
      clear:left;
      }
      
    #nav {
     position:absolute;
     top:80px;
     left:0;
     z-index:5;
     }
     
    #About {
     position:absolute;
     top:57px;
     left:466px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #AF1E2D;
     text-decoration: none;
     z-index: 5;
     }
     
    #Resources {
     position:absolute;
     top:57px;
     left:565px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #000000;
     text-decoration: none;
     z-index: 5;
     }
    #Training {
     position:absolute;
     top:57px;
     left:664px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #000000;
     text-decoration: none;
     z-index: 5;
     }
     
    #Action {
     position:absolute;
     top:57px;
     left:741px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #000000;
     text-decoration: none;
     z-index: 5;
     }
    
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <ul id="nav">
    	<li><a href="#">Who we are</a> 
    	  <ul>
    		<li><a href="mission.html">Mission</a></li>
    		<li><a href="staff.html">Staff</a></li>
    		<li><a href="board.html">Board of Directors</a></li>
    		<li><a href="inspire.html">Inspirations</a></li>
    	  </ul>
    	</li>
    	<li><a href="collaborations.html">Collaborations</a></li>
    	<li><a href="whoweserve.html">Who we serve</a></li>
    	<li><a href="whatsnew.html">What's new</a></li>
    	<li><a href="kudos.html">Kudos!</a></li>
    	<li><a href="#">Contact Us</a> 
    	  <ul>
    		<li><a href="<A href="mailto:faceproject@faceproject.org">Email</a></li">mailto:faceproject@faceproject.org">Email</a></li>
    		<li><a href="donate.html">Donations</a></li>
    	  </ul>
    	</li>
      </ul>
      <div id="greybox"> 
    	<div id="title">Who We Serve...</div>
    	<p> The misuse of alcohol affects everyone - regardless of age, gender, profession, 
    	  occupation, culture, color, economic status and so on. FACE serves and collaborates 
    	  with a diverse number of organizations and individuals including: </p>
    	<ul id="plain">
    	  <li id="plain">Colleges &amp; Universities: Campus police, sororities &amp; 
    		fraternities, residence halls, student health centers, libraries and athletic 
    		departments</li>
    	  <li id="plain">Local School Districts: High schools, middle schools, board 
    		of education, teachers, student organizations (SADD, student councils, 
    		etc.) and intermediate school districts</li>
    	  <li id="plain">Law enforcement: Judicial &amp; police departments, correctional 
    		institutions, juvenile facilities, youth &amp; adult prevention programs 
    		and DUI programs</li>
    	  <li id="plain">State &amp; Local Government Organizations: Health departments, 
    		substance abuse departments, mental health departments, public libraries 
    		and state coalitions</li>
    	  <li id="plain">Alcohol Retailers: Grocery stores, convenience stores and 
    		state-run stores</li>
    	  <li id="plain">Health &amp; Medical: American Medical Association, doctors 
    		offices, hospitals, medical clinics, health departments, counseling centers 
    		and social workers</li>
    	  <li id="plain">Community organizations: Parent groups (PTA, PTO, etc.), 
    		coalitions, partnerships, service clubs, youth organizations, religious 
    		institutions, family resource centers and athletic booster clubs</li>
    	  <li id="plain">Military prevention programs</li>
    	</ul>
    	<div id="clearfooter"></div>
      </div>
    </div>
    <div id="footer">
      <div id="tag"><font color="#FFFFFF">FACE&reg; Resources. Training. Action.</font> 
    	105 West Fourth Street Clare, MI 48617<br />
    	Phone: 1-888-822-3223 Fax: 1-989-386-3532 Email:faceproject@faceproject.org</div>
      <p>Enter Keyword(s)&nbsp;&nbsp; 
    	<input name="txtSearch" type="text" size="10" />
    	&nbsp;&nbsp; 
    	<input name="btnSearch" type="button" value="Search" />
      </p>
    </div>
    <div id="header"><img src="http://www.faceproject.org/new/images/logo copy.gif" id="logo"/><img src="http://www.faceproject.org/new/About/images/BlueBar.png" id="BlueBar" /> 
      <a href="../About/index.html" id="About">ABOUT FACE</a> <a href="../Resources/index.html" id="Resources">RESOURCES</a> 
      <a href="../training/index.html" id="Training">TRAINING</a> <a href="../Action/index.html" id="Action">ACTION</a> 
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  15. #15
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul (and everyone else),

    I made the changes you suggested.

    Now that the Greybox no longer has a height it stops after the last line of text. It works great for pages where the text fills up the page but it doesn't work when there isn't enough text, shown here:

    www.faceproject.org/new/about

    any ideas how I can fix this?

    One thing I was thinking was some kind of script to get the display settings from the visitor then give them a page designed for that setting. I am hoping there is an easier solution. According the the W3 website 50% of users use 1024x768 and 35% use 800x600 so those are two settings I am most interested in getting right.

    Thanks,

    Matt

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Now that the Greybox no longer has a height it stops after the last line of text. It works great for pages where the text fills up the page but it doesn't work when there isn't enough text
    Hi,

    Simply move the background colour to the wrapper from the greybox as the wrapper is the only thing that holds the 100% height.

    Code:
    #wrapper{
    min-height:100%;
    margin-left:0px;
    margin-right:auto;
    width:800px;
    margin-bottom:-52px;
    position:relative;/*stacking context*/
    background-color: #999999;
    }
    One thing I was thinking was some kind of script to get the display settings from the visitor then give them a page designed for that setting. I am hoping there is an easier solution. According the the W3 website 50% of users use 1024x768 and 35% use 800x600 so those are two settings I am most interested in getting right.
    I would avoid using scripts for this (just a personal op0inion). Either design for the lowest denominator (800x600)or move to a more fluid design that works at most screen sizes.

    Your design at present is 800px wide and you could just centre the site so it doesn't look out of place at larger resolutions. Alternatively create a fluid version that stretches across the whole width but would need to be redesigned of course with that in mind.

    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
  •