Need help using a CSS layout

[stripedtigress]

I decided to change my website layout, and wanted to try my hand at a CSS layout. I have used style sheets for simple font and color changes, but this time I think have bitten off more than I can chew.

I found a site with layouts for download, and created the graphics I wanted to use. Only problem is, I can't figure out HOW to use the layout. How to make the pages show up where they are supposed to? Do I add the html page names to the layout? And if so, where?

My layout:

* {margin: 0;
padding: 0;}

body {
background-color: #000000;
color: #CD3700;
background-image: url(images/bodybg.jpg);
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
}

/* Begin Structure of site '*/

#container {
width: 896px;
padding:3px;
margin: 0px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
color: #CD3700;
background-color: #000000;
}

#header {margin-top: 1px;
background-image: url(images/header2.jpg);
height: 320px;
border: 1px solid #A78D84;

}

#left {
float: left;
width: 155px;
color: #CD3700;
background-color: #000000;
padding: 5px;
}

#right {
background-color: #000000;
color: #CD3700;
float: right;
width: 155px;
background-position: right top;
padding: 5px;

}

#content {
margin-left: 170px;
margin-right: 170px;
margin-bottom: 5px;
color: #CD3700;
background-color: #000000;
padding: 20px;
border: 0px solid #A78D84;
}

#footer {
clear: both;
background-color: #000000;
color: #CD3700;
padding: 4px;
border: 1px solid #A78D84;
text-align: center;
}

/* Begin text formatting and image floats */

.imageleft{
float: left;
margin-right: 7px;
margin-bottom: 1px;
}


p{
margin-top: 15px;
margin-bottom: 15px;
}

blockquote{
margin-top: 15px;
margin-bottom: 15px;
padding: 30px;
border: 1px dotted #A78D84;
background-image: url(images/swordtest.gif);
background-repeat: no-repeat;
}

h1{
background-color: #000000;
padding: 5px;
font-size: 1.3em;
color: #CD3700;
margin-top: 5px;
margin-bottom: 15px;
border-top: 1px solid white;
border-bottom: 1px solid white;

}

h2{
background-color: #000000;
padding: 5px;
font-size: 1.3em;
color: #CD3700;
margin-top: 15px;
margin-bottom: 15px;
border-top: 1px solid white;
border-bottom: 1px solid white;

}

.list {
margin-left: 25px;
list-style-image: url(images/redrose.gif);
margin-top: 30px;
}

a:link {
color: #FF3300;
background-color: inherit;
}
a:visited {
color: #FFFFFF;
background-color: inherit;
}
a:hover {
color: #336600;
background-color: inherit;
}
a:active {
color: #336600;
background-color: inherit;
}

/********** Begin top navigation *************/
#navlist
{
height: 2.6em!important;
height: 2.7em;
margin-top: 7px;
padding: 1.7em 0em .3em .4em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #FFFFFF;
}

#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #CCCCCC;
padding: 1.2em;
padding-left: 0.5em;
padding-right: 0.5em;
color: #FFFFFF;
text-decoration: none;
}

#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 1px solid #FFFFFF;
padding: 1.1em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
color: #336600;
}

#navlist li
{
padding-right: 1px;
display: inline;
font-size: 1em;
}

#navlist ul
{
margin: 0px;
padding: 0px;

}

#navlist #active a {
background-color: #000000;
color: #336600;
font-size: 1em;
font-weight: bold;
}

[johneva]

What you need to do is make a CSS file place that CSS in it and call it say styles.css

Then get the HTML code for the page and make your index.html file and link the 2 using this code.

Code: Select all

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


Here is a link for a really greatr website for teaching you about CSS layouts.

http://www.maxdesign.com.au/presentation/page_layouts/

and here is another great site for tutorials on HTML/XHTML and CSS the page the link sends you to is actually talking about the different ways of applying CSS.

http://www.htmldog.com/guides/cssbeginner/applyingcss/

[stripedtigress]

I have the code in my web pages. What I am lost at is how to make the pages go where they are supposed to:

Navigation page to #Navlist

pages actually load in #container etc. Do I take the frames out of my website and rename the html files? And what does the # sign mean?

I have read so many tutorials but they are all about how to write the code, not how to make it actually look like it is supposed to when you finish.

I know how to point my pages to the correct frames in a frameset. But doing the same with a CSS layout is where I am stuck.

[johneva]

You dont have a single page made up of loads of files like you explaining unless its a frame layout which sucks and is not advised.

I dont get what your having problems with, the HTML file uses the CSS file for styling thats it if you had read enough tutorials and the right ones you would know that # is ID.

ID words in much the same way as a class but a class can be used on multiple divs or whatever tag you designed the class for where as an ID can only be used once.

If you go thought the tutorials at max designs then they tell you what each part does, but if your not upto speed with CSS then you should really go over the basics at HTML dog or W3Cschools.

The only way to learn is to go though the tutorials mate the fact you did not know what an ID is, says to me you have not been reading the right tutorials.

The fact you are having problems putting things in the right div also tells me you have not even covered the basics yet, if you were getting stuck due to different browsers interprating CSS differently or something then I could give you some advise.

Thing is your asking the basic stuff which basic tutorials cover, I dont get what you mean by "I have read so many tutorials but they are all about how to write the code, not how to make it actually look like it is supposed to when you finish."

Thats what the code does if you have done the tutorial properly then you should have learnt how to do each propertie and be able to adjust what you need as you like.

If you get stuck on a particlar problem the just give us a link to the page or give us a copy of all the code and we can see what your doing wrong but just giving a list of CSS code with no HTML code is pointless.

[stripedtigress]

Hey again. I am an idiot lol. I figured it out:) I went back and viewed the source on the layout that I downloaded, and I had to copy it (and make a few changes) to a test index page, and BAM. It looked right lol.

I make things too complicated for myself. I am so spoiled on HTML and frames.

So now I just have to get the changes made. Thanks again for your help.