/    Sign up×
Community /Pin to ProfileBookmark

New css layout

Copy linkTweet thisAlerts:
Feb 06.2005

Hi,

I’m trying to change the layout of my site from using tables to css.

[URL=http://www.halesowen.ac.uk]old table layout [/URL]

[URL=http://www.halesowen.ac.uk/newlayout/index.cfm]new css layout[/URL]

I’m pretty new to css, have I gone the right way about this?

Any feedback or advice would be great.

Many thanks

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@mikepurvisFeb 06.2005 — Looks good.

I just checked a few browsers, though, and it seems IE4 and IE5 add some weird here and there. Might just need a box-model hack or something, not sure.

Both of them drop the footer to very low for some reason.

Basically, it's consistent right now, but just be sure to keep an eye on it as you continue to work.
Copy linkTweet thisAlerts:
@MstrBobFeb 06.2005 — [font=trebuchet ms][COLOR=royalblue]Looks good thus far. The footer is down rather low for IE 5 and 5.5 though, those are still used a bit so you're going to want to fix it, I can't see why IE's doing that, but ahwell. Don't worry about IE 4, though. It's used by very, very few people, and isn't worth the trouble to make it cooperate. That's like trying to make a site NS 4 compatable.



You're links also seem to be different in Mozilla Firefox then they are in IE. In Firefox they are blue and without any bullets.[/COLOR][/font]
Copy linkTweet thisAlerts:
@mattasticauthorFeb 07.2005 — Thanks for the replies.

Do you know how I can get the footer to clear the other divs, rather than put in loads of <br> tags?

EDIT:

I've ran into trouble, I've taken away the absolute positioning, I can now get the divs to clear each other, but now I cant get them next to each other....ARRRRRGGHHHHHH!!!!
Copy linkTweet thisAlerts:
@FangFeb 07.2005 — Basically this:
&lt;style type="text/css"&gt;
&lt;!--
/* cascading style sheet */
#menu, #promo, #news, #right {
float:left;
width:/* some value */
}
#footer {
clear:both;
}
--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;div id="menu"&gt;&lt;/div&gt;
&lt;div id="promo"&gt;&lt;/div&gt;
&lt;div id="news"&gt;&lt;/div&gt;
&lt;div id="right"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
&lt;/div&gt;
&lt;/body&gt;

See the zip for details.

The 'important' div's have an id instead of class
Copy linkTweet thisAlerts:
@mattasticauthorFeb 10.2005 — Thanks for that.

I have another question though.

I need the promo div to come before the menu in the html, but when I attach the style sheet I want the menu to be on the left.

Can you tell me how I can do this?

Thanks for your help
Copy linkTweet thisAlerts:
@FangFeb 10.2005 — See attachment

Important with CSS: "design and implementation"

Design the layout of your page them implement it with CSS.

Do not tweak the design; the result often breaks the layout requiring a complete rewrite of the CSS.
Copy linkTweet thisAlerts:
@mattasticauthorFeb 10.2005 — Thanks!

Just what I was after, thanks for the advice....again!

? ?
Copy linkTweet thisAlerts:
@mattasticauthorFeb 15.2005 — Can anybody explain why the footer doesnt clear the other divs, and appear at the bottom of the page in firefox please?

I have used clear:both in my style sheet:

[URL=http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=news/news&id=219]click for page[/URL]
Copy linkTweet thisAlerts:
@ray326Feb 15.2005 — Take the height out of your #framesetright.
Copy linkTweet thisAlerts:
@mattasticauthorFeb 17.2005 — Thanks again.

I have a few more problems though.

Do you know why the divs are all out in IE, [URL=http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=news/news&id=219]click for link[/URL] it works fine in firefox.

I also need to stretch the div called student profile (halfway down the page) to the height of the photo, [URL=http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=areas&schoolid=6]click for link[/URL] is this possible

Thanks for all your help
Copy linkTweet thisAlerts:
@FangFeb 17.2005 — Add style="margin:0;" to (search) form

</div><br [COLOR=green]style="clear:both;"[/COLOR] /><b>Career Aspirations:
Copy linkTweet thisAlerts:
@mattasticauthorFeb 17.2005 — Thanks for that.

The divs are still messed up in IE though, any more ideas?

EDIT: The only way I can think of doing it is, surrounding the bannerbotleft and bannerbotright with a bannerbot div who's clear is set to both.

My isn't IE pants.....



Thanks
×

Success!

Help @mattastic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...