SitePoint Sponsor

User Tag List

Page 14 of 66 FirstFirst ... 41011121314151617182464 ... LastLast
Results 326 to 350 of 1630
  1. #326
    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,

    All you need to do is set a height for the background (4px) and set overflow to hidden because Ie won't render an element less than the current line-height/font-size.
    Code:
    html, body { /* commented backslash mac hidinghack \*/ 
     height: 100%;
     } /* end hack */ 
    body {
     padding: 0px;
     margin: 0px;
     text-align: center;
     background: #fff000;
     min-width:1000px;/* for mozilla*/
     }
    #container {
     background: #fff000 url(http://www.damjanator.ch/projects/yp...s/body_bgd.gif) repeat-y left top;
     color: #000000;
     width: 1004px;
     margin-left: auto;
     margin-right: auto;
     text-align: left;
     position: relative;
     min-height: 100%;
     padding: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
     }
    * html #container {
     height: 100%;
     } /*for IE as treats height as min-height anyway*/
    #header{
     color: #000000;
     background: #fff000;
     min-height: 100px;
     margin: 0px;
     padding-top: 26px;
     padding-bottom: 0px;
     padding-left: 39px;
     padding-right: 0px;
     }
    * html #header {
     height: 127px;
     }
    #left {
     position: relative;
     width: 202px;
     float: left;
     display: inline;
     margin: 0 8px 0 10px;
     padding-top: 10px;
     padding-right: 11px;
     padding-bottom: 0px;
     padding-left: 10px;
     text-align: center;
      }
      
    #right {
     position: relative;
     width: 175px;
     float: right;
     display: inline;
     margin: 5px 20px 5px 9px;
     padding: 0px;
     }
     
    #nav {
     width: 777px;
     background: #FFCC00 url(http://www.damjanator.ch/projects/yp...orange_bgd.gif) repeat-y right top;
     margin-left: 10px;
     padding: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
    }
     
    #centrecontent {
     margin-left: 240px;
     margin-right: 218px;
     }
     
    * html #centrecontent {
     height: 1%;
     }/* combat IE's 3 pixel jog */
    #footer {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     clear: both;
     height: 50px;
     background: #FFF000;
     color: #000000;
     text-align: center;
     margin: 0px;
     padding: 0px;
     }
    * html #footer { /*only ie gets this style*/
     \height: 52px; /* for ie5 */
     he\ight: 50px; /* for ie6 */
     }
     
    #clearfooter {
     clear: both;
     height: 60px;
     } /*needed to make room for footer*/
     
    /*div, p  {
     margin-top: 0;
     }/*clear top margin for mozilla*/
    #breadcrumb {
     background: #fff000;
     min-height: 40px;
     margin: 0px 0px 0px 10px;
     width: 777px;
     padding: 0px;
     }
     
    * html #breadcrumb {
     height: 22px;
     }
    div#top_nav {
     background-image: url(http://www.damjanator.ch/projects/yp...orange_top.gif);
     background-repeat: no-repeat;
     background-position: left top;
     width: 777px;
     background-color: #fff000;
     height:4px;
     overflow:hidden;
    }
    
    /********************* MAIN LAYOUT END ***********************/
    div#bottom_nav {
     background-image: url(http://www.damjanator.ch/projects/yp...nge_bottom.gif);
     background-repeat: no-repeat;
     background-position: top left;
     background-color: #fff000;
     width: 777px;
     height: 4px;
     overflow:hidden;
    }
    
    /**** LINK-tag style sheet styles.css ****/
    .imgFloatRight { /* float images right */
     float: right;
    }
    .imgFloatLeft { /* float images left */
     float: left;
    }.logoRightPadding {
     margin: 0px 23px 0px 0px;
     padding: 0px;
    }


    You can also get rid of the 200px height in * html #nav as you will be relying on content to stretch it (unless you have pages with little content of course and you want to hold it open. In that case you will need to give a min-height for other browsers as well in the original style.)

    You could eliminate some of those nestings for your corner divs as you could place the top corner gif in the nav elements itself instead of making a new one called top_nav.

    You don't need the body-nav unless you are going to use another background image.

    So you really only need to divs for the corners. The main nav for the top corners and content and one at the bottom to finish it off. Note that the image in the bottom nav should be at top left and not bottom.

    Hope that helps.

    Paul

    BTW you can change the image paths back to relative as I just use absolute so I can see whats going on.

  2. #327
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot man! I'm going to try this C ya later

    best,
    jazz

  3. #328
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again Paul,

    I have a problems with margins and paddings and whit curved corder image for center content and right column. I tryed everything but something wrong here. Please take a look of my code, here is a html file and here is a CSS file for layout. I need your help with this man In the meantime, I'm going to analyse my code to see what's going wrong because Firefox show some strange margins.

    thanks a lot man,
    Jazz

  4. #329
    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 drag the right corners ito position using a negative margin.

    The bottom border needs to go in the top of the footer because that is alway under the columns and will always be at the bottom.

    Code:
     
    div#top_right_column {
    background-color: #fff000;
    background-image: url(http://www.damjanator.ch/projects/yp...top_border.gif);
    background-repeat: no-repeat;
    background-position: left top;
    width: 199px;
    height: 4px;
    margin: 0px;
    margin-left:-8px;/*negative margin*/
    padding: 0px;
    overflow: hidden;
    }
    Code:
    ......................................
    .........................................	
     content goes here : </p>
    </div>
    <!--------------------- MAIN CONTENT START HERE -------------------->
    <!--------------------- CLEAR FOOTER START HERE -------------------->
    <div id="clearfooter"></div>
    <!-- to clear footer -->
    <!--------------------- CLEAR FOOTER END HERE -------------------->
    --------------------- FOOTER START HERE -------------------> 
    <div id="footer"> 
    	 <div id="container_bottom_border"></div>
    <p>Footer</p>
    </div>
    <!--------------------- FOOTER END HERE -------------------->
    </div>
    <!--------------------- CONTAINER END HERE -------------------->
    </body>
    </html>
    As I mentioned above you could get away with less nestings if you use the existing elements for the borders rather than creating new ones.

    Paul

  5. #330
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey man,

    I made some changes on top border positions and now all works good. But I have a problem with margins of that top border div's (left, top oragne and right columns). I used absolut positioning for that div's and in that way I get rid of nested div's. The height of mentioned div's is 4px. And now all looks great in IE but in Firefox I get some strange bottom margin or padding for every div which has 4px height. I tryed to fix that with line-height: 0; or something like that but without any result. So what do you think about this strage bottom margins???

    html file: http://www.damjanator.ch/projects/yp/index.html
    css file: http://www.damjanator.ch/projects/yp...sic_layout.css

    thanks a lot Paul,
    Jazz

  6. #331
    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'd used my changes above then you wouldn't have needed any other fixes

    Anyway now you are placing the corners above the element then you need to address the default margins of any immediate following content.

    In your nav you only have paragraphs at the moment so you need to address the top margin on the p element.
    Code:
    #nav p{margin-top:0}
    You still need to move that bottom border into the footer as in my previous example as it won't work anywhere else . Remember that the columns have unlimited height so there is no way for you to place something at the bottom of them bacause they will grow with content.

    The only constant is the footer so that where that bottom border must go

    Paul

  7. #332
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He he you are amazing Paul I move bottom border for container div in footer so now all looks great. Thanks for your help man! I appriciate that. And I'll be pleased if I can help you on some way like you helping me I'm going now to set up typo for this template. Here is what I have so far owning to you.

    kindly regards,
    Jazz

  8. #333
    SitePoint Member
    Join Date
    Aug 2004
    Location
    NH USA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Stupid Question

    Ok here is the First stupid question of the century....

    I am working with a modified version of this code in a 2 col layout
    (thanks to paul's tireless work to keep this going )... I am trying to refit my site so that i can skin it and apply several different styles (and layout) to the site (like csszengarden only not as big) but every new layout i find has a different nesting of divs to put the content in so i end up having different html files so i can make the new layout work.

    Can anyone explain the reasoning behind nesting div inside of div inside of div??? My head hurts trying to find a reasonable markup container that i don't have to modify every time I try a new layout. It seams to me this would be the holy grail of all CSS design... Finding a basic html markup structure that you can use to make a three column, two column, one column, left, right, or top (just below the header) navigation ... Does this make sense?? I feel like i am rambleing.

    Paul your explination of this method is fabulous! Thanks for the work but i just can't seem to set up a structured markup that is one style fits all..



    NOW the second question Paul is specifically from your tutorial on this technique found on your site and i Quote...

    It's a shame that when most people convert from table layout to CSS the first thing they want to do is copy a table layout. I've always tried to avoid the problem altogether and use designs that suit CSS more than they suit the table layouts of old.

    I would be interested to see some of these layouts being new to the CSS world i still think in tables and everything i see still looks like it is trying to resemble table layout.... Please help me break out of my table mindset!

    RAKESS

  9. #334
    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)
    different styles (and layout) to the site (like csszengarden only not as big) but every new layout i find has a different nesting of divs to put the content in so i end up having different html files so i can make the new layout work.
    Well the css zengarden has been specially designed and structured to allow multiple styling because there are many extra elements in there just for this purpose. Your best bet is to study the code and understand the techniques used.

    Obviously css can style and change the html but the html needs to also have a structure that allows this if you want to change more than simple styling. Of course this all does depend on what you are trying to do. In some cases no extra work is involved.

    For example changing a left column to be a right column could be as simple as changing float left to float right. But sometimes its not that simple if the structure isn't in place to do what you want.

    It's a shame that when most people convert from table layout to CSS the first thing they want to do is copy a table layout. I've always tried to avoid the problem altogether and use designs that suit CSS more than they suit the table layouts of old


    Well one of the things that table layouts are good at is equalising columns because thats what they do automatically. CSS is more about independent elements and positioning and so its best not to try to co-erce table beahviour onto your css layouts.

    As you can see from zen garden there aren't many 3 columns header footer layouts but the layouts still look pretty good.

    Can anyone explain the reasoning behind nesting div inside of div inside of div???
    It all depends on the layout but most elements need containers of some sorts but your right its best to avoid nesting too many elements where possible. There are obvioulsy good and bad reasons for nesting but it all depends on the use its put to I suppose.

    Its hard to answer your question fully as it covers a lot of points but if you have an example of the type of thing you were trying to do then maybe we could come up with simpler alternatives (And then again maybe not )

    Paul

  10. #335
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello guys,

    I have one problem. Please take a look of this layout. How to get rid of this 1px left margin/padding in footer? In mozzila looks great but in IE I got this 1px left padding or margin whatever

    thanks,
    Jazz

  11. #336
    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,

    Thats strange on one computer the footer looks out in ie6 and on my new computer it looks ok.

    The page is also out in firefox.

    For ie5 and 5.5. you need text-align:center on a parent div on order to centre correctly. Or you could simply give a margin-left to line it up.

    Ie needs a width on your footer as you have done something strange with the voice family hack.

    This should look better in most browsers. I've just given margin lefts so that ie5 centres correctly instead of using too many margin:autos.

    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>Extra Casa - Salon italijanskog i španskog nameštaja</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="twothirty media inc. - www.twothirty.com" />
    <meta name="copyright" content="Copyright 2003 - Wildly Sophisticated Media Inc." />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <script language="javascript" type="text/javascript" src="http://www.yuyellow.com/temp/scripts/global.js"></script>
    <style>
    /**** Inline STYLE-tag style sheet ****/
    #menu1Container { visibility:hidden; left:0px; top:93px; overflow:hidden; z-index:10; }#menu1Container, #menu1Content { position:absolute; width:150px; height:350px; }
    
    /**** Inline STYLE-tag style sheet ****/
    #menu2Container { visibility:hidden; left:0px; top:93px; overflow:hidden; z-index:10; }#menu2Container, #menu2Content { position:absolute; width:150px; height:350px; }
    
    /**** Inline STYLE-tag style sheet ****/
    #menu3Container { visibility:hidden; left:0px; top:93px; overflow:hidden; z-index:10; }#menu3Container, #menu3Content { position:absolute; width:150px; height:350px; }
    
    /**** Inline STYLE-tag style sheet ****/
    #menu4Container { visibility:hidden; left:0px; top:93px; overflow:hidden; z-index:10; }#menu4Container, #menu4Content { position:absolute; width:150px; height:350px; }
    
    /**** Inline STYLE-tag style sheet ****/
    #menu5Container { visibility:hidden; left:0px; top:93px; overflow:hidden; z-index:10; }#menu5Container, #menu5Content { position:absolute; width:150px; height:350px; }
    
    /**** Inline STYLE-tag style sheet ****/
    #menu6Container { visibility:hidden; left:0px; top:93px; overflow:hidden; z-index:10; }#menu6Container, #menu6Content { position:absolute; width:150px; height:350px; }
    
    /**** Inline STYLE-tag style sheet ****/
    #menu7Container { visibility:hidden; left:0px; top:93px; overflow:hidden; z-index:10; }#menu7Container, #menu7Content { position:absolute; width:150px; height:350px; }
    
    /**** LINK-tag style sheet styles.css ****/
    /* CSS Document */
    body {
     background: #E1E5CF;
     margin: 0 ;
     padding: 0;
     font-size: 75%;
     text-align:center;
    }
    .reset {
     display: block; 
     clear: both; 
     font-size: 1px; 
     height: 1px; 
     line-height: 1px; 
     margin: 0;
    }
    form { margin: 0; }
    #body-container {
     margin: 0px auto;
     padding: 0px;
     width: 739px;
     background-image: url(http://www.yuyellow.com/temp/images/container_bgd.jpg);
     background-repeat: repeat-y;
     background-position: center top;
     text-align:left;
    }
    #replacelogo a {
     text-indent: -100em;
     overflow: hidden;
     text-decoration: none;
     background: url(http://www.yuyellow.com/temp/images/header.gif) no-repeat left top;
     height: 81px;
     width: 711px;
     margin: 0 0 0 14px;
     padding: 0px;
     display: block;
    }
    #topnav {
     width: 711px;
     margin: 0 0 0 14px;
     padding: 0;
     display: block;
     border-bottom: 3px solid #F04829;
    }
    
    #body-content .left {
     width: 711px;
     text-align: left;
     background-color: #FFFFFF;
     margin: 0 0 0 14px;
     padding: 0px;
    }
    #body-content p {
     line-height: 18px;
     color: #333333;
     margin: 0px 35px;
     padding: 0px 0px 20px;
     font-family: Arial, Helvetica, sans-serif;
    }
    #footer {
     background: url(http://www.yuyellow.com/temp/images/footer_bgd.gif) repeat-x left top;
     padding: 0px;
     width: 711px;
     margin: 0 0 0 14px;
     text-align: left;
    }
    #photoborder {
     width: 711px;
     padding: 0px;
     margin:0 0 0 14px;
     border-bottom: 3px solid #F04829;
     background-color: #FFFFFF;
    }
    .login {
     text-align: right;
     padding-right: 20px;
     font-size: 9px;
    }
    #imageblurb {
     position: absolute;
     text-align: center;
     width: 200px;
     margin: 30px 0 0 480px;
     padding: 0;
     background: #FFFFFF;
     border-bottom: 1px solid #990000;
     border-right: 1px solid #990000;
     z-index: 5;
    }
    #imageblurb p {
     font-size: 9px;
     line-height: 14px;
     color: #666666;
     padding: 5px;
     margin: 0;
     text-align: left;
    }
    .fulltable {
     width: 450px;
     background-color: #FFFFFF;
     border: 1px solid #990000;
    }
    .wotm {
     width: 450px;
     background-color: #996666;
     color: #FFFFFF;
     font-size: 9px;
     margin-bottom: 1px;
     padding: 10px;
    }
    .dotm {
     width: 450px;
     background-color: #6A6A6A;
     color: #FFFFFF;
     font-size: 9px;
     margin-bottom: 1px;
     padding: 10px;
    }
    .fulltableReact {
     background: url(http://www.yuyellow.com/temp/images/reacttothis.gif) no-repeat top left;
     width: 450px;
     border: 1px solid #990000;
    }
    .poll {
     background: url(http://www.yuyellow.com/temp/images/...ssionspoll.gif) no-repeat top left;
     width: 148px;
     border: 1px solid #990000;
    }
    .fulltable a { color: #990000;}
    .fulltable a:hover { color: #000000;}
    .cellnoShade {
     font-size: 9px;
     padding: 5px;
    }
    .cellShadelight {
     font-size: 9px;
     padding: 5px;
     background-color: #F5F5F5;
    }
    
    .cellShade {
     font-size: 12px;
     padding: 5px;
     background-color: #DCDCDC;
    }
    .submitbutton {
     font: bold 13px verdana;
     padding: 0 10px 0 10px;
    }
    .resetbutton {
     font: normal 13px verdana;
     padding: 0 10px 0 10px;
    }
    .formboxNormal {
     font: normal 12px verdana;
     width: 160px;
    }
    .formboxBig {
     font: normal 12px verdana;
     width: 210px;
     height: 150px
    }
    .formboxBigger {
     font: normal 12px verdana;
     width: 430px;
     height: 150px
    }
    .formboxDate {
     font: normal 12px verdana;
     width: 40px;
    }
    #replacespavacesobe, #replacespavacesobe span {
     text-indent: -100em;
     overflow: hidden;
     text-decoration: none;
     background: url(http://www.yuyellow.com/temp/images/...nevne_sobe.jpg) no-repeat left top;
     height: 196px;
     width: 711px;
     margin:0;
     padding: 0px;
     display: block;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #FFFFFF;
    }
    div#slogan {
     background-image: url(http://www.yuyellow.com/temp/images/slogan_bgd.gif);
     background-repeat: repeat-x;
     background-position: left top;
     text-align: left;
     height: 36px;
     width: 711px;
     margin:0 0 0 14px;
    }
    div#help_menu {
     font-family: Arial, Helvetica, sans-serif;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 20px;
     margin-left: 0px;
     padding-top: 9px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 16px;
     color: #000000;
     text-decoration: none;
     font-size: .95em;
    }
    div#help_menu a, div#help_menu a:visited {
     font-family: Arial, Helvetica, sans-serif;
     color: #F04829;
     text-decoration: underline;
    }
    div#help_menu a:hover, div#help_menu a:active {
     font-family: Arial, Helvetica, sans-serif;
     color: #F04829;
     text-decoration: none;
    }
    h1 {
     background-image: url(http://www.yuyellow.com/temp/images/...avace_sobe.gif);
     background-repeat: no-repeat;
     text-indent: -100em;
     margin: 0px;
     padding: 0px 0px 15px;
    }
    div#footer p {
     font-family: Arial, Helvetica, sans-serif;
     color: #999999;
     text-decoration: none;
     margin: 0px;
     padding: 8px 8px 0px;
     font-size: .95em;
    }
    div#body-content .left a, div#body-content .left a:visited {
     color: #F04829;
     text-decoration: underline;
    }
    div#body-content .left a:hover, div#body-content .left a:active {
     text-decoration: none;
    }
    
    /**** LINK-tag style sheet menu.css ****/
    /* CSS Document */
    #menu2Container {
     visibility: hidden;
     left: 0px;
     top: 111px;
     overflow: hidden;
     z-index: 10;
     }
    #menu2Container, #menu2Content {
     position: absolute;
     width: 150px;
     height: 350px;
     }
    #menu4Container {
     visibility: hidden;
     left: 0px;
     top: 111px;
     overflow: hidden;
     z-index: 10;
     }
    #menu4Container, #menu4Content {
     position: absolute;
     width: 150px;
     height: 350px;
     }
    .menu a, .menu a:visited {
     border-bottom: 1px solid #F04829;
     border-left: 1px solid #F04829;
     border-right: 1px solid #F04829;
     background-color: #FFFFFF;
     text-align: left;
     font-size: .95em;
     color: #000000;
     display: block;
     padding: 3px 5px;
     text-decoration: none;
     font-family: Arial, Helvetica, sans-serif;
     margin: 0px;
    }
    .menu a:hover, .menu a:active {
     background-color: #F4F4F4;
    }
     
    </style>
    </head>
    <body>
    <a name="pagetop"></a> 
      <div id="body-container"> 
    	<!-- Container start -->
    	<div id="header"> 
    	  <!-- Header start -->
    	  <div id="replacelogo" title="Wildly Sophisticated Media"><a href="#">Extra 
    		Casa</a></div>
    	</div>
    	<!-- Header end -->
    	<div id="topnav"> 
    	  <!-- Main navigation start -->
    	  <a href="#" onmouseover="changeImage('nav01','nav01Over'); return true;" onmouseout="changeImage('nav01','nav01'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav01.gif" alt="" name="nav01" width="60" height="29" border="0" id="nav01" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="changeImage('nav02','nav02Over'); return true;" onmouseout="changeImage('nav02','nav02'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav02.gif" alt="" name="nav02" width="59" height="29" border="0" id="nav02" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu2'); changeImage('nav03','nav03Over'); return true;" onmouseout="ypSlideOutMenu.hideMenu('menu2'); changeImage('nav03','nav03'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav03.gif" alt="" name="nav03" width="74" height="29" border="0" id="nav03" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="changeImage('nav04','nav04Over'); return true;" onmouseout="changeImage('nav04','nav04'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav04.gif" alt="" name="nav04" width="68" height="29" border="0" id="nav04" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="ypSlideOutMenu.showMenu('menu4'); changeImage('nav05','nav05Over'); return true;" onmouseout="ypSlideOutMenu.hideMenu('menu4'); changeImage('nav05','nav05'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav05.gif" alt="" name="nav05" width="116" height="29" border="0" id="nav05" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="changeImage('nav06','nav06Over'); return true;" onmouseout="changeImage('nav06','nav06'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav06.gif" alt="" name="nav06" width="69" height="29" border="0" id="nav06" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="changeImage('nav07','nav07Over'); return true;" onmouseout="changeImage('nav07','nav07'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav07.gif" alt="" name="nav07" width="88" height="29" border="0" id="nav07" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="changeImage('nav08','nav08Over'); return true;" onmouseout="changeImage('nav08','nav08'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav08.gif" alt="" name="nav08" width="74" height="29" border="0" id="nav08" /></a><img src="http://www.yuyellow.com/temp/images/..._separator.gif" alt="" width="3" height="29" border="0" /><a href="#" onmouseover="changeImage('nav09','nav09Over'); return true;" onmouseout="changeImage('nav09','nav09'); return true;"><img src="http://www.yuyellow.com/temp/images/menu/nav09.gif" alt="" name="nav09" width="79" height="29" border="0" id="nav09" /></a></div>
    	<!-- Main navigation end -->
    	<div id="slogan"><img src="http://www.yuyellow.com/temp/images/slogan.gif" alt="" border="0" /></div>
    	<div id="photoborder"> 
    	  <div id="replacespavacesobe" title="Spavace sobe"><span>Spavace sobe</span></div>
    	</div>
    	<div id="body-content" > 
    	  <!-- Body content start -->
    	  <div class="left"> 
    		<!-- Left start -->
    		<div id="help_menu"><a href="#">Home</a> > <a href="#">Gamma</a> > Spavace 
    		  sobe</div>
    		<h1><span>Spavace sobe</span></h1>
    		<p>Wildly Sophisticated Media is redefining career development. We're 
    		  making it fun, edgy and entertaining, and this is your chance to connect 
    		  with us in person. Get set to give your work - or your workplace - a 
    		  great huge shot of adrenaline.</p>
    		<p>Author and career builder Nicole Williams has already reached thousands 
    		  of people across North America with her trademark blend of humor, energy 
    		  and real-world information. For Nicole, talking about career development 
    		  rivals even shoe shopping. There's truly nothing she's more passionate 
    		  about. From TV and radio appearances to college seminars and presentations 
    		  for the World Services Congress, Nicole's broad experience and reputation 
    		  as a sought-after speaker will be your career advantage. </p>
    		<p>Oh, and in case you're wondering, <a href="keynoteandgroup.php">workshops</a>, 
    		  <a href="seminars.php">seminars</a> and <a href="corpconsulting.php">consulting 
    		  opportunities</a> are always open to Wildly Sophisticated men.</p>
    		<p>Contact Wildly Sophisticated at 1-888-920-3590 for more information 
    		  about corporate consulting opportunities, or e-mail us at <a href="mailto:info@wildlysophisticated.com">info@wildlysophisticated.com</a>.</p>
    	  </div>
    	  <!-- Left end -->
    	  <div id="footer"> 
    		<p>Copyright © Yellow Pages Co. - All rights reserved.</p>
    	  </div>
    	  <!-- Footer -->
    	</div>
    	<img src="http://www.yuyellow.com/temp/images/...ner_bottom.jpg" alt="" width="739" height="15" border="0" /></div>
      <!-- Container end -->
    <!---------------------- Menu start ---------------------->
    <div id="menu2Container"> 
      <div id="menu2Content" class="menu"> <a href="#">Dnevne sobe</a> <a href="#">Spavace 
    	sobe</a> </div>
    </div>
    <div id="menu4Container"> 
      <div id="menu4Content" class="menu"> <a href="#">Ebac</a> <a href="#">Otten</a> 
      </div>
    </div>
    <!---------------------- Menu end ---------------------->
    </body>
    </html>
    Hope that helps.

    Paul

  12. #337
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to THANK YOU Paul This code works good in both, IE and Firefox, browsers.

    be well,
    jazz

  13. #338
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there

    Got another wee problem with a new page I have created

    http://www.lambandflag.co.uk/music3.php

    For some reason in IE and opera, I am getting some lines extending below the address details that say "The Lamb and Flag etc"

    Works fine in Netscape 7 and Firefox. Any ideas how to fix this?

    Thanks

    Paul

  14. #339
    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,

    Hmmm thats strange I copied the page locally and the problem disappeared. I linked to your css and images and the problem wasn't there either.

    Aa I can't duplicate the problem then all I can suugest is tha you make the footer a feww pixels longer and see if it rubs the borders out.

    Code:
    #footer {
      text-align: center;  
      width: 738px;
    etc........................
    I also note that you have some id#s defined like this which also seem to upset a few things.
    Code:
    <div id =" events">
    Take out the spaces e.g.
    Code:
    <div id="events">
    Other than that I can't think what else to try as I can't duplicate the problem locally.

    Paul

  15. #340
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I've tweaked your layout a bit, and I think now that my tweaks may have been my undoing as I continue building the page out.

    I'm using a left and right fixed column, a flexible center, with a header and footer. The trouble I'm having now is that the footer comes in at the bottom of the content in the left column, even if the center column continues below that.

    If you have a couple of minutes to look at what I've done, what's the best way to get everything to you? I could post my CSS file here, but it's likely just WAY too much to read.

    Or I could simply forward the URL to you.

    Your brilliant layout has made my life easier, tell me how I can solve this problem while making YOURS easier in terms of "chipping in".

    Regards,
    Neil
    imusicians.com
    The new website for musicians.
    More features. Less money. And a lot less bull.

  16. #341
    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 Neil,

    You can PM me the url if you don't want it live yet and I'll take a look.

    Sounds like it should be a matter of a tweaking a few dimensions to match up.

    Paul

  17. #342
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks Paul, making the footer slightly wider seems to do the trick. Not sure why the problem didnt happen locally, maybe due to the fact it uses PHP?

    Thanks

    Paul

  18. #343
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello guys,

    I have a little problem when previewing my page in Firefox. In IE everything looks great but Firefox overlaping elements in main content. Here is a link to my page. Also I can't see flash elements in Firefox? Why? PLease help me with this I need to finish this project in the next 2 days

    Thank you guys,
    Jazz

  19. #344
    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 couldn't see what elements were overlapping in firefox. The only problem I noticed in firefox was your js menu was staying displayed all the time after rolling over the main menu.

    (You'll need to ask in the js forum about that if thats not something you were working on fixing yourself.)

    Paul

  20. #345
    SitePoint Enthusiast scattermachine's Avatar
    Join Date
    Sep 2004
    Location
    USA
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW!!!

    Before I saw your link, I spent a day hacking a 2 colomn stretchie with a header and footer. It was fun, but next time I'm going straight to your examples!

    The solution I came up with was identical to yours, so I guess I got it right.

    Btw, I got the idea from reading the CSS book from Sitepoint, which I highly recommend:

    * HTML UTOPIA: DESIGNING WITHOUT TABLES USING CSS* by Dan Shafer

    It's worth the price of admission. CSS de-mystified!

    And I can't wait to see more of your work... (drools)

  21. #346
    SitePoint Addict langedav's Avatar
    Join Date
    Apr 2002
    Location
    Rotterdam, The Netherlands
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hallo POaul, hopefully you can help me out here. I am working on a 2 column layout using one of your models but now there's something i do not understand.

    http://www.haring.nl/site/test2.htm in this page you'll notice the space between the content div and the sidebar div and i just can't figure out how to get rid of this space. (this is an IE only problem)

    In this page http://www.haring.nl/site/test.htm you can see that there is no problem using Mozilla.

    Thanks Dave

  22. #347
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Pennsylvania
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been struggling with an IE vs. “other” browsers problem. I use Firefox and developed my web page accordingly. However, after realizing the majority of users use some version of IE I looked at my page with IE6 and was disappointed with what I saw. All of the columns all started at the left side of the page rather than the three column format I wanted. Rearranging the <div> didn’t help. What I want is a three column page where the left and right columns do not move and only the center scrolls (header and footer can also move but not necessary).

    This is my first time working with CSS and got my ideas from reading many articles posted on the web. Can anyone suggest a fix? The page can be found at:

    HTML http://users.adelphia.net/~tpetchy/copyofindex.html
    CSS http://users.adelphia.net/~tpetchy/css/tpetchy1.css

  23. #348
    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 Dave,
    in this page you'll notice the space between the content div and the sidebar div and i just can't figure out how to get rid of this space.
    I'm not exactly sure where I'm looking, can you explain a bit more for me please

    Its probably the ie 3 pixel jog but I couldn't really see much difference on those examples above.

    Paul

  24. #349
    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 tpetchy,

    You are using position:fixed which ie doesn't understand. The best you can do is give ie position absolute instead using the star selector hack (see faq).

    Code:
    .left {
    		font:10pt Verdana,Helvetica, Arial, sans-serif;
    		background-color: transparent;
    		position:fixed;
    		top:60px;
    		left:6px;
    		width:110px;
    		}
    * html .left {position:absolute}		
    
     
    .right {
    		font:10pt Verdana,Arial, Helvetica, sans-serif;
    		background-color: transparent;
    		position:fixed;
    		top:150px;
    		right:6px;
    		width:150px;
    		}
    * html .right {position:absolute}		
    .menu {
    		font-family:Verdana,sans-serif;
    		background-color: transparent;
    		width:110px;
    		position:fixed;
    		top:150px;
    		left:6px;
    		}
    * html .menu {position:absolute}
    That should give you back your columns but may need further tweaking.

    Paul

  25. #350
    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 Scattermachine,

    Glad you found it useful

    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
  •