Web Analytics Made Easy -
StatCounter CSS Background Help - CodingForum

Announcement

Collapse
No announcement yet.

CSS Background Help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved CSS Background Help

    On my webpage: http://www.piperhale.com/Piper%20Site/index.html
    I can't get the text "home" to be centered on the white background. But on the other pages the text is centered over the white background. What am I doing wrong?

    Here's my CSS code.

    Code:
    #banner, #main, #footer {
    	border-left : 1px solid;
    	border-right : 1px solid;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    #banner {
    	height : 160px;
    	padding : 0;
    	background-color : #8b2323;
    }
    
    #banner h1 {
    	margin-left : 10px;
    }
    
    #title {
    	float : left;
    	height : 55px;
    	width : 460px;
    	margin : 0 0 0 2px;
    	color : white;
    	border-bottom : 1px solid white;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    #address {
    	width : 200px;
    	height : 90px;
    	background-color : #8b2323;
    	float : right;
    	margin : 2px;
    	color : white;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    	padding-bottom : 10px;
    }
    
    #address p {
    	margin : 4px 4px 4px 12px;
    }
    
    #main {
    	background-color : #8b2323;
    }
    
    #text, #maintenanceText, #architectureText, #constructionText
     {
    	background-color : #526f35;
    	margin : 0 55px 0px 55px;
    	color : white;
    	padding : 7px;
    	font-size : 1.2em;
    	min-height: 400px;
    }
    
    
    #footer {
    	height : 30px;
    	background-color : #8b2323;
    	border-bottom : 1px solid;
    	padding: 0;
    	margin: 0;
    }
    
    #copyright {
    	height : 20px;
    	width : 400px;
    	color : white;
    	font-family : "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    .mainNav {
    	width : 100%;
    }
    
    ul.mainNav {
    	border-bottom : 2px solid #526f35;
    	margin : 0;
    	padding-left : 40px;
    	float : left;
    	width : 918px;
    	padding-bottom : 0;
    }
    
    .mainNav li {
    	list-style : none;
    	float : left;
    	margin-right : 5px;
    	width : auto;
    	padding-right: 5px;
    }
    
    .mainNav a {
    	display : block;
    	padding : 7px 15px 7px 15px;
    	text-align : center;
    	text-decoration : none;
    	color : #fff;
    	font-weight : bold;
    	font-size : 1.2em;
    	text-transform : uppercase;
    }
    
    .mainNav a:hover {
    	color : #FC6;
    }
    
    #current {
    	background-color : white;
    }
    
    #current a {
    	display : block;
    	text-align : center;
    	text-decoration : none;
    	color : #000;
    	font-weight : bold;
    	font-size : 1.2em;
    	text-transform : uppercase;
    }
    
    #current a:hover {
    	color : #000;
    }
    
    #wrapper {
    	margin : 0 auto;
    	width : 960px;
    }
    
    #content {
    	width : 100%;
    }
    Last edited by Artifaxx; Aug 23, 2011, 12:54 PM.

  • #2
    The width of the box that 'HOME' appears in is too wide. It's full width is not seen because the box containing 'Maintenance' over laps it. If you could see the full white box with 'HOME' inside it, it would be centered. We must adjust the width.

    Remove this in the css file:

    .mainNav {
    width : 100%;
    }

    You should add this as your first line in all your pages:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    and change your link to:
    <link rel="stylesheet" type="text/css" href="global.css">
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      Thank you for the quick reply. That fixed my problem

      Comment

      Working...
      X