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

Get Started
1

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!

2

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! :smiley:

Link

3

Hi WebTiger. Welcome to SitePoint. :slight_smile:

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.,

4

Thanks for the reply Ralph, here’s a pic of the final mockup.

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)

5

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:

<!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.

6

That’s was really helpful :smiley: 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/>

7

Nevermind, sorted now :slight_smile:
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.

8

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

.head, .nav, .main {
    margin: 0 auto;
    width: 960px;
}

and also this padding:

.nav {
    padding-left: 270px;
}

and instead write this CSS for the nav:

.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!

9

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 :confused:

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/

10

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.)

11

Awesome, will check these out now. :slight_smile:

12

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?

13

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;
}