Novice who needs some help ....

**RJFT** · Feb 10, 2010 13:02

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.

**ScallioXTX** · Feb 10, 2010 13:12

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

**RyanReese** · Feb 10, 2010 13:36

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** · Feb 10, 2010 13:52

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** · Feb 10, 2010 13:54

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

<html>

<head>

<title> Practice Web Page </title>

<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<link Rel="stylesheet" Type="Text/css" HREF="kirbystyle.css">
</head>

<body>

<div id=“container”>

<div id=“header">

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

<div class=“Horizlinks”>

<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>

<div id=“horizontalnav”>

<div class=“navlinks”>

<ul>

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

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

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

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

</div>

</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** · Feb 10, 2010 14:01

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** · Feb 10, 2010 15:45

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?

**RJFT** · Feb 10, 2010 15:54

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

**RyanReese** · Feb 10, 2010 16:25

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** · Feb 10, 2010 16:25

Also in your CSS you have this

Code:

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

User Tag List

Thread: Novice who needs some help ....

Thread Tools

Display

Novice who needs some help ....

Bookmarks

Bookmarks

Posting Permissions