Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a nav list. I want the lighter gray area to be clickable as a link as opposed to just the text. The source is:
http://mattcdecker.comeze.com/HELP/
<nav>
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav{
float:right;
}
nav li{
float:left;
text-transform:uppercase;
font-size:24px;
background:#333;
margin:70px 10px 0 10px;
padding:10px;
}
nav a{
color:#666;
}
nav a:hover{
color:#fff;
}
Please post code, not a link.
You need to move the padding from the list element to the anchor, and also add display:block to the anchor.
nav li {
float: left;
text-transform: uppercase;
font-size: 24px;
background: #333;
margin: 70px 10px 0 10px;
padding: 0;
}
nav a {
color: #666;
display: block;
padding: 10px;
}
The issue you have is that your nav HTML is malformed so won't display properly.
<nav>
<!-- ^ this probably doesn't belong here -->
<ul>
<!-- ^ this certainly doesn't belong here -->
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have used the < div > tag to create a navigation menu bar but it only displays in a vertical fashion. However, I then changed the < div > tag into a < nav > tag, but still receive the same results in a vertical orientation.
On the ul add display: flex;
nav {
padding: 0;
width: 100%;
background: #262626;
overflow: hidden;
}
li a {
color: white !important;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: gray;
}
li {
list-style: none;
}
ul {
display: flex;
}
<nav>
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT US</li>
<li>CONTACT</li>
<li>NEWS</li>
<li>FAQ</li>
</ul>
</nav>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to create a horizontal list that isn't precisely aligned, exactly like this: http://i.imgur.com/G8xWymZ.png (horizontal and scattered)
Here's what I've got so far:
HTML
<nav>
<ul id="menu">
<li>Random</li>
<li>Stand</li>
<li><a href="#>NAN</a></li>
<li>Tap</li>
<li>Mart</li>
<li>Dom</li>
</ul>
</nav>
CSS
nav {
position: relative;
top: 25px;
left: 290px;
}
nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
underline: none;
}
nav ul li { display: inline; margin: 0px 20px 0px 0px;}
nav ul li a { color: red; font-size: 14px; text-decoration: none;}
As you can see, although the list is horizontal it is not 'unordered'/scattered as in the image. Any suggestions?
You can position the <li>-elements manually with position: relative and the position properties top, right, bottom, left. I have written a little example for you here: https://jsfiddle.net/c5bw1dbe/
I hope this helps!
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I want my last list item to have rounded corners on the right, but it doesn't work. Can't figure it out by my self, tried everything and searched everywhere.
#navigation {
float: left;
border: 1px solid #C0C0C0;
border-radius: 20px;
background: linear-gradient(#64717E, #E5E3DE);
box-shadow: 2px 2px 15px #64717E inset, 0 0 20px #000;
}
#navigation ul {
height: 20px;
margin: 0;
padding: 0;
}
#navigation ul li {
padding: 0 15px 0 15px;
display: inline;
// border: 2px solid #C0C0C0;
background: linear-gradient(#64717E, #C0C0C0, #64717E);
list-style-type: none;
}
#navigation ul li:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#navigation ul li:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
<div id="navigation">
<ul>
<li><a href="#">start<a></li>
<li><a href="#">imperdiet<a></li>
<li><a href="#">condimentum<a></li>
<li><a href="#">nunc<a></li>
<li><a href="#">phasellus<a></li>
</ul>
</div>
Feedback as for the rest of the html and css is appreciated.
Your problem is that you haven't closed your <a> tags and instead are opening a nested <a> tag which isn't even a valid thing.
This means your ul li:first-child works, because your first child is present and valid, but then the <a> tag is never closed, so the browser gets confused, and never knows where a a last-child is.
Just close your <a> tags.
<div id="navigation">
<ul>
<li>start</li>
<li>imperdiet</li>
<li>condimentum</li>
<li>nunc</li>
<li>phasellus</li>
</ul>
</div>
JSFiddle example
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
So I'm trying to make my navbar list items have a border on each side, but I want them still to be connected just like this:
http://prntscr.com/4wa4q4
When I try to add the border to both sides, they're spaced out and with no margin the 2 borders on each list item are together. How could I do it like in the picture?
http://jsfiddle.net/9Leecphh/
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
CSS:
ul{
list-style: none;
}
ul li:first-child{
border-left: 1px solid gray;
}
ul li{
border-right: 1px solid gray;
display: table-cell;
padding: 5px 20px;
color: #FFF;
background: #000;
margin: 0;
}
Just add border-right on your li and border-left on li:first child. Then you can get it like in the screenshot.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have my navigation in a <ul> and the <li> are floated.
CSS
ul#nav {
float:right;
margin:10;
font-family: 'Open Sans', sans-serif;
}
ul#nav li {
float:left;
margin:10;
width:127px;
font-size:15px;
}
ul#nav a{
margin:0px;
width:100%;
height:100%;
text-decoration:none;
background:transparent;
color:rgb(46,43,52);
}
Currently I get this:
Yellow = desired position | Red = actual position
How can I position the list items with a smaller height on the bottom line?
With your CSS, it makes it clear what you are trying to achieve.
Remove the float and position your list items with display: inline-block. Inline elements will all position themselves next to each other. (Read more about different display options here)
vertical-align: bottom is used to keep your items positioned at the bottom of the line.
#nav { font-size: 0 } fixes a gap that occurs with inline elements. You will have to set your font-size on #nav li or #nav li a (Read more about that gap problem here)
To give the list items after the first list item a different height, I have used #nav li + li which will target every <li> that has a <li> before it.
Here is a visual example of different vertical alignments:
Here is an example of the below.
HTML
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
#nav {
font-size: 0;
}
#nav li {
list-style: none;
width:127px;
height: 100px;
background: #F00;
margin: 10px;
display: inline-block;
vertical-align: bottom;
}
#nav li + li {
height: 50px;
}