Problam to centeral header tag

[Aviway 0]

Hello,I got stuck again and again the problem that I can not find a solution.I created a navigation bar that build that way:

<ul>	 <li>		 <a><h3>head name</h3></a>	 </li></ul>

and css code:

ul{float:right; width:636px; height:25px;}li{display:inline; padding:0 15px; float:right; height:23px; width:180px; text-align:center;}h3{font-size:15px; font-weight: normal;}

The problem is I can not center the list, because the FLOATcommand,and if I remove the FLOAT, H3 tag take control and returns the list to be not on INLINE mode.I'm looking for the code to do that where ever i want, and not to wright it each time from the start. Thanx in advance!!

Edited March 29, 2012 by Aviway

[dsonesuk 913]

#nav {text-align:center;}#nav ul, #nav li {text-indent:0; margin:0; padding:0; list-style-type:none;}ul{height:25px; float:left;position:relative; left:50%;}li{display:inline; padding:0 15px; float:left; height:23px; width:180px; position:relative; right:50%;}h3{font-size:15px; font-weight: normal; margin:0; line-height: 23px;}

<div id="nav"><ul>		 <li>				 <a><h3>head name</h3></a>		 </li></ul></div>

[Aviway 0]

#nav {text-align:center;}#nav ul, #nav li {text-indent:0; margin:0; padding:0; list-style-type:none;}ul{height:25px; float:left;position:relative; left:50%;}li{display:inline; padding:0 15px; float:left; height:23px; width:180px; position:relative; right:50%;}h3{font-size:15px; font-weight: normal; margin:0; line-height: 23px;}

<div id="nav"><ul>		 <li>				 <a><h3>head name</h3></a>		 </li> </ul></div>

this code is'nt good for list with a several lines.

[dsonesuk 913]

??? what do you mean 'several lines', your parent ul is only 25px, you can't have several lines when you are restricted by a height of 25px. Your li height is given you the 23px same problem! You say you want h3 it to be in how you say 'inline mode', that is what you have. I can only go by the html, css and comment you have made, perhaps if the code supplied, correctly represented what you required, i would not come up with code that is'nt good.

Edited March 30, 2012 by dsonesuk

[Aviway 0]

First of all, relax. Its look like you are angry.I will explain myself again:I want to write a navigation menu that is built from UL TAG and H TAG inside it.To the main DIV TAG must have a CSS FLOAT command. that is because of all DIV'S are with CSS FLOAT command on my code.It must be on UL TAG because of the LI'S inside it are changing each page by the SQL Query. It says, on one page can have only 5 LI's Tags, and they got enter in one row, and can be another page will be15 LI'S Tags, and they do not enter one row but got a second row, and even third row. Previously noted in the code for just one row. Once it got to the second row,the LI'S tags was not centered like the first row.Now I need a code that will feet to this conditions. Thank you for the Reference.

[dsonesuk 913]

First don't come out with 'code 'is'nt good' the code is good! with what information you supplied, YOUR information AND explanation is'nt good. Right! moving on 1) you can't have inline anchor element outside a header block element.2) Now you have explained the situation more accurately, you will have to use text-align: center; for ul element, turn li element in to inline-block elements, and they will centre themselves similar to text.

#wrapper {overflow:hidden; margin:0 50px; background-color:#FFFFCC;}#nav {float:left; width: 100%;}#nav ul, #nav li {text-indent:0; margin:0; padding:0; list-style-type:none;}#nav ul{text-align:center;}#nav li{ display:inline-block;  /* IE 7 fix */zoom:1; *display: inline; /* end IE 7 fix*/width:180px;height:25px;}h3{font-size:15px; font-weight: normal; margin:0; line-height: 23px;  padding:0 15px; }#nav a{display:block; width: 100%; height: 100%; }

<div id="wrapper"><div id="nav"><ul>		 <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>  <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li>   <li>				 <h3><a>head name</a></h3>		 </li></ul></div></div>

[Aviway 0]

Thanks man it works great! :good:

Edited March 31, 2012 by Aviway