Hi,
I'm trying to change the layout of my site from using tables to css.
old table layout (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk">http://www.halesowen.ac.uk</a><!-- m -->)
new css layout (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm">http://www.halesowen.ac.uk/newlayout/index.cfm</a><!-- m -->)
I'm pretty new to css, have I gone the right way about this?
Any feedback or advice would be great.
Many thanksLooks 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.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.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!!!!Basically this:
<style type="text/css">
<!--
/* cascading style sheet */
#menu, #promo, #news, #right {
float:left;
width:/* some value */
}
#footer {
clear:both;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="menu"></div>
<div id="promo"></div>
<div id="news"></div>
<div id="right"></div>
</div>
<div id="footer">
</div>
</body>
See the zip for details.
The 'important' div's have an id instead of classThanks 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 helpSee 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.Thanks!
Just what I was after, thanks for the advice....again!
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:
click for page (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=news/news&id=219">http://www.halesowen.ac.uk/newlayout/in ... ews&id=219</a><!-- m -->)Take the height out of your #framesetright.Thanks again.
I have a few more problems though.
Do you know why the divs are all out in IE, click for link (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=news/news&id=219">http://www.halesowen.ac.uk/newlayout/in ... ews&id=219</a><!-- m -->) 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, click for link (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=areas&schoolid=6">http://www.halesowen.ac.uk/newlayout/in ... schoolid=6</a><!-- m -->) is this possible
Thanks for all your helpAdd style="margin:0;" to (search) form
</div><br style="clear:both;" /><b>Career Aspirations: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
I'm trying to change the layout of my site from using tables to css.
old table layout (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk">http://www.halesowen.ac.uk</a><!-- m -->)
new css layout (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm">http://www.halesowen.ac.uk/newlayout/index.cfm</a><!-- m -->)
I'm pretty new to css, have I gone the right way about this?
Any feedback or advice would be great.
Many thanksLooks 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.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.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!!!!Basically this:
<style type="text/css">
<!--
/* cascading style sheet */
#menu, #promo, #news, #right {
float:left;
width:/* some value */
}
#footer {
clear:both;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="menu"></div>
<div id="promo"></div>
<div id="news"></div>
<div id="right"></div>
</div>
<div id="footer">
</div>
</body>
See the zip for details.
The 'important' div's have an id instead of classThanks 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 helpSee 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.Thanks!
Just what I was after, thanks for the advice....again!
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:
click for page (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=news/news&id=219">http://www.halesowen.ac.uk/newlayout/in ... ews&id=219</a><!-- m -->)Take the height out of your #framesetright.Thanks again.
I have a few more problems though.
Do you know why the divs are all out in IE, click for link (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=news/news&id=219">http://www.halesowen.ac.uk/newlayout/in ... ews&id=219</a><!-- m -->) 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, click for link (<!-- m --><a class="postlink" href="http://www.halesowen.ac.uk/newlayout/index.cfm?linkid=areas&schoolid=6">http://www.halesowen.ac.uk/newlayout/in ... schoolid=6</a><!-- m -->) is this possible
Thanks for all your helpAdd style="margin:0;" to (search) form
</div><br style="clear:both;" /><b>Career Aspirations: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