I want add all nested li's content(anchor tag) to some dynamic padding-left,
Right now with Css I can add something like this to achieve but this looks like hard coded,
.container ul li a {padding-left:1rem}
.container ul ul li a {padding-left:2rem}
.container ul ul ul li a {padding-left:3rem}
.container ul ul ul ul li a {padding-left:4rem}
each nested li's .sid class should have 1rem * its nested depth,
I want to add this to N number of nested li's
Can this be done by CSS ? I was thinking only JS is the final solution here ?
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:green;
}
.container ul li a {padding-left:1rem}
.container ul ul li a {padding-left:2rem}
.container ul ul ul li a {padding-left:3rem}
.container ul ul ul ul li a {padding-left:4rem}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a class="sid"><span>A</span></a></li>
<li class="item">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="item">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
This should be your solution.
I think I understood your question now.
"sid" classes are not related to each other that's why they don't add up. You need to create sub-classes. I hope this is possible in your case otherwise I'd recommend using jQuery.
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:green;
}
.group-item .sid {
padding-left: 1rem;
}
.sub-group-item .sid {
padding-left: 2rem;
}
.sub2-group-item .sid {
padding-left: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="item"><a class="sid"><span>A</span></a></li>
<li class="item">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="item">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="sub-group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="item">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="sub2-group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
Related
Here in my css I have given style padding(1.5rem,3rem,4.5rem,6rem) to its LI's by each nesting, but this is something hard coded, my nesting can go to N numbers, so this approach i can not use, Is there was better approach i can handle this with CSS ?
.parent ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
.container ul a {padding-left:1.5rem}
.container ul ul a {padding-left:3rem}
.container ul ul ul a {padding-left:4.5rem}
.container ul ul ul ul a {padding-left:6rem}
li a:hover {
background:green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a><span>AAA</span></a></li>
<li class="items">
<div class="group"><a><span>BBBB</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>bbbbb</span></a></li>
<li class="items"><a><span>bbbbb</span></a></li>
</ul>
</li>
<li class="items">
<div class="group"><a><span>CCCC</span></a></div>
<ul class="group-item">
<li class="items"><a><span>cccc</span></a></li>
<li class="items"><a><span>cccc</span></a></li>
<li class="items">
<div class="group"> <a><span>cccc</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>cccc1</span></a></li>
<li class="items"><a><span>cccc1</span></a></li>
<li class="items">
<div class="group"> <a><span>cccc1</span></a> </div>
<ul class="group-item">
<li class="items"><a><span>cccc2</span></a></li>
<li class="items"><a><span>cccc2</span></a></li>
<li class="items"><a><span>cccc2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
Looks Only solution left is using javascript
var parents = document.getElementsByClassName('parent');
var allUls= parents[0].querySelectorAll('ul');
allUls.forEach(function(x,i){
var i = i+1;
var y = x.querySelectorAll('.sid');
y.forEach(function(x1){
x1.style.paddingLeft = 1.5 * i+'rem';
})
})
ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0; cursor:pointer}
li a {display: block;}
li a:hover {
background:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<ul class="parent" id="Head">
<li class="items"><a class="sid"><span>A</span></a></li>
<li class="items">
<div class="group"><a class="sid"><span>B</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>b</span></a></li>
<li class="items"><a class="sid"><span>b</span></a></li>
</ul>
</li>
<li class="items">
<div class="group"><a class="sid"><span>C</span></a></div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items"><a class="sid"><span>c</span></a></li>
<li class="items">
<div class="group"> <a class="sid"><span>c</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items"><a class="sid"><span>c1</span></a></li>
<li class="items">
<div class="group"> <a class="sid"><span>c1</span></a> </div>
<ul class="group-item">
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
<li class="items"><a class="sid"><span>c2</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</body>
</html>
I was wondering what will be the best practice for me to use the | i.e. do I wrap it in a div class or store it in a span tag? Basically what I want to achieve is the following.
Ask a question | Privacy | Statement
<!DOCTYPE html>
<html>
<body>
<footer role="contentinfo">
<div class="footer-bottom hidden-print">
<div class="Container">
<div class="row">
<div class="col-12">
<ul class="list list--inline" role="menu" aria-label="Navigation">
<li role="menuitem" aria-label="Ask a question">
Ask a question |
</li>
<li role="menuitem" aria-label="Privacy">
Privacy |
</li>
<li role="menuitem" aria-label="Statement">
Statement
</li>
</ul>
</div>
</div>
</div>
</div>
</footer></body>
</html>
Please advise.
No need to have special characters at all.
Just use a right-border...
ul {
display:flex;
justify-content:center;
list-style:none;
}
li {
padding:0 1em;
}
li:not(:last-child) {
border-right:3px solid red;
}
<footer role="contentinfo">
<div class="footer-bottom hidden-print">
<div class="Container">
<div class="row">
<div class="col-12">
<ul class="list list--inline" role="menu" aria-label="Navigation">
<li role="menuitem" aria-label="Ask a question">
Ask a question
</li>
<li role="menuitem" aria-label="Privacy">
Privacy
</li>
<li role="menuitem" aria-label="Statement">
Statement
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Alternatively, use a pseudo-element
ul {
display: flex;
justify-content: center;
list-style: none;
}
li {
padding: 0 1em;
position: relative;
}
li:not(:last-child):after {
content: "";
position: absolute;
right: 0;
top: 10%;
height: 80%;
width: 3px;
background: green;
}
<footer role="contentinfo">
<div class="footer-bottom hidden-print">
<div class="Container">
<div class="row">
<div class="col-12">
<ul class="list list--inline" role="menu" aria-label="Navigation">
<li role="menuitem" aria-label="Ask a question">
Ask a question
</li>
<li role="menuitem" aria-label="Privacy">
Privacy
</li>
<li role="menuitem" aria-label="Statement">
Statement
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
You can use CSS border-right with pseudo-selectors for this so you don't have to have the pipe (|) in your markup.
Pseudo-Selectors
:not() -- exclude what is inside the brackets
:first-child -- first of this type of descendant
:last-child -- last of this type of descendant
descendant, as in your markup, as li is the child (descendant) of ul.
ul[role="menu"].list {
list-style: none;
display: flex;
}
li[role="menuitem"]:not(:first-child) {
padding-left: 0.5rem;
}
li[role="menuitem"]:not(:last-child) {
padding-right: 0.5rem;
border-right: 1px solid grey;
}
<footer role="contentinfo">
<div class="footer-bottom hidden-print">
<div class="Container">
<div class="row">
<div class="col-12">
<ul class="list list--inline" role="menu" aria-label="Navigation">
<li role="menuitem" aria-label="Ask a question">
Ask a question
</li>
<li role="menuitem" aria-label="Privacy">
Privacy
</li>
<li role="menuitem" aria-label="Statement">
Statement
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
I have a div like below i need to align the 3 ul which is inside the li in single row using css.
<div id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount"></li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount"></li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"></li>
</ul>
</li>
</div>
As like this
try to this code
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
Or this like
#printEmilCountDiv, #printEmilCountDiv *{
list-style-type:none;
margin:0;padding:0;
}
#printEmilCountDiv ul{display:inline-block;vertical-align:top; border:solid 1px red;}
#printEmilCountDiv ul li{display:inline-block;vertical-align:top;}
<ul id="printEmilCountDiv" >
<li id="reports-print-email-count">
<ul id="reports-print-email-count-container">
<li>Print count:</li>
<li id="printCount">po</li>
</ul>
<ul >
<li>Email count:</li>
<li id="emailCount">ec</li>
</ul>
<ul >
<li>Other count:</li>
<li id="otherCount"oc>oc</li>
</ul>
</li>
</ul>
You may remove the first li and replace it with div. Then apply a styling like;
ul{
margin-top: 0;
margin-bottom: 0;
}
Which trims the margin. Here is a demo
And you may add float: left; to either ul or li to align them in a row, like this
I am building a site for my school's robotics team. This is my first time ever coding in html/css. For some reason, my other pages use the margins quite nicely, but for this page specifically, my "margin-right" element does not work.
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<title>Team 3774 Homepage</title>
</head>
<body>
<div id="page">
<div class="Banner">
<a class="Banner_Link" href="www.robotichive3774.com">
<img src="/Images/Banner.png" height="200" width="1350" border="0">
</a>
</div>
<div class="navbar">
<ul class="nav">
<li><a class="li_nav" href="/Home">Home</a></li>
<li><a class="li_nav" href="/Team Bio">Team Bio</a></li>
<li><a class="li_nav" href="/Our Robot">Our Robot</a></li>
<li><a class="li_nav" href="/Our Coach">Our Coach</a></li>
<li><a class="li_nav" href="/Gallery">Gallery</a></li>
<li><a class="li_nav" href="/Outreach">Outreach</a></li>
<li><a class="li_nav" href="/Youtube">Youtube</a></li>
</ul>
</div>
<div class="Team_Bio">
<div class="example">
<h2>Team Bio</h2>
<h1>Example</h1>
<ul>
<li class="li_info">Class</li>
<li class="li_info">Role</li>
<li class="li_info">Career Interests</li>
<li class="li_info">Other Clubs and Sports</li>
</ul>
</div>
<div class="Abanoub_Boules">
<div class="info_AB">
<h1>Abanoub Boules</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Captian, Coder, Documenter</li>
<li class="li_info">CEO of a Biology Firm</li>
<li class="li_info">Coptic Society</li>
<li class="li_info">Technology Student Association</li>
<li class="li_info">President of Stem Clubs</li>
</ul>
</div>
<div class="picture_AB">
<img src="Abanoub.jpg" width="350px" height="350px">
</div>
</div>
<div class="Andre_Bernardo">
<div class="info_ABe">
<h1>Andre Bernardo</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, 3D modeling</li>
<li class="li_info">Computer Science</li>
<li class="li_info">Tennis</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_ABe">
<img src="Andre.jpg" width="350px" height="350px">
</div>
</div>
<div class="Leo_Scarano">
<div class="info_LS">
<h1>Leo Scarano</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Coder</li>
<li class="li_info">Computer Science</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_LS">
<img src="Leo.jpg" width="350px" height="350px">
</div>
</div>
<div class="Mina_Hanna">
<div class="info_MH">
<h1>Mina Hanna</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Coder</li>
<li class="li_info">Pharmaceutics</li>
<li class="li_info">Coptic Society</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_MH">
<img src="Mina.jpg" width="350px" height="350px">
</div>
</div>
<div class="Kenneth_Rebbecke">
<div class="info_KR">
<h1>Kenneth Rebbecke</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Documenter</li>
<li class="li_info">Structual Engineering</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_KR">
<img src="Kenny.jpg" width="350px" height="350px">
</div>
</div>
<div class="Kristen_Kaldas">
<div class="info_KK">
<h1>Kristen Kaldas</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Coder, Bookkeeper</li>
<li class="li_info">Biomedical Engineering</li>
<li class="li_info">Science Seminar</li>
<li class="li_info">Science Club</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_KK">
<img src="Kristen.jpg" width="350px" height="350px">
</div>
</div>
<div class="Melanie_Aguilar">
<div class="info_MA">
<h1>Melanie Aguilar</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Secratary, Mascot</li>
<li class="li_info">Party Planner</li>
<li class="li_info">Yearbook</li>
</ul>
</div>
<div class="picture_MA">
<img src="Melanie.jpg" width="350px" height="350px">
</div>
</div>
<div class="Anish_Patel">
<div class="info_AP">
<h1>Anish Patel</h1>
<ul>
<li class="li_info">Junior</li>
<li class="li_info">Engineer, 3d modeling</li>
<li class="li_info">Mechanical Engineer</li>
<li class="li_info">Science Club</li>
<li class="li_info">Junior Classical League</li>
<li class="li_info">Certamn</li>
</ul>
</div>
<div class="picture_AP">
<img src="Anish.jpg" width="350px" height="350px">
</div>
</div>
<div class="Furhan_Ashraf">
<div class="info_FA">
<h1>Furhan Ashraf</h1>
<ul>
<li class="li_info">Junior</li>
<li class="li_info">Financial Advisor, Engineer</li>
<li class="li_info">Engineering/Undecided</li>
<li class="li_info">Science Club</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_FA">
<img src="Furhan.jpg" width="350px" height="350px">
</div>
</div>
<div class="Andrew_W">
<div class="info_AW">
<h1>Andrew Wojtkowski</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, 3d Modeling</li>
<li class="li_info">Aerospace Engineer</li>
<li class="li_info">Varsity Hockey</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_AW">
<img src="Andrew.jpg" width="350px" height="350px">
</div>
</div>
<div class="Bryan_F">
<div class="info_BF">
<h1>Bryan Ferreira</h1>
<ul>
<li class="li_info">Senior</li>
<li class="li_info">Engineer, Documenter</li>
<li class="li_info">Computer Engineer/Civil Engineer</li>
<li class="li_info">Guitar</li>
<li class="li_info">Technology Student Association</li>
</ul>
</div>
<div class="picture_BF">
<img src="Bryan.jpg" width="350px" height="350px">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.Team_Bio
{
margin-left: 200px;
margin-right: 200px;
}
a.Banner_Link
{
padding:0 !important;
}
.Banner
{
height: 200px;
width: 1350px;
}
#page{
width: 1000px;
margin-left: 0px;
margin-right: 0px;
}
div
{
font-family: 'Roboto Slab', serif;
}
.body
{
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
margin-bottom: 100px;
}
.Banner img
{
vertical-align:top;
}
body
{
margin: 0;
}
.li_nav
{
float: left;
display:inline-block;
font-family: 'Roboto Slab', serif;
}
.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
min-width: 1350px;
}
a:link, a:visited
{
display:inline-block;
width: 182.7px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 14px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
font-family: 'Roboto Slab', serif;
}
a:hover, a:active
{
background-color: #B20000;
}
.Team_Bio
{
min-width: 1350px;
}
h2
{
font-size: 60px;
text-align: center;
}
.example
{
float: left;
width: 1350px;
height: 425px;
margin: 0 auto;
}
.Abanoub_Boules
{
float: left;
width: 1350px;
height: 500px;
margin: 0 auto;
}
The site is robotichive3774.com if you want to see exactly what I am talking about.
It's true, the HTML and CSS are a mess but as you said you're new to this.
The layout problem has to do with the widths of your team member sections inside that element. They're forcing it to stretch out.
I'd recode the CSS for the team members.
Start by removing the pixels widths on each team member's and set them to percentage based widths.
Make the team member's main element 100% wide so it just fills the container it's sitting in.
Then set their info and picture wrapping elements to 49% each.
Set the image inside the picture wrapping element to 100% and auto for the height.
Do all these widths etc in your CSS file.
That should fix you right up.
Lastly, if you're gonna do the floats put a "clearing div" after each team member so the next section if forced below the previous run. Otherwise things will run into each other.
Like this:
<div class="clear"></div>
.clear { clear: both; }
In the end, you should really simply your code. There's too many classes etc. All the team member sections could have the same class so you can apply global rules etc.
This is my list
<ul class="list-inline row ">
<li href="#" style="color:white"> Registrate </li >
<li style="list-style-type:square; color:white" href="#">Quienes Somos </li>
<li style="list-style-type:square; color:white" href="#" style="color:white">Contacto </li >
</ul>
This is my CSS
.list-inline { padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
I get the text and the color but I don't get the square!
list-style-type:square must go in your ul tag.
<ul class="list-inline row" style="list-style-type:square;">
http://www.w3.org/wiki/CSS/Properties/list-style
Set the list-style-type on the ul element rather than the li elements.
<ul class="list-inline row " style="list-style-type: square;">
<li style="color:white"> Registrate </li >
<li style="color:white">Quienes Somos </li>
<li style="color:white">Contacto </li >
</ul>