Menu
I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> <a href="#">Home</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div>
<div class="nav_button"> <li> <a href="#">About us</a> </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
743
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph.
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
165
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> <a href="#">Home</a> </li>
<li class="nav_button"> <a href="#">Contact us</a> </li>
<li class="nav_button"> <a href="#">Shipping</a> </li>
<li class="nav_button" > <a href="#">About us</a> </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
