[HTML & CSS] DIV seems to be overriding a part of my Layout [HTML & CSS]

YeImANutter · Jul 6, 2009

Heya Guys.

I'm having diffculties positioning other DIV tags under my Navigation Tabs. When I go to position it, it will (or seems to) automatically use a property of a DIV. I can't explain it, it's wired. But I'll try my best.

When I create a div (as mentioned above) it seems to use the css of another Div tag, and It's really hard to position the Div using Css under my Tabs.

Here's an image so you can get a better understanding on what I'm talking about.

YeImANutter - [HTML & CSS] DIV seems to be overriding a part of my Layout [HTML & CSS] - RaGEZONE Forums

And here's the source.

HTML (index.html)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home :: Habbo Layout</title>
</head>
<link type="text/css" rel="stylesheet" href="styles/home_style.css" />
<body vlink="#FFFFFF" alink="#FFFFFF" link="#FFFFFF" id="homePage">
<div id="header-container">
<div id="container">
<div id="navmenu">
<ul>
	<li><a id="homePageLink">Home</a></li>
    <li><a href="item-1.html" id="page7link">Community</a></li>
    <li><a href="#" id="page7link">Safety</a></li>
    <li><a href="#" id="page7link">Credits</a></li>
<div id="news">
  <div align="left">
    <p>null</p>
    </div>
</div>
</ul>
</div>
</div>
</div>
<p><br />
</p>
<div id="newsUnder">null</div>
</body>
</html>

And here's the code for the CSS

CSS (home_styles.css

Code:

@charset "utf-8";

body {
	margin: 0px;
	padding: 0px;
	background-image:url('../background_image.png');
    height: 269px;
}

#container {
	text-align: center;
	top: 20px;
}

#navmenu {
	width: 600px;
	height: 100px;
	padding: 0px;
	margin: 0px auto;
}

#navmenu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

#navmenu ul li {
	width: 142px;
	float: left;
	margin: 68px 4px 4px 4px;
	
}

#navmenu ul li a {
	font-family: verdana;
	text-decoration: none;
	display: block;
	width: 150px;
	height: 30px;
	line-height: 30px;
	font-size: 12pt;
	background-image: url(../navigation_tabs.png)
	
}

#navmenu a:hover {
	background-position: 0px -30px;
	font-weight: bold;
	color: #FFF;
}

#homePage #homePageLink {
	background-position: 0px -60px;
	font-weight: bold;
	color: #000;

}

#header-container {
	background-repeat: repeat-x;
	background-image: url(../topbg.png);
	background-position: 0 100%;
	background-color: #bce0ee;
 	z-index: 2;
}

/* Main Content */


#news {
	float: left;
	width: 250px;
	height: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	top: 250px;
	color: #000000;
	font-size: 14px;
	font-weight: 900;
	background-color: #CCCCCC;
}
#newsUnder {
	background-color: #FFFFFF;
	width: 250px;
	height: 75px;
	float: left;
	top: 300px;
	
}

I am sorry, but I really don't know how to explain it. But I think it had something to do with the WIDTH in the #navmenu rule.

Thanks in advanced.
YeImANutter

Parker · Jul 6, 2009

4px to 2px if you want it positioned on the right below the line.

Code:

#navmenu ul li {
	width: 142px;
	float: left;
	margin: 68px 4px [B]2px[/B] 4px;
	
}

You do know that you have a paragraph tag?

Code:

</div>
<p><br />
</p>
<div id="newsUnder">null</div>
</body>

Try this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home :: Habbo Layout</title>

<style type="text/css">@charset "utf-8";
body {
	margin: 0px;
	padding: 0px;
	background-image:url('../background_image.png');
    height: 269px;
}

#container {
	text-align: center;
	top: 20px;
}

#navmenu {
	width: 600px;
	height: 100px;
	padding: 0px;
	margin: 0px auto 0px auto;
	
}

#navmenu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
	border:1px solid #CCC;
}

#navmenu ul li {
	width: 142px;
	float: left;
	margin: 68px 4px 2px 0px;
	
}

#navmenu ul li a {
	font-family: verdana;
	text-decoration: none;
	display: block;
	width: 150px;
	height: 30px;
	line-height: 30px;
	font-size: 12pt;
	background-image: url(../navigation_tabs.png)
	
}

#navmenu a:hover {
	background-position: 0px -30px;
	font-weight: bold;
	color: #FFF;
}

#homePage #homePageLink {
	background-position: 0px -60px;
	font-weight: bold;
	color: #000;

}

#header-container {
	background-repeat: repeat-x;
	background-image: url(../topbg.png);
	background-position: 0 100%;
	background-color: #bce0ee;
 	z-index: 2;
}

/* Main Content */


#news {
	float: left;
	width: 250px;
	height: 200px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	top: 250px;
	color: #000000;
	font-size: 14px;
	font-weight: 900;
	background-color: #CCCCCC;
}
#newsUnder {
	background-color: #FFFFFF;
	width: 250px;
	height: 75px;
	float: left;
	top: 300px;
	
}
</style>

</head>
<link type="text/css" rel="stylesheet" href="styles/home_style.css" />
<body vlink="#FFFFFF" alink="#FFFFFF" link="#FFFFFF" id="homePage">
<div id="header-container">
<div id="container">
<div id="navmenu">
<ul id="navmenu">
	<li><a id="homePageLink">Home</a></li>
    <li><a href="item-1.html" id="page7link">Community</a></li>
    <li><a href="#" id="page7link">Safety</a></li>
    <li><a href="#" id="page7link">Credits</a></li>
<div id="news">
  <div align="left">
    <p>null</p>
    </div>
</div>
</ul>
</div>
</div>
</div><br />
<div id="newsUnder">null</div>
</body>
</html>

Not 100% sure if it works since I don't have the images but it seems lined up?
You'll have to separate the CSS file though.

YeImANutter · Jul 6, 2009

Thanks Parker!

I'll try later on, see if it works.
Thanks again

:

Parker · Jul 6, 2009

Oh and also;

Code:

<link type="text/css" rel="stylesheet" href="styles/home_style.css" />

Should be in the <head> section.

Welcome!

[HTML & CSS] DIV seems to be overriding a part of my Layout [HTML & CSS]

YeImANutter

Junior Spellweaver

Parker

pork pork

YeImANutter

Junior Spellweaver

Parker

pork pork

About Us

Online statistics

Forum statistics

RaGEZONE Sponsor