SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid layout issues

    Hey,

    Can anyone help me with this design: http://www.freemanholland.com/cow/

    It looks ok in firefox, but not in Ie7/8

    How can i fix?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Potsdam/Germany
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by billy_111 View Post
    It looks ok in firefox, but not in Ie7/8
    Can't see any differences between Opera 10 and IE 8...

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    thanks for replying, it should look like this:

    http://www.freemanholland.com/clients/cow/01_home.jpg

    Ignore the additional stuff, i'm trying to get the layout right. The footer should appear higher and also the #header div appears to low down, this is only in IE7 and 8.

    Any ideas how i can fix?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Potsdam/Germany
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Ignore the additional stuff, i'm trying to get the layout right. The footer should appear higher and also the #header div appears to low down, this is only in IE7 and 8.
    Fix what? I didn't get it. This is (see attachment) what I see on Windows7 using a screen resolution of 1600x900 Pixel - no matter which browser*.
    It didn't fits to your screenshot nor to your description.

    *) tested on Opera 10.52, Firefox 3.6 and MS IE 8
    Attached Images Attached Images

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I'm awaiting for your screenshot to be accepted. If you look at this link: http://www.freemanholland.com/clients/cow/01_home.jpg

    That is what the design should look like, i will look at your screenshot to see what you can see on your screen..

    Will get back to you shortly

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  6. #6
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I can see your attachment, The COW logo and cart should not be that far to the right. (See the link i sent to what it should look like)

    How can i make the #header inline instead of being so far to the right?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The problem is that you have a fixed width design that only works at abut 1300px width. On monitors wider than that the elements are misplaced and smaller than that they disappear.

    Make up your mind what you want

    If its a fixed width then give it a fixed width.

    If it's fluid then re-design it to work in a fluid environment. At present it will only display correctly at an exact size.

    It doesn't look as though floating your page wrapper to the right is a good idea anyway and you should probably do something similar to this:

    Code:
    #page-wrap {
        min-width: 1059px;
        max-width: 1260px;
        /*float:right;*/
       /*display:inline;*/
    margin:0 0 0 200px;
        }
    The min and max widths aren't really much use because the content has nowhere to go.

  8. #8
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks Paul.

    Well this is meant to be a fluid/liquid layout. I need to make some elements much smaller, so i will do this and see how i get on :-)

    So as this needs to be a fluid layout, what have i done wrong? I am used to creating fixed width designs, fluid is not my strong point

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    So as this needs to be a fluid layout, what have i done wrong?
    Well you need to decide what you want it to look like when the screen is squashed and then what you want it to look like when the screen is wide and the work towards that goal

    I can't really help until I know what you want it to look like. At present it can only look right at one basic size.

    What you could do is to take make the yellow portion a fixed width and then center it so that it appears to be a bit fluid.

    I don't really see how that layout can be really fluid anyway. It's basically a fixed width left aligned site by design.

  10. #10
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I've managed to put something together

    Just one thing, i have added a white box #read-more. But i am having to put a huge minus margin of -455px..

    Why am i having to do this?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,754
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, for the #read-more element you don't specify coordinates for it (you absolutely position it) and as a result the browser guesses where to place it. Since the <img> is before the #read-more it assumes it should be under it.

    You could float it instead of absolutely postition it (you should also float the .model too for cross browser c onsistancy, and you could also remove the margin set on it)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks Ryan, i didn't know it was that simple. However how would you suggest floating the .model?

    It looks ok in firefox, but not in IE7
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,754
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I am going to the gym now, but if I recall from messing with firebug, floating the .model and the #read-more does the trick, and I didn't see a reason right there as to why IE7 wouldn't play along (though granted it was literally a glance), however you also need to remove the margin on .model (I believe that one has the 28em margin?)

    If you still can't get things working by the time I get back I'll take a look

    CSS is simpler then most people think, but at the same time, more complex
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I have had a bit of a play around, and managed to get something going..

    However i know for sure its not the best way of doing it, hopefully you can suggest an alternative?

    Enjoy the gym! At least some people actually go!

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

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

    I think you've made it worse

    At any screen width less than 1100px the layout is broken. On my 27" mac at full screen the Cow cart and Birmingham store elements are miles away from the rest of the layout.

    You would have been better doing as I said and centering the yellow portion so that it moves as a whole when the page is wider and then set min and max widths to constrain it. That's the way I would do it without a re-design.

    Alternatively you would need to make the elements more fluid (e.g, the text box could percentage width). Put the picture of the girl in the background and centred so that she moves with the window. Then allow the content to slide over the top of the picture of the girl so that the content remains visible.

    Just placing two element on the right of the screen as you have done is not really a viable solution unless you also move other elements correspondingly.

    Constructing a fluid layout starts at the design stage which is why you are finding it hard to suddenly turn a fixed width layout design into a fluid one.

  16. #16
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh what a shame!

    As you already may be aware, i am used to creating fixed width designs, so am having trouble with this.

    Do you know of a template or something that would get me going, so i can follow it??

    I think your suggestion is perfect, centering the content no matter the size of the screen.

    Is there something i could look at for inspiration

    thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

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

    Ok I'd do something like this to start with:

    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=utf-8" />
    <link rel="stylesheet" href="styles.css"/>
    <title>Cow | Homepage</title>
    <style type="text/css">
    /*
          Created by Ibrar Hussain of Freeman Holland Ltd
          
          E-Mail: ibrar@freemanholland.com
                
    */
    
    /* BASIC STRUCTURE */
    
    * {
        margin: 0;
        padding: 0;
    }
    body {
        margin:0;
        padding:0;
        color:#000;
        background:#fcff00 url('http://www.freemanholland.com/cow/images/lines.png');
        font: 12px Arial, helvetica, sans-serif
    }
    img {
        border:0px
    }
    .margin-left {
        margin-left:-6px;
    }
    .margin-leftmore {
        margin-left:-5px;
    }
    .left {
        float:left
    }
    .right {
        float:right
    }
    a {
        text-decoration:underline;
    }
    a:hover {
        text-decoration:none;
    }
    .submit {
        background:url("images/submit.jpg") repeat scroll 0 0 transparent;
        border:0 none;
        height:16px;
        width:65px;
        vertical-align:top;
        cursor:pointer;
        margin-top:-1px;
    }
    .input-text {
        vertical-align:top;
        margin-left:5px;
        padding:1px;
        margin-top:-4px
    }
    h1 {
        font-size: 1.8em;
        padding:0.2em 0.3em;
    }
    h2 {
        font-size: 1.3em;
        color: #8b0000;
    }
    /* BASIC STRUCTURE */
    
     /********************************************
       HEADER
    ********************************************/ 
    #main {
        margin-left:10.3em;
        min-height:0;
        overflow:hidden;
        background:url(http://www.freemanholland.com/cow/images/woman.png) no-repeat 50&#37; 100px;
        min-width:650px;
    }
    #main-inner{
        max-width:1200px;
        margin:auto;
    }
    * html #main,* html #main-inner {
        height:1%;
        overflow:visible
    }
    #header {
        height:11em;
        margin-top:1em;
    }
    #header-left {
        float:left;
        width:25.4em;
        height:10.4em;
        margin-left:1em;
    }
    #header-right {
        background:url("http://www.freemanholland.com/cow/images/home-cart.png") repeat scroll 0 0 transparent;
        float:right;
        font-size:11px;
        height:47px;
        margin-right:20px;
        padding:53px 24px 30px;
        width:230px;
    }
    #checkout {
        margin-top:35px;
        width:231px;
        text-align:right
    }
    /********************************************
       MAIN LEFT NAV
    ********************************************/ 
     
    #main-left-nav {
        position:absolute;
        left:0;
        width:10.3em;
        top:0
    }
    /********************************************
       CONTENT WRAP
    ********************************************/ 
    
    #content-wrap {
        padding:0 1em 1em;
        height:420px
    }
    .model {
        float:right;
        margin-left:35em;
        margin-top:-7.4em;
    }
    .bird {
        float:right;
        margin-top:110px;
        margin-right:30px;
    }
    #read-more {
        background:none repeat scroll 0 0 #FFFFFF;
        float:left;
        font-size:11px;
        margin:40px 0 0 2%;
        display:inline;
        padding:15px;
        width:30%;
        z-index:100
    }
    /********************************************
       FOOTER
    ********************************************/ 
    
    #footer {
        text-align:center;
        margin-top:20px;
        padding:2px 0 0;
        color:#fff;
        background:url('http://www.freemanholland.com/cow/images/footer.png');
        position:relative;
        list-style:none;
        text-align:center;
        width:100%;
    }
    #footer li,#footer input{display:inline;vertical-align:middle;}
    #footer a {
        color:#fcff00;
        text-decoration:none;
        margin:0 20px 0 0;
    }
    #footer span {
        margin-left:20px
    }
    #footer a:hover {
        text-decoration:underline
    }
    #footer img{margin:0 20px;vertical-align:middle;}
    #footer .input-text {
        vertical-align:middle;
        margin:2px 0 6px 5px;
        padding:1px;
    }
    
    </style>
    </head>
    <body>
    <div id="main-left-nav"> <a href=""><img src="http://www.freemanholland.com/cow/images/we-are-cow.png" alt=""/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/we-love-vintage.png" alt="" class="margin-leftmore"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/buy-cow-online.png" alt="" class="margin-left"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/cow-people.png" alt="" class="margin-left"/></a> </div>
    <div id="main">
    <div id="main-inner">
        <div id="header">
            <div id="header-left"> <a href="http://www.freemanholland.com/cow/"><img src="http://www.freemanholland.com/cow/images/home-logo.png" alt=""/></a> </div>
            <div id="header-right">
                <p class="right">Total: &pound;0 basket</p>
                <span>Shopping bag: items: 0</span>
                <div id="checkout"><a href="">Empty basket</a> | <a href="">Checkout</a></div>
            </div>
        </div>
        <div id="content-wrap"> <img src="http://www.freemanholland.com/cow/images/bird.png" alt="" class="bird"/>
            <div id="read-more">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
                    incididunt ut labore et dolore magna aliq ua. Ut enim ad minim veniam, quis nostrud 
                    exercitation ullamco laboris nisi ut ali quip ex ea commodo consequat. Duis aute irure 
                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum</p>
                <br/>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                    ut labore et dolore magna ali quaUt enim ad minim veniam, quis nostrud exercitation ullamco 
                    laboris nisi ut aliq.</p>
                <br/>
                <p>Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupid atat non proident, sunt in 
                    culpa qui officia des</p>
                <br/>
                <a href=""><img src="http://www.freemanholland.com/cow/images/read-more.jpg" alt="" class="right"/></a> </div>
        </div>
    </div></div>
    <ul id="footer">
        <li><a href="">Terms and Conditions</a></li>
        <li><label for="emailaddress"> Sign up for updates</label></li>
        <li><input type="text" name="" class="input-text" style="width: 195px" id="emailaddress" value="e-mail address" onfocus="if (this.value=='e-mail address') this.value='';" onblur="if (this.value=='') this.value='e-mail address';"/></li>
        <li><input type="submit" name="" value="" class="submit"/></li>
        <li> Email: <a href="mailto:info@wearecow.com">info@wearecow.com</a> <span>Tel: 0161 567 4563</span><img src="http://www.freemanholland.com/cow/images/twitter.jpg" alt=""/> <img src="http://www.freemanholland.com/cow/images/facebook.jpg" alt="" /></li>
    </ul>
    </body>
    </html>
    Just copy that and try it in the browser while online and it will work as I have absolutely linked to your images for testing.

    That's more or less what I was thinking

    The footer needs some work as it is not consistent and you may need to redo the image to allow it to break to another line without the line appearing.

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

    Ok I'd do something like this to start with:

    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=utf-8" />
    <link rel="stylesheet" href="styles.css"/>
    <title>Cow | Homepage</title>
    <style type="text/css">
    /*
          Created by Ibrar Hussain of Freeman Holland Ltd
          
          E-Mail: ibrar@freemanholland.com
                
    */
    
    /* BASIC STRUCTURE */
    
    * {
        margin: 0;
        padding: 0;
    }
    body {
        margin:0;
        padding:0;
        color:#000;
        background:#fcff00 url('http://www.freemanholland.com/cow/images/lines.png');
        font: 12px Arial, helvetica, sans-serif
    }
    img {
        border:0px
    }
    .margin-left {
        margin-left:-6px;
    }
    .margin-leftmore {
        margin-left:-5px;
    }
    .left {
        float:left
    }
    .right {
        float:right
    }
    a {
        text-decoration:underline;
    }
    a:hover {
        text-decoration:none;
    }
    .submit {
        background:url("images/submit.jpg") repeat scroll 0 0 transparent;
        border:0 none;
        height:16px;
        width:65px;
        vertical-align:top;
        cursor:pointer;
        margin-top:-1px;
    }
    .input-text {
        vertical-align:top;
        margin-left:5px;
        padding:1px;
        margin-top:-4px
    }
    h1 {
        font-size: 1.8em;
        padding:0.2em 0.3em;
    }
    h2 {
        font-size: 1.3em;
        color: #8b0000;
    }
    /* BASIC STRUCTURE */
    
     /********************************************
       HEADER
    ********************************************/ 
    #main {
        margin-left:10.3em;
        min-height:0;
        overflow:hidden;
        background:url(http://www.freemanholland.com/cow/images/woman.png) no-repeat 50% 100px;
        min-width:650px;
    }
    #main-inner{
        max-width:1200px;
        margin:auto;
    }
    * html #main,* html #main-inner {
        height:1%;
        overflow:visible
    }
    #header {
        height:11em;
        margin-top:1em;
    }
    #header-left {
        float:left;
        width:25.4em;
        height:10.4em;
        margin-left:1em;
    }
    #header-right {
        background:url("http://www.freemanholland.com/cow/images/home-cart.png") repeat scroll 0 0 transparent;
        float:right;
        font-size:11px;
        height:47px;
        margin-right:20px;
        padding:53px 24px 30px;
        width:230px;
    }
    #checkout {
        margin-top:35px;
        width:231px;
        text-align:right
    }
    /********************************************
       MAIN LEFT NAV
    ********************************************/ 
     
    #main-left-nav {
        position:absolute;
        left:0;
        width:10.3em;
        top:0
    }
    /********************************************
       CONTENT WRAP
    ********************************************/ 
    
    #content-wrap {
        padding:0 1em 1em;
        height:420px
    }
    .model {
        float:right;
        margin-left:35em;
        margin-top:-7.4em;
    }
    .bird {
        float:right;
        margin-top:110px;
        margin-right:30px;
    }
    #read-more {
        background:none repeat scroll 0 0 #FFFFFF;
        float:left;
        font-size:11px;
        margin:40px 0 0 2%;
        display:inline;
        padding:15px;
        width:30%;
        z-index:100
    }
    /********************************************
       FOOTER
    ********************************************/ 
    
    #footer {
        text-align:center;
        margin-top:20px;
        padding:2px 0 0;
        color:#fff;
        background:url('http://www.freemanholland.com/cow/images/footer.png');
        position:relative;
        list-style:none;
        text-align:center;
        width:100%;
    }
    #footer li,#footer input{display:inline;vertical-align:middle;}
    #footer a {
        color:#fcff00;
        text-decoration:none;
        margin:0 20px 0 0;
    }
    #footer span {
        margin-left:20px
    }
    #footer a:hover {
        text-decoration:underline
    }
    #footer img{margin:0 20px;vertical-align:middle;}
    #footer .input-text {
        vertical-align:middle;
        margin:2px 0 6px 5px;
        padding:1px;
    }
    
    </style>
    </head>
    <body>
    <div id="main-left-nav"> <a href=""><img src="http://www.freemanholland.com/cow/images/we-are-cow.png" alt=""/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/we-love-vintage.png" alt="" class="margin-leftmore"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/buy-cow-online.png" alt="" class="margin-left"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/cow-people.png" alt="" class="margin-left"/></a> </div>
    <div id="main">
    <div id="main-inner">
        <div id="header">
            <div id="header-left"> <a href="http://www.freemanholland.com/cow/"><img src="http://www.freemanholland.com/cow/images/home-logo.png" alt=""/></a> </div>
            <div id="header-right">
                <p class="right">Total: &pound;0 basket</p>
                <span>Shopping bag: items: 0</span>
                <div id="checkout"><a href="">Empty basket</a> | <a href="">Checkout</a></div>
            </div>
        </div>
        <div id="content-wrap"> <img src="http://www.freemanholland.com/cow/images/bird.png" alt="" class="bird"/>
            <div id="read-more">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
                    incididunt ut labore et dolore magna aliq ua. Ut enim ad minim veniam, quis nostrud 
                    exercitation ullamco laboris nisi ut ali quip ex ea commodo consequat. Duis aute irure 
                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                    mollit anim id est laborum</p>
                <br/>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                    ut labore et dolore magna ali quaUt enim ad minim veniam, quis nostrud exercitation ullamco 
                    laboris nisi ut aliq.</p>
                <br/>
                <p>Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupid atat non proident, sunt in 
                    culpa qui officia des</p>
                <br/>
                <a href=""><img src="http://www.freemanholland.com/cow/images/read-more.jpg" alt="" class="right"/></a> </div>
        </div>
    </div></div>
    <ul id="footer">
        <li><a href="">Terms and Conditions</a></li>
        <li><label for="emailaddress"> Sign up for updates</label></li>
        <li><input type="text" name="" class="input-text" style="width: 195px" id="emailaddress" value="e-mail address" onfocus="if (this.value=='e-mail address') this.value='';" onblur="if (this.value=='') this.value='e-mail address';"/></li>
        <li><input type="submit" name="" value="" class="submit"/></li>
        <li> Email: <a href="mailto:info@wearecow.com">info@wearecow.com</a> <span>Tel: 0161 567 4563</span><img src="http://www.freemanholland.com/cow/images/twitter.jpg" alt=""/> <img src="http://www.freemanholland.com/cow/images/facebook.jpg" alt="" /></li>
    </ul>
    </body>
    </html>
    Just copy that and try it in the browser while online and it will work as I have absolutely linked to your images for testing.

    That's more or less what I was thinking

    The footer needs some work as it is not consistent and you may need to redo the image to allow it to break to another line without the line appearing.

  19. #19
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks Paul i appreciate your help.

    I am fixing the footer now, i think the best way is to increase the background image size..

    Anyway, just one thing, the background where you can see the woman, is too short. The womans legs are missing and need to go underneath the footer..

    I have uploaded the amends here: http://www.freemanholland.com/cow2/

    Notice the design should look like this, which is what i am following:
    http://www.freemanholland.com/clients/cow/01_home.jpg
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

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

    Probably better if you use a sticky footer type layout with 100&#37; height on #main so that the full graphic shows.

    You may want to find the picture of the girl with all her legs intact and then the page could grow a bit more

    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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" href="styles.css"/>
    <title>Cow | Homepage</title>
    <style>
    *
          Created by Ibrar Hussain of Freeman Holland Ltd
          
          E-Mail: ibrar@freemanholland.com
                
    */
    
    /* BASIC STRUCTURE */
    
    * {
        margin: 0;
        padding: 0;
    }
    html,body{height:100%}
    body {
        margin:0;
        padding:0;
        color:#000;
        background:#fcff00 url('http://www.freemanholland.com/cow/images/lines.png');
        font: 12px Arial, helvetica, sans-serif
    }
    img {
        border:0px
    }
    .margin-left {
        margin-left:-6px;
    }
    .margin-leftmore {
        margin-left:-5px;
    }
    .left {
        float:left
    }
    .right {
        float:right
    }
    a {
        text-decoration:underline;
    }
    a:hover {
        text-decoration:none;
    }
    .submit {
        background:url("http://www.freemanholland.com/cow/images/submit.jpg") repeat scroll 0 0 transparent;
        border:0 none;
        height:16px;
        width:65px;
        vertical-align:top;
        cursor:pointer;
        margin-top:-1px;
    }
    .input-text {
        vertical-align:top;
        margin-left:5px;
        padding:1px;
        margin-top:-4px
    }
    h1 {
        font-size: 1.8em;
        padding:0.2em 0.3em;
    }
    h2 {
        font-size: 1.3em;
        color: #8b0000;
    }
    /* BASIC STRUCTURE */
    
     /********************************************
       HEADER
    ********************************************/ 
    #main {
        margin-left:10.3em;
        overflow:hidden;
        background:url(http://www.freemanholland.com/cow/images/woman.png) no-repeat 50% 100px;
        min-width:650px;
            min-height:100%;
    }
    * html #main{height:100%}
    #main:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    #main-inner{
        max-width:1200px;
        margin:auto;
            padding:0 0 100px;
    }
    * html #main,* html #main-inner {
        height:1%;
        overflow:visible
    }
    #header {
        height:11em;
        margin-top:1em;
    }
    #header-left {
        float:left;
        width:25.4em;
        height:10.4em;
        margin-left:1em;
    }
    #header-right {
        background:url("http://www.freemanholland.com/cow/images/home-cart.png") repeat scroll 0 0 transparent;
        float:right;
        font-size:11px;
        height:47px;
        margin-right:20px;
        padding:53px 24px 30px;
        width:230px;
    }
    #checkout {
        margin-top:35px;
        width:231px;
        text-align:right
    }
    /********************************************
       MAIN LEFT NAV
    ********************************************/ 
     
    #main-left-nav {
        position:absolute;
        left:0;
        width:10.3em;
        top:0
    }
    /********************************************
       CONTENT WRAP
    ********************************************/ 
    
    #content-wrap {
        padding:0 1em 1em;
        height:420px
    }
    .model {
        float:right;
        margin-left:35em;
        margin-top:-7.4em;
    }
    .bird {
        float:right;
        margin-top:110px;
        margin-right:30px;
    }
    #read-more {
        background:none repeat scroll 0 0 #FFFFFF;
        float:left;
        font-size:11px;
        margin:40px 0 0 2%;
        display:inline;
        padding:15px;
        width:30%;
        z-index:100
    }
    /********************************************
       FOOTER
    ********************************************/ 
    
    #footer {
        text-align:center;
        margin-top:-50px;
        padding:2px 0 0;
        color:#fff;
        background:url('http://www.freemanholland.com/cow/images/footer.png');
        position:relative;
        list-style:none;
        text-align:center;
        width:100%;
            position:relaive;
            z-index:99;
    }
    #footer li,#footer input{display:inline;vertical-align:middle;}
    #footer a {
        color:#fcff00;
        text-decoration:none;
        margin:0 20px 0 0;
    }
    #footer span {
        margin-left:20px
    }
    #footer a:hover {
        text-decoration:underline
    }
    #footer img{margin:0 20px;vertical-align:middle;}
    #footer .input-text {
        vertical-align:middle;
        margin:2px 0 6px 5px;
        padding:1px;
    }
    
    
    </style>
    </head>
    <body>
    <div id="main-left-nav"> <a href=""><img src="http://www.freemanholland.com/cow/images/we-are-cow.png" alt=""/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/we-love-vintage.png" alt="" class="margin-leftmore"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/buy-cow-online.png" alt="" class="margin-left"/></a> <a href=""><img src="http://www.freemanholland.com/cow/images/cow-people.png" alt="" class="margin-left"/></a> </div>
    <div id="main">
        <div id="main-inner">
            <div id="header">
                <div id="header-left"> <a href="http://www.freemanholland.com/cow/"><img src="http://www.freemanholland.com/cow/images/home-logo.png" alt=""/></a> </div>
                <div id="header-right">
                    <p class="right">Total: &pound;0 basket</p>
                    <span>Shopping bag: items: 0</span>
                    <div id="checkout"><a href="">Empty basket</a> | <a href="">Checkout</a></div>
                </div>
            </div>
            <div id="content-wrap"> <img src="http://www.freemanholland.com/cow/images/bird.png" alt="" class="bird"/>
                <div id="read-more">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
                        incididunt ut labore et dolore magna aliq ua. Ut enim ad minim veniam, quis nostrud 
                        exercitation ullamco laboris nisi ut ali quip ex ea commodo consequat. Duis aute irure 
                        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                        mollit anim id est laborum</p>
                    <br/>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                        ut labore et dolore magna ali quaUt enim ad minim veniam, quis nostrud exercitation ullamco 
                        laboris nisi ut aliq.</p>
                    <br/>
                    <p>Commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupid atat non proident, sunt in 
                        culpa qui officia des</p>
                    <br/>
                    <a href=""><img src="http://www.freemanholland.com/cow/images/read-more.jpg" alt="" class="right"/></a> </div>
            </div>
        </div>
    </div>
    <ul id="footer">
        <li><a href="">Terms and Conditions</a></li>
        <li>
            <label for="emailaddress"> Sign up for updates</label>
        </li>
        <li>
            <input type="text" name="" class="input-text" style="width: 195px" id="emailaddress" value="e-mail address" onfocus="if (this.value=='e-mail address') this.value='';" onblur="if (this.value=='') this.value='e-mail address';"/>
        </li>
        <li>
            <input type="submit" name="" value="" class="submit"/>
        </li>
        <li> Email: <a href="mailto:info@wearecow.com">info@wearecow.com</a> <span>Tel: 0161 567 4563</span><img src="http://www.freemanholland.com/cow/images/twitter.jpg" alt=""/> <img src="http://www.freemanholland.com/cow/images/facebook.jpg" alt="" /></li>
    </ul>
    </body>
    </html>
    Changes in bold above - don't miss the negative top margin on the footer.

  21. #21
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks again Paul.

    I have made some amends: http://www.freemanholland.com/cow2/

    Also i worked on the footer, it looks ok in firefox and Ie8 but not in Ie7, the footer moves to the right..

    Any ideas ?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

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

    You have a slash missing on your first comment which is killing the first rule:

    Code:
    *
          Created by Ibrar Hussain of Freeman Holland Ltd
          
          E-Mail: ibrar@freemanholland.com
                
    */
    It should be:

    Code:
    /*
          Created by Ibrar Hussain of Freeman Holland Ltd
          
          E-Mail: ibrar@freemanholland.com
                
    */

  23. #23
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha, thanks i didnt see that.

    Again thanks for your help Paul, really appreciate it.
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy


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
  •