SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Progress critique please...

    Hi all - I'd appreciate if you could give my code the once over and critique it so far (being new to CSS layouts I don't want to get too far and then find I have to re-do it all again)...

    Here's the mock-up image of what I'm aiming for:
    http://www.4rentinspain.com/dev/mockup.php

    This is what I've done so far:
    http://www.4rentinspain.com/dev/

    What dya think - am I on track - should I tweak anything before moving on???

    It seems pretty consistent in all browsers that I've checked it in (ie 5.5 & 6, Netscape 7, Opera 7 & Firefox 1)...

    All input appreciated...

    kamm...

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

    Looks as though you are on the right track

    Your header has an invalid nesting. You can't nest a div inside an h1 and you don't really need to have an outer div to the header anyway. It could all be shortened to this.

    Code:
    <h1 id="header"><span id="tagline">no nonsense <span class="beige">short &amp; long term rentals</span> <span class="tan">in Spain</span></span></h1>
    The tagline is a span and the id #'header is moved into the h1.

    The shorthand for margin is this:
    Code:
    margin:0 auto
    That sets top and bottom to zero and left and right to auto. However I have heard that ie5 mac doesn't like shorthand for auto and it won't centre so leave it as you have it already.

    The min-width in the body is used to stop mozilla sliding off the left side of the screen when the page is resized smaller. However you probably don't need it because usually when the centred element has a border then moz stops it at the windows edge anyway.

    Also I note that you have applied the background image to html,body which will probably mean that it is getting drawn twice (once on each element) and slowing the page down. So just apply it to the body.

    You have also stated the background color style twice in the header.

    There are some style that you have called beige, mustard etc and while this seems a good idea now, what happens when in the future you change the colour scheme and your html is sprinkled with mustard (lol) but you have changed the stylesheet to be another colour. It will be very confusing.

    Its best to name the styles with a more generic name that applies to the task in hand.

    e.g. instead of something like .redborder you'd use .pagedivider and then it doesn't matter what colour it is if you change it later on.

    Otherwise the page looks fine.

    Paul

  3. #3
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    Terrific feedback - I've implemented all your advice, hopefully correctly.

    It's quite a learning curve getting to grips with this CSS stuff, thank goodness there are helpful people like you around to help us n00bs...



    hasta later,
    kamm...
    Last edited by kamm; Nov 8, 2004 at 15:38.

  4. #4
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1 step forward - 3 back...

    I felt like I was getting somewhere yesterday, but now I'm totally lost....

    I realised I need the footer at the bottom of the page regardless of content and either the menu or content column filling up the space (footer at the bottom & any or no column longest)... I've tried a heap of stuff out the FAQ and read through stuff from the 3 col/2 col layouts - outers, 100% heights, autos, I've tried it all obviously not the right way though...

    I guess I need a push in right direction...

    The mock-up's here:
    http://www.4rentinspain.com/dev/mockup.php

    Today's effort is here:
    http://www.4rentinspain.com/dev/myproblem.php

    feeling like a dummy,
    kamm...

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

    Putting a footer at the bottom is quite complicated and this is how it would be accomplished on your layout.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>4rentinspain.com: Holiday and long term rentals in Spain</title>
    <style type="text/css" media="screen">
    <!--
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html, body {
    margin: 0;
    padding: 0;
    } 
    body {
    background:#FEEDCC url(http://www.4rentinspain.com/dev/img/bg.gif) repeat-x;
    font:100% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    }
    div, p {
    margin-top: 0;
    }
    #header {
    position: absolute;
    top:0;
    left:0;
    margin-right: auto;
    margin-left: auto;
    width:100% ;
    height:66px;
    text-align:left;
    z-index:100;
    background:#DB0101;
    font-size: 110%;
    }
    #tagline {
    background:#DB0101 url(http://www.4rentinspain.com/dev/img/4rentinspain.gif) no-repeat;
    color:#FFAE11;
    word-spacing:-0.15em;
    width:470px;
    padding-left:170px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    display:block;
    height:66px;
    vertical-align:top;
    }
    * html#tagline{width:520px;w\idth:470px}
    #btm {position:relative;top:40px;display:block;}
    
    /*
    _________________________ HEADERS ____________________________
    */
    h1 {font-size: 110%;}
    /*
    _________________________ COLOURS ____________________________
    */
    .col_dark_gradient {color:#FF9F00;}
    .col_light_gradient {color:#FEEDCC;}
    .col_border {color:#FECF74;}
    /*
    _________________________ FONT  ______________________________
    */
    .sz_60 {font-size:60%;}
    /*
    _________________________ TOP ________________________________
    */
    .top {
    position: relative;
    background-color:#FF9F00;
    color:#FFFFFF;
    font:bold 80%/25px Verdana, Arial, Helvetica, sans-serif;
    margin-right: auto;
    margin-left: auto;
    padding:0 8px 0;
    width: 730px;
    height:25px;
    text-align: left;
    border-top:9px solid #FED077;
    border-bottom:9px solid #FED077;
    }
    * html .top {
    width:746px;/*for ie5.x win */
    w\idth:730px;/*for ie6*/
    height:43px;/*for ie5.x win */
    he\ight:25px;/*for ie6*/
    }
    .top a:link { 
    color: #BF0101; 
    text-decoration:none; 
    } 
    .top a:visited { 
    color: #BF0101; 
    text-decoration:none; 
    } 
    .top a:hover {
    color: #870404;
    text-decoration:none; 
    }
    .top a:active {
    color: #870404;
    text-decoration:none; 
    }
    #top_col_left {
    float:left;
    }
    #top_col_right {
    float:right;
    }
    /*
    _________________________ CENTRAL ____________________________
    */
    #central {
    position: relative;
    background-color:white;
    margin-right: auto;
    margin-left: auto;
    width: 746px;
    text-align: left;
    border-left: 9px solid #FED077;
    border-right: 9px solid #FED077;
    min-height:100%;}
    * html #central{
    width:764px;/*for ie5.x win */
    w\idth:746px;/*for ie6*/
    }
    /* commented backslash hack v2 \*/ 
    * html #central {height:100%;} 
    /* end hack */ 
    #inner{/*make room for header and footer*/
     border-top:9px solid #FED077;
     padding-top:57px;
     padding-bottom:78px;
    }
     
    /*
    _________________________ NAVIGATION ____________________________
    */
    #nav {
    background:#FEEDCC url(http://www.4rentinspain.com/dev/feedcc.gif) repeat-y left top;
    height:auto;
    width: 200px;
    float: left;
    margin_top:0;
    padding:0;
    }
    /*
    _________________________ CONTENT ____________________________
    */
    #content {
    background:#FF9F00 url(http://www.4rentinspain.com/dev/ff9f00.gif) repeat-y left top;
    height:auto;
    width: 537px;
    float: right;
    border-left:9px solid #FED077;
    }
    * html #content{
    width:546px;/*for ie5.x win */
    w\idth:537px;/*for ie6*/
    }
    
    /*
    _________________________ FOOTER ____________________________
    */
    .footer {
    position: relative;
    background-color:#FF9F00;
    color:#FFF;
    font:bold 80% Verdana, Arial, Helvetica, sans-serif;
    line-height:45px;
    text-align:center;
    margin-right: auto;
    margin-left: auto;
    width: 746px;
    height: 45px;
    border-top:9px solid #FED077;
    border-bottom:9px solid #FED077;
    margin-top:-63px;
    }
    * html .footer{
    width:764px;/*for ie5.x win */
    w\idth:746px;/*for ie6*/
    height:54px;/*for ie5.x win */
    he\ight:45px;/*for ie6*/
    }
    .footer a:link { 
    color: #FFFFFF; 
    text-decoration:none; 
    } 
    .footer a:visited { 
    color: #FFFFFF; 
    text-decoration:none; 
    } 
    .footer a:hover {
    color: #BF0101;
    text-decoration:none; 
    }
    .footer a:active {
    color: #BF0101;
    text-decoration:none; 
    }
    
    -->
    </style>
    </head>
    <body>
    <div id="central"> 
      <div id="inner"> 
    		<div class="top"> 
    	  <div id=top_col_left>You are here: <a href="index.php">HOME</a> > <a href="search.php">RENTALS</a> 
    		> <a href="rental.php">VILLA MARAVILLOSO</a></div>
    	  <div id=top_col_right>Text size: <a href="small.php" title="Click to decrease the text size">Smaller</a> 
    		<span class="sz_60">A</span>A <a href="larger.php" title="Click to increase the text size"> 
    		Larger</a></div>
    	</div>
    <div id="nav">menu goes here</div>
    	<div id="content">this is content</div>
      </div>
    </div>
    <div class="footer">&copy; <a href="<A href="http://www.4rentinspain.com/">4rentinspain.com</a">http://www.4rentinspain.com/">4rentinspain.com</a> 
      2004 &bull; <a href="tos.php">Terms of Service</a> &bull; <a href="privacy.php">Privacy 
      Policy</a> &bull; <a href="sitemap.php">Site Map</a></div>
    <div id="header">
      <div id="tagline"><span id="btm">no nonsense <span class="col_light_gradient">short 
    	&amp; long term rentals</span> <span class="col_border">in Spain</span></span></div>
    </div>
    </body>
    </html>
    (The above is only rough so you may need to tidy up box model dimensions etc.)

    If you want full length menu and content columns then you would need a repeating background gif on the #central element to imitate the columns.

    However the footer technique should be visible.

    Paul

  6. #6
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Paul,

    I had been in the process of pulling apart your http://www.pmob.co.uk/temp/2colfixedtest_4.htm layout when you posted yesterday and ended up with this:
    http://www.4rentinspain.com/dev/index.php

    It seems to be working in everything I've tested it in although 100% height doesn't seem to work in Safari 1.2 according to this:
    http://rubix.retroweb.net/~danvine/icapture/29068.png

    height/min-height is definitely confusing what with all the different hacks that need to be applied. Have I applied them correctly, any missing or too many..?

    This page will be the template for the entire site so I'd like to make sure I get right before moving on, so any other input is also appreciated...



    kamm...

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

    It looks pretty good so far

    You can lose the height:100% from the main outer style and then get rid of the extra moz style as well.
    Code:
    #outer {
    min-height:100%;
    width:746px;
    margin-left:auto;
    margin-right:auto;
    background:#FEEDCC url(img/bg_central.gif) repeat-y;
    border-left:9px solid #FECF74;
    border-right:9px solid #FECF74;
    margin-bottom:-63px;
    }
    * html #outer {
    width:764px;/*for ie5.x win */
    w\idth:746px;/*for ie6*/
    }
    /* commented backslash hack v2 \*/
    * html #outer {height:100%;}
    /* end hack */
    Moz and good browers get min-height (which ie ignores) and will keep the page to min-height as required and height will default to auto. You then just need to provide IE with the height:100%.

    In my main 3 col demo there is a hack for min-height in safari and it works like this.

    Code:
    html>body  #minHeight{float:left;width:0px;height:100%;margin-bottom:-63px;} /*safari wrapper */
    [/code]
    <body>
    <div id="minHeight"></div><!-- first div on page -->
    <div id="outer">

    [/code]

    This is like a giant spacer that holds the page open (and apparently it works for safari but I haven't got safari to check but does seem to work from the screen capture.)

    I also believe that you can use display:table (table-cell) for a similar effect.

    See here:

    http://blog.vinniegarcia.com/oldstuf...eight-part-two

    (min-height doesn't work in ie5 mac and it doesn't undertand 100% height either. I have made a workaround but it means dropping down to html 4 without uri to implement quirks mode where 100% height takes effect.)

    Paul

  8. #8
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul...

    Now to start on the nav...

    kamm...

  9. #9
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got this looking much like the mock-up now...

    I'm sure I could have made the code more compact in places, if anyone wants to offer any suggestions on anything I'm all ears...

    The mock-up screenshot:
    http://www.4rentinspain.com/dev/4rent.css

    The page:
    http://www.4rentinspain.com/dev/

    The CSS:
    http://www.4rentinspain.com/dev/4rent.css


    Thanks,
    kamm...

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

    It looks pretty good to me

    I've had a quick look at the css and nothing obvious jumps out. The code seems pretty compact already without being overfly so.

    Just make sure you also test in ie5 and 5.5 as they still have a big market share but other than that its looking good

    Paul

  11. #11
    SitePoint Zealot kamm's Avatar
    Join Date
    Nov 2003
    Location
    Espaņa
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul,

    Amazingly it seems OK in ie 5.x

    The icapture thingy @ http://www.danvine.com/icapture/ doesn't seem to be working just now, so I haven't had a chance to test it in anything Mac. If anyone out there is Mac-enabled I'd love to know if it resembles the screenshot...

    I have feeling I've messed up a bit using px for width, height, borders, margins and padding... It doesn't seem to do too well when you increase Text size more than once in Firefox. I suppose I should have used ems everywhere instead, but I imagine that would be a nightmare to fix now..!

    Oh yeah, other people are allowed to comment too ya know...

    hasta pasta,
    kamm...


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
  •