14 replies [Last post]
Mattoman
Mattoman's picture
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

Hey everyone,

Im fairly new to CSS and have hit a wall with something which is probly very easy to work out..

Ive made a website with 2 backgrounds sort of

the main background is just a colour and is in the body div and the second background is another colour which sits ontop of the first background..

Anyway what is happening is when i try and position background 2 with a top margin of 175px it brings all my other divs down 175px as well

Heres the CSS

body{
	text-align: center;
	min-width: 800px;
	height: 1100px;
	font-family: Helvetica, Arial, sans-serif;
	background: #f0f0d8;
}
#wrapper{
	width: 1024px;
	margin: 0 auto;
	text-align: left;
}
 
#background {
 
	height: 428px;
	width: 1024px;
	background-color: #d8d8c0;
}
 
#logo {
	margin: 40px 150px 0;
	height: 73px;
	width: 162px;
	background-image: url('images/logo.jpg');

My html is this

<div id="wrapper">
	<div id="background">
    	<div id="logo">        	
        	</div>
       			 <div id="nav"">
        			<ul id="navbar">
        	           	<li><a href="#">Home</a></li>
        				<li><a href="#">About</a></li>
       					<li><a href="#">News</a></li>
             			<li><a href="#">Download</a></li>
        				<li><a href="#">Contact</a></li>
        			</ul>
        		</div>
        		<div id="grass">
        			<div id="welcome">        			
                    </div>
       			</div>
        		<div id="content">        		
                </div>
    </div>
</div>
 

Thanks

gopu74
gopu74's picture
Offline
newbie
Almora
Last seen: 13 years 22 weeks ago
Almora
Joined: 2009-04-17
Posts: 8
Points: 0

Not getting your question

:? I am not getting what exactly you mean as I don't see any top margin with 175px. The log has top margin value 150px and it is behaving as it should.

Anyway, if you have a test site, you may want to try out your stuff using http://onlinecsseditor.mywingsoflove.com :rolleyes:

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

It works as written - but is that what you intended?

As the previous post says, it is behaving as it should given how you have written it. Perhaps you have lost your way a little with the nesting of your divs. Nest them accurately and they would appear like this:

<div id="wrapper">
  <div id="background">
    <div id="logo"></div>
    <div id="nav"">
      <ul id="navbar">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div id="grass">
      <div id="welcome"></div>
    </div>
    <div id="content"></div>
  </div>
</div>

Now you can see that you actually have two wrapper divs, one called wrapper and one called background. Within background you then have divs called logo, grass (which in turn contains a div called welcome) and content.

Since all your other material is contained within the second wrapper it is no surprise that if you add a top margin to that, everything else moves down accordingly. This may not have been your intention but that is how your code is structured as it stands. Hope that helps.

Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

Mattoman
Mattoman's picture
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

Sorry i may have been a

Sorry i may have been a little confusing

Heres the mock up of the website..

http://fc08.deviantart.com/fs42/f/2009/116/3/5/Website_03_by_Mattoman.jpg

As you can see there is two background colours

The trouble i am having is how to position my div of the second background that starts around 250px down the page..

gopu74
gopu74's picture
Offline
newbie
Almora
Last seen: 13 years 22 weeks ago
Almora
Joined: 2009-04-17
Posts: 8
Points: 0

Just need to spend some time with CSS

You need to spend some time trying different things in CSS.
Start with the following CSS code. You want to add class="selected" for one of the li element and check.

        body
        {
            text-align: center;
            min-width: 800px;
            height: 1100px;
            font-family: Helvetica, Arial, sans-serif;
            background: #f0f0d8;
        }
        #wrapper
        {
            width: 1024px;
            margin: 0 auto;
            text-align: left;
        }
        #background
        {
            height: 428px;
            width: 1024px;
            background-color: #d8d8c0;
        }
        #logo
        {
            margin: 40px 150px 0;
            height: 73px;
            width: 162px;
            background-image: url('images/logo.jpg');
        }
        #nav *
        {
            vertical-align:middle;
        }
        #nav ul
        {
            list-style-type: none;
        }
        #navbar li
        {
            float: left;
            width: 10em;
            height: 2em;
            background-color: Aqua;
            vertical-align:middle;
            text-align:center;
            padding-top: .5em;
        }
        #navbar li a
        {
            text-decoration: none;
        }
        .selected
        {
            background-color: #dddddd !important;
        }

Mattoman
Mattoman's picture
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

Sorry, for some reason all

Sorry, for some reason all my CSS wasnt posted

Here is is again

