11 replies [Last post]
onlydan
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

I'm trying to create a 2 column liquid layout, however I'm having a slight problem with the header/background, simply in that I'm not sure how to approach it. I'll be using a simple style such as

And my layout looks roughly like the one attached (albeit the header image and body image line up better)

My problem is the image with the question marks... I want this to stretch across the page behind the header image, but to scale down when the window is resized. However I don't know where to define it... my container already holds the main background, the header includes, obviously, the header, and the body background is the pattern. Not to mention, that the container will be the same size as the main image, to let the page scale properly.

I'm sure there's probably a simple solution to this and I'm just looking at it from the wrong angle, I don't claim to be a CSS expert, although hopefully I'll be better with practice... if anyone can help with this problem I would be immensely grateful Smile

Thanks - Dan.

AttachmentSize
problem.jpg167.26 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would have thought that

I would have thought that simply a div placed immediately after body with that image placed as a background xpx from the top (to line up with header graphic) repeat it as a slice along the x-axis. Left at natural width that div will shrink and grow with the viewport, place all other elements within that div centered in the viewport.

You could try adding the page background to the html element and the question mark graphic to body.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

ah ok thanks, I'll give that

ah ok thanks, I'll give that a try... should the div go around the container, or before it, would you suggest? I'll try both in the meantime Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

In essence it's a new

In essence it's a new wrapper div for all further elements, but you could probably play it either way, my preference I think would be to always nest elements as that is the basis of element flow.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

strike that last comment, I

strike that last comment, I got it working by putting it above the container, thanks very much Smile. I'm having a slight problem now though, in that the background-colour doesn't show up around my content in IE/FF, but is fine in Dreamweaver.

Index

Untitled Document

Content hEre plz

CSS:

* {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
body {
background-image: url(bg.gif);
background-repeat: repeat;
}
#container {
background-color: FFFFCA;
width: 800px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-image: url(headerfront.gif);
background-repeat: no-repeat;
height: 196px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#headerbg {
background-image: url(header.png);
background-repeat: repeat-x;
width: 100%;
height: 195px;
margin-top: -2px;
margin-bottom: -193px;
}
#content {
background-color: FFFFCA;
}

Obviously, it would help you a lot more if I could show you the file, but my hosting has quite bad uptime. I'll try and get these uploaded when the server is visible again, but until then, if there is anything you can spot that jars in the code, please let me know Smile.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Please no talk of DW and

Please no talk of DW and especially anything to do with how it may or may not display things it has absolutely no credibility, only ever take heed of how a layout renders in a real browser.

One thing I notice is that you're trying to to set height to the #container in percentage terms, yet you have nothing for that percentage to be based on, 100% of what? you need to add height:100% to html, body and take care with setting height as it is fixed in real browsers you will want min-height otherwise if content scrolls off screen it will just overflow leaving behind the element set as height:100%.

I would have a quick google on CSS height 100% and read up a bit on how to apply it.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

onlydan
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

ah right, thanks, ill look

ah right, thanks, ill look it up Smile

onlydan
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

I've looked into CSS height

