проблем с центриране на меню

jaffy

Registered
Добър вечер.. имам проблем с центрирането на едно меню използващо css.. пробвах с align и други трикчета показани в w3schools за css които се ползват при бъговете в IE ,но пак ударих на камък..

css:
Код:
#navigbg {
	height:31px;
	background-image:url('../images/header_07.png');
}

#navigbg #tabs a {
	margin-left:auto;
	margin-right:auto;
	display:block;
	float:left;
	height:31px;
	color:#ffffff;
	text-decoration:none

}
#navigbg #tabs a strong {
	padding:5px;
	padding-top:6px;
	padding-bottom:9px;
	display:block;
	color:#cccccc;
}

#navigbg #tabs a:hover {
	background-image:url('../images/hover.png');
}
#navigbg #tabs a:hover strong {
	color:#ffffff;
}

html:
Код:
	<div id="navigbg">
		<div id="tabs">
		<a href="#"><strong>Home</strong></a>
		<a href="#"><strong>Forum</strong></a>
		<a href="#"><strong>Register</strong></a>
		</div>
	</div>

В момента седи постоянно в ляво и никакъв align не го помръдва.. нито на <td> в което се намира нито на <div> нито в css нищичко.. направо се оттегчих вече.

Благодаря предварително. :)
 
#navigbg #tabs a {
margin-left:auto;
margin-right:auto;
display:block;
float:left;
height:31px;
color:#ffffff;
text-decoration:none;
text-align:center;
}
дай целия код щом има и <td>та или там каквото има...
 
В момента е така след като направих промяната на Replace

css
Код:
#nav {
	height:31px;
	text-align: center;
	background-image:url('../images/header_07.png');
}

#nav #tabs a {
	display:block;
	float:left;
	height:31px;
	color:#ffffff;
	text-decoration:none

}
#nav #tabs a strong {
	padding:5px;
	padding-top:6px;
	padding-bottom:9px;
	display:block;
	color:#cccccc;
}

#nav #tabs a:hover {
	background-image:url('../images/hover.png');
}
#nav #tabs a:hover strong {
	color:#ffffff;
}


html
Код:
		<td colspan="3">
	<div id="nav">
		<div id="tabs">
		<a href="#"><strong>Home</strong></a>
		<a href="#"><strong>Forum</strong></a>
		<a href="#"><strong>Register</strong></a>
		</div>
	</div>
		</td>
 
Ето малко help
Css:
Код:
#nav {	   
   height:31px;
   background-image:url('../images/header_07.png');
}
#tabs {
width:300px;
margin:0 auto;
}
#nav #tabs a {
   width:100px;
   display:block;
   float:left;
   height:31px;
   color:#ffffff;
   text-decoration:none

}
#nav #tabs a strong {
   padding:5px;
   padding-top:6px;
   padding-bottom:9px;
   display:block;
   color:#cccccc;
}

#nav #tabs a:hover {
   background-image:url('../images/hover.png');
}
#nav #tabs a:hover strong {
   color:#ffffff;
}

HTML :
Код:
<td colspan="3">
            <div id="nav">
              <div id="tabs">
                  <a href="#"><strong>Home</strong></a>
                  <a href="#"><strong>Forum</strong></a>
                  <a href="#"><strong>Register</strong></a>
              </div>
           </div> 
   		</td>

Това което трябва да знеш за центрирането е че задължително трябва да има широчина на полето което искаш да бъде центрирано (примерно му зададох 300px #tabs {width:300px;} )
а самото центриране става с този код #tabs {margin:0 auto;}

дано съм помогнал
Успех
 
sa666o каза:
Ето малко help
Css:
Код:
#nav {	   
   height:31px;
   background-image:url('../images/header_07.png');
}
#tabs {
width:300px;
margin:0 auto;
}
#nav #tabs a {
   width:100px;
   display:block;
   float:left;
   height:31px;
   color:#ffffff;
   text-decoration:none

}
#nav #tabs a strong {
   padding:5px;
   padding-top:6px;
   padding-bottom:9px;
   display:block;
   color:#cccccc;
}

#nav #tabs a:hover {
   background-image:url('../images/hover.png');
}
#nav #tabs a:hover strong {
   color:#ffffff;
}

HTML :
Код:
<td colspan="3">
            <div id="nav">
              <div id="tabs">
                  <a href="#"><strong>Home</strong></a>
                  <a href="#"><strong>Forum</strong></a>
                  <a href="#"><strong>Register</strong></a>
              </div>
           </div> 
   		</td>

Това което трябва да знеш за центрирането е че задължително трябва да има широчина на полето което искаш да бъде центрирано (примерно му зададох 300px #tabs {width:300px;} )
а самото центриране става с този код #tabs {margin:0 auto;}

дано съм помогнал
Успех

За това не се сетих.. :idea: Благодаря ти! :?:
 

Back
Горе