I have a tutorial, where the following CSS is used to separate list items from each other.
But why do I adress the nav a and not the li ? Can someone tell me a proper reason to not define the padding in li? It has a similar effect.
main-header .header-logo {
float:left;
}
.main-header nav {
float: right;
}
.main-header ul {
list-style: none;
}
.main-header li{
float:left;
}
.main-header nav a {
padding: 20px;
}
<div class="container">
<div class="main-header-container">
<header class="main-header clearfix">
<a class="header-logo" href="index.html"><h1>ContactFile</h1></a>
<nav>
<ul class="header-main-menu clearfix">
<li>contact</li>
<li>contact2</li>
<li>contact3</li>
<li>contact4</li>
</ul>
</nav>
</header>
</div>
</div>
Everything will work perfect if you apply styles to li but consider you give a padding to a lielement instead of a. It will create this type of effect where only text will be clickable as a link while all the other space will be unclickable as it will be li not a
Related
I'm making navbar and I don't want my ul li to ever become block even after resize, I wrote this code but when i convert my browser to mobile or resize and make it smaller it becomes block any solutions ?
#intro .nav ul{
position: relative;
float:right;
list-style: none;
margin-top:15px;
}
#intro .nav ul li{
font-family: 'Baloo Tammudu 2',cursive;
font-weight: 900;
padding-right:155px;
font-size:2em;
display:inline;
}
<div id="intro">
<div class="nav">
<ul>
<li class="about">
About
</li>
<li class="shop">
shop now
</li>
<li class="feedback">
feedback
</li>
</ul>
</div>
You can use Fixed "width" in your navbar. or you can use "min-width". otherwise, it's never possible.
example:
#intro .nav{
min-width:900px;
}
I have read at least 5 other questions and tried the answers, and other similar questions and answers and tried to adjust the code to fit in with mine but it just won't work.
The code is for an eBay product description, so it cannot contain any script/active content.
All I need is for my header links to change to black when hovered over. It is not a list.
I do have a list navigation in a sidebar and I managed to produce the hover effect on that just fine with the following css:
nav ul li a {
color: #ffffff;
text-decoration: none;
margin-left: 2%;
}
ul li a {
display:block;
}
ul li a:hover, ul li a:focus {
color: #000000;
}
The HTML code for the Header Nav Links I need to add the hover to is:
<body>
<div id="mainwrapper">
<header>
<div id="logo">
<img src="https://lorempixel.com/400/200" alt="Store logo">
<nav>
About Us
FAQ
Contact Us
Feedback
Add to Favourites
</nav>
</div>
</header>
</div>
</body>
The CSS for this is:
#mainwrapper header nav {
/*Nav bar containing links in header */
background-color: #8fb2d5;
text-align: right;
padding-top: 45px;
padding-bottom: 12px;
padding-right: 1%;
width: 50%;
float: left;
color: #ffffff;
}
header nav a {
/* Links in header */
padding-right: 2%;
}
I have already tried adding the following:
header nav a:hover, header nav a:focus {
color: #000000;
}
and
header nav a:hover{
color: #000000;
}
Any help would be much appreciated. I apologise if this is a repeat post but I have looked at other questions/answers with no luck so far.
Is this what you need?
#mainwrapper header nav a:hover {
color: black;
}
<div id="mainwrapper">
<header>
<div id="logo"><img src="http://www.saltdepot.co.uk/ebay/himalayan/BlogPostAssets/images/logo3.png" alt="Himalayan Salt Store">
<nav>About Us FAQ
Contact Us
Feedback
Add to Favourites</nav>
</div>
</header>
</div>
Try to use #mainwrapper header nav a:hover as a selector, that has more specifity.
I'm trying to make a navigation menu for responsive website. I came to a point where I have my main menu fluid but not sure how to get drop-down menu from it .
Here is my html code:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
<li>Clothes</li>
<li>Recipe</li>
<li>Contact</li>
</ul>
</div><!-- ends nav -->
</body>
Here's my CSS:
#nav {
display: table;
table-layout: fixed;
width: 100%;
}
#nav ul {
display: table-row;
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
display: table-cell;
text-align: center;
}
#nav ul li a {
display: block;
}
I tried adding these lines of code to my CSS but didn't work as well:
#nav ul li:hover ul {
display: block;
}
Please help me out.
Thanks
The list structure in the question is incorrect
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
Should be
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
</li>
The sub <ul> is wrapped in the parent <li> node.
Second, add the code below to make it drop down:
#nav li {position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:100%;}
Then add more CSS code to make it beautiful.
So I wanted to create the fixed nav bar on top of the page. Instead of creating nav bar with ordered list, I used the following approach:
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
Home
About
Team
Science
Need
Pipeline
Contact
</div>
</header>
CSS:
header .nav {
margin-top:100px;
width:100%;
height:10%;
text-align:center;
padding-top:2%;
margin:0 auto;
position:fixed;
top:0;
}
header .nav a {
font-size: 2em;
padding-left: 15px;
padding-right: 15px;
color:rgb(1, 1, 1);
text-decoration: none;
font-family: 'Bebas';
}
header .nav a:hover {
color:white;
background-color: #404040;
border-radius:5px;
padding:0 auto;
}
header .nav a:active{
background-color: #404040;
border-radius:5px;
text-decoration:overline;
}
header .nav img {
width:260px;
height:65px;
padding-right:4em;
}
The reason I used this approach is because I wanted to use logo image next to the nav bar so it would align properly in the same line. Now the problem is that I need to add sub-menus under Science and Pipeline heading. Since I didn't use UL or LI, how can I add sub-menus under those heading.
OR, can you tell me any other way to create a NAV bar that shows the logo as well.
so it would be LOGO and MENUS on the same line.
Great thanks in advance.
Use the normal ul li structure.
If you set the height and line-height of top level li tags to be equal to the height of the image it will align the text to the center of the image.
I can suggest you to use a tool.
CSSMENU where you can create a menu without writing the code.You can also change the code or add images as your wish if needed. There are some inbuilt images where you can use them too.
have a two column structure in your nav bar one column for the logo and other for the nav-bar options.
<header>
<div class="nav">
<img src="images/logo_ab.png" alt="AurinBioTech Logo"/>
</div>
<div class="options">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Science</li>
<li>Need</li>
<li>Pipeline</li>
<li>Contact</li>
</ul>
</div>
</header>
and
with css give them appropriate width and align them using padding or margin properties
I want a css hover effect to last on all sections of a particular list item but it seems like there is added margins on the bottom and left and right of the list item that I can't seem to get rid off. I know this is probably a pretty basic css question but I have a JSFiddle here: http://jsfiddle.net/y2497/
I was using bootstrap to get my base css but I don't think that is affecting it.
My Code is:
#navbar {
padding-bottom: 0px;
margin-bottom: 0px;
}
#nav_container li {
list-style-type: none;
display: inline-block;
margin: 0px 20px 0px 20px;
}
#nav_container li:hover {
background: #333;
}
#nav_container li a {
display: inline-block;
color: #00;
padding: 10px;
}
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="nav_container">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
You are using inline-block on your li tags. What you need to do is apply float:left; and display:block; . Then apply a clearfix to the UL. Inline-block treats elements similar to how text is handled and includes line-height and spaces.