I've looked into CSS height a bit more, and I've tried a few tutorials. I have more of an idea about it now (such as 100% being the window's height, not the documents, in some instances), but I'm still having trouble. For whatever reason the bg image in my main content doesn't show up in FF. If i set an absolute value for min-height, it will appear, but only for that height (eg 500px).

Untitled Document

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna ac quam tincidunt vestibulum. Sed convallis. Nulla bibendum ante a mauris. Nunc tincidunt. Donec magna justo, ultricies ut, dapibus eu, rutrum a, velit. Suspendisse velit. Nulla facilisi. Praesent lobortis arcu eu quam. Donec aliquet diam id neque. Cras magna. Curabitur arcu erat, vestibulum ac, ornare id, viverra sed, dolor. Duis nec mauris. Quisque posuere nulla vitae dui. Nulla dictum. Vestibulum vestibulum magna vel eros blandit laoreet. Nunc porta tellus vitae velit. Aenean aliquet ullamcorper nisi. Nullam dui dolor, cursus ac, imperdiet eu, laoreet eget, diam. Quisque suscipit felis vitae tellus. Cras gravida odio vel mi.

Sed aliquam risus auctor velit. Vestibulum aliquet odio facilisis nunc. Integer viverra. Aliquam est. Proin vel augue sit amet nisi adipiscing elementum. Nam erat est, aliquet semper, tempor vitae, porta non, massa. Suspendisse a augue at neque congue pretium. Ut molestie varius magna. Curabitur cursus convallis elit. In congue eros quis diam. Suspendisse auctor. In imperdiet. Phasellus pede. Cras consequat, libero id gravida viverra, neque justo ullamcorper lorem, a luctus ligula ligula ut nisi. In arcu. Maecenas purus.

Cras Sit Amet

Cras sit amet tortor in lorem ultrices elementum. Quisque sagittis justo at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi ut justo non massa congue feugiat. Donec ac sapien at erat mattis molestie. Aliquam tempor, nisl quis dignissim sollicitudin, felis risus placerat turpis, vitae convallis lacus ante quis erat. Fusce lectus. Nam eros urna, nonummy at, nonummy et, ullamcorper id, nisi. Phasellus vulputate, lorem vitae tincidunt luctus, arcu sapien bibendum lacus, nec scelerisque elit tellus et sapien. Cras tempus, lectus aliquam luctus ultrices, lorem diam faucibus nibh, id lacinia libero pede quis mauris. In adipiscing magna in felis.

Vivamus tellus. Nulla facilisi. Nam porta venenatis erat. Curabitur magna. Vivamus nec urna ut mi tristique bibendum. Duis tincidunt egestas nibh. Suspendisse vel nunc sed libero sagittis luctus. Proin porttitor. Nam euismod. Nunc consequat. Nulla nibh sapien, fermentum id, ullamcorper dictum, blandit id, risus. Nullam ut tellus eu turpis dictum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam ac nunc nec nisi volutpat sollicitudin. Nullam justo turpis, laoreet non, condimentum quis, auctor non, augue. Phasellus a nisi. Proin ut sem non lorem eleifend suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Phasellus vitae libero. Donec luctus auctor mauris. Fusce nisl. Sed a leo a ligula sagittis volutpat. Mauris accumsan varius tellus. Aliquam justo erat, volutpat vel, tincidunt vitae, vehicula ac, lacus. Morbi odio pede, commodo et, ultricies nec, nonummy non, purus. Etiam gravida vehicula tortor. In dapibus lacus a nibh. Sed consectetuer, urna nec semper porttitor, nisi felis bibendum odio, vitae fermentum nulla tellus ultricies erat. Vestibulum auctor arcu et est. Duis at urna. Nunc augue. Phasellus ullamcorper tristique dui. Fusce egestas rutrum diam. Maecenas eu metus.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id urna ac quam tincidunt vestibulum. Sed convallis. Nulla bibendum ante a mauris. Nunc tincidunt. Donec magna justo, ultricies ut, dapibus eu, rutrum a, velit. Suspendisse velit. Nulla facilisi. Praesent lobortis arcu eu quam. Donec aliquet diam id neque. Cras magna. Curabitur arcu erat, vestibulum ac, ornare id, viverra sed, dolor. Duis nec mauris. Quisque posuere nulla vitae dui. Nulla dictum. Vestibulum vestibulum magna vel eros blandit laoreet. Nunc porta tellus vitae velit. Aenean aliquet ullamcorper nisi. Nullam dui dolor, cursus ac, imperdiet eu, laoreet eget, diam. Quisque suscipit felis vitae tellus. Cras gravida odio vel mi.

Sed aliquam risus auctor velit. Vestibulum aliquet odio facilisis nunc. Integer viverra. Aliquam est. Proin vel augue sit amet nisi adipiscing elementum. Nam erat est, aliquet semper, tempor vitae, porta non, massa. Suspendisse a augue at neque congue pretium. Ut molestie varius magna. Curabitur cursus convallis elit. In congue eros quis diam. Suspendisse auctor. In imperdiet. Phasellus pede. Cras consequat, libero id gravida viverra, neque justo ullamcorper lorem, a luctus ligula ligula ut nisi. In arcu. Maecenas purus.

Cras Sit Amet

Cras sit amet tortor in lorem ultrices elementum. Quisque sagittis justo at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi ut justo non massa congue feugiat. Donec ac sapien at erat mattis molestie. Aliquam tempor, nisl quis dignissim sollicitudin, felis risus placerat turpis, vitae convallis lacus ante quis erat. Fusce lectus. Nam eros urna, nonummy at, nonummy et, ullamcorper id, nisi. Phasellus vulputate, lorem vitae tincidunt luctus, arcu sapien bibendum lacus, nec scelerisque elit tellus et sapien. Cras tempus, lectus aliquam luctus ultrices, lorem diam faucibus nibh, id lacinia libero pede quis mauris. In adipiscing magna in felis.

Vivamus tellus. Nulla facilisi. Nam porta venenatis erat. Curabitur magna. Vivamus nec urna ut mi tristique bibendum. Duis tincidunt egestas nibh. Suspendisse vel nunc sed libero sagittis luctus. Proin porttitor. Nam euismod. Nunc consequat. Nulla nibh sapien, fermentum id, ullamcorper dictum, blandit id, risus. Nullam ut tellus eu turpis dictum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam ac nunc nec nisi volutpat sollicitudin. Nullam justo turpis, laoreet non, condimentum quis, auctor non, augue. Phasellus a nisi. Proin ut sem non lorem eleifend suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Phasellus vitae libero. Donec luctus auctor mauris. Fusce nisl. Sed a leo a ligula sagittis volutpat. Mauris accumsan varius tellus. Aliquam justo erat, volutpat vel, tincidunt vitae, vehicula ac, lacus. Morbi odio pede, commodo et, ultricies nec, nonummy non, purus. Etiam gravida vehicula tortor. In dapibus lacus a nibh. Sed consectetuer, urna nec semper porttitor, nisi felis bibendum odio, vitae fermentum nulla tellus ultricies erat. Vestibulum auctor arcu et est. Duis at urna. Nunc augue. Phasellus ullamcorper tristique dui. Fusce egestas rutrum diam. Maecenas eu metus.

* { margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0px; }

body {
background-image: url(bg.gif);
background-repeat: repeat;
}

#container {
background-image: url(body.gif);
background-repeat: repeat-y;
width: 800px;
min-height: 500px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-image: url(headerfront.gif);
background-repeat: no-repeat;
height: 196px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#headerbg {
background-image: url(header.png);
background-repeat: repeat-x;
width: 100%;
height: 195px;
margin-top: -2px;
margin-bottom: -193px;
}
#content {
margin-left: 20px;
width: 480px;
float: left;
}
#navigation {
margin-left: 20px;
margin-right: 20px;
width: 180px;
float: left;
}

I've validated both of these documents and they both came back clean. The background that isn't showing up is #container.

AttachmentSize
laconic.jpg 1019.67 KB
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

It's because the #content

It's because the #content and #navigation are floats, which are taken out of the document flow and are allowed to 'hang' out of their parent. You need to contain the floats within their parent to give the parent (#container) the height needed to produce the background image. IE incorrectly does this automatically. There are several methods including one by this site's creator called the clearfix method (do a search for clearfix, or containing floats). Another method is to add overflow: hidden; to #container.

onlydan
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

thanks for the pointer

thanks for the pointer wolfcry, I solved it with just a clear:both footer, but i'll be sure to use the clearfix in future projects when a footer is obtrusive Smile

I have another problem with this layout, but it's on a slightly different tack, it's to do with a menu... should I carry on posting in this thread, or let this one go and create a new one for that specific problem?

Thanks again for all the help Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

onlydan wrote:thanks for the

onlydan wrote:
thanks for the pointer wolfcry, I solved it with just a clear:both footer, but i'll be sure to use the clearfix in future projects when a footer is obtrusive Smile

I have another problem with this layout, but it's on a slightly different tack, it's to do with a menu... should I carry on posting in this thread, or let this one go and create a new one for that specific problem?

Thanks again for all the help Smile

Probably better to start a new thread, then we can mark this one as "solved" Wink

Verschwindende wrote:
  • CSS doesn't make pies

onlydan
Offline
Regular
Last seen: 12 years 44 weeks ago
Joined: 2007-01-23
Posts: 43
Points: 0

ok, no problems, solved it

ok, no problems, solved it is Smile