body{
	text-align: center;
	min-width: 800px;
	height: 1100px;
	font-family: Helvetica, Arial, sans-serif;
	background: #f0f0d8;
}
#wrapper{
	width: 1024px;
	margin: 0 auto;
	text-align: left;
}
 
#background {
        margin-top: 175px;
	height: 428px;
	background-color: #d8d8c0;
}
 
#logo {
	margin: 40px 150px 0;
	height: 73px;
	width: 162px;
	background-image: url('images/logo.jpg');
}
#nav {
	margin: 50px 150px 0 150px;
	height: 50px;
	width: 724px;
	background-image: url('images/nav_bar.png');
}
#navbar li {
	margin: 14px 4px 12px;
	float: left;
	width: 120px;
	text-align: center;
	list-style: none;
}
#navbar li a {	
	padding: 15px 15px 14px;
	line-height: 50x;
	text-decoration: none;
	color: #d8d8c0;
	font-size: 18px;	
}
#navbar li a:hover {
	background: #9ab0c2;
}
#grass {
	margin: 25px 150px 0;
	height: 150px;
	width: 351px;
	background-image: url('images/grass.jpg');
}
#welcome {
	margin: 25px 375px 0;
	height: 30px;	
	width: 142px;
	background-image: url('images/welcome.png');
}
#content {
	margin: 25px 150px 0;
	height: 176px;	
	width: 725px;
	background-image: url('images/content_1.jpg');
}
 
#content2 {
	margin: 25px 150px 0;
	height: 176px;	
	width: 725px;
	background-color:

The problem still lies with that second background.
How to i place it under everything but ontop of the body background and position it as shown in the Mockup

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Have I understood your Request?

If I now understand you correctly then it seems the second background colour does not "belong" to any particular element or range of elements. If so, it probably needs a div of its own that exists for sole purpose of "holding" the background colour which you can then place on the page wherever you wish. But locating it on the page requires some extra markup in your HTML and some extra declarations in your CSS.

Taking your original example code, here is a fully working example showing one way to get a precisely positioned second background colour. So, let's see if this works for you:

<!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>mattoman</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="test.css" type="text/css" media="screen" />
</head>
 
<body>
<div id="wrapper">
  <div id="background">
    <div id="specific-position">
      <!-- This div has no content. It exists to allow a 2nd
           background colour to be precisely positioned -->
    </div>
    <div id="logo"></div>
    <div id="nav"">
      <ul id="navbar">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div id="grass">
      <div id="welcome"></div>
    </div>
    <div id="content"></div>
  </div>
</div>
 
</body>
</html>

and the CSS needed for this effect is:

body{
	text-align: center;
	min-width: 800px;
	height: 1100px;
	font-family: Helvetica, Arial, sans-serif;
	background: #f0f0d8;
	}
 
#wrapper{
	width: 1024px;
	margin: 0 auto;
	text-align: left;
	}
 
#background {
	position: relative; /* acts as anchor to position 2nd background */
	height: 428px;
	width: 1024px;
	/* original 2nd background colour now removed from here */
	}
 
div#specific-position {
	position: absolute; /* takes this div out of the document flow */
	z-index: -1; /* forces this layer beneath its parent layer */
	left: 0;
	top: 50px; /* left and top used to position the div exactly where needed */
	width: 100%; /* to make it full width within its parent div */
	height: 120px; /* whatever height you want */
	background-color: #c00; /* choose your colour */
}
 
#logo {
	margin: 40px 150px 0;
	height: 73px;
	width: 162px;
	background-image: url('images/logo.jpg');
	background: #0f0; /* logo.jpg file not available so bright colour used instead */
	}

Hope that helps. Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

Mattoman
Mattoman's picture
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

Hey Mate, thanks for your

Hey Mate, thanks for your reply
but unfortunatly it is now completly not working
im just getting the 5 links on a background with the color #f0f0d8 i beleive

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

More Information is needed...

Be happy to help further but you have not said what it is that is not working. I checked the HTML and CSS I posted and satisfied myself that it is still working as intended.

Have you taken parts of the code and incorporated it elsewhere and it is that you find is not working?

Please post the full HTML and related CSS giving you the problem you now refer to.

Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

Mattoman
Mattoman's picture
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

Thanks again mate, after

Thanks again mate, after re-reading your code i realised you had changed the stylesheet.css to test.css lol.. having changed it everything is now perfect!! Thanks heaps!!

P.s thanks for placing the CSS comments, it really helps for me to understand what all the code is doing!!Smile

