Novice who needs some help

RJFT · February 10, 2010, 7:02pm

After teaching myself html ,
I’ve been trying to teach myself C.S.S… I’ve been working on a practice 3 column css/index page layout; But,no matter how hard I try and no matter how many times I inspect prototypes,read various rules or tweak my work ,the design still doesn’t work.

I’ve been on this for weeks and I’m very frustrated; I really have no other source of help but this forum. I’m just about ready to give up.

If I emailed my index and style sheet can someone, anybody please take a look at my work and tell me what I’m doing wrong?

I can really use some help.

Thank You.

RJFT · February 10, 2010, 9:54pm

One more thing…
I forgot to add that the background header image isn’t appearing.

rpkamp · February 10, 2010, 7:12pm

Why don’t you paste your code here so we can all have a look?

RyanReese · February 10, 2010, 7:36pm

Give us a link to the page (since you are new you can avoid it being detected by posting as such)

sitehere . com / page . php

Or post your code :). In order for 3 col layouts to work are you making sure each column has a width and a float set on it? Aka float:left;?

RJFT · February 10, 2010, 7:52pm

Here is my style sheet:
html, body {
margin:0;
padding:0;
border:none;
}

#container {
Width: 900px;
}

#header {

Width: 900px;

Height: 100px;

Position: relative;

Background-image: url(images/headerBG.jpg);

Border-bottom: 2px solid #000000;

}

Header a {

Color: #ffffff;

Text-decoration: underline;

Font-weight: bold;

Font-family: verdana;

Font-size: 14px;

}

#header a:visited {

Color: #000000;

Text-decoration: underline;

Font-weight: bold;

}

#header a:hover {

Color: #cc0000;

Text-decoration: none;

Font-weight: bold;

}

.Horizlinks {

Position: absolute; top: 77px; left: 180px;

}

.Horizlinks ul {

Margin: 0px;

}

.Horizlinks li {

Margin: 0px 15px 0px 0px;

List-style-type: none;

Display: inline;

}

#horizonnav {

Width: 900px;

Height: 30px;

Position: relative;

Background-color: #F2D6AF;

Border-botttom: 2px solid #000000;

}

.navlinks {

Position: absolute; top: 4px; left: 140px;

}

.navlinks ul {

Margin: auto;

}

.navlinks li {

Margin: 0px 18px 0px 0px;

List-style-type: none;

Display: inline;

}

.navlinks li a {

Color: #000000;

Padding: 5px 12px 7 px;

Text-decoration: none;

Font-size: 16px;

Font-family: verdana;

}

.navlinks li a:hover {

Color: #ffffff;

Background-image: url(images/Bghover.jpg);

/If you want to use a color for the background instead replace above line with text-decoration: underline:[#dddddd];/

}

#header p {

Color: #000000;

Font-family: arial;

Font-weight: bold;

}

.smalltext {

Font-size: 9px;

Font-family: arial;

}

#leftnav {

Float: left;

Width: 140px;

Height: 400px;

Background-color: #F8AA3C;

Border-left: 1px dashed #694717;

}

#rightnav {

Float: right;

Width: 140px;

Height: 400px;

Background-color: #F8AA3C;

Border-left: 1px dashed #694717;

}

#body {

Margin: auto;

Width: 600px;

Padding: 10px 0px 0px 10px;

}

#footer {

Clear: both;

Background-color: #D1c0A7:

}

.box {

Margin-top: 10px;

Padding: 5px 5px 5px 5px;

Backround-color: #dddddd;

Border: 2px solid #d22929;

Width: 350px;

Color: #000000;

}

H2 {

Font-size: 20px;

Color: #cc0000;

Padding: 10px;

Font-family: verdana;

}

RJFT · February 10, 2010, 7:54pm

Here is my index page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>

<head>

<title> Practice Web Page </title>

<body>

<a href=“http://www.website.com”>This is the header</a>

<ul>

<li><a href=“http://www.website.com”>Header Link 1</a></li>

<li><a href=“http://www.website.com”>Header Link 2</a></li>

<li><a href=“http://www.website.com”>Header Link 3</a></li>

<li><a href=“http://www.website.com”>Header Link 4 </a></li>

</ul>

</div>

<p>Header Text</p>

<p class=“smalltext”>Small Text</p>

</div>

<ul>

</div>

<div id=“leftnav”>This is the leftnav</div>

<div id=“rightnav”>This is the right nav</div>

<div id=“body”>This is the body <br><div class=“box”><h2>This is the title</h2>Text inside the box</div></div>

<div id=“footer”>This is the footer</div>

</body>

</html>

RyanReese · February 10, 2010, 8:01pm

Hi, in all of your HTML you have these characters placed for the quotes “”

I don’t know how they will appear posting this post…but they are not standard quotes “”

As a result the browser doesn’t recognize them as quoted values and will be ignored.

Replace all the quotes in the browser with real ones “”

Also I should note your doctype in incomplete (it needs a URI at the end of it)

RJFT · February 10, 2010, 9:45pm

Ryan,

You were right about the quotation marks. You’re amazing! In one review you were able to help me when countless others couldn’t. It’s taken me, literally weeks to correct that problem. I was frustrated beyond words. I am extremely grateful. Thank You.

This initial practice page is now approximately 50% correct; The only other problem is that the nav links are displaying in reverse order with the header links; and the “nav bar” is missing. Have you any ideas as to what I did wrong here?

RyanReese · February 10, 2010, 10:25pm

The right nav is displaying backwards because you set float:right and that will basically reverse the order displayed. You can switch up the order in hte HTML to overcome this

Once you do that can you show us your updated code? If you have a link somewhere where this is at it would make this a lot easier

RyanReese · February 10, 2010, 10:25pm

Also in your CSS you have this

Header a {

Color: #ffffff;

Text-decoration: underline;

Font-weight: bold;

Font-family: verdana;

Font-size: 14px;

}

Make that “Header” into #header

I can’t really tell what else may be ascrew because I don’t have a link to look at with the images there