...

View Full Version : Pure CSS display - annoys the hell out of me.



bobleny
06-01-2007, 06:38 AM
Hi, I can't get this too work right....

CSS:


body
{
background-color: #ffffff;
width: 100%;
height: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
text-align: top;
color: #000000;
text-indent: 0pt;
line-height: 15pt;
word-spacing: 2pt;
font-family: courier;
}


#main_body
{
background-color: #ffffff;
width: 80%;
min-width: 480px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
}


#header
{
background-color: #009900;
width: 100%;
height: 80px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}


/* Links */
a.nav_links:link
{
border-style: solid;
border-color: #0000ff;
border-bottom: none;
border-width: 1px;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
width: 160px;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
}


HTML


<body>
<div id="main_body">
<div id="header">
<a href="index.php?page=home" class="nav_links">Home Page</a>
</div>
</div>
</body>



You should be able to point out the problem if you look here:
http://www.firemelt.net/crow/

If not, you will note the link at the top of the page. The link should be at the bottom of the green header. It is to be a tabbed link.

What should I do?

_Aerospace_Eng_
06-01-2007, 07:18 AM
There is nothing in your CSS that tells the link to be at the bottom. Try this

html, body
{
background: #FFF;
height: 100%;
margin:0;
padding:0;
color: #000;
line-height: 15pt;
word-spacing: 2pt;
font-family: courier;
}


#main_body
{
background: #FFF;
width: 80%;
min-height:100%;
min-width: 480px;
margin:auto;
}


#header
{
background: #090;
height: 80px;
position:relative;
}


/* Links */
a.nav_links:link
{
border:1px solid #00F;
border-bottom: 0;
margin:1px 3px 0;
padding:1px 0;
width: 160px;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
position:absolute;
bottom:0;
left:0;
}

I cleaned it up a little, removing redundant CSS. A div is 100% width by default unless floated or position:absolute or position:fixed.

bobleny
06-01-2007, 06:56 PM
Thanks for your help! That works, but look what happens when I add a second link. :'(

http://www.firemelt.net/crow/

HTML:


<body>
<div id="main_body">
<div id="header">
<a href="index.php?page=home" class="nav_links">Home Page</a>
<a href="index.php?page=base" class="nav_links">Knowledge Base</a>
</div>
</div>
</body>



CSS:


body
{
background: #ffffff;
height: 100%;
margin: 0px;
padding: 0px;
color: #000000;
line-height: 15pt;
word-spacing: 2pt;
font-family: courier;
}


#main_body
{
background: #ffffff;
width: 80%;
min-height:100%;
min-width: 480px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
}


#header
{
background: #009900;
height: 80px;
position:relative;
}


/* Links */
a.nav_links:link
{
border-style: solid;
border-color: #0000ff;
border-bottom: none;
border-width: 1px;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
width: 160px;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}



If you look closely, you'll the one link on top of the other. I'm almost certain it is because the CSS instructs them to be in that exact spot due to the absolute positioning.

I have a hard time getting CSS to do anything I want it to do.

_Aerospace_Eng_
06-01-2007, 07:22 PM
Try this

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body {
background: #FFF;
height: 100%;
margin:0;
padding:0;
color: #000;
line-height: 15pt;
word-spacing: 2pt;
font-family: courier;
}

#main_body {
background: #FFF;
width: 80%;
min-height:100%;
min-width: 672px;
margin:auto;
}

#header {
background: #090;
height: 80px;
position:relative;
}

/* Links */
#nav_links {
margin:0;
padding:0;
list-style:none;
width:672px; /*total width of nav button x number of nav buttons*/
position:absolute;
left:50%;
margin-left:-336px; /*divide width by 2*/
bottom:0;
}
#nav_links a { /*total width = (6px margin r+l) + (2px border r+l) + 160px = 168px*/
border:1px solid #00F;
border-bottom: 0;
margin:1px 3px 0;
padding:1px 0;
width: 160px;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
float:left;
}
</style>
<title>Home - Go MAD</title>
</head>
<body>
<div id="main_body">
<div id="header">
<ul id="nav_links">
<li><a href="index.php?page=home">Home Page</a></li>
<li><a href="index.php?page=base">Knowledge Base</a></li>
<li><a href="index.php?page=home">Home Page</a></li>
<li><a href="index.php?page=base">Knowledge Base</a></li>
</ul>
</div>
</div>
</body>
</html>

bobleny
06-01-2007, 08:10 PM
Thanks a lot! This is what I came up with, with your help.
http://www.firemelt.net/crow/

CSS:


body
{
background: #ffffff;
height: 100%;
margin: 0px;
padding: 0px;
color: #000000;
line-height: 15pt;
word-spacing: 2pt;
font-family: courier;
}


#main_body
{
background: #ffffff;
width: 80%;
min-height:100%;
min-width: 480px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
padding: 0px;
}


#header
{
background: #009900;
height: 80px;
position: relative;
}


#header_nav
{
position: absolute;
bottom: 0px;
left: 0px;
}


/* Links */
a.nav_links:link
{
border-style: solid;
border-color: #0000ff;
border-bottom: none;
border-width: 1px;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
width: 160px;
color: #000000;
text-decoration: none;
display: block;
text-align: center;
float: left
}



HTML


<body>
<div id="main_body">
<div id="header">
<div id="header_nav">
<a href="index.php?page=home" class="nav_links">Home Page</a>
<a href="index.php?page=base" class="nav_links">Knowledge Base</a>
</div>
</div>
</div>
</body>



You use a far more compact code than I do, but I find it easier to read when I have it fanned out so much. I also like to make sure it doesn't do something I don't want it to, so I end up with a lot of redundancies....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum