Hello!
I have watched DnnCreative's brilliant video about how to make tableless skins and after that I decided to be a little creative and make my own css-skin from scratch. I've spend some hours trying out css code. I have studied the css code that following with "Simple Red Leaf Skin 3 Panes" and now I'm trying out a concept with top, left, content, right and bottompanes. I don't attach importance to the dotnetnuke code yet but rather concentrating on how css elements will fit in the different browsers. This code is okey in the Internet Explorer 6.x and Opera 8.x. The problem is Firefox (I use 2.0 now). The rightside seems to be pushed down on another row. I tried out several solutions now but the problem is still here. Can anyone help?
I use for now a link to my css inside the html just for testing purposes.
Here is the HTML code: Here goes the TopPane
Here goes the LeftPane
Here goes the ContentPane
Here goes the RightPane
Here goes the BottomPane
And here goes the CSS:body {
margin:5 auto;
padding:0px;
text-align:center;
background-color:#FFFF99;
}
#wrap
{
width: 850px;
border: 1px black solid;
list-style-type: none;
padding: 5px;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
overflow:hidden;
}
#RightSide {
width:25%;
float:left;
background:#FFCC00;
padding:5px;
text-align:left;
}
#ContentArea {
width:50%;
float:left;
background:#fff;
padding:5px;
text-align:left;
}
#LeftSide {
width:25%;
float:left;
background:#CCCCCC;
padding:5px;
text-align:left;
}
#BottomArea {
width:100%;
float:left;
background:#fff;
padding:5px;
text-align:left;
}
#TopArea {
width:100%;
float:left;
background:#fff;
padding:5px;
text-align:left;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
p,h1 {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#TopArea h1 { margin:0px; padding:10px}