How should I structure this? [large images]

  • Shattered Plastic
  • Student
  • Student
  • Shattered Plastic
  • Posts: 66

Post 3+ Months Ago

I'm making this image-heavy layout and I'm wondering what the best way, code-wise, to structure the page is. I'd like the whole thing to be centred.

Here's what it looks like:
Image

Ignoring the top part for now, I have 3 background pieces for the lower section. (and ignore the awkwardness of the centre of the images, that will be covered up anyway)

Image

Image

Image

So this is what I've come to.

Option 1
The top part stays at the top, bottom stays on the bottom of the screen, and the middle part repeats. In this case, the middle can just be a solid colour. Then I'd have to make the content and navigation boxes on top of the backgrounds. (Negatives to this option -- the left box is semi-transparent, and both boxes have shadows around them, which I'd prefer to keep)

Option 2
I remake all of these images WITH the content and navigation boxes as part of each one. In this case, the middle would have to be a repeating image.

So I'm stuck, because I don't know how to employ either of these options effectively. Do you have any idea how I can make it work?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

I would do it differently than you've described.
Make the left-hand side of the page a repeating pattern, and make the picture wide enough that 1600 browsers will still render it correctly.

CSS Code: [ Select ]
body {
background: url('img/bg1.gif') repeat-y bottom left;
}
  1. body {
  2. background: url('img/bg1.gif') repeat-y bottom left;
  3. }


Then, make everything under the heading bar encased in a separate div

CSS Code: [ Select ]
#container {
background: url('img/bg2.gif') repeat-y bottom right;
}
  1. #container {
  2. background: url('img/bg2.gif') repeat-y bottom right;
  3. }
  • Shattered Plastic
  • Student
  • Student
  • Shattered Plastic
  • Posts: 66

Post 3+ Months Ago

I'm sorry, I don't quite understand what you mean.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Which part would you like further explanation on?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I think I'd do it as follows:
I'd put the top blue part inside a div {header div}
I'd then add a second div beneath the header div {body div}
Then I'd add three divs inside the body div each with "float:left" (left div,center div and right div)
Below those I'd add a div with "clear:both" (clearer div)

With that you'll have a basic layout going already ... then you could also do the following:
Add a div for the menu inside the header div (menu div)
Add a div for that "text here" part and add it below the header div (text_here div)

And now it depends if you are going to use the left hand side menu's half-transparent part as an image or as a half-transparent div how you'll tackle that part ...

And obviously another div around everything to keep it all centerd (container div)
  • Shattered Plastic
  • Student
  • Student
  • Shattered Plastic
  • Posts: 66

Post 3+ Months Ago

neksus wrote:
Which part would you like further explanation on?


Oh, I just can't picture/imagine how it works, sorry.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 85 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.