I want to display 7-9 html links in one line, but whenever I add another link, the last link goes down and forms another row. I want to put them in one line.
like
<link1> <link2><link3><link4><link5><link6><link7>
<li>HOME
<li>Check In</li>
<li>Check Out</li>
<li>Re-Issue</li>
<li><!--movies er drop down-->
Student<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Approve</li>
<li>Fine</li>
<li>Check List</li>
<li>Department</li>
</ul>
</li>
<li>Faculty<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Books issued</li>
<li>Search</li>
</ul>
</li>
<li> SEARCH<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Student</li>
<li>Faculty</li>
<li>Books</li>
<li>History</li>
</ul>
Use these styles:
ul {
white-space: nowrap;
}
li {
vertical-align: top;
display: inline-block;
padding: 0em 0.5em;
}
.sub-menu li {
display: block;
}
Fiddle
In the list that you put them in make a class and then in css add to the class: display:inline;
example: http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/
<ul class="links">
Google
Google1
Google2
Google3
</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.
Instead of adding a individual class to each list items, is there a way to add a single class to a whole set of list item at once?
CSS
<li class="foot_nav">Home</li>
<li class="foot_nav">Discovery</li>
<li class="foot_nav">Subjects</li>
<li class="foot_nav">Guide</li>
<li class="foot_nav">About us</li>
Thanks
It's only one way - JS. Jquery for example:
$('li').addClass('foot_nav');
Just add a class to parent and use child selector:
.foot_nav li {
display: inline-block;
}
<ul class="foot_nav">
<li>Home</li>
<li>Discovery</li>
<li>Subjects</li>
<li>Guide</li>
<li>About us</li>
</ul>
apply the class to the entire ul and then targeth the ul li using CSS
.foot_nav{list-style:none}
.foot_nav li:nth-child(even) {background:red}
.foot_nav li:nth-child(odd) {background:yellow}
<ul class="foot_nav">
<li>Home</li>
<li>Discovery</li>
<li>Subjects</li>
<li>Guide</li>
<li>About us</li>
</ul>
<ul class="foot_nav">
<li>Home</li>
<li>Discovery</li>
<li>Subjects</li>
<li>Guide</li>
<li>About us</li>
</ul>
//css
.foot_nav li{//styling}
What do you need it for?
Maybe you should add the class to its parent.
<ul class="foot_nav">
<li></li>
…
</ul>
.foot_nav
{
list-style-type:none;
}
.foot_nav li
{
display:inline-block;
}
<ul class="foot_nav">
<li >Home</li>
<li >Discovery</li>
<li >Subjects</li>
<li >Guide</li>
<li >About us</li>
</ul>
Something like this in JavaScript should do the trick:
var lis = document.querySelectorAll("li");
for(var i = 0; i < lis.length; i++){
lis[i].className = lis[i].className += " foot_nav"
}
Try this
.list-item li{
}
.list-item:nth-child(1){
}
.list-item:nth-child(2){
}
<ul class="list-item">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I have a problem with the HTML and the CSS, where I nested the Salads, Fresh and the Smoothies in Recipes. But hover last one to show and choose to click over them (to choose specific salad or fresh etc.), they have been fleeing me (they show, but I can't click on them), so I can't open the hyperlinks which they contain.
This is the HTML code:
<div id="nav">
<ul class="nav-list">
<li>Home</li>
<li>
Tips for health
<ul class="sub-nav-list">
<li>The healing properties</li>
<li><a href="5%20vajni%20podpravki.html"5 important spices that you should include in your diet</a></li>
<li>Bad habits and their removal</li>
<li>Water as a source of life</li>
</ul>
</li>
<li>
Recipes
<ul class="sub-nav-list">
<li>Salads</li>
</ul>
<ul class="sub-sub-nav-list">
<li>Lettuce</li>
<li>French salad</li>
<li>Red Beet Salad</li>
</ul>
<ul class="sub-nav-list">
<li>Fresh</li>
</ul>
<ul class="sub-sub-nav-list">
<li>Sweet fresh</li>
<li>Fresh detox</li>
<li>Citruc fresh</li>
</ul>
<ul class="sub-nav-list">
<li>Smoothies</li>
</ul>
<ul class="sub-sub-nav-list">
<li>Chocolate smoothie</li>
<li>Tropical smoothie</li>
<li>Smoothie with banana and pineapple</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</div>
And this is the CSS code:
.sub-nav-list {
display: none;
}
.sub-sub-nav-list {
display: none;
}
ul.nav-list li:hover > ul.sub-nav-list {
display: block;
padding-left: 50px;
}
ul.nav-list li ul.sub-nav-list:hover + ul.sub-sub-nav-list {
display: block;
padding-left: 100px;
}
<li>The healing properties</li>
<li><a href="5%20vajni%20podpravki.html"5 important spices that you should include in your diet</a></li>
it should be
like this
<li>5 important spices that you should include in your diet</li>
right ?
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'm redoing a html table into a list.
It now looks like this:
<ul>
<li>Some fruits
<ul>
<li>2013
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>2012
<ul>
<li>Banana</li>
</ul>
</li>
<li>2011
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>2009
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to figure out how to make the first entry in the sublist to align horizontally with the year. Like this:
2011 Lemon
Orange
Plum
The nested elements are doing my head in and I'm stuck. I have a feeling this will involve the display type of the elements and some floating. Any ideas? Fiddle here: http://jsfiddle.net/HUH62/4/
Thanks.
If I understood correctly, here's the same fiddle modified according to what you are trying to accomplish: fiddle.
I added some classes in order to make the CSS more readable and wrapped the "subtitle" of each section in a div so that floatiing could be applied to them.
I also removed the colors, since I interpreted they were added only for visualizing the elements.
CSS
h4 {
margin: 0px;
padding: 0px;
float:left;
}
ul {
list-style: none outside none;
padding: 0;
}
ul li ul li ul {
float:left;
margin-left: 10px;
}
ul li {
clear:both;
}
HTML
<ul>
<li>Some fruits
<ul>
<li>
<h4>2013</h4>
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>
<h4>2012</h4>
<ul>
<li>Banana</li>
</ul>
</li>
<li>
<h4>2011</h4>
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>
<h4>2009</h4>
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>