Jump to content

Css - A question and more will follow

glennk

By glennk
in Technical Help Forum

 Share

Recommended Posts

glennk Member

glennk

Posted
Posted (edited)

Is this right for css ?

 

<div id="main">

 

<div id="header">

<p style="text-align: right" class="whitetext1">Next Steps</p>

 

<img border="0" src="next-steps-header2.jpg" width="720" height="128"></img>

</div>

 

<div id="navcontainer">

<ul id="navlist">

<li><a href="/index.php">Home</a></li>

<li><a href="http://www.participaction.net/about-participaction.php">About Us</a></li>

<li><a href="http://www.participaction.net/history-of-participaction.php">History</a></li>

<li><a href="http://www.participaction.net/garden.php">Our Garden</a></li>

<li><a href="http://www.participaction.net/newsletter-index.php">Newsletter</a></li>

<li><a href="http://www.participaction.net/gallery.php">Gallery</a></li>

<li><a href="http://www.participaction.net/credits.php">Credits</a></li>

<li><a href="http://www.participaction.net/links.php">Links</a></li>

</ul>

</div>

 

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

 

<div id="footer">

<p class="pcenter"> Website By Glenn Kilpatrick</p>

</div>

 

</div>

 

Is it ok to put the separate divs for header, footer and nav bar all inside the main body div or should they be seprated. Ie open header then close it, open navdiv then close it, open mainboddy div then close it and finally open footer and then close it.

 

Once ive figured which is the correct way to do things I have some questions about whitespace.

 

Thanks in advance Glenn

Edited by glennk

Kayak Fishing Launch Sites

 

COD COD COD COD COD

 

50lb Shore Cod

 

 

Link to comment
Share on other sites
Si... Member

Si...

Posted
Posted

That's fine to do it that way

 

This is a site I'm working on atm

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>123 Scripting - Home</title>
<style type="text/css">
@import "css/123scripting.css";
</style>
<script type="text/javascript" language="JavaScript" src="jscripts/checks.js"></script>
</head>
<body>
<div id="pageContainer">
<div id="header"><a name="top" id="top"></a>
 <div id="title">123 Scripting</div>
 <div id="subTitle">Design solutions for your website </div>
 <div id="headerLinks">
 <a href="index.php" class="hlink">Home</a> | 
 <a href="index.php?p=about" class="hlink">About Us</a> | 
 <a href="index.php?p=contact" class="hlink">Contact Us</a>
</div>
</div>
<div id="leftSide">
<h1>Site Navigation</h1>
<hr class="hrLeft" />
<div id="leftMenu">
<a href="index.php" class="flink">Home</a><br />
<a href="index.php?p=products" class="flink">Products</a><br />
<a href="index.php?p=services" class="flink">Services</a><br />
<a href="customers/index.php" class="flink">Customer Area</a><br />
<a href="forums/index.php" class="flink">Support Forums</a><br />
<a href="index.php?p=tools" class="flink">Online Tools</a><br />
<a href="index.php?p=free" class="flink">Free Scripts</a><br />
<a href="index.php?p=privacy" class="flink">Privacy Policy</a><br />
<a href="index.php?p=refunds" class="flink">Refunds Policy</a><br />
<a href="index.php?p=license" class="flink">Product License</a><br />
<a href="index.php?p=terms" class="flink">Terms & Conditions</a><br />
</div>
</div>
<div id="rightSide">
<h1>123 Scripting » Home</h1></h1><hr class="hrRight" />
<div id="mainContent"><p>Text Here</p>
</div>
</div>
<div id="footer"><a href="http://www.123scripting.com" class="hlink">Copyright © 123Scripting.com 2006</a></div>
</div>
</body>
</html>

 

* {
 margin: 0px;
 padding: 0px;
 }

body {
 margin: 0px;
 padding: 0px;
 background-color: #6F6F6F;
 color: #333;
 }

.hrRight {
 height: 8px;
 width: 100%;
 background-color: #bb1f1f;
 border: none;
 color:#000;
 margin-bottom: 10px;
 border-bottom:1px solid #666;
 border-top:1px solid #666;
 border-left:1px solid #666;
 }

.hrRightContent {
 height: 8px;
 width: 100%;
 background-color: #bb1f1f;
 border: none;
 color:#000;
 margin-bottom: 10px;
 border:1px solid #666;
 }

.hrLeft {
 height: 8px;
 width: 100%;
 background-color: #bb1f1f;
 border: none;
 color:#000;
 margin-bottom: 10px;
 border-bottom:1px solid #666;
 border-top:1px solid #666;
 border-right:1px solid #666;
 }

#pageContainer {
 width: 805px;
 margin-top:0px;
 margin-left: auto;
 margin-right: auto;
 background: #FFF;
 border-top:10px #6F6F6F solid;
 }

#header {
 width: 805px;
 height: 80px;
 background: url(../images/logo.gif) #bb1f1f no-repeat center left;
 margin-top: 0px;
 border-bottom: #6F6F6F solid 5px;
 text-align: right;
 margin-bottom: 20px;
 }

#headerLinks {
 color: #FFF;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 padding-top: 60px;
 padding-right: 5px;
 }

.hlink:link {
 color: #FFF;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 text-decoration: none;
 }

.hlink:active {
 color: #FFF;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 text-decoration: none;
 }

.hlink:hover {
 color: #FFF;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 text-decoration: underline;
 }

.hlink:visited {
 color: #FFF;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 text-decoration: none;
 }

#leftSide {
 width: 130px;
 float: left;
 background-color:#FFF;
 }

#rightSide {
 width: 665px;
 float: right;
 background-color:#FFF;
 }

.numBox {
 height: 48px;
 width: 48px;
 border: 1px #000 solid;
 background-color: #bb1f1f;
 text-align: center;
 vertical-align: middle;
 line-height: 48px;
 color: #FFF;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 18pt;
 float: left;
 margin-right: 8px;
 }

h1 {
 color: #333;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 10pt;
 }

h2 {
 color: #333;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 7pt;
 margin-left: 5px;
 }

.showcase {
 margin: 2px;
 padding: 2px;
 border: 2px #000 solid;
 }

p {
 text-indent: 0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 margin-bottom: 20px;
 }

.pp
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000;
font-size:12px;
text-align:left;
}

.list {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 margin-bottom: 20px;
 margin-left:10px;
 }

#footer {
 clear: both;
 width: 805px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 color:#FFF;
 border-top: 5px #6F6F6F solid;
 text-align:center;
 padding-bottom:2px;
 padding-top:2px;
 background-color:#BB1F1F;
 }

#subHeader {
 width: 795px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:8pt;
 padding:5px;
 background-color:#BB1F1F;
 margin-top:10px;
 margin-bottom:10px;
 border-top: 5px #6F6F6F solid;
 border-bottom: 5px #6F6F6F solid;
 }

#title {
 float: left;
 color: #FFF;
 padding-left: 100px;
 margin-top: 10px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 24pt;
 }

#subTitle {
 float: left;
 clear: left;
 color: #FFF;
 padding-left: 102px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 }

.right {
 float: right;
 margin: 0px;
 }

.left {
 float: left;
 margin: 0px;
 }

.flink:link, .flink:visited {
 color: #333;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 text-decoration: none;
 }

.flink:active {
 color: #333;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 text-decoration: underline;
 }

.flink:hover {
 color: #333;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 text-decoration: underline;
 }

#leftMenu {
 margin-left:5px;
 margin-bottom:10px;
 }

#mainContent {
 margin-left:5px;
 margin-right:5px;
 margin-bottom:10px;
 }

.toolstbl {
 border: 1px solid #bb1f1f;
 border-collapse: collapse;
 border-color: #bb1f1f;
 text-indent: 0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size: 8pt;
 margin-bottom: 5px;
 margin-top: 5px;
 padding:5px;
 }

.formFields {
 border: 1px solid #bb1f1f;
 color:#000;
 }

.formButton {
background-color:#FFFFFF;
color:#bb1f1f;
border-right: #bb1f1f solid 2px;
border-bottom: #bb1f1f solid 2px;
border-left: #bb1f1f solid 1px;
border-top: #bb1f1f solid 1px;
}

Link to comment
Share on other sites
glennk Member

glennk

Posted
  • Author
Posted (edited)

Hi Simon.

 

Thanks for that - your help is always appreciated. My first tabless site is now taking shape. Nothing startling but its underway. I had a few whitespace problems but have sorted them now. Seems the margins and padding on the ul and p tag were throwing out the divs and giving space around the menu and the footer.

 

Why are they not automatically set to 0 ?????

 

I got some help off another forum, but not before getting a lecture off the moderator there about doctypes and validation. But the good people there sorted me out which is great news.

Edited by glennk

Kayak Fishing Launch Sites

 

COD COD COD COD COD

 

50lb Shore Cod

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We and our partners use cookies on our website to give you the most relevant experience by remembering your preferences, repeat visits and to show you personalised advertisements. By clicking “I Agree”, you consent to the use of ALL the cookies. However, you may visit Cookie Settings to provide a controlled consent.

  I accept