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!

Register Log in
  • Congratulations Mike Lewis 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

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!
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
where, then, do you tell it exactly what image to use as the banner and what file to use as the navigations?
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
786
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
408
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
325
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
358
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
136
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top