4 replies [Last post]
dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 2 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Greetings,

Newbie here trying to move on from tables. I've been trying to do this since last night, but haven't found any real solutions. I have a top navigation bar that spans the entire page. There are two fixed elements, a left image and a right image, the middle image must be dynamic and scale with the page. So far, I've use the following (should I switch from span to divs?):

<span style="float:left;width:500px;"><img src="images/menuleft.jpg" width="500" height="150"></span>
<div align=""></div>
<span style="float:right;width:150px;"><img src="images/menuright.jpg" width="150" height="150"></span>

I have no idea what to do for the div align part (the middle cell) to make it go the 100 percent and repeating a background image.

The only thing I can think of right now, is to make everything div's, and have the second (middle) div go all the way across the screen and then have the right div float on top of it using the z:index...

Any help will be appreciated. Thanks!

"What I had, I gave today. What I saved, I lost forever."

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 2 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Here's the code using DIVs

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:500px; height:150px; z-index:1; background-image: url(images/menuleft.jpg); layer-background-image: url(images/menuleft.jpg); border: 0px none #000000;"></div>
<div id="Layer2" style="position:absolute; left:500px; top:0px; width:100%; height:150px; z-index:2; background-image: url(images/menuback.jpg); layer-background-image: url(images/menuback.jpg); border: 0px none #000000;"></div>
<div id="Layer2" style="position:absolute; right:0px; top:0px; width:150px; height:150px; z-index:3; background-image: url(images/menuright.jpg); layer-background-image: url(images/menuright.jpg); border: 0px none #000000;"></div>

Problems I've run into using this I'm getting horizontal scrollbars when I shouldn't be. There's nothing else on the page so in theory, the page should be whatever size I set the window to. With the scrollbar, if I scroll to the right, the right div stays in place, so I can actually see the second div show up behind it and extending all the way to the right.

"What I had, I gave today. What I saved, I lost forever."

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 2 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Newbie here, how to make a span or div a dynamic size?

So I got rid of the second DIV's left offset of 500pixels and it worked. I made the second/middle DIV the bottom layer and just made it 100% width and placed the left and right DIVs as layers on top of it.

Now all I need is to figure out a way to sort of prevent the right DIV from sliding over and covering the first or second DIV when resizing the window. There's some sort of min-width function I can do right?

I'm pretty sure there is a better way of doing it, where the elements would follow one after another. Would anyone like to educate me? =D. I've been reading a lot about CSS and PHP and this stuff is GOLD... just wish I had a better mind for this stuff, graphic dudes weren't made for coding... even this simple layout stuff gives me a headache.

"What I had, I gave today. What I saved, I lost forever."

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Newbie here, how to make a span or div a dynamic size?

You've done well with answering your own problems... Laughing out loud

There is a min-width property but that won't work with IE AFAIK. If you want to give us what you've got so far then we can look further into it...

I think preventing two fixed-width DIVs from overlapping could be interesting, need a challenge!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 16 years 2 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

Newbie here, how to make a span or div a dynamic size?

http://www.alexduan.com/liferollcall/includes/menu.php

Here's what I have so far. Only problem is when the window is too small, the right image goes down one line.

"What I had, I gave today. What I saved, I lost forever."