14 replies [Last post]
diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

I can't seem to get my text in my content position right it is sitting below the content area I have no idea what to do next here is the code.
If anyone can tell me where I'm going wrong I'd appreciate it.

HTML

<html>
<head>
<title>Some Site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
		 <h1>
		 		 CSS is a Pain in my A$$
		 </h1>
		 <div id="nav">
		 			<ul>
							<li><a href="#">Home</a></li>
							<li><a href="#">About Us</a></li>
							<li><a href="#">Services</a></li>
							<li><a href="#">Staff</a></li>
							<li><a href="#">Portfolio</a></li>
							<li><a href="#">Contact Us</a></li>
					</ul>
		</div>
		<div id="menu">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
 
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- end #menu --></div>
		<div id="content">
				 <h2>
				 		 About Sitename
				</h2>
				<p>
					 Lorem ipsum dolor...
				</p>
				<p>
					 Ut wisi enim ad...
				</p>
		</div>
		<div id="footer">
				 Copyright &copy; Sitename 2009
		</div>
 
 
 
</body>
</html>

CSS

body 
{
		 text-align: center;
		 background: B0BFC2;
		 color: #444;	 
}
#container {
		text-align: left;
		margin: 0 auto;
		width: 700px;
		background: #fff url(header-base.gif) repeat-y;
}
h1 {
	 	background: #7AC5CD;
		color: #FFF;
		padding: 20px;
		margin: 0;
		border-bottom: 5px solid #778899;
}
#nav {
		float: left;
		width: 130px;
		display: inline;
		margin-left: 20px;
		padding: 15px 0;
}
#nav ul {
		 margin: 0;
		 padding: 0;
		 list-style-type: none;
		 text-align: ;
}
#nav li {
		 background: url(header-bullet.gif) no-repeat 100% .4px;
		 padding: 0 10px 5px 0;
}
#content {
				 float: left;
				 width: 475px;
				 margin-left: 45px;
				 padding: 15px 0;
}
#footer {
				clear: both;
				background: #778899;
				color: #fff
				padding: 5px 10px; 
				text-align: right;
				font-size: 80%;
}
h2 {
	 margin-top: 0;
	 color; #8B7500;
	 font-weight: normal;
}
a:link {
			 text-decoration: none;
			 color: #7b7b7b;
			 text-transform: lowercase;
}
a:visited {
					text-decoration: none;
					color: #600;
					text-transform: lowercase;
}
a:hover, a:active {
				 text-decoration: none;
				 color: #0098A4;
				 text-transform: lowercase;
				 text-decoration: underline;
}
/* Menu */
 
#menu {
	float: right;
	height: 173px;
}
 
#menu ul {
	margin: 0px;
	padding: 0px 40px 0px 0px;
	list-style: none;
}
 
#menu li {
	float: left;
}
 
#menu a {
	padding: 0px 20px 0px 22px;
	text-decoration: none;
	text-transform: lowercase;
	font-size: 14px;
	color: #7B7B7B;
}
 
#menu a:hover {
	text-decoration: underline;
	color: #0098A4;
}
 
#menu .first a {
	background: none;
}

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Here is an image of it sorry

Here is an image of it sorry I forgot also my footer is stretched out.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

Are you using a doctype?

Are you using a doctype? Looks like your numbers add up but there's just not enough room for the content div. I don't know that firefox uses an incorrect box model even without a doctype but I'd start there.

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

I haven't uploaded the

I haven't uploaded the content I'm creating it locally.
So that affects the layout?
I am using the correct DOC Types as the HTML validates
The CSS has these errors but I have no idea what it means,

4 body Value Error : background Too many values or values are not recognized : B0BFC2
31 #nav ul Value Error : text-align Parse Error
47 #footer Value Error : color attempt to find a semi-colon before the property name. add it
53 h2 Value Error : color Parse Error color
53 h2 Parse Error #8B7500;
56 Parse Error [: normal; } a:link]

Oh wait I am seeing a few things and fixing them guess I need an editor that points these out I'm using HTML Kit but am not very experienced with navigating it not sure if it can check and suggest errors for me.

Ok I fixed all but one and lost the white in my content area and the position of the text is still sitting below the content area.

The last error in question is the padding for the footer it's not recognizing the semi-colon for some reason it is there.

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Ok I fixed all the code and

Ok I fixed all the code and it validates now but I stuck with the same issue and one more the white content area has changed to the color of my background which I don't want.

Any idea what I'm missing?

This is how the code looks in my editor and how I want, the content area is white but viewing it online turns it the light green of the background along with the text to shift into it.

When I remove the html for the top menu the text slides into the right position so it has something to do with that but I don't know what and I do want the navigation top be there.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 3 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

Make the content div a little

Make the content div a little less wide and see if it moves up.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 11 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

That's not a browser... how

That's not a browser... how does it look in a browser? No one is going to be viewing your site in an HTML editor.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Verschwindende wrote: Make

Verschwindende wrote:

Make the content div a little less wide and see if it moves up.

Ok Thanks I will do that.

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Deuce wrote: That's not a

Deuce wrote:

That's not a browser... how does it look in a browser? No one is going to be viewing your site in an HTML editor.

Yeah I know that my 1st picture is in the browser but the 2nd one is in the editor and somewhat how I want it to look.

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Verschwindende wrote: Make

Verschwindende wrote:

Make the content div a little less wide and see if it moves up.

Ok I resized it and it shifted but not up it went to the left.

Ok after previewing in the browser it did move up guess I can't depend on viewing it in the editor. But the footer is still stretched out and the white isn't appearing

Thank You so much.

This is what I got now

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Ok Im using a firefox addon

Ok Im using a firefox addon called web developer and I can see the problem the top menu area is larger and not allowing the text to come up so I;m gonna have to resize it somehow without moving it.

Ok got the text up into the content area by reducing the menu height go figure
now I'm left with the content needing a nudge left and the menu right.

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Here is an image using the

Here is an image using the web developer outline block level elements it shows how things are sized I can't for the life of me figure out how to get the footer to size the same as the rest of it I tried removing clear both and that made it run through the top.

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

I give up to complicated for

I give up to complicated for me Puzzled

diva42
diva42's picture
Offline
Regular
USA
Last seen: 12 years 40 weeks ago
USA
Timezone: GMT-5
Joined: 2009-03-12
Posts: 11
Points: 12

Useful Tutorial

For anyone who is interested I found this very good tutorial imo
Creating a CSS layout from scratch go into detail of why things work
and don't walks you through creating a layout
http://www.subcide.com/tutorials/csslayout/index.aspx

Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 11 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

As long as you don't follow

As long as you don't follow step 7 and instead use an unordered list.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph