|
|
Posted by UKuser on 11/27/79 11:59
Hi Folks,
Below is some test text which I've been working on, to try and get my
head around CSS more.
However I've observed 3 issues, mainly with Firefox which dont seem to
like some bits.
1) Although "centered" is centered, in Firefox the background colour
doesnt display
2) The borders in firefox appear to be much wider than IE
3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox
Not quite sure why its not working, but can I recommend
http://www.yourhtmlsource.com/stylesheets/csslayout.html
for newbies explaining about layout - its not my own site, but its
good.
Thanks
Sp
<HTML>
<style>
body {
text-align:center;
}
#top{
width:100%;
height:50px;
background-color:cyan;
}
#overall{
width:100%;
height:100%;
background-color:lightgray;
}
#main {
margin:auto;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightblue;
}
#second{
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:lightgreen;
}
#third{
position:relative;
left:5px;
top:10px;
float:left;
width:500px;
height:100px;
border: 1px 1px 1px 1px;
border-style:solid;
background-color:yellow;
}
#right{
float:left;
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
}
#bottom{
float:left;
width:100%;
height:50px;
background-color:cyan;
}
#containedbottom{
right:0%;
left:0%;
position:absolute;
width:100%;
bottom:8px;
height:50px;
background-color:cyan;
}
#centered{
width:300px;
height:100px;
background-color:red;
border: 1px 1px 1px 1px;
border-style:solid;
margin: 0 auto; text-align: left;
}
</style>
<body><div id="overall">
<div id="top">
this is top text
</div>
<div id="main">
this is test text
<div id="second">
second text
<div id="third">
third text
</div>
</div>
</div>
<div id="right">
this text should appear to the right of first box
</div>
<div id="bottom">
this is bottom text
</div>
<div id="centered">
this text should be centered
</div>
<div id="containedbottom">
this is bottom text v2
</div>
</div></body>
Navigation:
[Reply to this message]
|