- Impact
- 0
I've finally decided to try coding a full CSS layout instead of using tables. I've been using w3schools as a reference as I attempted to code the layout.
A preview of the layout can be found here.
The following code is what I'm using right now:
My layouttest.html
CSS file
Here's my current obstacles:
1. I'd like to make the left menu expand with the content. (which means that it's not a fixed size) I had tried a few methods but none had worked for me. The current css used for the left menu only works if the menu is at a specific size defined in the css but that is not what I want.
2. The layout looks...messed up in IE compared to FireFox and Opera. The bar that crosses the page vertically to the right of the right menu has a height of 100%. This works perfectly in FireFox but unfortunately, not so well in IE and the bar doesn't fully extend.
3. In IE, ".contentbg" extends too much to the right and the same thing for ".rightmenubg".
I'm just creating a test layout using CSS to get the hang of it (as I'd like to completely re-code my site) and I'm aware that there's probably better methods to obtain the same results for my code. I'd appreciate any help in surpassing these "noobish" obstacles of mine.
Thanks,
Daniel
P.S. I'm aware that the code of layouttest.html is a bit messy. =P
A preview of the layout can be found here.
The following code is what I'm using right now:
My layouttest.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Gaming Exe</title>
<link href="layout2/layout2.css" rel="stylesheet" type="text/css" />
<link href="layout2/favicon.png" rel="shortcut icon" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
</head>
<body>
<div class="banner1"><img src="layout2/banner1.gif" border="0px"></div>
<div class="banner2"><img src="layout2/banner2.gif" alt="Gaming Exe Banner" border="0px"></div>
<div class="banner3"><img src="layout2/banner3.gif" border="0px"></div>
<div class="banner4"><img src="layout2/banner4.gif" border="0px"></div>
<div class="bar"> </div>
<div class="leftmenu">
<div class="leftmenutop"> </div>
<div class="leftmenuleftbarbg"> </div>
<div class="leftmenucontent">
</div>
<div class="leftmenubottom"></div>
</div>
<div class="content">
<div class="contenttop"> </div>
<div class="contentbg">
<div class="contentpadding">as<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asas<br />a
</div>
<H3> </H3>
</div>
</div>
<div class="rightmenu">
<div class="rightmenutop"> </div>
<div class="rightmenubg">
<div class="rightmenumargin">as<br /><br /><br /><br /><br /><br /><br />a</div>
<H4> </H4></div>
</div>
</body>
</html>CSS file
Code:
/* text and body */
body
{
font-size: 10pt;
color:#C0CED7;
margin:0px;
font-family: arial;
background-image:url('bg.gif')
}
a:link
{
color: #A6BCCA;
text-decoration: none;
}
a:visited
{
color: #A6BCCA;
text-decoration: none;
}
a:hover
{
color: #6B8A9D;
text-decoration: none;
}
h1
{
font-size: 14pt;
text-align: center;
color: #B4C7D3;
margin: 0px;
padding: 0px;
font-weight: bold
}
h2
{
font-size: 10pt;
color:#AFC5D4;
font-weight: bold;
margin:0px;
}
.bar{
margin: 0px;
padding: 0px;
width: 6px;
height: 100%;
position:absolute;
left:770px;
top:0px;
border-width:0px;
background-image: url('bar.gif');
}
/* banner */
.banner1{
margin: 0px;
padding: 0px;
width: 265px;
height: 85px;
position:absolute;
left:0px;
top:0px;
border-width:0px;
}
.banner2{
margin: 0px;
padding: 0px;
width: 153px;
height: 85px;
position:absolute;
left:265px;
top:0px;
border-width:0px;
}
.banner3{
margin: 0px;
padding: 0px;
width: 203px;
height: 85px;
position:absolute;
left:418px;
top:0px;
border-width:0px;
}
.banner4{
margin: 0px;
padding: 0px;
width: 149px;
height: 85px;
position:absolute;
left:621px;
top:0px;
border-width:0px;
}
/* left menu */
.leftmenu{
margin: 0;
padding: 0;
width: 132px;
height: 340px;
position:absolute;
left:0px;
top:92px;
}
.leftmenutop{
margin: 0;
padding: 0;
width: 132px;
height: 26px;
position:absolute;
left:0px;
top:0px;
background-image: url('leftmenu_top.gif');
}
.leftmenuleftbarbg{
margin: 0;
padding: 0;
width: 19px;
height: 100%;
position:absolute;
left:0px;
top:26px;
background-image: url('leftmenu_bar_bg.gif');
background-repeat: repeat-y
}
.leftmenucontent{
margin: 0;
padding: 0;
width: 113px;
height: 100%;
position:absolute;
left:19px;
top:26px;
background-image: url('leftmenu_bg.gif');
}
.leftmenubottom{
margin: 0;
padding: 0;
width: 132px;
height: 18px;
background-image: url('leftmenu_bottom.gif');
position:relative;
bottom:-350px;
}
/* content*/
.content{
margin: 0;
padding: 0;
width: 505px;
position:absolute;
left:132px;
top:92px;
}
.contenttop{
margin: 0;
padding: 0;
width: 505px;
height: 29px;
position:absolute;
left:0px;
top:0px;
background-image: url('content_top.gif');
}
.contentbg{
margin: 0;
padding: 0;
width: 505px;
position:absolute;
left:0px;
top:29px;
background-image: url('content_bg.gif');
}
.contentpadding{
margin-left: 8px;
margin-right: 8px;
padding: 0;
width: 505px;
}
h3
{
text-align: center;
width: 505px;
height: 41px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
background: url(content_bottom.gif);
}
/* right menu*/
.rightmenu{
margin: 0;
padding: 0;
width: 133px;
position:absolute;
left:637px;
top:92px;
}
.rightmenutop{
margin: 0;
padding: 0;
width: 133px;
height: 29px;
position:absolute;
left:0px;
top:0px;
background-image: url('rightmenu_top.gif');
}
.rightmenubg{
margin: 0;
padding: 0;
width: 133px;
position:absolute;
left:0px;
top:29px;
background-image: url('rightmenu_bg.gif');
}
h4
{
text-align: center;
width: 133px;
height: 18px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
background: url(rightmenu_bottom.gif);
}
.rightmenumargin{
margin-left: 6px;
margin-right: 4px;
padding: 0;
width: 133px;
}Here's my current obstacles:
1. I'd like to make the left menu expand with the content. (which means that it's not a fixed size) I had tried a few methods but none had worked for me. The current css used for the left menu only works if the menu is at a specific size defined in the css but that is not what I want.
2. The layout looks...messed up in IE compared to FireFox and Opera. The bar that crosses the page vertically to the right of the right menu has a height of 100%. This works perfectly in FireFox but unfortunately, not so well in IE and the bar doesn't fully extend.
3. In IE, ".contentbg" extends too much to the right and the same thing for ".rightmenubg".
I'm just creating a test layout using CSS to get the hang of it (as I'd like to completely re-code my site) and I'm aware that there's probably better methods to obtain the same results for my code. I'd appreciate any help in surpassing these "noobish" obstacles of mine.
Thanks,
Daniel
P.S. I'm aware that the code of layouttest.html is a bit messy. =P
