I have a menu on my website which is situated like this,
header>.container>nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left
}
What I am trying to do is relocate nav inside of a new element within the structure called topLine, and so my new code is,
header.container.clearfix.topLine.nav{
border:none;
position: absolute;
top:50px;
right: 30px;
text-align: left;
background-color:#282b30;
}
However it is not working and I am not sure what I am missing.
The HTML code is below
<header>
<div class="container">
<div class="topLine">
<!--MENU-->
<nav class="clearfix">
<i class="fa fa-bars"></i>
<ul class="list-inline">
<li>Home</li>
<li>About Us</li>
<li>Register</li>
<li>Companies</li>
<li>News</li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
i would have posted a comment but i don't have enough xp yet. :)
some periods that you have in your css should't be there. Periods are for referencing a class. for example, i see a .nav but you don't have a class="nav" anywhere in the html. if you want to refer to a child element, use >. So instead, do header > .container > .clearfix > .topLine > nav {
Related
I am newbie with html css and here is my problem.
I code a nav and subnav at html file as this one
<div id="header">
<!-- begin nav -->
<ul id="nav">
<li>Home</li>
<li>Bane</li>
<li>Tour</li>
<li>Contact</li>
<li>
<a href="">More
<i class="nav-arrow-down ti-arrow-circle-down"></i>
</a>
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<!-- end nav -->
<!-- begin search-->
<div class="search-btn">
<i class="search-icon ti-search"></i>
</div>
<!-- end search-->
</div>
And I want to make a block with color grey at block Merchandise, Extras, Media.
Here is my code at styles.css
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
min-width: 160px;
top: 100%;
left: 0;
}
My problem is, when I click to Merchandise, for example, the grey is not display fully all the block as I want. Here is the design
But here is what I got
As you can see in the second picture, the block become fell in.
I thought that I can use display: inline-block; to solve this problem , but when I add this command to #nav .subnav, it does not solve this problem.
They said that, I can use at #nav .subnav this command min-width: 160px;, but it still not well.
Could you please give me some ideas for this problem?
Thank you very much for your time.
I think you should give width:100% of ul tag.
<ul class="subnav" style="width:100%;">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
Problem:
Writing common CSS code in order to be applied for two nav elements. I have searched all over Google and Stackoverflow without any success. It seems it's not common to use two nav elements while W3C allows it.
HTML code:
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
CSS code:
How would I write CSS code in order for the two navigation elements to have the same layout, but different styling (color, font size, etc.)?
You could do something like this:
nav ul li {
width:100px;
display:inline-block;
margin:5px;
padding:5px;
color:#333;
text-align: center;
}
nav[role="main"] ul li {
background-color:#aaa;
}
nav[role="sub"] ul li {
background-color:#eee;
}
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
Not sure what you mean by
same appearance but different styling
You can use the role attribute as a CSS selector, as shown here:
nav[role="main"],
nav[role="sub"] {
background: #222;
color: #f40;
}
nav[role="main"] a,
nav[role="sub"] a {
color: #fff;
}
<nav role="main">
<ul>
<li>Startpage
</li>
<li>Cars
</li>
<li>About us
</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari
</li>
<li>BMW
</li>
<li>Volvo
</li>
</ul>
</nav>
I've created a drop-down navigation with CSS only.
If I hover the button and the submenu comes out.
But then the body will be higher.
I don't want that the body will be higher.
Here the files:
http://jsfiddle.net/UHQV5/
I think the position: relative; is false.
How about this one?
added this:
nav ul ul{
position: absolute;
margin-left: -10px;
}
and removed some unnecessary ones.
jsFiddle
Nice looking website,
I messed with the code just a little and found the making the tag have a id for the css. Then in the css setting the postion to fixed!
The Code:
From this
<nav>
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
To This
<nav id="nav">
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
And then in the css just put in:
#nav {
postion: fixed;
}
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example
I am looking to make a two-column navigation bar by using a single <ul> with six <li> items:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Three elements on one side, and three on the other; ordered vertically.
Right now, it's easy to do when making two seperate <ul> elements and putting padding/margins between them: http://jsfiddle.net/Baumr/SJcjN/ — but that's not a great solution.
Could also wrap <span> tags around each set of three <li>'s — but is that the only CSS solution?
Looking for some elegant ideas. Thank you!
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
CSS:
li {
width: 50%;
float: left;
padding: 5px 0;
}
They will order like that:
Home About
Team Store
Blog Contact
If that's not a problem, you have a very simple solution.
EDIT:
li:nth-child(even) {
width: 50%;
float: right;
}
li:nth-child(odd) {
width: 50%;
float: left;
}
This will order them in the correct way. not sure how IE will act, but will work in all other browsers.
or you can follow strictly the UL-LI concept, so your html will look like this an you can have as many column as you need:
<nav>
<ul class="menuitem">
<li class="column">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
</ul>
</li>
<li class="column">
<ul>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</li>
</ul>
<ul class="menuitem">
<li class="column">
.....
</li>
</ul>
</nav>
Making a correct and well formated html can make your life easier.
I think that using <span>'s might be the most cross-browser friendly solution.
Unless someone has other ideas? Looking for something cross-browser compatible, as sadly IE doesn't support nth-child(N).
This is not as clean (HTML wise) as I wanted, with these random spans, but here is the HTML:
<nav>
<ul>
<span>
<li>Home</li>
<li>About</li>
<li>Team</li>
</span><span>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</span>
</ul>
</nav>
(Notice the span inside the ul — big faux pas in my book.)
And the CSS:
nav span {
width: 50%;
float: left;
}
But that's hardly a good solution... any other ideas?