I'm making use of ul's inside of li tags
<ul>
<li>
<ul>
<li>..</li>
</ul>
</li>
</ul>
And my question is, how can I avoid the inner ul finding itself automatically rendered slightly pushed to the right hand side (what would seem to a be a default accordeon "styling")? without playing around with negative margins.
Further #Vucko comment
ul ul {
padding-left:0;
}
<ul>
<li>
Text
<ul>
<li>..</li>
</ul>
</li>
</ul>
Related
I have HTML code like this
<ul>
<li>
<a>first</a>
<ul>
<li><a>sub-1</a></li>
<li><a>sub-2</a></li>
</ul>
</li>
<li><a>..</a></li>
</ul>
and i want to style every 'a' of odd 'li' only of first 'ul'
i am doing it like this
ul>li:nth-child(odd)>a{background:#000}
what is mistake here ???
because it also taking 'a' of sub 'ul'
Test if the parent is not an li
:not(li) > ul > li:nth-child(odd) > a {
background: red
}
<ul>
<li>
<a>first</a>
<ul>
<li><a>sub-1</a></li>
<li><a>sub-2</a></li>
</ul>
</li>
<li><a>..</a></li>
</ul>
I'm making a typora theme and styling it with CSS. I don't really have much access to the HTML generated since it's generated by the program, but it does provide a lot of flexibility.
I'm trying to just move UL ::markers a couple pixels to the right.
Anyone know a solution?
Thanks much.
As #enhzflep suggested in a comment, you could increase the space before the bullet by applying padding on the ul in CSS. Here's how it's done (I have made two lists—ordered and unordered):
ul {
padding-inline-start: 39px
}
<ol>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ol>
<hr>
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
What the Header Should Look Like
This is how the header should look like.
What it currently looks like
As you can see, my header isn't looking too good... I seem to be having some floating issues.
Current Header Code
Here is the HMTL I used to generate my header.
I'm trying to center the h1, float the logo to the left completely and have the h2 display beside the logo. The publish date and publisher are fine.
<header>
<ul style="list-style-type:none;float:right;">
<li style="float:left;">
<img src="C:\Logo.jpg" alt="Logo"/>
</li>
<li style="float:left;">
<h2>Statuts de Production</h2>
</li>
<li style="float:right;">
<h1 style="margin-bottom:0px">Machines en cours d'assemblage</h1>
</li>
<ul style="list-style-type:none;float:right;">
<li>
Dernière mise à jour: <xsl:value-of select="Table/Publish/DateEntry"/>
</li>
<li>
Par: <xsl:value-of select="Table/Publish/Username"/>
</li>
</ul>
</ul>
</header>
Am I not using the right approach? Should I use a table instead of an unordered list?
If you want to vertical align the list items and indent the middle one, just remove the styles from the HTML and use this external CSS (using external CSS is the first thing to improve your approach):
ul { display: block; list-style-type:none; height: 50px; }
li { display: inline-block; vertical-align: middle; }
ul ul { display: inline-block; }
ul ul li { display: block; }
and set the padding to each list item as you want, the third item might be floated right.
Second: you can not use image path on your HDD C:\Logo.jpg to enable the access from clients, use the http://... protocol.
Third: you can not use ul as direct child of ul. Only lis are allowed inside ul
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
</ul>
Dose the following help you? it is designed such that the hight is constant.
<div style='position:relative; padding:0px 200px 0px 200px; background-color:gray;height:20px;box-sizing:border-box;'>
<div style='position:absolute;background-color:yellow; left:0px; top:0px; height:100%;width:200px;'>
left pannel
</div>
<div style='position:absolute;background-color:yellow; right:0px; top:0px; height:100%; width:200px;'>
right pannel.
</div>
<div style='box-sizing:border-box;width:100%;text-align:center;'>
Center
</div>
</div>
You can see it also here.
Im having trouble making sure my active graphic is positioned outside of the button, basically the overflow of the parent element keeps the graphic hidden inside of it instead of being outside. I have tried to use position:absolute and z-index but I cant solve this.
HTML
<ul id="mynav">
<li class="active">Link
<ul id="subernav">
<li>Inner Link 1</li>
<li>Inner Link 2</li>
<li>Inner Link 3</li>
</ul>
<span class="active ir">Active Link</span>
</li>
<!-- More links -->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
</ul>
CSS
body{background:#000;color:#000;font-family:Arial;padding:20px;}
a{text-decoration:none;color:#000;}
#mynav > li{height:45px;background:#fff;width:458px;padding:5px 10px;text-align:center;overflow:hidden;margin-bottom:30px;position:relative}
#mynav > li a{line-height:45px;}
#mynav li.active:hover{height:90px;cursor:pointer}
#mynav li .active{background:#f00 url('http://dummyimage.com/15/f00/fff&text=+') no-repeat -668px -214px;width:15px;height:15px;position:absolute;left:50%;bottom:-15px;margin-left:-7.5px;border:1px solid #f00;z-index:250}
#subernav li{display:inline-block;zoom:1;*display:inline;}
#subernav li a{color:#f00;}
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
Link to fiddle:
http://jsfiddle.net/UbvQk/5/
Remove the overflow: hidden and the height from the mynav active (and the :hover).
Set the subernav to display:none;.
Add #mynav li.active:hover #subernav to have display:block;
Updated Fiddle
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want