My next question is: How do i make that second background cover the entire screen size as my resolution is much larger then the average and it is only going the 1024 width.. I tried changing my wrapper to 100% width but i aligns everything to the left.

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Unsure?

I regret I don't understand what you mean with your follow-up question. You say you want your 2nd colour to cover the entire screen. I imagine you don't mean that because then you would never see the first colour at all, meaning in effect you would really have only one backgound colour for the page.

If you mean you want your 2nd colour to sit behind all of your original div#background then just lose that extra div#specific-position we added and return the 2nd colour to the original div#background. But I am not sure that is what you mean either.

What I think you did before was make your wrapper full width (100%) so the auto margins now had nowhere to go to create a centred layout by calculating left and right margins. That is why everything then shifted left. Beyond that, I'm a bit stuck. Please explain further. Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

Mattoman
Mattoman's picture
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

Sorry, i wasn't clear. Ill

Sorry, i wasn't clear.

Ill try better, My monitor is a wide screen monitor with the dimensions 1360 x 768 so the second background is 1024 in width. So on my monitor it doesn't go all the way to the edges of my screen which is because its set to 1024px in width.. So how can i make it so it will fit 100% width Smile

This image might help:

(The this space also applies on the right side of my screen as the website is centered)

Hope that makes sense

Thanks heaps.

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Full width and not centred

To make it full width and not a centred layout, remove the width and margin declarations from the #wrapper div (you can add width: 100%; if you want to make it explicit but it's not necessary) and also remove the width declaration from the #background div and that should make it full width. Give it a go and see if that achieves what you want.

Just another thought. Apart from the #specific-position div which does have a defined height, you might want to consider the appropriateness of other height declarations. It may be better to let the height get dealt with by itself but it depends on what you want really.

I'm thinking of the height you have put on your body element. Only some versions of IE treat it (incorrectly) as a minimum height that can grow. Compliant browsers will treat it as a fixed value. Just a heads up.
Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================

Mattoman
Mattoman's picture
Offline
newbie
Last seen: 13 years 2 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

Thanks for your reply, That

Thanks for your reply,

That did work. However, the layout is now aligned to the left again. I would still like it centered and to have that second background colour stretch to both of the edges of my monitor.

As for the heights, yeh i removed a few and it still worked fine!

css-helper
Offline
Enthusiast
UK
Last seen: 12 years 40 weeks ago
UK
Joined: 2009-04-24
Posts: 120
Points: 4

Try this change

Phew, you are a tough man to please! Okay, what we do now is move the #specific-position div so that it is outside your #wrapper div (see the HTML below).

<!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>mattoman</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="test.css" type="text/css" media="screen" />
</head>
 
<body>
<div id="wrapper">
	<div id="background">
  	<div id="logo"></div>
		<div id="nav"">
			<ul id="navbar">
				<li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
				<li><a href="#">News</a></li>
				<li><a href="#">Download</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<div id="grass">
			<div id="welcome"></div>
		</div>
		<div id="content"></div>
	</div>
</div>
 
<div id="specific-position">
	<!-- This div has no content. It exists to allow a 2nd
			 background colour to be precisely positioned -->
</div>
 
</body>
</html>

We then alter the CSS (comments inlcuded with the CSS change).

body{
	text-align: center;
	min-width: 800px;
	height: 1100px;
	font-family: Helvetica, Arial, sans-serif;
	background: #f0f0d8;
	}
 
#wrapper{
	width: 1024px;
	margin: 0 auto;
	text-align: left;
	}
 
#background {
	position: relative; /* acts as anchor to position 2nd background */
	height: 428px;
	width: 1024px;
	/* original 2nd background colour now removed from here */
	}
 
div#specific-position {
	position: absolute; /* takes this div out of the document flow */
	z-index: -1; /* forces this layer beneath its parent layer */
	left: 0;
	top: 50px; /* left and top position the div exactly where needed */
	top: 90px;
	/* changes because this div is now positioned relative to the body
	   so we add the value of the logo top margin of 40px and
	   get the new value of 90px. */
	width: 100%; /* to make it full width within its parent div */
	height: 120px; /* whatever height you want */
	background-color: #c00; /* choose your colour */
}
 
#logo {
	margin: 40px 150px 0;
	height: 73px;
	width: 162px;
	background-image: url('images/logo.jpg');
	background: #0f0;
	}

How does that work for you?

Regards

=========================================================================
If you are climbing a mountain the person most useful to you is just ahead of you on the rope (since they are still learning too).
The person who has already made it to the top is usually not much help whilst you are struggling on the rock face.
=========================================================================