Css Layout problem

[john noble]

See the attached file.

Its the picture at the top that sticks out of its container. Im not sure how to achive this using CSS.

I would normally have a used a #wrapper div but Im not sure if I can do this as I'd expect everything to be contained inside the wrapper (which this would not be).

Really appreciate some help.

J

[Fang]

Use as a background image

[Centauri]

You could have a wrapper as wide as the graphic, with the graphic applied as a background to the wrapper, as Fang suggested, and positioned using the background-position property. The wrapper could also have side padding so that the dark background content appears narrower. A top margin on the navigation <ul> can be used to provide the gap to allow the background image to show through.

[john noble]

I understand how to make the wrapper as wide as the graphic.

How to apply the graphic as a background image I don't quite follow. The graphic itself would need to start around 50px down from the top of the wrapper div. Can you specify exact positioning. I assumed it was only top, bottom etc...

Sorry but my knowledger on CSS for layouts is rather limited.

J

[Fang]

exact positioning (http://www.w3.org/TR/CSS21/colors.html#propdef-background-position) using px

[john noble]

Thanks for your help guys.

Im making some progress now but I'm not sure if its in the right direction.

Here is a test (http://www.nor-tech.co.uk/new/FBA/test.html) page.

Here is my CSS. Am I going about this the right way?

* {
margin: 0 auto;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
line-height: 23px;
background-color: #fff;
padding-top: 15px;
text-align:center;
}

#wrapper {
width: 790px;
padding:0px;
background-image:url(../images/banners/banner1.png);
background-position: 0px 40px;
background-repeat:no-repeat;
height:230px;
}

#header{
width: 750px;
border:#000;
border-style:dashed;
border-width: 1px;
height: 40px;
}

#nav{
width: 750px;
height: 30px;
border:#000;
border-style:dashed;
border-width: 1px;
margin-top: 188px;
}

#content{
border:#000;
border-style:dashed;
border-width: 1px;
height: 400px;
width: 750px;
}


Im depending on using margin-top to get the position on the nav sction to get it right??

J

[WebJoel]

It's coming along nicely.

Twice-stated:
<link rel = "stylesheet" media = "screen" href="css/screen.css" rel="stylesheet" type="text/css">
<link rel = "stylesheet" media = "print" href="css/print.css" rel="stylesheet" type="text/css"> Oversight, surely. :)

[Varelei]

Well that test pages looks alright, but why not make the header bigger, have the photo and the grey as a whole image, and align any search bar elements, etc using classes? That's a much easier way, I think. But yes, what you have in the test page should work provided the image has a margin-top (or whatever div it is sitting inside of, provided it isn't solely the container...).

Let me know if you need more help, or if I was confusing (it's late over here, and I'm not sure if I'm making sense, ;)).
Varelei -

[john noble]

Thanks Joel.:)

[Centauri]

Getting there, but a few points. Don't use auto side margins on the universal selector, as that will cause you problems down the track. You only need the auto side margins on the wrapper, and side padding on the wrapper will centre the contents (which then do not need width or side margins). Best not to use text-align center on the body either, as you will then have to reset evertything where you need normal text alignment. Try :* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
line-height: 23px;
background-color: #fff;
padding-top: 15px;
}
#wrapper {
width: 750px;
padding:0 20px;
background-image:url(../images/banners/banner1.png);
background-position: 0px 40px;
background-repeat:no-repeat;
margin: 0 auto;
}
#header{
border:#000;
border-style:dashed;
border-width: 1px;
height: 40px;
}
#nav{
height: 30px;
border:#000;
border-style:dashed;
border-width: 1px;
margin-top: 188px;
}
#content{
border:#000;
border-style:dashed;
border-width: 1px;
height: 400px;
}