noob to CSS

I need help fast PLEASE!

[snowmansmartie]

Hi guys,

I've just written a website and used some very basic CSS for some of the layout. The website is very easy, just a basic brochure site.

I have a nav bar at the bottom of each page which is contained within a div. The problem I have is when the screen resolution is increased or decreased the nav bar doesn't stay where it is. Unfortunately I am out of time on this website and I need to launch it on Friday.

I have the same problems with other items that are laid out with divs as well. I understand that the left and right operators go from the edge of the browser window, so how on earth do I deal with that?

I have also read that I shouldn't use position: absolute on divs for positioning, and that really has confused me!

I have included the part of the CSS that controls the nav bar and the code for the html of the navbar.

If anyone can shed some light on this, and give me some hints and advice for sorting out the other divs (ie if the nav bar solution works on all the others, great!).

CSS Code

.bottommenudiv{
position:absolute;
left: 472px;
top: 784px;
color:#006600;
z-index:99;
}

HTML Code

<tr>
<td colspan="8"><!--#include file="includes/bottom_menu.asp"--></td>
</tr>

obviously this code has the rest of the table wrapped around it!

Thanks for help

[encyclo]

When you use position:absolute you are taking the element out of the natural document flow. It appears you are using a table for layout. As such, you shouldn't need to use CSS positioning at all, as the table cell will keep position under the other cells.

[snowmansmartie]

Hi Encyclo,

Sorry about that. I had already done that! Just goes to prove you shouldn't post on a forum late at night after a hard day in the office!

The problem I need resolving is still the same rather than it being the menu nav at the bottom it is images that are aligned using divs dynamically.

There is an image file and a text file for the description the screen is split into 2 columns left and right.
CSS Code

.leftphoto{
position:absolute; 
left: 455px;
left:25%; 
top: 120px; 
width: 213px; 
height: 177px; 
z-index:99;
}
.lefttext{
position:absolute; 
left: 460px; 
top: 314px; 
width: 213px; 
height: 177px; 
z-index:99;
}
.rightphoto{
position:absolute; 
left: 715px; 
top: 120px; 
width: 213px; 
height: 177px; 
z-index:99;
}
.righttext{
position:absolute; 
left: 715px; 
top: 314px; 
width: 213px; 
height: 177px; 
z-index:99;
}

The HTML code is as follows:

response.Write("<div class='leftphoto'><img class='images' src='images/gazebos/" & LeftImage & "' /></div>") 'Top left photo
response.Write("<div class='lefttext'>" & LeftDesc & "</div>") 'Top left text

and the same for the right image and text.

This is what I need sorting out, and is driving me insane.

Any help would be appreciated.

Thanks

[d40sithui]

are these images/text in the table as well?
as encyclo pointed out, absolute positioning will porbably disrupt the flow of the entire page. often times, and from my experience, the page will look right on one resolution(since you've carefully selected an appropriate coordinates for it to "fit" in your current resolution), but when thats change to a certain degree, elements in absolute positioning will start to overlap or underlap where it shouldn't. the only times i use absolute position is for drop down menu(to hide it).
if you still want to use this, you may want to consider some javascript/server side scripting to find the user's screen resolution and generate the appropriate css to match it, which is more work.
i recommend you put these images and text inside the table if they're not already in there as well as change the position to "relative" or take it out completely. also use the <td align valign> options to align your elements. you may want to consider putting another table inside your main table to better format your display.

/* left: is assigned twice here. any reason for that? */
.leftphoto{
position:absolute;
left: 455px;
left:25%;
top: 120px;
width: 213px;
height: 177px;
z-index:99;
}

}

[snowmansmartie]

Hi,

This page is not in a table. I believe that I could use relative to put the elements back into the natural flow of the document.

All I need to know is how to set up the css to achieve this.

The 2 left: are a typo sorry for the confusion.

If I have to go back to using tables then I will have to, but I would love to get this using css.

thanks again.