Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder bobleny's Avatar
    Join Date
    May 2007
    Posts
    258
    Thanks
    3
    Thanked 11 Times in 11 Posts

    Pure CSS display - annoys the hell out of me.

    Hi, I can't get this too work right....

    CSS:
    Code:
    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
    Code:
    <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?
    --www.firemelt.net--
    * No good deed goes unpunished.
    * Cheer up, the worst has yet to come...

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    There is nothing in your CSS that tells the link to be at the bottom. Try this
    Code:
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder bobleny's Avatar
    Join Date
    May 2007
    Posts
    258
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Thanks for your help! That works, but look what happens when I add a second link. :'(

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

    HTML:
    Code:
    <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:
    Code:
    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.
    --www.firemelt.net--
    * No good deed goes unpunished.
    * Cheer up, the worst has yet to come...

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder bobleny's Avatar
    Join Date
    May 2007
    Posts
    258
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Thanks a lot! This is what I came up with, with your help.
    http://www.firemelt.net/crow/

    CSS:
    Code:
    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
    Code:
    <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....
    --www.firemelt.net--
    * No good deed goes unpunished.
    * Cheer up, the worst has yet to come...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •