Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

[HTML & CSS] Positioning in 2 minds

Junior Spellweaver
Joined
Sep 1, 2008
Messages
130
Reaction score
0
Hey Guys.

I'm having ANOTHER problem with CSS aswell as HTML (probably more on the CSS side :p)

I'm using Adobe Dreamweaver CS3 to edit and position things with this Site.

When I go to Preview (Design View) I get this
YeImANutter - [HTML & CSS]  Positioning in 2 minds - RaGEZONE Forums

As you can see, the White Section is on the right hand side of the Gray Box.

When I preview in the browser, I get this.
YeImANutter - [HTML & CSS]  Positioning in 2 minds - RaGEZONE Forums

This is how I want it, below the Gray box, but I don't want the White box to be displayed on the side of the Gray box in Dw CS3.

Here's the Source.

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" />
<link type="text/css" rel="stylesheet" href="styles/home_style.css" />
<title>Home :: Habbo Layout</title>
</head>
<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">null</div>
</ul>
</div>
</div>
</div>
<div id="newsUnder">null</div>
</body>
</html>

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;
	float: left;
	width: 250px;
	height: 50px;
	position: relative;
	top: 164px;
	right: 250px;
	
}

Thank's in advanced!
YeImANutter
 
Divine Celestial
Loyal Member
Joined
Sep 13, 2008
Messages
853
Reaction score
14
re: [HTML & CSS] Positioning in 2 minds

Well, I dont have much time to answer nor test but I will try to explain how I would do it:
- The news div is inside header-container, take it out of there
- Create a body-container, make it width = 250px, make news and newsUnder width = 100%
then it should work.

Also have caution when using dreamweaver at design mode to manage elements, it may speed up sometimes, but sometimes it will add junk code or missplace elements, giving you a big headache. At least that was what happened to me at dreamweaver 8 when I used it :p
 
Junior Spellweaver
Joined
Sep 1, 2008
Messages
130
Reaction score
0
Thanks. It's worked. But can I Position the 2 Divs to sit under the Tabs?
 
Divine Celestial
Loyal Member
Joined
Sep 13, 2008
Messages
853
Reaction score
14
Thanks. It's worked. But can I Position the 2 Divs to sit under the Tabs?

Put at the body-container css this:
Code:
margin:0 auto;
It will change its position to center.
 
Junior Spellweaver
Joined
Sep 1, 2008
Messages
130
Reaction score
0
Thanks :):

Sorry about this, but is there anyway I can just get them to sit under neath where the Tabs Start?
 
Divine Celestial
Loyal Member
Joined
Sep 13, 2008
Messages
853
Reaction score
14
Junior Spellweaver
Joined
Sep 1, 2008
Messages
130
Reaction score
0
Okay thanks again :):.

Mind If I PM you next time I get a problem? :blush:
 
Back
Top