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>
Related
I am running this simple "test" code to change the background color of the nested list<ul class="dropcontent"> by using :hover on parent <li class="drop">
.drop:hover .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services</li>
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Please someone explain what's wrong here.
.dropcontent is a sibling of .drop (not a descendant), so the selector .drop:hover .dropcontent will not target it.
To correct this, either move the closing </li> of .drop to after the closing </ul> of .dropcontent:
.drop:hover .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
</li>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Or make use of the adjacent sibling combinator (+) with the selector .drop:hover + .dropcontent:
.drop:hover + .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services</li>
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Note that the former will apply the hover while the child links are selected, while the latter will only apply the hover when .drop itself is selected.
In CSS, how would I select the .button element? I have tried just .button but it is not working at all. The only way I can get it to hide is by hardcoding style="display: none;
<div id="navBar">
<nav>
<li><a class="button">☰</a>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Schedule</li>
<li>Media</li>
<li>Sponsors</li>
<li>Contact Us</li>
<li><img src="images/fbicon.png"></li>
<li><img src="images/ticon.png"></li>
</ul>
</nav>
</div>
You could do something like creating a css class called .only-mobile like this
.only-mobile {
display: none;
}
And then using media queries you can change .only-mobile to display in block etc.
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 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;
}