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>
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>
How can I add an icon to every list element?
<nav class="mobile">
<ul>
<li><img class="icon" src="images/ico/home.png" style="width:10px; height:10px; margin: 2px; float:left;"/>Home</li>
<li>Articles</li>
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</nav>
I've tried this so far, but my icon is not in line with <a> element.
You can use variety of tools like font icons from font awesome or even you own custom font. Just use the pseudo class :before to the li and then add content to it.
li:before {
content: '+';
}
li:before {
content: '+';
}
<nav class="mobile">
<ul>
<li>Home</li>
<li>Articles</li>
<li>Photos</li>
<li>Services</li>
<li>Contacts</li>
</ul>
</nav>
It's simple, just use css in header:
<style type="text/css">
li:id1 {
list-style-image: url('anyimg1.gif');
}
li:id2{
list-style-image: url('anyimg2.gif');
}
</style>
And HTML:
<ul>
<li id="id1">Home</li>
<li id="id2">Articles</li>
</ul>
I have a question about my sitemap if you look at the code you see ul and li. But every UL is below the other and i want it to be side by side. Every new UL side by side. How doe i do this? Working with first-child? ( the sitemap is inside my )
Sitemap
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
This is my CSS
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}
Try display inline-block or float left on the ul's you want side by side. I recommend adding classes to make the styling easier
HTML:
<ul>
<li>Opleiding</li>
<ul class="sitemap">
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul class="sitemap">
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul class="sitemap">
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul class="sitemap">
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
CSS:
footer .sitemap {
display: inline-block;
OR
float: left;
}
Well, for starters your markup is invald. If you want to nest ULs inside of another UL, it needs to be inside of an LI
<ul>
<li>Title
<ul>
<li>Sub-Title</li>
</ul>
</li>
</ul>
From there, you probably just need something like this:
footer > ul > li {
float:left;
width:50%;
}
http://jsfiddle.net/fTCY5/
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 my navbar of links and when the user is on a page that corresponds to one of the links I want to change the background color of that link. For example, when the user is on the home page I want to change the background color of the home link. I tried with #navbar li a:current but that doesn't work.Is this possible with css?
html:
<div id="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
CSS:
#navbar li a.current {
background-color: #FFF;}
Your CSS is wrong. It should be #navbar li a.current {
background-color: #FFF;} You had a colon after a:current.
Your HTML should be like this:
<div id="navbar"><ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
<div id="navbar">
<ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
Now create a background color for the class of "current". You'll have to apply that class with the backend logic. CSS cannot workout the logic by itself. It only handles the styles
You could use javascript(jQuery) like this:
var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})
If you want to accomplish this only with CSS, maybe you can use the parent's IDs:
<div id="parent1">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
<div id="parent2">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
And then...
#parent1 li.home {
background: red;
}
#parent2 li.home {
background: black;
}
You could do this using Javascript/JQuery (although a server-side approach is probably better):
var currentPath = window.location.pathname;
var pageName = currentPath.substr(currentPath.lastIndexOf('/')+1); // "index.html", etc
$("a[href=" + pageName + "]").parent().css("background", "#FFF");
The above requires JQuery, but you can do something similar in pure Javascript:
var targets = document.querySelectorAll('a[href=' + pageName + ']');
if (targets.length > 0) {
targets[0].parentNode.style.background = "#FFF";
}
(Fiddle)
Offcourse it is possible with pure css3. You could give an id to all your 'li' s.
like ,
li id="sample"
then modify your anchor to
a href="index.html#sample"
use CSS :target selector
li:target{
// apply your styles here
}
simple