Transferring a layout to CSS

  Stuart Leyland 18:44 10 Jul 04
Locked

Hi everyone.

I am very new to CSS and I'm having some difficulties in porting a design to CSS. The CSS-less design (done with tables I'm afraid) can be found here: click here. The desired effect can only be seen in Internet Explorer (maybe Firefox but I don't have it installed currently) at the minute due to Opera's inability to deal with tables properly :-( You can see my attempt thus far at click here.

As you can see, the CSS layout does not have the border around it like the tables one does. Also on the CSS layout, I cannot resize the section on the left (the one containing just the homepage link). No doubt there is something wrong with my CSS as I copied it from somewhere on the net and then dismantled it and could not put it back together :-(

Any advice on what is wrong or betters ways to achieve what I want (starting again is no problem).

Thanks in advance.

  PurplePenny 14:03 11 Jul 04

I don't think that it is Opera's inability to handle tables that is the problem (that was fixed with 7.5 which is what I'm using). It looks more or less the same in Mozilla and Opera so it more likely that the problem is IE not following standards. You also have a proprietary attribute "bordercolor" which will get your page thrown out by validators and cause it to diplay differently in browsers that don't understand it.

I'll have a fiddle with your CSS and see what I can come up with.

Penny

  Stuart Leyland 14:09 11 Jul 04

Hi Penny.

The way IE displays it should, in theory, be the right way because I set up cellspacing which should make it look like it does in IE rather than Opera and Mozilla. Oh well, happy days of cross browser compatibility, hey?!

Thanks for offering to have a play with my, no doubt, appalling attempt at CSS.

  PurplePenny 14:58 11 Jul 04

I have come up with something that looks like your table layout in Opera and IE but Mozilla is applying the outer border differently <sigh>.

So far I can only get the link background to fill the whole of its side of the page by assigning a specific height. Is that OK?

If I post it on here will it mess up? I'l try it.......

<style type="text/css">
<!--

body {
font-family: Trebuchet MS, Arial, Verdana, Microsoft Sans Serif, Times New Roman;
font-size: 12pt;
background: #FFFFFF;
color: #33AF52;
margin: 0;
padding: 0;
}

#container
{
width: 95%;
margin: 2.5%;
border: 1px solid #000000;
}

#top {
background: #4E679F;
margin: 5px;
padding: 5px;
text-align: center;
}

#links {
float: left;
background: #4E679F;
padding: 5px;
margin: 5px;
width: 20%;
height: 300px;
}

#content {
float: right;
padding: 5px;
margin: 5px;
background: #FFFFFF;
text-align: left;
width: 75%;
}

-->
</style>


</head>

<body>

<div id="container">
<div id="top">Banner goes here</div>
<div id="links">Links go here</div>
<div id="content">
<p> </p>
<p>Hello.  Welcome to the Copley High School Council website. 
<a href="index.htm">Back home</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>

</body>

</html>

  PurplePenny 15:01 11 Jul 04

I thought that it might - well you know what your content was - I took it from your table layout page.

Penny

  PurplePenny 15:03 11 Jul 04

I used the following DOCTYPE when I was testing it:

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

(spaces inserted after http: and www. )

This thread is now locked and can not be replied to.

Surface Pro 5 News - release date, UK price, features, specs

Microsoft Surface Studio hands-on review: the iMac killer is here

Best Mac antivirus 2017