A little CSS help please! Replacing Tables with CSS.

[dcdomain]

<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="Layer3" 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>

I'm making the transition from tables to CSS for a site layout and needed something that would accomplish the same thing as having a table with one row which is 100% of the site width. The row has three cells, first cell aligned left is locked at a certain pixel width, so is the third cell aligned right, it is also locked at a certain pixel width. When the page gets smaller or larger, the middle cell expands to whatever size it needs to be to make the entire row 100% of the window.

I used three DIVs and was wondering why something like this, would cause the page to be larger than it needs to be. There's nothing else on the page except these few lines, and I think the scroll bar appears because of the the second DIV's 'width:100%' and third DIV's right positioning.

When I scroll the to right, the third DIV which is supposed to stay all the way to the right doesn't move with the scrolling so the second DIV is able to show through. If I resize my browser window, the image correctly moves to the right. The scroll bar shouldn't even be there because there is nothing there that overflows to the right.

I also posted this up on a CSS forum, but with the amount of traffic there, I didn't receive any replies for a day.

 

[dcdomain]

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.

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.

 

[jonmullen]

What do you know us codeing guys wern't made for graphics...not me atleast

 

[jonmullen]

do you have a link I could look at, I bet I could help ya

 

[dcdomain]

Layout link

Thanks. With what I posted up top, I fixed the scrolling problem temporarily. 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?

Is there a cleaner way to do this layout than the way I'm doing it right now? Thanks!

 

[Mucman]

My link in my sig is all done with CSS and now tables... not sure if it's done well, but you can take a peak at the CSS and HTML to see
how mine is done.

 

[jonmullen]

ok here is what I did. I took all the absolute posistioning stuff out where I could. The only place I had to still use it was for the navigation links. I then took all the properties for the header objects and made them to where you could put them in a style sheet and just call the id. For example:
#left{
width:foo;
}
<div id="left"></div>

What id does is it just apples the style to that specific element and not all child elements.
I also changed some span's to div's since they work a little better when they are nested.
You might notice that I had to set the background-image property in both the back element and the parent header element. That is so that it renders correctly in both mozillia gecko browsers and IE6. Now all you have to do is copy and paste the text I put on my version of your page and put it into your style.css file.

The only thing I don't like about it, is that when the window gets too small it will drop the stuff to a new line. You can see what I mean by makeing your browser window width to small. But its really no worse than the overlay effects you get with your design when the window is not wide enough.

I hope this helps you. I think CSS is a step in the right direction for the web, I am glad to see more and more people embraceing it. You were not kidding you are very good with graphics, I hope I could for some help some time if I have some graphics questions.

 

[Oogle]

Just to add to what jonmullen did, you might want to use borders instead of pipe characters. And text-align: center would be more preferable to a nested div with align="center".

 

[jonmullen]

Originally posted by: Oogle
Just to add to what jonmullen did, you might want to use borders instead of pipe characters.

Yah I was thinking about that, but thought it it might now be worth it at the time. If it was my site, I would.

dcdomain,

If you do what to do that, you would do something like this:

#navobject{
border-left:1px solid #333333;
}

then put each link in side a span tag like so:
<span id="navobject"><a class="menu" href="foo.html">j00</a></span>

I personally did not like the way it looked at first. The text does not seem so line up verically to the border, this can be fixed it you mess with it some, but I did not want o mess with it, the pipe characters worked fine, but if your really a perfectionist you will mess with it to get it to work, lord knows I would on my site.

 

[Barnaby W. Füi]

Um. What is the point of putting CSS inline in style="" tags? You might as well just use tables and old fashioned html attributes if you're going to do it that way. I see the same exact style="blah blah" repeated like 5 times, that is one of the things CSS is supposed to replace!

 

[jonmullen]

Originally posted by: BingBongWongFooey
Um. What is the point of putting CSS inline in style="" tags? You might as well just use tables and old fashioned html attributes if you're going to do it that way. I see the same exact style="blah blah" repeated like 5 times, that is one of the things CSS is supposed to replace!

Yah I noticed that, but you will also notice that he has a stylesheet linked at the top of the page, my guess was, that he did not know your could define id's in a style sheet for some reason, you might noticed that I moved it all away from that in what I did.

 

[dcdomain]

Wow, thanks for all your help guys, especially Jon, learning from you guys is way quicker than from those help sites. If I get what you guys are saying, I could take this further and have all the links inside a particular DIV have the class "menu" without having to to the a class="menu" for each link by using IDs right? But that wouldn't really work since IDs applies it to the specific element and not child elements? Or am I just reading this all wrong?

And about the pipe characters, didn't know I could just have one left border, I'll definitely try that. Just have to figure out the vertical positioning so it lines up with the graphic. If anything, I could just make the DIVs holding the graphics smaller to cut away some of the extra white space in the JPEGs.

Thanks a lot for redoing the layout Jon... looks so much simpler now.

 

[jonmullen]

Originally posted by: dcdomain
Wow, thanks for all your help guys, especially Jon, learning from you guys is way quicker than from those help sites. If I get what you guys are saying, I could take this further and have all the links inside a particular DIV have the class "menu" without having to to the a class="menu" for each link by using IDs right? But that wouldn't really work since IDs applies it to the specific element and not child elements? Or am I just reading this all wrong?

And about the pipe characters, didn't know I could just have one left border, I'll definitely try that. Just have to figure out the vertical positioning so it lines up with the graphic. If anything, I could just make the DIVs holding the graphics smaller to cut away some of the extra white space in the JPEGs.

Thanks a lot for redoing the layout Jon... looks so much simpler now.

Well all the links are already inside the navigation div, and further within a <div align=center>, but thats not the point. I would still have all the links, with class menu, b/c you are defining a subclass of the link atribute, but the stuff we were saying, was a way to give the effect of the pipe character, w/o having to type it. So that you put each link within a <span></span> tag and give it some properties with CSS. You were talking about just doing one left border, that was exactly the way I would go about it, the trick being you won't do anything for the first link other wise you have a border where you dont want it. The problem was not the white space, but how the border and the text lined up.

with the pipe character they lined up vertically center | link |
but with the border it seemed like the text lined up with the bottom of the border and the top extended to far past it. I am sure this could all be worked out with something like,

padding-bottom:Xpx;
padding-top:Xpx;

or something along those lines. Another good idea is to use a padding-left and padding-right , for the space between the border and the text, insteat of hard coding a space.

 

[Oogle]

Just keep in mind the ideals behind CSS. It is, in theory, supposed to be the complete solution to the visual representation of HTML. That means that if you're using HTML tags to make your page look good, you're doing something wrong. Some examples of what I consider to be "incorrect" visual formatting are...

• Pipe characters to visually divide menu items
• extra br tags to add space in between paragraphs or images
• extra div/span tags solely for the purpose of applying more visual styles/effects
• spacer.gif for border graphics and horizontal rules
• using tables to make a UI

Of course ideology and reality still differ when using CSS. There are times when tables are still useful for some situations. Just be aware that there is probably a better CSS alternative.

A basic rule of thumb that I follow when I'm designing is to view my page layout without any styles. This is very easy to do since you can just comment out the style tag or external style sheet (or use a browser extension...). If you see that your page still has some remnants of text positioning or image formatting, then you probably didn't use CSS to its fullest potential. For example, Jon's layout still has centering and pipe characters even when all the styles are removed. If CSS was used completely, all the menu items would be aligned left and spaced with no pipes.

To see what I mean, take a look at www.meyerweb.com with styles and without styles (click on void(style);). This site is still perfectly legible and organized with or without styles. You don't see orphaned titles or images strewn about the place.

 

[jonmullen]

This is true, and like I said if I was doing this on a project of mine I would go back and tweek some things. Getting rid of that <div align="center"> tag would be one and so whould getting the pipe border to work just right, but I figured I should not do every thing for the guy, I mean he is trying to learn after all. But you are right, if ppl are going to learn CSS they should do their best to do it correctly, I mean the point of CSS is to get away from layout hacks...we dont need to create new ones .

 

[NeoMadHatter]

what resources are you using? i'm going to hopefully be able to try to get some php and css eventually time permitting. lots of work and exams and stuff keep bogging me down.

 

[Barnaby W. Füi]

For things like menus, it makes a lot of sense to use an unordered list, and then you can specify the pipe character to be the item delimiter, and you don't have to actually put it in the content.

http://www.alistapart.com/stories/taminglists/

 

[jonmullen]

Originally posted by: BingBongWongFooey
For things like menus, it makes a lot of sense to use an unordered list, and then you can specify the pipe character to be the item delimiter, and you don't have to actually put it in the content.

http://www.alistapart.com/stories/taminglists/

Thanks for the link...I forgot about that artical...I remember reading it a few months ago...btw dcdomain that side is one of the better sites on the web about making good CSS layouts and what not.

 

[dcdomain]

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

Here's the resulting piece. Thanks for all the help guys... been very informative and thanks for the links.

 

[jonmullen]

looks great much better than the first version, great job.

 

[Barnaby W. Füi]

btw, instead of:

<ul>
<li class="first"><a class="menu" href="login.php">login</a></li>
<li><a class="menu" href="query.php">query</a></li>
<li><a class="menu" href="submit.php">submit</a></li>
<li><a class="menu" href="modify.php">modify</a></li>
<li><a class="menu" href="contact.php">contact us</a></li>

<li><a class="menu" href="logout.php">logout</a></li>
</ul>

You can do:

<ul class="menu">
...
<li><a href="foo"></a></li>
...
</ul>


Basically just putting the class attribute on the parent unordered list, and then instead of doing a.menu in your css, do ul.menu a

 

[jonmullen]

Originally posted by: BingBongWongFooey
btw, instead of:

<ul>
<li class="first"><a class="menu" href="login.php">login</a></li>
<li><a class="menu" href="query.php">query</a></li>
<li><a class="menu" href="submit.php">submit</a></li>
<li><a class="menu" href="modify.php">modify</a></li>
<li><a class="menu" href="contact.php">contact us</a></li>

<li><a class="menu" href="logout.php">logout</a></li>
</ul>

You can do:

<ul class="menu">
...
<li><a href="foo"></a></li>
...
</ul>


Basically just putting the class attribute on the parent unordered list, and then instead of doing a.menu in your css, do ul.menu a

But wouldn't he still have to have:

<li class="first"><a class="menu" href="login.php">login</a></li>

for the first item so he does not get a bar on the left where he does not want one?

 

[Oogle]

Just to go that little extra step further, you should change your doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

It will allow browsers (Mozilla, IE) to render your page in "standards compliant mode" instead of "quirks mode". I doubt it'll make any visual difference. But, it might give you that extra sense of accomplishment to know that your page is fully standards compliant.

 

[dcdomain]

Didn't really understand fully the last post by BingBongWongFooey, but it worked =T. So no complaints. Though I changed the a.menu to ul.menu a, I was also expecting the need to change the a.menu:hover and a.menu:active but it doesn't look like I have to... no idea how that works.

Also I didn't have to keep the class"first" class"menu" =T.

 

[Barnaby W. Füi]

Yeah, you sometimes have to assign a class to a first/last item to distinguish it in CSS, although technically you shouldn't have to, according to the CSS2 spec. The :first-child and (I think) :last-child selectors let you do that. Last I checked, those only worked in gecko.

Didn't really understand fully the last post by BingBongWongFooey, but it worked =T. So no complaints.

Basically, what you're doing right now is declaring a bunch of anchors (<a>'s) with the class "menu." Then, in the CSS, you're saying, "any anchor with the class menu, do this stuff to." The way I am doing it, is declaring an unordered list (<ul>) with the class "menu," putting anchors inside of it with no class names, and then in the CSS, saying "any anchor inside of an unordered list, where the unordered list's class is 'menu', do this stuff to."

-------------------------------------------------

"any anchor with the class menu"
css: a.menu
html: <a class="menu" href=...>....</a>

--------------------------------------------------

"any anchor inside of an unordered list, where the unordered list's class is 'menu'"
css: ul.menu a
html: <ul class="menu"> <a href=...>...</a> .... </ul>