Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Simple CSS Help

Status
Not open for further replies.

webmaniacal

Technical User
Aug 24, 2006
47
US
Hello all,,,,I have been forced by the nature of my website into the world of CSS. I have been reading and reading on CSS particulary with FrontPage which I am using ('03). Most of these go into headings and styles, etc.

I am trying to create a CSS style sheet that has a top image and a left and a right navigation bar on a black page. I tried creating the page in FrontPage and then copying the code into a .css page and that didn't work. How do I find how to simply create a black page with a top banner and two navigation menus? Does anyone know of a good tutorial that does not focus on styles of headings and text but rather on just the basic structure of a page - I am trying to avoid frames.

Any help would be greatly appreciated....thank you!
 
CSS does not contain the actuall layout elements only the stylings for said elements. So you would ceate a page, lets call it index.html, that would contain 4 basic objects:

Code:
<html>
<head><title></title></head>
<body>
<div id=banner>
</div>
<div id=leftnav>
</div>
<div id=content>
</div>
<div id=rightnav>
</div>
</body>
</html>


Then in your CSS file you would have the styings for said objects.

Code:
BODY{
background-color:black;

}

#banner{
width:600px;
height:200px;
...

}

#leftnav{
float:left;
width:150px;
height:100%;
...

}
...



etc...

What you ant is to create the page and then using the css stlysheet give it is stylings. you give the banner certain height, you make the background black etc....

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
where, then, do you tell it exactly what image to use as the banner and what file to use as the navigations?
 
i'm confused. If i create a css file as above it does not use the banner image or the navigation files. If i do that in each page what is the use of the css file?
 
That's what include files are for. The CSS file is to centralize your styles for the site, not handle ALL modularization for the site.

Lee
 
You have a single CSS file that styles your layout, and you include it in evey page.

The rest like links and basic structure, can be in a file called a template, that either calls in the pages, or is included in the rest of the pages .

For the banner image:

Code:
#banner{
background: URL(location/of/background/in/serverr/)
}



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top