20 replies [Last post]
sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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 Smile
-SR

AttachmentSize
Untitled-1.jpg 81.77 KB
sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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

AttachmentSize
Untitled-2.jpg 49.15 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

What problems were you

What problems were you having with your earlier approaches? What did you attempt?

Verschwindende wrote:
  • CSS doesn't make pies

syrupcore
Offline
Enthusiast
Last seen: 10 years 32 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

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

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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





sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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.

.... Smile I'm gluing my hair back in as I type

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

hmmm ... maybe I should do

hmmm ...

maybe I should do this ...



>













< !--float right -->




>







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

AttachmentSize
Untitled-3.jpg 54.34 KB
sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

I've attached an annotated

I've attached an annotated example.

Thank you in advance
-SR

AttachmentSize
Untitled-3.jpg 126.7 KB
syrupcore
Offline
Enthusiast
Last seen: 10 years 32 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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?

Verschwindende wrote:
  • CSS doesn't make pies

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

Yes I can. I thought it was

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

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

Here are the images, let me

Here are the images, let me know if you need the fireworks png or an exported psd.

AttachmentSize
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
syrupcore
Offline
Enthusiast
Last seen: 10 years 32 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

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.

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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:

logo text

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?

Verschwindende wrote:
  • CSS doesn't make pies

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

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

syrupcore
Offline
Enthusiast
Last seen: 10 years 32 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

sroberts wrote:A vertical

sroberts wrote:
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. Smile 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. Smile

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

sroberts
Offline
Regular
Last seen: 11 years 39 weeks ago
Joined: 2007-12-15
Posts: 13
Points: 0

Ah, I get it - I'm going to

Ah, I get it - I'm going to play with that.

Thanks will!