PDA

View Full Version : Text Positioning Within the Header


joesp
07-29-2009, 02:25 PM
I am trying to locate my nav bar (text) at the bottom of my header, and cannot figure out how to do it. I've tried line breaks, which seemed wrong to begin with, to no avail. I've tried absolute positioning (from top) with limited success. It will place it in the proper position top to bottom, but, then I can't get it centered left to right. I realized I can just drag the positioning box into position, which will fill in all the other variables, but when I preview, it's almost never right.

I have a fixed width, fixed height site (800x600) and would like the text to align at the bottom of my header, in the dark gray band running through the page. See attached file.

Here's the code with no positioning applied, just the row of text:


.oneColElsCtrHdr #container {
width: 800px;
margin: 0 auto;
text-align: left;
height: 600px;
}
.oneColElsCtrHdr #header {
padding-bottom: 5px;
background-color: #4d4a48;
background-image: url(../Images/115-Header.gif);
height: 170px;
background-repeat: no-repeat;
width: 800px;
}
.oneColElsCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 2px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background-color: #333333;
height: 430px;
}
.oneColElsCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.style1 {color: #66cccc}
.style2 {color: #d7d7d7}
.style3 {
color: #FC9501;
font-family: Verdana;
font-weight: bold;
text-align: center;
}
.style4 {
font-size: larger
}
.style7 {
color: #FC9501;
}
-->
</style>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div class="style3" id="header"><span class="style4 style7">CONCEPT&nbsp;&nbsp;&nbsp;HISTORY&nbsp;&nbsp;&nbsp;COMMUNITY&nbsp;&nbsp;&nbsp;RESOURCES&nbsp;&nbsp;&nbsp;CONTAC T&nbsp;&nbsp;&nbsp;BLOG</span></div>


Here's the code with Position, Top=145 pixels:


.style7 {
color: #FC9501;
top: 145px;
position: absolute;
}
-->
</style>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div class="style3" id="header"><span class="style4 style7">CONCEPT&nbsp;&nbsp;&nbsp;HISTORY&nbsp;&nbsp;&nbsp;COMMUNITY&nbsp;&nbsp;&nbsp;RESOURCES&nbsp;&nbsp;&nbsp;CONTAC T&nbsp;&nbsp;&nbsp;BLOG</span></div>


How do you center the selection left-to-right with the bounds of the the header?

Any help would be greatly appreciated.

Ricky55
07-29-2009, 04:06 PM
just create a margin-left on the element or say margin: 0 auto; and this will center the element.

joesp
07-30-2009, 04:53 AM
Thank you I didn't realize how many other problems I had with the code until I tried your suggestion 10 different ways and still couldn't get it to work. I think this is correct now:


.style3 {
color: #FC9501;
font-family: Verdana;
font-weight: bold;
text-align: center;
font-size: larger;
position: absolute;
top: 145px;
margin: 0 auto;
width: 800px;
}
-->
</style>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<div class="style3">CONCEPT&nbsp;&nbsp;&nbsp;HISTORY&nbsp;&nbsp;&nbsp;COMMUNITY&nbsp;&nbsp;&nbsp;RESOURCES&nbsp;&nbsp;&nbsp;CONTAC T&nbsp;&nbsp;&nbsp;BLOG</span></div>
</div>


It seems like the reason it wasn't working was because the div class was inside the div id, so everychange I made affected the entire header, not just the text.

Thanks again.