I’m making a site for a lawyer ans I’d like to have some advice from you guys.
In attachment you will find the css-style and the template code.
I’m trying to work with tables where I usually work with div-tags, because I heard somewhere that tables are better positioned crossbrowser. Is that so?
I wanted to have some advice from you guys, how to improve this site crossbrowser.
I’m using a fillimages to have them repeat without being stuck to specific widths.
However on my footerfill I want the footer against the lefttriangle and aligned to the bottom of the page… I however don’t seem to find the mistake in the tablespecs nor the css-rule to fill it up until the left triangle, + my margin is 0 and still I see a margin in the footer (image 1Chrome).
As you can see on image 2Firefox, on Firefox my footer is getting repeated, I think this has to do with the valign = middle which firefox can’t read? How do I get this straight? How to add this good to my CSS without adapting a lot of the site?
3rd “issue”: As you can see in my code, I made my menu in 1 td with nbsp’s. I did that because I couldnt get the positioning clean if I added a Ul or other td’s to the table. Is this a justified way with the nbsp’s? Any other option?
Note: this is still a draft, so any other advice, tips would be helpful!
No, it’s not so. Tables were never meant to be used for layout, and table layouts have long since been recognized as a poor choice for page layout … especially now that CSS is supported in all browsers. So going back to this is retrograde, I’m afraid.
My advice would be to start again, but I can understand if you don’t want to. I’ve had a look at your files, but tables layout are not my thing, so I’m not sure I can give much advice. But the first thing you need to do is include a doctype at the top of the page. Even this will do:
<!DOCTYPE html>
But there needs to be something there to stop the browser going into “quirks mode”.
Thanks for the tip.
If I’d rewrite, div-tags are the way? Any advice on widths and positioning to make it good-looking crossbrowser. Can I basically (simplified) replace the table/tr/td-tags and replace them by divtags? And the properties I added now to the tables make them the same in my css-file for the divtags?
Not much appears on screen with the code you’ve given, so it’s hard to advise. But divs etc are a lot more efficient than tables, so don’t just replace all the table bits with divs, as it may be overkill. what would be handy is if you could post a screen shot of the basic layout you want.
You needn’t worry about cross browser layout problems. Standard HTML markup with CSS is totally cross-browser compliant, and has been for years now. IE6 and 7 are the only ones that require close scrutiny—but only if you try to get fancy. They are fine otherwise … and besides that, they are dead and buried now anyway. IE7 has about a 1% user base, and IE6 far less. I ignore them totally now.
Still need to adapt colours, photos, but the basic layout should be this… It’s over the entire width of the page and has a steady height.
Problems I have encountered (cross-browser) by using divtags on horizontal sites is not the width (it’s always 100%) but setting the height in a good form (do I use px or % all the way) AND added to that how does it look like (with percentages) if browser is windowed or put half screen or so.
Notice also in the footer the red rectangle-footer which is not connected to the lefttriangle. Which obv is what we want! This might be sorted out by the correct css-rule with divs?
That can make the site hard to read on wider screens, so it might be worth adding a max-width setting.
and has a steady height.
Not exactly sre what you mean by that, but height can be trickier with divs and CSS … although he best approach is to let the content set the height … which save a lot of needless hassles. All the same, there are methods for keeping the footer always at the bottom of the screen, if that’s what you meant.
how does it look like (with percentages) if browser is windowed or put half screen or so.
That’s something you need to plan for, that’s all.
Notice also in the footer the red rectangle-footer which is not connected to the lefttriangle.
That’s not difficult to fix, either, but again, does take some careful thought.
The trouble shows up in Firefox, too, if you widen the window enough.
Based on the example posted…
Add the two entries shown in red to your css:
[COLOR="#FF0000"].menutext p {
min-width:600px;
}[/COLOR]
p {
color:#0070c0;
[COLOR="#FF0000"] margin:0px;[/COLOR]
}
In the html,
Add a !DOCTYPE to the top of the page. I suggest either:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Thanks you guys for the replies, I’ve tried to rewrite an entire bunch and tried to put divs in it. I will post the test site tomorrow(hosting is just activated). In attachment you have a screenshot of the acual site as it is now (still need to change colours and stuff), as the basic layout should be.
My adatepd CSS and template code is also in it. Would you mind checking it out and possibly clean a little bit of the errors I made? Any tips to change something?
Just found out a little mistake, if you watch to the image in my previous post, you can see in the header that under the logo (in white) there appears to be 1px headerfill or something. This cause the alignment of the menu to be not exactly straight onto the right part( the guy’s head) off the header. It should appear as this is an uninterrupted line, but now it isn’t.
Just checked my css, but didn’t find out where the error is…
Any help?
Still a lot of tables in there. Without the images, it’s hard to see what’s going on here. Is it possible to post this online? If you have a website, you could post this as a test page.
yeah I agree, but at least now the entire page isn’t a table. I have now 3 tables, I just couldn’t get the header and footer placed in a correct way with the divs. It took me a while to place them as they are now inside the divs. With those images and fillers I didn’t see another option (in my abilities, I must say).
I used a table in the content aswell because I wanted to make a distinction between the left and right part (and leave some options open for maybe a jquery slideshow of images in the left part) and again it was easier to place that with a table.
I’m currently at work, but when I arrive home, I will put the site online on my page so you can have a look. I you have a look, can you tell me where I went wrong, or what can be better. And how on earth I can get the header and footer correct with divs :-).
p.s. Problem of previous post has been fixed by now.
Ok guys, managed to upload the site. Adapted the colours a bit, but still needs some change. http://www.advocaat-kvd.be/
I know the lawyer I’m making the site for has requested this lay-out, but in my opinion it’s a bit too boring.
I added some shadows to the menu and content to make it a bit more pleasing, but do you have any other tips to make this more appealing?
And if you care to help me out cleaning the code?
Without the images, it’s hard to see what’s going on here. Is it possible to post this online? If you have a website, you could post this as a test page.