<style>
*{
margin:0;
padding:0;
border:0;
}
#navlist{
display:block;
width: 100%;
float: left;
list-style: none;
background-color: #f2f2f2;
border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;
}
#navlist li{
float: left;
}
#navlist li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 5px solid #ccc;
}
#navlist li a:hover{
color:#c00;
background-color:#fff;
}
#navlist a#current{
color:#c00;
}
/*SEARCH*/
#navlist li input{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
background-color: #f2f2f2;
border-right: 5px solid #ccc;
}
#navlist li input:hover{
color: #c00;
background-color:#fff;
}
#navlist li input #searchbar{
}
</style>
</head>
<body>
<div>
<ul id="navlist">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<form action="search.asp">
<li><input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/></li>
<li><input class="searchbut" type="submit" value="Search"/></li>
</form>
</ul>
</div>
</body>
This is a horizontal navigation bar with a search bar. My question is two-fold. How can I make it that I specify a height such as height:30px; for the horizontal navigation and the top and bottom padding of each link and input field will fit exactly to match the specified container height (auto-size to specified height)?; I tried using padding:100% 10px; under a{ and input{ however that did not work. Secondly what selector do I type to modify the input classes separately (ex. #navlist li input #searchbar{ size:15; } )?
Instead of vertical padding, why not make the links height: 30px; and line-height: 30px;. Then, you don't have to worry about making the padding fit exactly because, if you make the line height equal to the height, the text will always be vertically centered.
Fiddle
Hows that? Not exactly sure what you need. Let me know and I'll update when I get a chance.
Related
I have the following html. When I hover on the last li, a border should generate. When I hover on the last li, other li's are moving.
I have gone through these 2 questions.
list item width height issue
fixed with span inside li
I can't able to stop moving the element.
HTML:
<div class="menu_right">
<ul class="menu">
<li>Text 1</li>
<li>Text 2</li>
<li class="your_space"><span>Text3</span></li>
</ul>
</div>
Kindly check my jsfiddle.
It maybe a simple issue. But I can't able to find a solution to fix it.
Use a transparent border on all the other <li> to make it good.
ul.menu li {
float: left;
list-style-type: none;
border: 2px solid transparent;
}
Fiddle: https://jsfiddle.net/8cu4bL3s/
Please add border: 2px solid transparent; to all the li
.menu_right {
float: right;
}
ul.menu li {
float: left;
list-style-type: none;
border: 2px solid transparent;
}
ul.menu li a {
text-decoration: none;
}
li.your_space {
width: 100px;
}
li.your_space:hover {
border: 2px solid black;
}
li.your_space a>span {
display: block;
}
<div class="menu_right">
<ul class="menu">
<li>Text 1
</li>
<li>Text 2
</li>
<li class="your_space"><span>Text3</span>
</li>
</ul>
</div>
another solution
Add padding:2px; to all li and on hover remove padding of the hovered li and add border to it
Add this CSS
.menu_right{
float:right;
}
ul.menu li{
float: left;
list-style-type: none;
padding:2px;
}
ul.menu li a{
text-decoration:none;
}
li.your_space{
width:100px;
}
li.your_space:hover{
border: 2px solid black;
padding:0;
}
li.your_space a>span{
display:block;
}
Explaining:
This is because you are setting a border property on hover, which causes the li to add the border property to its height / width.
You need to set transparent borders on all your li independent on they state, so when you hover any li you won't be adding a border but changing its color.
ul.menu li {
border: 2px solid transparent;
}
course blocks will move, you add a 2 pixel border (left + right = 4px). As an alternative I can propose "outline"
li.your_space:hover{
outline: 2px solid black;
}
Sorry if this is a silly question but I'm looking to add a dropdown list of items to this navbar. It's in a navbar.php file and here is the code:
<link rel="stylesheet" href="/styles/navbar.css" type="text/css" /> <!-- navbar styles -->
<ul id="nav">
<li>Home</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here's the navbar.css file:
#nav
{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #242424;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position:fixed;
top:0px;
}
#nav li
{
float: left;
}
#nav li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #7ACC01;
border-right: 1px solid #ccc;
}
#nav li a:hover
{
color: #c00;
background-color: #fff;
}
So my question is, is there a simple way of adding a dropdown list of items to "Item 4" for example, where the dropdown menu will appear on mouseover?
I would like you to learn how we do that, instead of giving you the fish. With a rod, you can always fish by yourself.
Look at what I have done in this fiddle:
http://jsfiddle.net/jLkeH/
It actually comes to this:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
You have to hide ul you want to toggle and set it back to visible if someone hovers on it.
PS: as you can see, I used HTML5, which is recommended, because it is (more) semantic.
I have a small design problem in my css, and I'd like to know if someone could check it out for me. The design problem is in the rollover effect of my horizontal navigation. There seems to be some sort of added margin or padding, but I'm having trouble finding the problem in the css. I will paste the code I'm using below, so you can see for yourself. You won't be able to see the problem until you rollover the navigation list items.
HTML:
<div class="Horiznav">
<ul>
<li id="active">Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
CSS:
.Horiznav {
background: #1F00CA;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
}
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
display: inline;
}
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
background: #16008D;
color: #fff;
}
#active a { border-left: 1px solid #fff; }
Since you have the li elements display:inline the problem (extra gap to the left of each menu/list item) is as a result of the white-space in the HTML markup. You can either:
A - Get rid of the white-space in the HTML:
<ul><li id="active">Link #1</li><li>Link #2</li><li>Link #3</li><li>Link #4</li><li>Link #5</li></ul>
B - Or, use the font-size:0 trick:
Set font-size:0 on the ul container and override this with font-size:whatever on the li child elements:
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
font-size: 0; /* #1 */
}
.Horiznav ul li {
display: inline;
font-size: 16px; /* #2 */
}
http://jsfiddle.net/EZSvC/4/
C - Or, use a floated layout:
Float the li elements (they are then implicitly displayed as blocks) and clear the floats on the ul container with overflow:hidden. However, you will need to give the container width and apply margin:0 auto if you want it centred.
http://jsfiddle.net/EZSvC/5/
just add "display:inline-block" in "Horiznav ul li a" in you css
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
display:inline-block;
}
here is the jsFiddle file
hope this will solve your problem.
I have a horizontal list menu, on which I want to use pseudo selectors: When you hover over the menu item, it should have a thick color underline. Each Menu item have a different width and its underlining effect should match that width
Here is a sample website with its underlining menus: http://www.theblackswantheory.org/
Here is my list:
<div id="other">
<div id="otherTable">
<ul id="ul1">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Google Search Optimization</li>
</ul>
</div>
</div>
CSS:
#otherTable{
display: table;
margin: 0 auto;
}
#otherTable ul{
list-style: none;
}
#otherTable ul li{
display: inline;
margin: 10px;
}
ul#ul1{
color: #fff;
}
So what is the best way of going about this? I tried several things but does not work well (tables, another list below with the underlines etc...)
I would like it pure CSS and no javascript if possible...Which I believe it is
Thank You
Use a bottom border to simulate an underline (see jsfiddle):
#otherTable ul li:hover {
border-bottom: solid red 0.2em;
}
ul#ul1 > li:hover{
text-decoration:underline;
}
http://jsfiddle.net/Tymek/2P8UL/
HTML
<div id="menu">
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Google Search Optimization</li>
</ul>
</div>
CSS
#menu ul,
#menu li,
#menu a {
background: #111;
}
ul#menu {
list-style: none;
}
#menu li {
display: block;
float: left;
}
#menu a {
display: block;
margin: 0 0.5em;
padding: 15px 0 7px;
color: #ccc;
text-decoration: none;
text-transform: uppercase;
font: 13px/18px Arial, Helvetica, sans-serif;
font-weight: 300;
}
#menu a:hover {
color: #fff;
padding-bottom: 4px;
border-bottom: 3px solid #f00;
}
Key part:
#menu a {
padding: 15px 0 7px;
}
#menu a:hover {
padding-bottom: 4px;
border-bottom: 3px solid #f00;
}
Next time use firebug, or something to analize your example.
I have implemented my webpage menu by inline "li"-s of "ul". "li" has a colored border and contains "a". Now on mouse hover I need to change color of the text inside "a" and move it 2px up by not moving the li border. How can I do that?
EDIT:
Here is my code:
HTML -->
<div id="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div> <!-- end menu -->
CSSS -->
div#menu ul
{
list-style-type:none;
}
div#menu li
{
margin-left:2px;
display:inline-block;
border: 1px #FFF solid;
border-top:none;
border-bottom-right-radius: 6px 11px;
border-bottom-left-radius: 6px 11px;
}
div#menu li:hover
{
border-top:none;
border: 1px #95d9e4 solid;
}
div#menu li a
{
text-decoration:none;
color:#FFF;
font-size:14px;
margin:0 6px 2px 6px;
line-height:20px;
}
div#menu li a:hover
{
color:#95d9e4;
margin:0 6px 4px 6px;
}
You can do something like:
li:hover {
border-top: none;
}
# Note: this is different from 'li a:hover'!
li:hover a {
position: relative;
top: -2px;
}
Add bottom padding, subtract from line height:
div#menu li a:hover {
color:#95d9e4;
margin:0 6px 6px 6px;
line-height:18px;
padding-bottom:2px;
}