SitePoint Sponsor

User Tag List

Page 47 of 66 FirstFirst ... 3743444546474849505157 ... LastLast
Results 1,151 to 1,175 of 1630
  1. #1151
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You may have already addressed some of these issues but I searched the thread and couldnt find any.
    You will need to post the code you have altered so we can correct the mistakes along the way

    If the left column isn't showing it probably needs a position :relative added to give it a stacking context but it could be any other number of things.

    When I put the css into an external sheet, the page doesn't adjust to 100% what can I do to fix this?
    It shouldn't make any difference whether the stylesheet is external or not.

    there seems to be a 1 or 2 pixel line under the footer that is showing through from the body in ie only
    Ie has a 1px rounding bug at the bottom of the window and there's not much you can do except push the footer down an extra pixel to hide it or disguise it in some other way. Depending on which layout you are using you would just reduce the negative margin by a pixel or two. In some layouts this would be the negative bottom margin on #outer.

    In mozilla the page scrolls down maybe 10 pixels or so and theres no content to cause this in the center or left columns
    You probably need to adjust the top margins on elements you have in your page such as the first paragraphs or headers as the margins will collapse onto the body and push the page downwards.

    You will need to provide the code or a link to confirm all the above

  2. #1152
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">

    /* mac hide \*/
    html, body {height:100%}
    /* end hide*/
    body {
    padding:0;
    margin:-1;
    background:#d1d2d4;
    background-image: url("images/borderleftbg.gif");
    color: #000000;
    }
    #outer{
    min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    margin-left:150px;
    background:white;
    border-left:0px solid #000;
    border-right:0px solid #000;
    margin-bottom:-54px;
    color: #000000;
    }
    * html #outer{height:100%;margin-left:150px}/* ie 3 pixel jog*/


    #header{
    position:absolute;
    top:0;
    left:-1;
    width:100%;
    height:190px;
    background:#d1d2d4;
    background-image: url("images/bgtop.gif") ;
    border-top:0px solid #000;
    border-bottom:0px solid #000;
    overflow:hidden;
    color: #000000;
    }


    #left {
    background:#d1d2d4
    position:relative;/*ie needs this to show float */
    width:150px;
    float:left;
    margin-left:-149px;/*must be 1px less than width otherwise won't push footer down */
    padding-top:190px;/*needed to make room for header*/
    left:0px/* line things up exactly*/

    }
    * html #left {margin-right:-3px}/* three pixel jog*/
    #left p {padding-left:3px;padding-right:2px}


    #footer {
    font-size:10px;
    width:100%;
    clear:both;
    height:53px;
    border-top:0px solid #000;
    border-bottom:0px solid #000;
    background-color: #d1d2d4;
    background-image: url("images/borderbotbg.gif");
    background-repeat: repeat-x;
    color: #000000;
    text-align:left;
    position:relative;
    }


    * html #footer {/*only ie gets this style*/
    \height:55px;/* for ie5 */
    he\ight:53px;/* for ie6 */
    }


    #clearheader{height:190px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    div,p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    </style>



    </head>
    <body>
    <div id="outer">
    <div id="left">
    <img src="images/menu.gif">
    </div>
    <div id="clearheader"></div> <!-- to clear header -->
    <div id="centrecontent"><!--centre content goes here -->
    <p>Centre Content goes here</p>

    </div>
    <div id="clearfooter"></div> <!-- to clear footer -->
    </div><!-- end outer div -->

    <div id="footer"><img src="images/borderbot.gif" align=top><br><br><p align=center> </p>

    </div>

    <div id="header"><img src="images/3Dlogo.gif" alt="logo"><img src="images/titlebar.gif" alt="titlebar"><img src="images/bordertop.gif"

    align=top>
    </div>
    </body>
    </html>

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

    The left column isn't showing because you have missed the semi-colan after the background colour in #left and that means that the position relative style which follows on is not read correctly by the browser.

    As I can't see your images and you haevn't put image dimensions in the html (which you need to do) then I can't make this pixel perfect for you but this is tidies up a bit.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* mac hide \*/
    html, body {height:100%;margin:0;padding:0}
    /* end hide*/
    body {
    padding:0;
    margin:0;
    background:#d1d2d4;
    background-image: url("images/borderleftbg.gif");
    color: #000000;
    }
    #outer{
    min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    margin-left:150px;
    background:white;
    margin-bottom:-53px;
    color: #000000;
    }
    * html #outer{height:100%;}/* ie 3 pixel jog*/ 
     
    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:190px;
    background:#d1d2d4;
    background-image: url("images/bgtop.gif") ;
    overflow:hidden;
    color: #000000;
    }
     
    #left {
    background:#d1d2d4; 
    position:relative;/*ie needs this to show float */
    width:150px;
    float:left;
    margin-left:-149px;/*must be 1px less than width otherwise won't push footer down */
    padding-top:190px;/*needed to make room for header*/
    left:-1px/* line things up exactly*/
    }
    * html #left {margin-right:-3px}/* three pixel jog*/
    #left p {padding:3px;}
     
    #footer {
    font-size:10px;
    width:100%;
    clear:both;
    height:53px;
    background-color: #d1d2d4;
    background-image: url("images/borderbotbg.gif");
    background-repeat: repeat-x;
    color: #000000;
    text-align:center;
    position:relative;
    }
     
     
    #clearheader{height:190px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
    p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="left"> <img src="images/menu.gif">test </div>
    <div id="clearheader"></div>
    <!-- to clear header -->
    <div id="centrecontent">
    <!--centre content goes here -->
    <p>Centre Content goes here</p>
    </div>
    <div id="clearfooter"></div>
    <!-- to clear footer -->
    </div>
    <!-- end outer div -->
    <div id="footer"><img src="images/borderbot.gif" >
    <p>Footer</p>
    </div>
    <div id="header"><img src="images/3Dlogo.gif" alt="logo"><img src="images/titlebar.gif" alt="titlebar"><img src="images/bordertop.gif" > </div>
    </body>
    </html>

  4. #1154
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    awesome

    awesome, you are good. I just got back into developing websites. I'm a computer science major and I think I'm going to get into web development. You think you could give me a few pointers?
    joeymarino.com
    Where is a good site to learn more css? is there a good editor for css?

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

    I would place the corner images in the background and then they will have no efect on the resizing of the page. You also need to tidy a few things up.

    This is what I think you are trying to do.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* mac hide \*/
    html, body {height:100%;margin:0;padding:0}
    /* end hide*/
    body {
    padding:0;
    margin:0;
    background:#d1d2d4;
    background-image: url("images/borderleftbg.gif");
    color: #000000;
    }
    #outer{
    min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    margin-left:150px;
    background:white;
    margin-bottom:-53px;
    color: #000000;
    }
    * html #outer{height:100%;}/* ie 3 pixel jog*/ 
     
    #header{
    position:absolute;
    top:0;
    left:0;
    align:top;
    width:100%;
    height:190px;
    background:#d1d2d4;
    background-image: url("images/bgtop.gif") ;
    overflow:hidden;
    color: #000000;
    }
    #header p {white-space:nowrap;margin:0}
    #headerbase{
    background:url(images/bordertop.gif) no-repeat 0 0;
    width:200px;
    height:10px;
    overflow:hidden;
    position:absolute;
    left:0;
    top:180px;
    z-index:99
    }
     
    #left {
    position:relative;/*ie needs this to show float */
    width:150px;
    float:left;
    margin-left:-149px;/*must be 1px less than width otherwise won't push footer down */
    padding-top:190px;/*needed to make room for header*/
    left:-1px;/* line things up exactly*/
    background:transparent;
    }
    * html #left {margin-right:-3px}/* three pixel jog*/
    #left p {padding:3px;}
     
    #footer {
    font-size:10px;
    width:100%;
    clear:both;
    height:53px;
    background-color: #d1d2d4;
    background-image: url("images/borderbotbg.gif");
    background-repeat: repeat-x;
    color: #000000;
    text-align:center;
    position:relative;
    }
    #footer-top{
    background:url(images/borderbot.gif) no-repeat 0 0;
    width:200px;
    height:10px;
    overflow:hidden;
    position:absolute;
    left:0;
    top:0px;
    z-index:99
    } 
    #footer p{padding-top:15px} 
    #clearheader{height:190px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
    p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="left"> <img src="images/menu.gif" alt="menu" /> </div>
    <div id="clearheader"></div>
    <!-- to clear header -->
    <div id="centrecontent">
    <!--centre content goes here -->
    <p>Centre Content goes here</p>
    </div>
    <div id="clearfooter"></div>
    <!-- to clear footer -->
    </div>
    <!-- end outer div -->
    <div id="footer">
    <p>Footer</p>
    <div id="footer-top"></div>
    </div>
    <div id="header">
    <p><img src="images/3Dlogo.gif" alt="logo" /><img src="images/titlebar.gif" alt="titlebar" /> </p>
    <div id="headerbase"></div>
    </div>
    </body>
    </html>

    There are plenty of sites to learn about css and if you look at the 2 sticky threads at the top of the css forum there is loads of info there for you to get on with.

    There is no full wysiwyg editor for css yet (afaik) and I still believe that hand-coding is the best way to learn and offers the most control. You still need to know what you are doing in order to use an editor anyway so it seems to defeat the need for it other than checking the syntax etc.

    Hope that helps

    PS I would avoid animated gifs as they can get a bit irritating after a while - but that's just my opinion

  6. #1156
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    i'm struggling with one problem. i used the code below to create a horizontal layout with a content area, footer and header. instead of a navigation to the left i wanted the nav directly under the header (where i want to place a banner).
    yet i haven't found a way that the menue appears at all.
    any suggestions or example sourcecode is much apprenticed


    <!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>2 col layout with equalising columns and footer - content first</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* mac hide\*/
    html, body {height:100%}
    /* end hide */
    html,body {
    padding:0;
    margin:0;
    }
    body{
    text-align:center;
    min-width:760px;/* for mozilla*/
    background-color: #FFF;
    color: #000000;
    }
    #outer{
    height:99.9%;
    min-height:100%;
    width:758px;
    border-left:1px solid #000;
    border-right:1px solid #000;
    color: #000000;
    text-align:left;
    margin:auto;
    position:relative;
    background: url(images/2colcentredbg.jpg) repeat-y center center;
    position:relative;
    }

    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    position:absolute;
    top:0;
    left:-1px;
    width:758px;
    height:70px;
    background:#FF0000;
    border:1px solid #000;
    overflow:hidden;
    color: #000000;
    z-index:100;
    }

    #left p {padding-left:3px;padding-right:2px}


    #footer {
    width:758px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FF8080;
    color: #000000;
    text-align:center;
    left:0;
    bottom:0;
    position: absolute;
    }
    * html #footer{margin-bottom:-1px}/* ie rounding bug*/
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    div,p {margin-top:0}/*clear top margin for mozilla*/
    #centrecontent {
    width:626px;
    float:left;
    padding-top:72px;/*make room for header*/
    }
    #centrecontent p {padding-left:3px}

    #clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
    html >body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */

    </style>
    </head>
    <body>
    <div id="minHeight"></div>
    <div id="outer">
    <div id="centrecontent">
    <!--centre content goes here -->
    <p>This is the centre content : This is the centre content : This is the centre
    content : This is the centre content : This is the centre content : This
    is the centre content : This is the centre content : This is the centre
    content : This is the centre content : This is the centre content : This
    is the centre content : This is the centre content : This is the centre
    content : This is the centre content : This is the centre content : This
    is the centre content : This is the centre content : This is the centre
    content : This is the centre content : This is the centre content : </p>
    </div>
    <div id="clearfooter"></div>
    <!-- ie needs this -->
    <div id="header">
    <p>Header - No column longest - footer at bottom of window.</p>
    </div>
    <div id="footer">Footer - | |- Footer </div>
    </div>
    <!-- end outer div -->
    </body>
    </html>

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

    Assuming you are going to haver the content stretch full width then you can place the nav as the first element within the centercontent.

    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>2 col layout with equalising columns and footer - content first</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* mac hide\*/
    html, body {height:100%}
    /* end hide */
    html,body {
    padding:0;
    margin:0;
    }
    body{ 
    text-align:center;
    min-width:760px;/* for mozilla*/
    background-color: #FFF;
    color: #000000;
    }
    #outer{
    height:99.9%;
    min-height:100%;
    width:758px;
    border-left:1px solid #000;
    border-right:1px solid #000;
    color: #000000;
    text-align:left;
    margin:auto;
    position:relative;
    background: url(images/2colcentredbg.jpg) repeat-y center center;
    position:relative;
    }
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    position:absolute;
    top:0;
    left:-1px;
    width:758px;
    height:70px;
    background:#FF0000;
    border:1px solid #000;
    overflow:hidden;
    color: #000000;
    z-index:100;
    }
    #left p {padding-left:3px;padding-right:2px}
    
    #footer {
    width:758px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FF8080;
    color: #000000;
    text-align:center;
    left:0;
    bottom:0;
    position: absolute;
    }
    * html #footer{margin-bottom:-1px}/* ie rounding bug*/
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    div,p {margin-top:0}/*clear top margin for mozilla*/
    #centrecontent {
    width:758px;
    float:left;
    padding-top:72px;/*make room for header*/
    }
    #centrecontent p {padding-left:3px}
    #clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
    html >body #minHeight{float:right;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */
    #nav{
    background:#ffffcc;
    width:758px;
    border-bottom:1px solid #000;
    }
    #nav ul{
     margin:0;padding:0;
     list-style:none;
     text-align:center
    }
    #nav ul li{display:inline;padding:5px;}
    </style>
    </head>
    <body>
    <div id="outer">
     <div id="minHeight"></div>
     <div id="centrecontent">
      <div id="nav">
       <ul>
    	<li><a href="#">test</a></li>
    	<li><a href="#">test</a></li>
    	<li><a href="#">test</a></li>
    	<li><a href="#">test</a></li>
       </ul>
      </div>
      <!--centre content goes here -->
      <p>This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content
       : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : This is the centre content : </p>
     </div>
     <div id="clearfooter"></div>
     <!-- ie needs this -->
     <div id="header">
      <p>Header - No column longest - footer at bottom of window.</p>
     </div>
     <div id="footer">Footer - | |- Footer </div>
    </div>
    <!-- end outer div -->
    </body>
    </html>

    You can still subdivide the content if you want after the nav by just using some more floated elements depending on exactly what you want to do.

  8. #1158
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats exactly what i was looking for - thanks!
    i'll check my source what i made wrong...

  9. #1159
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are too good.
    PS I would avoid animated gifs as they can get a bit irritating after a while - but that's just my opinion
    irritating for the end-user or for the developer?

  10. #1160
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    irritating for the end-user or for the developer?
    Irritating for the user

    The one on your site isn't too bad but I usually avoid any animation on corporate type sites as it often looks amateurish and can be distracting.

    Just my personal preference

  11. #1161
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    usually I don't like anigif's either, but this client specially requested it. o well. I'd like to see some of your designs, anything you could show off?

    What would you use for a rollover image effect? possible to do this in css with hover? would it be better to do with a javascript or something else?

  12. #1162
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually I figured out the image rollover. I'm starting to get the hang of css. so powerful. Just to give you an idea of how far behind I was when I started this project, the first draft involved frames. I've come a long way in the last few weeks.

  13. #1163
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I've come a long way in the last few weeks
    Well done It's a steep learning curve but worth it in the end.

    For rollover image effects I would use a method like in thes simple code:

    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 type="text/css">
    ul#test{
     padding:0;
     margin:0;
     list-style:none;
    }
    #test li{
     width:80px;/*size of image*/
     height:80px;/* size of image*/
    }
    #test li.first{ background:url(on.gif) no-repeat left top;}/* this holds the rollover state of the image1*/
    #test li.second{background:url(on2.gif) no-repeat left top;}/* this holds the rollover state of the image2*/
    #test li.third{ background:url(on3.gif) no-repeat left top;}/* this holds the rollover state of the image3*/
    #test li.fourth{background:url(on4.gif) no-repeat left top;}/* this holds the rollover state of the image4*/
    #test a{
     display:block;
     width:80px;
     height:80px;
    }
    #test li.first a{background:url(off.gif) no-repeat left top;}/* this holds the normal state of the image1*/
    #test li.second a{background:url(off2.gif) no-repeat left top;}/* this holds the normal state of the image2*/
    #test li.third a{background:url(off3.gif) no-repeat left top;}/* this holds the normal state of the image3*/
    #test li.fourth a{background:url(off4.gif) no-repeat left top;}/* this holds the normal state of the image4*/
    ul#test a:hover{background:transparent}
    /* on hover we just hide the anchor and let the image underneath show through. 
    This makes for pre-loaded rolovers unlike changing the image on hover which is slow.*/
    /* the above code assumes a different image for each anchor but is much simpler if only one image is used as the individual classes are not necessary. */
    </style>
    </head>
    <body>
    <ul id="test">
      <li class="first" ><a href="#"></a></li>
      <li class="second"><a href="#"></a></li>
      <li class="third"><a href="#"></a></li>
      <li class="fourth"><a href="#"></a></li>
    </ul>
    </body>
    </html>
    The main point being that you shoid avoid swapping an image on hover but rather pre-load both states of the image in some way and then just reveal them when necessary. The above loads the over state of the image in the background of the list and the normal state in the background of the anchor. On hover the anchor is made transparent and the over state is revealed.

    No extra images are loaded on hover so you have a pre-loaded effect.

  14. #1164
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i get it. How would you handle dropdown submenus?

  15. #1165
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    How would you handle dropdown submenus?
    For a simple menu the the suckerish menus are perfect.

    Here are some of my simple demos based on the suckerfish menus.

    Some of them are old demos and some are just quick demos so refer to the original article for more info.

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm
    http://www.pmob.co.uk/temp/horizontal-menu-hozsub.htm
    http://www.pmob.co.uk/temp/dropdown-hoz-safe.htm
    http://www.pmob.co.uk/temp/drop-down-hoz-fluid.htm
    www.pmob.co.uk/temp/dropdown-vertical3.htm
    http://www.pmob.co.uk/temp/dropdown-vert2.htm

    /* this next one only very only modern browsers*/
    http://www.pmob.co.uk/temp/dropdown-...evel-fluid.htm

    http://www.pmob.co.uk/temp/drop-down-multi.htm
    http://www.pmob.co.uk/temp/drop-down-multi-opaque.htm
    http://www.pmob.co.uk/temp/drop-down-image-replace.htm
    http://www.pmob.co.uk/temp/drop-down-image-replace2.htm
    http://www.pmob.co.uk/temp/drop-down-expand.htm
    http://www.pmob.co.uk/temp/fixed-header-drop-down.htm
    http://www.pmob.co.uk/temp/drop-down-2lists.htm


    Remember though that drop downs are inherrently in-accessible and disabled users will have trouble manipulating the mouse over the drop downs. You may want to add some js to add timers and delay to make the menu more usable.

    You should also make sure that their is still a means of navigating even when js is switched off.

    Hope it helps.

  16. #1166
    SitePoint Member raheelayub's Avatar
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I wanna create a web site using pure CSS2, already I'm using CSS2 in my web sites you can check one of my sites www.testking.in
    Now I have problem, I wanna build a website without using <table> tags, I wanna make a website using Pure CSS2 and <div> tags etc....

    some body can plz help me!!!

  17. #1167
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I wanna create a web site using pure CSS2,
    Well you better start learning how to layout pages with css then. This thread (the main demo) shows many advanced techniques for laying out pages but the basics can be applied to other designs.

    You should also look at some of the sitepoint books such as "designing without tables" so that you have something to work with. I personally bought about 4 books when I first started so that I had a reference book and then a guide book and found it very useful in learning things the correct way.

    I can't teach you to make websites you just have to learn how to position and then apply the techniques correctly. The faq and the tips sticky threads have masses of resources that can help.

    You should make a start and then when you have a problem you can ask how to do it but just saying " I want to design tabless sites " isn't much use because we don't know where to start and we can't teach you from scratch.

    Look through the thtreads in the forum and see the advice we give to others on their problems and look through the code of other sites and try to understand what's going on.

    You should look thoroughly into floats as they are used a lot and are very important and there are some helpful tips in the faq.

    Sorry I can't give specific advice but there are many resources in the sticky threads so take your time and read through them. When you have a specific problem then post it in the forum and you will get advice on that problem and see the right way to do it

  18. #1168
    SitePoint Member raheelayub's Avatar
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You Paul!!!

  19. #1169
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    new div overflow auto

    hey paul,
    hows it hangin? Got a quick question for you. If I were to put a new div in the centercontent div on your auto height adjusting design, and make this new div have overflow:auto, I understand I need a height. My question is, would there be a way to make that new div the same size as the center content div so the footer is always at the bottom of the viewport and all the content is scrolled in this new div?
    thanks man,
    Joey

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

    If you are saying what I think you mean then there is no easy way to do this. It sounds like you want a fixed footer at the bottom of the window and a scrollbar appears on the center content so that the footer is never pushed off the window.

    You can put ie6 in quirks mode and utilise the broken box model so that 100% height can be used at the same time as padding without increasing the height. This allows for the element to stretch full height and also allows to preserve the header and footer.

    This demo seems to achieve that but opera won't redraw if you resize on the fly unless you refresh afterwards.

    http://www.pmob.co.uk/temp/3col-fixed-centre3.htm

    Don't know if its of any use.

  21. #1171
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup, thats it! you know everything! having a problem tho. I have a drop-down menu that wont overlap the new div in ie. I tried setting all of the z-indices on the menu div and for the drop-down elements higher than the new div and still no help. link

    HTML Code:
    /* mac hide \*/
    html, body {height:100%;margin:0;padding:0}
    /* end hide*/
    body {
    	padding:0;
    	margin:0;
    	background:#d1d2d4;
    	background-image: url("images/borderleftbg.gif");
    	background-repeat:repeat-y;
    	color: #000000;
    }
    
    #outer{
    	min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    	margin-left:150px;
    	background:white;
    	margin-bottom:-53px;
    	color: #000000;
    }
    
    * html #outer{height:100%;}/* ie 3 pixel jog*/ 
     
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:190px;
    	background:#d1d2d4;
    	background-image: url("images/bgtop.gif") ;
    	overflow:hidden;
    	color: #000000;
    }
    
    #header p {white-space:nowrap;margin:0}
    
    #logo{
    	background-image:url(images/3dlogo.gif);
    	background-repeat:no-repeat;
    	width:240px;
    	height:180px;
    	overflow:hidden;
    	position:absolute;
    	left:0;
    	top:0;
    	z-index:10;
    }
    
    #title{
    	background-image:url(images/titlebar.gif);
    	background-repeat:no-repeat;
    	width:560px;
    	height:180px;
    	overflow:hidden;
    	margin-left:33.33%;
    	z-index:10;
    }
    
    #headerbase{
    	background:url(images/bordertop.gif) no-repeat 0 0;
    	width:200px;
    	height:10px;
    	overflow:hidden;
    	position:absolute;
    	left:0;
    	top:180px;
    	z-index:4
    }
    
    #left {
    	position:relative;/*ie needs this to show float */
    	width:150px;
    	float:left;
    	margin-left:-149px;/*must be 1px less than width otherwise won't push footer down */
    	padding-top:190px;/*needed to make room for header*/
    	left:-1px;/* line things up exactly*/
    	background:transparent;
    }
    
    * html #left {margin-right:-3px}/* three pixel jog*/
    
    #left p {padding:3px;}
    
    
    #menu{
    	z-index:6;
    }
    
    #footer {
    	font-size:10px;
    	width:100%;
    	clear:both;
    	height:53px;
    	background-color: #d1d2d4;
    	background-image: url("images/borderbotbg.gif");
    	background-repeat: repeat-x;
    	color: #000000;
    	text-align:center;
    	position:relative;
    }
    
    #footer-top{
    	background:url(images/borderbot.gif) no-repeat 0 0;
    	width:200px;
    	height:10px;
    	overflow:hidden;
    	position:absolute;
    	left:0;
    	top:0px;
    	z-index:4
    } 
    
    #footer p{padding-top:15px} 
    #clearheader{height:190px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
    p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:100%;margin-bottom:12px;z-index:-1;overflow:auto}/* combat IE's 3 pixel jog */
    html>body #main{
    	position:absolute;
    	left:155px;
    	right:0px;
    	top:181px;
    	bottom:44px;
    	overflow:auto;
    	background:#ffffff;
    	z-index:5
    }
    * html #main{
    	height:100%;
    
    }
    
    ul.rollovermenu{
    	padding:0;
    	margin:0;
    	list-style:none;
    
    }
    
    li.rollovermenu {
    
    	width:150px;/*size of image*/
    	height:33px;/* size of image*/
    	background:url("images/menu_dn.gif") no-repeat left top;/* this holds the rollover state of the image1*/
    }
    
    a.rollovermenu {
    	display:block;
    	width:150px;
    	height:33px;
    }
    
    li a.rollovermenu {
    	padding-left:10px;
    	padding-top:10px;
    	font:14px arial;
    	font-weight:bold;
    	color:#fff;  
    	text-decoration:none;
    	background:url("images/menu_up.gif") no-repeat left top; /* this holds the normal state of the image1*/
    }
    
    ul a:hover.rollovermenu{background:transparent;z-index:6; }
    /* on hover we just hide the anchor and let the image underneath show through.*/
    
     
    ul.submenu {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width:150px;
    	z-index:6; 
    }
    
    ul li.submenu {
    	position: relative;
    	width:148px;
    	border: 1px solid #000;
    	z-index:6; 
    }
    /* keep folowing styles together..........................*/
    * html ul ul.submenu {
    	margin-left:-16px;/* ie5 fix */
    	voice-family: "\"}\""; 
    	voice-family: inherit;
    	z-index:6; 
    }	
    * html ul li.submenu {float:left;	position:absolute;/* hide float from ie5*/}
    * html ul ul.submenu {
    	width:150px;	
    	w\idth:148px;
    	voice-family: "\"}\""; 
    	voice-family: inherit;
    	z-index:6; 
    }
    * html ul ul.submenu {margin-left:0;z-index:6; /* hide margin from ie5*/}
    
    /* keep above styles together .............*/
    
    li ul.submenu {
    	position: relative;/*-- fixed here */
    	top: -38px;
    	left:-999em;
    	z-index:6; 
    }
    /* Styles for Menu Items */
    ul li a.submenu {
    	display:block;
    	font:12px arial;
    	font-weight:bold;
    	text-decoration: none;
    	color: #FFF;
    	background: #495fd7; /* IE6 Bug */
    	line-height:2em;
    	height:2em;	
    	padding:0 5px 0 5px;
    	z-index:6; 
    }
    
    /* this sets all hovered lists to white */
    li:hover a.submenu, li.over a.submenu,
    li:hover li.submenu a:hover.submenu, li.over li a:hover.submenu {
    
    	color: #495fd7;
    	background-color: #fff;
    	z-index:6; 
    }
    
    /* set dropdown to default */
    li:hover li a.submenu, li.over li a.submenu {
    
        color: #FFF;
    	background-color: #495fd7;
    	z-index:6; 
    }
    li ul li a.submenu { z-index:6;  } /* Sub Menu Styles */
    li:hover ul.submenu, li.over ul.submenu { 	left:147px; z-index:6; } /* The magic */
    also, do you know why the logo isn't showing? z-index problem? it shows up on my machine, but once on the server, nothing.
    Last edited by joejoeknows; Jul 31, 2006 at 23:43.

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

    You have incorrectly applied the absolute positioning to the drop down,. It needs to be like this.

    Code:
    ul#nav li{position:relative}
    li ul.submenu {
    position:absolute;
    top: 5px;
    left:-999em;
    z-index:6; 
    }
    The sub menu needs to be absolutely placed.

    You also need to change the width so that the drop down is positioned at the edge of the parent and not to overlap.

    Code:
    li.rollovermenu {
    width:147px;/*size of image*/
    height:33px;/* size of image*/
    background:url("images/menu_dn.gif") no-repeat left top;/* this holds the rollover state of the image1*/
    }
    a.rollovermenu {
    display:block;
    width:147px;
    height:33px;
    }
    As far as I can see all the images were showing.

    You have also gone a bit mad on all those submenu classes. In fact you don't need any classes in the menu at all (that's the beauty of css) as all those elements could be targetted from outside as per my original demo.

    You just need to use something like #menu ul li for the top level and then #menu ul li li for the drop down list and similar with the anchors. The only time you would need a class is if there was one element that needed to be styles uniquely from the others.

  23. #1173
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul. I've read a lot of the pages of this thread and it seems you're still helping out on this one, so ill just use it.

    im having a problem with my layout. its a header - content(2 cols) - footer.

    everything works fine, except for the footer.

    if i use the clear:both and position: relative for the footer container, it will stick the footer to the bottom of the main content container, and that doesnt look too good.

    if i delete the clear: both and position: relative lines, the footer displays correctly at the bottom of the browser window, even if the main content isnt tall enough to fill the whole screen.

    but, in this scenario, where the clear and position lines are deleted, if the content in the main container is taller than the screen, the footer stays at the original coordinates where the footer was before scrolling down, but the content keeps on displaying below the footer. i dont know if im explaining myself correctly, but ill post small images so you see what im talking about.

    ive been struggling for days with this, and i was hoping you or anyone willing to, could help me out.

    thanks a lot. here are the images of both scenarios



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

    If you can post your code then I'm sure it will be a simple fix but there are a number of things that could cause this and I'd really need to see all the html and css.

    If you don't want the code public then you can PM me with the details otherwise post your code here or if you have a live version a link would be even better.

    You also might want to read the "footer at bottom" thread in the css faq (if you haven't seen it already - link is in my sig to the faq) as this discusses various ways of placing a footer in the required position

  25. #1175
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi SilverCore,

    If you can post your code then I'm sure it will be a simple fix but there are a number of things that could cause this and I'd really need to see all the html and css.

    If you don't want the code public then you can PM me with the details otherwise post your code here or if you have a live version a link would be even better.

    You also might want to read the "footer at bottom" thread in the css faq (if you haven't seen it already - link is in my sig to the faq) as this discusses various ways of placing a footer in the required position
    hey Paul, thanks for the quick response. I'd prefer not to post the code and source, but i just PM'ed you the address to the live version (so you can see the problem) and another address, with the css styles and html layout.

    again, thanks a lot, you're great.


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
  •