SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What's the best way to lay out this background/site?

    Hi all,

    So I've begun to dabble in the world of web design. I've got basic HTML and CSS knowledge and I'm working on chopping up my first PSD that a friend provided me with to convert to a site.

    I'm trying to figure out the best way to layout the background and main images for my site.

    My main image is 960px wide.

    Below that is the orange nav bar.

    Below that is an image with will fall behind the text, which then fades to solid black should the text go down that far.

    I want the left to extend black and orange as in the image for large monitors, I want the right to extend black, orange and magnolia to the right.

    I'm thinking to have a primarily black backround as a base. Then I thought I could have a vertical slice of orange on black that repeats to the left on the x axis and a vertical slice of magnolia and orange on the right that repeats to the right on the x axis. Is that possible and doable or would you recommend another approach?

    Edit: Or is it better to have complete solid black, then a vertical magnolia strip on the right repeated on x axis. Then have the orange nav bar span the whole page and always center the links on top of the rest?

    Sorry if this is completely nooby!

    oQwRw.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi WebTiger. Welcome to SitePoint.

    This is all very easy, except for the magnolia background top right. Do you really have to have that? It makes things look a bit lop-sided, to my eye, and is not so straightforward to do—meaning that even if it works on modern desktop browsers, you are likely to have problems in older browsers and other media.,

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Ralph, here's a pic of the final mockup.

    jlHbM.jpg

    The reason for the magnolia is the due to the edge of the main image as you can see here. We thought it would be nice to continue it off to the right instead of fading to black like on the left (although that would obviously make life so much easier)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You are probably just best off using a very wide background image for the top section to get the magnolia color to the right. Here's a basic example of how to get started:

    Basic Example

    The code is as follows:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>WebTiger</title>
    	
    <style media="all">
    * {margin:0; padding:0;}
    body {background: #000;}
    .head, .nav, .main {width: 960px; margin: 0 auto;}
    .head-outer {width: 100%; background: url(head-bg.gif) repeat-y 50% 0;}
    .head {height: 330px; background: url(head.jpg) no-repeat 50% 0;}
    .nav-outer {width: 100%; background: #f25822;}
    .nav {height: 40px;}
    .main {color: white; padding-top: 30px;}
    </style>
    	
    </head>
    
    <body>
    <div class="head-outer">
    	<div class="head">
    	</div>
    </div>
    
    <div class="nav-outer">
    	<div class="nav">
    		<p>Some links (use an UL)</p>
    	</div>
    </div>
    
    	<div class="main">
    		<p>Some text</p>
    	</div>
    
    </body>
    </html>
    The background image is attached.

    head-bg.jpg

  5. #5
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's was really helpful Thanks!

    I've been working on it with my buddy and we're nearly there now I think, but can't quite get the nav bar to centralise properly at all resolutions. It works great at 960px and above how we've done it, but below that it sticks and looks weird, I think due to the way it's been padded and we can't figure it out.

    Can you advise the best way of doing this please?

    <snip/>
    Last edited by Mittineague; Sep 15, 2011 at 15:10. Reason: per OP request

  6. #6
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind, sorted now
    Will post up a link with the finished site soon.

    Also - how do we edit our posts? I can't see a button and I'd like to remove that link from my previous one.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I see your post has been edited, so you just click the orange flag to make a request after a certain time.

    It would be best to remove .nav from here

    Code:
    .head, .nav, .main {
        margin: 0 auto;
        width: 960px;
    }
    and also this padding:

    Code:
    .nav {
        padding-left: 270px;
    }
    and instead write this CSS for the nav:

    Code:
    .nav {
         margin: 0pt auto;
         padding-left: 175px;
         width: 785px;
    }
    That will stope it getting out of line with the rest of the page.

    I look forward to seeing the final result!

  8. #8
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Ralph!

    Right. So we managed to finish off the HTML and my partner in crime has managed to convert it to a WordPress site.

    It's all working brilliantly in WP - apart from the fact we're kind stuck on the drop down menus and using the drop down menu plugin we're currently using there's about 700 lines of css code relating to it and it buggers up the size/colours/styling of the nav bar :/

    Are you able to help us out with how we might best implement the drop down menu in CSS please?

    This is the HTML site as it stands

    http://174.122.37.162/~robupton/

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It depends on how you need the dropdown to work, but I would advise not using a plugin for this sort of thing, as they are usually not very good, add in far too much code, and mess with your design (as you noted). The code for a simple CSS dropdown is very simple, such as here:

    Simple dropdown

    For a more sophisticated dropdown, you'd best go with the Suckerfish method, or, if you need a bit of JS niceness, go for Superfish (which is just Suckerfish on 'roids). (I haven't linked to Suckerfish or Superfish as they are easy to Google.)

  10. #10
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, will check these out now.

  11. #11
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was great, I used the suckerfish method and so far have this:

    http://174.122.37.162/~robupton/RobNav.html

    It's all pretty good, apart from the fact that the spacing is off now, and I'm not sure how to vary it between each item in the top level list?

    Another questions, I've currently got the secondary list set to the width of the longest piece of text which is 'The Legion of Doom', is there a way to get this to vary to just the longest entry in each individual column instead of all of them?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Make another test page and try making the changes I've indicated below to get your spacing right:

    #nav a {
    display: block;
    width: 10em; // remove this
    }


    #nav li {
    background: none repeat scroll 0 0 #F15A22; // remove this
    float: left;
    height: 28px; // remove this
    padding-top: 12px; // remove this
    width: 7em; // remove this
    line-height: 30px; // add this
    }


    #nav li a {
    background-image: url("images/bullet2.gif");
    background-position: 0 50%;
    background-repeat: no-repeat;
    color: #F9F7EE;
    padding-left: 16px;
    text-decoration: none;
    display: block; // add this
    }

    #nav, #nav ul {
    background: none repeat scroll 0% 0% #F15A22; // add
    line-height: 1;
    list-style: none outside none;
    margin: 0pt;
    padding: 0pt;
    overflow: hidden; // add
    width: 720px; // add
    }


    Regarding the width of the dropdowns, what you could do is give each sub UL a special class, and then do something like

    #nav li ul.teach {
    background: none repeat scroll 0 0 #F15A22;
    position: absolute;
    width: 6em;
    }

  13. #13
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, we've been messing around and I think we're nearly done.

    Let me know what you think and if you have any suggestions, constructive criticism etc.

    Many thanks for all your help too!

    Link


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
  •