I have a nav menu that contain several list items. However, I have not been successful at removing the list item styling using CSS.
Here is my code so far:
.links {
overflow:auto;
}
.lnk {
list-style:none;
padding:0;
margin:0;
background:#111111;
}
.lnk li {
float:left;
}
<div class="links">
<ul class="lnk">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
Unfortunately, none of what I'm trying is working for me. I don't know what else to do. None of my CSS code is even working. They are external files and I have linked them to my page, but they are still not working. Please, I need help.
This will helpful for you
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
css part:
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
um I think it might work like this?
.links {
overflow:auto;
}
.lnk {
list-style:none;
padding:0;
margin:0;
background-color:#111;
}
li .lnk{
float:left;
}
I don't know your HTML code so I don't know the problem. Can you post that too? And please explain what your problem is clearer. Oh and I also organized it. I think the problem is that you put .lnk lk instead of li .lnk. There is a difference.
Related
The last li drop down on chrome and opera, it looks fine on ie and firefox. how do i fix that? what cause them to look different? Thanks
here is the http://jsfiddle.net
CSS:
<style>
*{
padding:0;
margin:0;
}
.wrapper{
width:1000px;
}
ul{
background: #005984;
}
ul li{
display:inline-block;
*display:inline;
*zoom:1;
margin-right:37px;
}
ul li.last-child{
margin-right:0;
}
ul li a{
display: inline-block;
*display:inline;
*zoom:1;
padding:15px 20px;
color:white;
}
</style>
HTML:
<div class="wrapper">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>NEWS</li>
<li>SALES</li>
<li>SUPPORT</li>
<li>ABOUT US</li>
<li class="last-child">CONTACT US</li>
</ul>
</div>
the difference might come from different font setting from a browser to another.
use : white-space:nowrap on ul , to keep all inline-boxes on 1 line :
http://jsfiddle.net/6yREk/1/
I'm basically looking to add colour classes to what I have below. I'm going to be adding more colours so this way obviously won't work for me while being clean. I tried adding in the class below to add to my li's but doesn't seem to work. The css and html are below that.
#content ul.icon-text li .orange {
background-color:#f37028;
}
-------------------------------
#content ul.icon-text {
width:100%;
height:2.1vw;
list-style:none;
float:left;
padding: 0;
margin: 1% 0 0 0;
background-color:#f37028;
text-transform:uppercase;
text-align:center;
}
<ul class="icon-text">
<li>...</li>
</ul>
If I understood correctly you are trying to create COLOR classes
.orange {
background-color:#f37028;
}
.silver {
background-color:#ccc;
}
and so on...
<ul class="icon-text">
<li class="silver">...</li>
<li class="orange">...</li>
</ul>
also possible
<ul class="icon-text orange">
<li>...</li>
<li>...</li>
</ul>
I am not sure if that is what you were asking...
Best of luck, let me know if that is not it so I can delete it :)...
Remove the .orange
should be
#content ul.icon-text li
you defined the .orange class but you didn't use it in your HTML code.
#content ul.icon-text li.orange {
background-color:#f37028;
}
as per the HTML code you given here should use this line of code.
ul.icon-text li {
background-color:#f37028;
display:block;
margin:4px;
}
if you want each <li> should be in orange color then you can define the class .orange and apply to specific li.
A Working Demo Link. http://jsbin.com/xagevava/1/edit
Working Fiddle
Since your css is taking #content is the parent, your html structure should also involve #content in it to see the orange background for li.
<div id="content">
<ul class="icon-text">
<li class="orange">...</li>
</ul>
</div>
So I've got some simple code here:
<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS-
ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}
li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}
a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}
-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}
This code should force my a tags to align themselves horizontally and give them a definite height/width. They align perfectly, but their height and width WILL NOT change no matter what I do. Never ran into this problem before, is my HTML broken? Thanks.
display: inline elements do not respect height. Change them to display: inline-block (or perhaps block) or use line-height to alter the height.
http://jsfiddle.net/kHkyh/
Try setting the height and/or width on the anchor tags in the li. That is, push out the li using the anchor tags. You can do this in a decently uniform way using padding to make sure the entire area of the anchor is clickable. Also, this approach works back to I believe ie6(not sure about ie5, have not tested it). Following is roughly what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, #menu, #menu li
{
position: relative;
display: block;
padding:0px;
margin: 0px;
}
#menu
{
list-style-type:none;
width:100%;
}
#menu a
{
position:relative;
display:block;
float:left;
width:25%;
padding:10px 0px 10px 0px;
text-align:center;
}
</style>
</head>
<body>
<ul id="menu">
<li>One item</li>
<li>Another item</li>
<li>hola</li>
<li>Hi</li>
</ul>
</body>
</html>
This is the html code for the hyperlinks. I wanted to have a slight gap between the texts. Like between 'Menu' and 'Contact Us' for instance. Thanks in advance.
<div id="navbar">
<a class="fb" href="menu.html">Menu</a></br>
Contact Us</br>
About Us</br>
Terms & Conditions</br>
Jobs</br>
Your Order
</div>
I set the line-height property in CSS as follows:
#navbar {
line-height:2em;
}
Don't use <br/> (which you've mistyped consistently) and line-height, use a list and adjust the margins on the list items.
Demo: http://jsfiddle.net/psP7L/
<ul id="navbar">
<li><a class="fb" href="menu.html">Menu</a></li>
<li>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Jobs</li>
<li>Your Order</li>
</ul>
#navbar { padding:0; margin:0 }
#navbar li { display:block; padding:0; margin:0.3em 0 }
Proper, semantic markup first; then get the styling right.
However, to answer your question, it does "work", it's just that line-height on display:inline elements behaves differently per the spec than it does for display:block elements.
You have to apply the style to the anchor, and add display:block; to your CSS to make this work:
#navbar a{
line-height: 2em;
display: block;
}
Amongst some other fixes in your code you should end up with something like in this JSFiddle.
you should define a line-height in anchor not in navbar id see the example code:-
HTML
<div id="navbar">
<a class="fb" href="menu.html">Menu</a></br>
Contact Us</br>
About Us</br>
Terms & Conditions</br>
Jobs</br>
Your Order
CSS
#navbar a {
color: red;
line-height: 33px;
text-decoration: none;
}
http://jsfiddle.net/8LFLd/50/
And the other proper method is i am mentioning below you should make navigation in proper ul li list items like mentioned below:-
HTML
<div id="navbar">
<ul>
<li><a class="fb" href="menu.html">Menu</a></li>
<li>Contact Us</li>
<li>About Us</li>
<li>Terms & Conditions</li>
<li>Jobs</li>
<li>Your Order</li>
</ul>
</div>
CSS
#navbar li {
display:block;
list-style-type:none;
line-height:25px;
}
#navbar li a {
text-decoration:none;
color:red;
}
#navbar li a.fb {
text-decoration:none;
color:green;
}
#navbar li a:hover {
text-decoration:none;
color:blue;
}
demo:- http://jsfiddle.net/XZ9w7/3/
#navbar a{ display:block;line-height:30px;}
Remove
demo http://jsfiddle.net/psP7L/1/
I have some code that has the property display-inline. Due to this it displays the list horizontally. Now, I placed an image in my code and it appeared after the list. I wanted the image to be displayed below the list so I placed the list into a div but still its getting displayed next to the list. Here is the code,
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<img src="Book_Cover-465x540.png" />
CSS of list-nav:
ul#list-nav {
margin:40px;
padding:0;
list-style:none;
width:525px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#eee;
float:left;
}
ul#list-nav li a {
text-align:center;
border-left:15px solid #fff;
}
Please help out. Thanks
Remove the float from a.
Also: what the heck is border-left:15px solid #fff;, didn't you mean left margin?
try this:
<div>
<ul id="list-nav">
<li>Home</li>
<li>About Book</li>
<li>Contact</li>
</ul>
</div><!--navigation div ends-->
<!--<div>-->
<div style="clear:both"></div>
<img src="Book_Cover-465x540.png" />