I am making a list with a heading and subheadings. My main list, Home1, is followed by a subheading. How can I exactly position the subheading content without affecting another list?
<div id="wrapper">
<ul id="testnav">
<li>
Home
<ul id="subnav">
<div style=" float : left; width :70%;" >
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div>
<div STYLE="float : left; width :30%; height:900px;">
Sub Heading Content
</div>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</div>
#testnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 900px;
}
#subnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 300px;
}
I'm having a hard time understanding the question, but looking at your markup I see that you have a DIV as a direct descendant of a UL. Only LI elements can be children of UL.
<ul id="subnav">
<div style=" float : left; width :70%;" > <!-- THIS DIV CANNOT BE HERE -->
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div> <!-- THIS DIV CANNOT BE HERE -->
<div STYLE="float : left; width :30%; height:900px;"> <!-- THIS DIV CANNOT BE HERE -->
Sub Heading Content
</div> <!-- THIS DIV CANNOT BE HERE -->
</ul>
Also, ul > div is not valid HTML.
The first step to solving your problem is making sure your markup is correct as Andy Ford suggested. Secondly, making sure your spelling of the CSS in the code is correct may help.
From what I can decipher from your question, you're trying to make sure that #subnav is absolutely positioned relative to #testnav.
<ul id="testnav">
<li>
Home
<ul id="subnav">
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
#testnav, #subnav { list-style:none; padding:0; }
#subnav {
position: absolute;
width: 300px;
}
I am not sure if that's what you want, but generally the first step to figuring out what's going wrong with CSS is to remove every extraneous addition you can.
Related
I have a strong tag in ul tag, like,
<ul>
<strong>Whats included in strong tag</strong>
<li>li tag 1</li>
<li>li tag 2</li>
</ul>
The result shows in a website page, like
Whats included in strong tag li tag
1 li tag 2
I want to make the text of the strong tag(Whats included in strong tag) left-aligned to the position of li tag.
Except setting up margin value in strong tag, is there any other way to do it?
li.strong{
list-style-type: none;
}
.li1{
margin-left:30px;
}
.li2{
text-indent: 30px;
list-style-type:none;
}
.li2::before{
content:"• ";
}
.li3{
position:relative;
left: 30px;
}
.strong4{
position:absolute;
left:0px;
}
.li4{
position:relative;
top:16px;
}
.li5{
text-align:center;
list-style-type:none;
}
.li5::before{
content:"• ";
}
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li1">li tag 1</li>
<li class="li1">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li2">li tag 1</li>
<li class="li2">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li3">li tag 1</li>
<li class="li3">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong class="strong4">Whats included in strong tag</strong></li>
<li class="li4">li tag 1</li>
<li class="li4">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li5">li tag 1</li>
<li class="li5">li tag 2</li>
</ul>
Use margin left on the <li> elements instead of <strong> tag.
Use text indent
Use position relative on <li> tags or on <strong> tag.
Use position absolute on <strong> and position relative on <li>
Use text align
You can make the strong text an li with styling to remove the bullet and shift it left.
.nobullet {
list-style-type: none;
margin-left: -15px;
}
<ul>
<li class="nobullet"><strong>Strong Text!</strong></li>
<li>Other text!</li>
</ul>
It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc
<strong>Strong Text!</strong>
<ul>
<li>Other text</li>
</ul>!
I Want to select last Element of div.container <ul> inside last <li> with css.
The ul of nested will goes n level so please suggest to me if it possible with jquery also.
ul {
list-style: none;
margin: 0;
padding: 0;
}
<div class="container">
<ul>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Want to select list with css</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
view the image that i want to select with css
You can use some tricks to make it.
If you are looking for last element then you can use of :nth-last-child(n) selector, this matches on every element in the nth child and it doesn't look for type or its parent.
This is achieved as it counts from the last child.
.container ul li:nth-last-child(1)
{
color: red;
font-size:22px;
}
.container li li {
color: green;
font-size:12px;
}
Look at here:
MyFiddel
I'm using the Bootstrap temple for the sticky footer and I'm trying to style the unordered list that is inside, but can't get the list to be inline.
HTML:
<footer class="footer">
<div class="container">
<p class="text-muted">
<div class="bottom-list">
<ul>
<li>Prevajanje</li>
<li>Lektura</li>
<li>Sodni prevodi</li>
<li>Tolmačenje</li>
</ul>
</div>
</p>
</div>
</footer>
CSS:
.footer .container .text-muted .bottom-list {
float: right;
}
Use the list-inline class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Source: http://getbootstrap.com/css/#type-lists
The CSS rule you have specified applies to the ul element. To inline a list you should target the li elements within the ul. For example
.bottom-list>li {
display: inline-block;
}
It is preferable to use predefined bootstrap classes though in this case list-inline.
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/
How can I make the entire teal box (class name nav-about) click-able when I hover my mouse over the box while having nested a hrefs? Is this possible?
JSFIDDLE LINK http://jsfiddle.net/K8w4g/1/
HTML
<a href="about.html">
<div class="nav-about">about
<div class="sub-nav-about">
<ul>
<li>1. one </li>
<li>2. two</li>
<li>3. three</li>
</ul>
</div>
</div>
CSS
.nav-about {
float: left;
width: 254px;
height: 150px;
color: blue;
background-color: teal;
}
.sub-nav-about {
width: 150px;
}
.sub-nav-about ul {
list-style:none;
background-color:red;
}
Unfortunately, it is not possible. However, you can achieve this through javascript, using onclick:
<div onclick="window.location.href='about.html'" class="nav-about">about
<div class="sub-nav-about">
<ul>
<li>1. one </li>
<li>2. two</li>
<li>3. three</li>
</ul>
</div>
</div>
And you can still click the links inside the div.
Another solution would be to replace div with span, because it is only valid to wrap an a tag around some elements like span, so your new code would look like this:
<a href="about.html"> <span onclick="window.location.href='about.html'" class="nav-about">about
<div class="sub-nav-about">
<ul>
<li>1. one </li>
<li>2. two</li>
<li>3. three</li>
</ul>
</div>
</div>
</a>