Various CSS problems

Daniel Exe · 11-19-2005, 12:26 PM

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

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">&nbsp;</div>
<div class="leftmenu">
<div class="leftmenutop">&nbsp;</div>
<div class="leftmenuleftbarbg">&nbsp;</div>
<div class="leftmenucontent">

</div>
<div class="leftmenubottom"></div>
</div>

<div class="content">
<div class="contenttop">&nbsp;</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>&nbsp;</H3>
</div>
</div>
<div class="rightmenu">
<div class="rightmenutop">&nbsp;</div>
<div class="rightmenubg">
<div class="rightmenumargin">as<br /><br /><br /><br /><br /><br /><br />a</div>
<H4>&nbsp;</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:
????: NamePros.com http://www.namepros.com/programming/141288-various-css-problems.html
????: NamePros.com http://www.namepros.com/showthread.php?t=141288

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

LeetPCUser · 11-22-2005, 11:46 AM

Yes, this is a bit messy coding. IE has known bugs that sometimes need to be fixed. I could help you code this. I would recommend starting over. What I do is I slowly design and everytime I find something that looks wrong I try to fix that one error instead of trying to fix all of them. Start w the header, then the links and so forth.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Converting RedNerve to CSS - Hitting some problems!	will7	Web Design Discussion	10	12-13-2005 08:45 PM
CSS Problems: IE vs. Firefox	richid	Programming	4	02-01-2005 12:15 PM
css problems with ie, and a couple other things	thecatat	Programming	0	08-23-2004 06:16 PM

11-22-2005, 11:46 AM	#2 (permalink)
LeetPCUser Account Suspended Join Date: May 2005 Location: Whitewater, WI Posts: 3,710	Yes, this is a bit messy coding. IE has known bugs that sometimes need to be fixed. I could help you code this. I would recommend starting over. What I do is I slowly design and everytime I find something that looks wrong I try to fix that one error instead of trying to fix all of them. Start w the header, then the links and so forth.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)