center align text/background image

Lchad · #1 (**permalink**) Dec 4th, 2006, 18:05

http://www.vinylfontsandphrases.com/colors_fonts.html

This is the problem child page!

Note problem is in Firefox.

Question #1 (Most important)I'm trying to center the pink bar that says "choose a color" "choose a font"

Here's the CSS:
body {
margin-top: 0px;
margin-bottom: 0px;
padding: 0;
margin: 0;
border: 0;
font-size: 100.01%;
text-align:center;
background: #FB89D9 url(back_pinkgrad.jpg) repeat-x fixed left top;
}

#wrapper {
width: 772px;
margin:0px auto;
padding: 0;
margin-bottom: 0px;
}
#header {
background-image:url(header.jpg);
background-position: center;
width:772px;
height: 105px;
}
#blackborder {
width: 759px;
height:30px;
background: #000000 url(tagline.jpg) no-repeat;
background-position:center;
margin: 0px auto;
padding: 0px;
}
#content {
width: 745px;
background: #FFFFFF no-repeat center top;
border-top:hidden;
border-right: 7px solid #000000;
border-bottom: 7px solid #000000;
border-left: 7px solid #000000;
margin: 0px auto;
padding: 0px;
text-align: center;
}
ul.nav {
margin:0;
padding:0;
list-style:none;
height: 0px;
width: 0px;
margin-top: 15px;
padding-top:6px;
padding-bottom:5px;
display: inline;
}

ul.nav li {
display:inline;
}
ul.nav a{
border:1px solid;
padding:4px 10px;
text-decoration:none;
color: #DE079F;
font: lighter small Tahoma;
text-transform: uppercase;
background: #FFFFFF url(polkadot_pink.jpg);
text-align:center;

}
ul.nav a:link {
color:#DE079F;
}
ul.nav a:visited {
color:#910466;
}
ul.nav a:active {
color:#333333;
}
ul.nav a:hover {
text-decoration:blink;
color: #720351;
}

#content p{
margin:20px;
}
#footer {
width:772px;
height: 74px;
font-family:"Tahoma";
color:#333333;
font-size:small;
font-weight: bold;
text-align:center;
vertical-align: top;
margin-top:-20;
margin:auto;
padding:0;
background: url(footer.jpg) no-repeat center top;
}
#footer a:link{
font-family:"Tahoma";
color:#333333;
text-decoration:none;
font-size:small;
font-weight: bold;
}
#footer a:hover {
font-family:"Tahoma";
color:#DE079F;
text-decoration:none;
font-size:small;
font-weight: bold;
}

/*TExT STYLES*/

.textbody {
font-family:Tahoma;
font-size: small;
color:#000000;
}

.breadcrumb {
font-family:Tahoma;
font-size:small;
color:#333333;
float:right;
}
.breadcrumb a:link {
color:#000000;
font-size:small;
text-decoration:none;
}
.breadcrumb a:visited {
color:#666666;
font-size:small;
text-decoration: none;
}
.textheader {
color:#FFFFFF;
font: bold medium Tahoma;
background: url(text_header_bg.jpg) no-repeat scroll center;
text-align: center;
padding: 0;
margin: 0;
width:475px;
background-repeat: no-repeat;
background-position: center;
}

Here's part of the HTML:
<body>
<div id="wrapper">
<div id="header"><span class="nav"><a name="top" id="top"></a></span> </div>
<div id="blackborder"></div>
<div id="content"><br />
<div class="nav" id="navigation">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Quotes & Sayings</a></li>
<li><a href="colors_fonts.html">Colors & Fonts</a></li>
<li><a href="#">Shipping & Policies</a></li>
</ul>
</div>

<p class="breadcrumb"><a href="#fonts">Click for Fonts</a></p>
<p> </p>
<p class="textheader">Choose A Color </p>

Question #2, If I wanted this pink graphic to span across the entire white portion, I would use repeat-x right? When I do that, I get spaces of white on the left margin and right margin around 7-10 pixels wide. This question is not as important as the first.

Thanks in advance!

Linda

solidgold · #2 (**permalink**) Dec 4th, 2006, 20:56

well, i'd have to say both of these could be solved quite simply using xhtml instead of tables for the internal structure of the content

Lchad · #3 (**permalink**) Dec 4th, 2006, 22:51

The only thing inside of a table is a bunch of graphics. Otherwise the rest is html/css.

Lchad · #4 (**permalink**) Dec 5th, 2006, 01:01

resolved my issues... and got rid of the tables.

Ryan Fait · #5 (**permalink**) Dec 5th, 2006, 08:54

Great! Next time, it would be better to just post the relevant CSS, though. When I see two full pages of code, I'm not even going to try to comprehend what all of it does.

Lchad · #6 (**permalink**) Dec 5th, 2006, 10:40

I'll try to post shorter code next time. Since I'm such a newbie, it's hard for me to know what's relevant. But I'll try.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Align <li> in center? SOLVED	Jack Franklin	Web Page Design	4	Feb 18th, 2008 20:14
[SOLVED] Image with text -> text with background	alexgeek	Web Page Design	5	Nov 13th, 2007 23:25
[SOLVED] background img center in table	robertl	Web Page Design	9	Oct 1st, 2007 05:27
align background	DrRedSkwirrell	Web Page Design	8	Oct 10th, 2005 20:03
help with text-align: center	iemerick	Web Page Design	1	Jun 9th, 2005 18:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
center align text/background image