I have a one column liquid layout. Each column has a background image that stretches to the width of the Users browser. This looks and works great.
The design work is built from the center.
It looks like this: (Sorry I’ve tried so many “approaches” that my code is a mess I’ve started from scratch again. – these examples will be much more simple to discuss from.)
-------------------
Header / Navigation
-------------------
banner
-------------------
Main Content
-------------------
Footer
-------------------
Each Row has a centered Background Image with centered lighting effect. The background fades at the sides to the rows background color so the browser can be resized and it looks like the image runs the width of the browser.
The text and image placement is like this:
------------------------------------------------------------------------------
Logo (Image) (Left of center) / Navigation (Text over Image) (Right of center)
------------------------------------------------------------------------------
Icon / Tag Line (Image) (Left of center) / Icon (Image) (Right of center)
------------------------------------------------------------------------------
Text (Left of center) / Tag lines (Image) (Right of center)
Text (Left of center) / Tag lines (Image) (Right of center)
Text (Left of center) / Tag lines (Image) (Right of center)
Text (Left of center)
Text (Left of center)
------------------------------------------------------------------------------
Footer (Text) (Centered)
------------------------------------------------------------------------------
I'd entertain a two column layout but I'm unsure how to get each rows background image to run the width of the browser across two columns so the two images (columns) meet in the center and appear as a single horizontal image.
So, I have some image elements that I would like to place off the center and stay exactly where they are off of the center when the browser window is resized.
I cannot find any tutorials for a one column liquid layout that discusses the best method to place images and text over the background images.
Further, most tutorials focus on the boxes of a liquid layout and not the placement of images and text.
Where can I start? Or can anyone guide me towards the best approach for this type of wireframe?
Thanks in advance.
-SR
I'm a little confused as to
I'm a little confused as to what you're after.
I think an annotated image would make it easier for me to understand
Thank you, Here is a
Thank you,
Here is a wireframe with a little style and some really bad colors :jawdrop: but functionally it is what I have sketched. The navigation menu items will have images behind them too and will also change when the mouse hovers over them. This is not shown in the sketch.
TIA
-SR
Attachment | Size |
---|---|
Untitled-1.jpg | 81.77 KB |
oh yea, when the browser
oh yea, when the browser window is resized I want the content to stay in the middle ... I've attached an example.
Thanks again for any advice ...
Attachment | Size |
---|---|
Untitled-2.jpg | 49.15 KB |
What problems were you
What problems were you having with your earlier approaches? What did you attempt?
that's a tricky layout if
that's a tricky layout if you want the content to be able to expand vertically as well. seems like our design department is doing more and more of that and I'm losing more and more hair.
I think one of the questions you're asking in there is how to keep the background image centered. that's pretty easy.
#myDiv {
background: #yourhex url(bg.gif) 50% 0 repeat-x;
}
the key there is that 50%. that's positioning the the center of bg image at the horizontal center of the container.
Will
Here is the css* {
Here is the css - the issue is placing the text and images ("Logo", "Topic", etc.) over the background images and keeping them in the same spot when the browser is resized ...
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 100%;
}
#header {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 68px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row1bkg.jpg) no-repeat scroll bottom center;
}
#headerseparator {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 1px;
margin: 0px 0px 0px 0px;
background: #333333;
}
#banner {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 169px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row2bkg.jpg) repeat scroll bottom center;
}
#mainshadow {
color: #000000;
width: 100%;
float: left;
padding: 0px;
height: 18px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row3shadow.png) no-repeat scroll top center;
}
#main {
color: #000000;
width:100%;
float: left;
padding:0px;
margin: 0px 0px 0px 0px;
background: #333333 url(images/row3shine.png) repeat-y scroll bottom center;
}
#footer {
color: #000000;
width: 100%;
clear: both;
margin: 0px 0px 0px 0px;
padding1: 0px;
background: #333333 url(images/row4shadow.jpg) no-repeat scroll top center;
}
/*
This is an attempt to place an image in a specific position on the screen
*/
img.center {
display: block;
margin-left: auto;
margin-right: auto;
padding-top:37px;
padding-left:590px;
}
and the html is a mess again, but
Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus posuere, leo pharetra laoreet
Thanks Will, Yea, but I do
Thanks Will,
Yea, but I do not want the content to expand vertically - I want it to stay centered. Although, I do want the divs to expand and let their color show on the left and right so it looks like the centered background images are expanding.
.... I'm gluing my hair back in as I type
hmmm ... maybe I should do
hmmm ...
maybe I should do this ...
Not sure if there is a better way though.
The issue will be that I want to have the banner image on the right (the pie chart in the example attached) to float a little over the navigation and main rows (divs.)
Attachment | Size |
---|---|
Untitled-3.jpg | 54.34 KB |
Sorry Will, EDIT - "Yea,
Sorry Will,
EDIT - "Yea, but I do not want the content to expand horizontally - I want it to stay centered.
I had said “vertically” and that was incorrect.
Thanks
-SR
I've attached an annotated
the trick is that you are
the trick is that you are going to unfortunately need wrapper divs. since you need the images to expand full width but want to constrain the text. well, you could possibly do it without wrappers but it would be such a headache, I'd forgo a bit of semantics here (egad!).
header
header-content
leader
leader-content
content
maincontent
footer
footer-content
is the basic structure that comes to mind. you apply the bg images to the top level ones and put you text inside the -content ones. that idea is that the top level ones do not get a width - they stretch the whole page width. each of the inner ones get a width and margin: 0em auto; to center them.
the reason to do it this way is so that you can have each 'row' have its own bg image. by aligning each rows bg image to the bottom of the container, your content can expand _vertically_ when some one either resizes the text or you dump more content in there then you originally intended.
hopefully that gets you going.
will
I think we're getting
I think we're getting somewhere with this, but you're overcomplicating it slicing it up into too many different sections when you don't need to.
Could you possibly attach the images you want to use, for me to have a play with?
Yes I can. I thought it was
Yes I can. I thought it was too much complication for something simple.
I can slice up the Fireworks png I have, send the fireworks png or export to psd - what would be better?
I'm afraid that if I slice up the images I may continue to overcomplicate it and slice them up into too many different sections.
(I'll start making the images in the meantime ...)
Here are the images, let me
Here are the images, let me know if you need the fireworks png or an exported psd.
Attachment | Size |
---|---|
banner_bkg.png | 1.29 KB |
banner_image.png | 14.07 KB |
banner_logo.png | 4.98 KB |
banner_shadow.png | 2.58 KB |
banner_tag.png | 10.38 KB |
footer_bkg.png | 4.14 KB |
header.png | 6.88 KB |
main_bkg.png | 1.27 KB |
main_image.png | 11.2 KB |
wireframe.jpg | 67.57 KB |
a cheaper way...
if vertical expansion isn't required, you can make a vertical slice of your comp. make that the body bg. then, each section gets the centered background image slice that goes with it. this way, you wont need the inner containers (header-content...). when some one resizes the text though, your section backgrounds may lose alignment with the body background.
Thanks syrupcore,A
Thanks syrupcore, I appreciate the help.
A vertical slice of the back ground will not pick up the horizontal gradient across each of the horizontal rows.
Way too many slices, and you
Way too many slices, and you need to separate the text from the background images.
Going from this image here:
http://csscreator.com/files/wireframe.jpg
I see:
Title
Lorem ipsum etc etc
copyright text
I don't have photoshop I only have Paint Shop Pro X, do you know if that opens PSD files? If not I'll take a look at the image at work tomorrow, we have PS there. Could you attach the PSD file?
Thanks again Milton,CSS
Thanks again Milton,
CSS has been an interesting experience for me. While I'm now clear on the possibilities of css, its practical / best use eludes me (i.e. what is the best way to architect a site giving a particular scenario.) I guess this comes from experience.
It would be great if, beyond the tutorials, there was a site that offered war stories - so new Users could learn practical skills from other user’s experience.
Glad I joined this site, I'm looking forward to learning more. I’m going to start playing with what you posted.
I'll send it to your email.
-SR
sroberts wrote:A vertical
A vertical slice of the back ground will not pick up the horizontal gradient across each of the horizontal rows.
funny, I tried for a while to say that correctly - I obviously failed. I meant a vertical line from one of the far sides of your comp. if that tiles across the bg of your page, that will give you the horizontal slices for your gradient sections to fade into beyond your preset content width. so your content containers contain the horizontal gradients at 800px wide or whatever and then the vertical slice is there on the sides no matter how wide the browser gets. again though, this method ties you into preset heights. it's not really the way to go but if I was really short on time, I might pull a stunt like that.
The problem with full width stripes like this, I've found anyway, is that they really require two containers to be vertically flexible. One container to stretch all the way across the page and another container to constrain the width of the content. I seems thepineapplehead has a good idea going. So yeah, I'd ignore me. I don't know how the slicing will work but I'm looking forward to learning me a little something cause these sorts of layouts kick my butt.
will
Ah, I get it - I'm going to
Ah, I get it - I'm going to play with that.
Thanks will!