Jump to content

Problam to centeral header tag


Recommended Posts

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 by Aviway
Link to post
Share on other sites
#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>

Link to post
Share on other sites
#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.
Link to post
Share on other sites

??? 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 by dsonesuk
Link to post
Share on other sites

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. :good:

Link to post
Share on other sites

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>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...