I have got this code
HTML:
<div id="tree">
<div>
<div>
<h4>Smartphony</h4>
<ul>
<li>Apple iOS</li>
<li>Android</li>
<li>Odolné smartphony</li>
<li>Dual SIM smartphony</li>
</ul>
</div>
<div>
<h4>Tablety</h4>
<ul>
<li>Apple iOS</li>
<li>Android</li>
<li>Dětské tablety</li>
</ul>
</div>
<div>
<h4>Outdoorové mobily</h4>
</div>
<div>
<h4>Klasické mobily</h4>
<ul>
<li>Klasické</li>
<li>Stolní telefony</li>
<li>Dual SIM</li>
<li>Pro seniory</li>
</ul>
</div>
<div>
<h4>Nositelná elektronika</h4>
<ul>
<li>Fitness náramky</li>
<li>Chytré hodinky</li>
<li>Krokoměry</li>
<li>Řemínky</li>
<li>Příslušenství</li>
</ul>
</div>
<div>
<h4>Powerbanky</h4>
</div>
<div>
<h4>Kabely a redukce</h4>
<ul>
<li>USB-C kabely</li>
<li>USB micro kabely</li>
<li>Lightning kabely</li>
</ul>
</div>
<div>
<h4>Držáky, stativy a selfie</h4>
<ul>
<li>PopSockets</li>
<li>Klasické držáky</li>
<li>Stativy (tripody)</li>
<li>Selfie tyče</li>
<li>Držáky do ventilace</li>
<li>Držáky na opěrku hlavy</li>
<li>Držáky s bezdrátovým nabíjením</li>
<li>Držáky s magnetickým přichycením</li>
<li>Držáky pro tablety</li>
</ul>
</div>
<div>
<h4>Příslušenství pro tablety</h4>
<ul>
<li>Obaly a pouzdra</li>
<li>Fólie</li>
<li>Nabíječky</li>
<li>Stylusy</li>
<li>Ostatní</li>
</ul>
</div>
<div>
<h4>Příslušenství pro smartphony</h4>
<ul>
<li>Obaly a pouzdra</li>
<li>Kryty</li>
<li>Fólie</li>
<li>Baterie</li>
<li>Nabíječky</li>
<li>Dokovací stanice</li>
<li>Ostatní</li>
<li>Gadgets</li>
<li>Handsfree</li>
</ul>
</div>
</div>
</div>
CSS:
#tree{
border-bottom: 1px solid black;
}
#tree ul{
list-style-type: disc;
margin-left: 18px;
}
#tree a{
font-size: 12px;
line-height: 1.6;
}
#tree h4 {
display: block;
margin: 0 0 04px 0;
}
#tree h4 a {
font-size: 16px;
color: #2576d1;
}
#tree > div{
padding: 14px 20px;
width: 100%;
height: 100%;
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
#tree > div > div{
margin-bottom: 20px;
}
It works almost perfect to set content into 3 columns but I want it to break after every #tree > div > div not after every element.
Here is picture how it looks
And here is how it should look
Thank you and have a nice day
The required result of 3 column layout can be achieved through these 4 steps:
Step 1: Define css classes for table, row and column
Step 2: Specify 3 column layout by making the column class occupy 33% of width
Step 3: Configure the row class to stack columns one below the other when there is not enough screen width
Step 4: Update HTML div elements with the table, row and column classes
Here is the copy of working code that shows 3 columns with responsive design:
<!DOCTYPE html>
<html>
<head>
<title>Tree structure - demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.my-table {
border: 1px solid black;
min-width: 180px;
}
.my-list{
list-style-type: disc;
}
.heading4 {
font-size: 16px;
color: #2576d1;
}
.my-column {
float: left;
width: 33%;
min-width: 150px;
}
.my-row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="tree" class="my-table">
<div class="my-row">
<div class="my-column">
<h4 class="heading4">Smartphony</h4>
<ul class="my-list">
<li>Apple iOS</li>
<li>Android</li>
<li>Odolné smartphony</li>
<li>Dual SIM smartphony</li>
</ul>
</div>
<div class="my-column">
<h4 class="heading4">Tablety</h4>
<ul class="my-list">
<li>Apple iOS</li>
<li>Android</li>
<li>Dětské tablety</li>
</ul>
</div>
<div class="my-column">
<h4 class="heading4">Outdoorové mobily</h4>
</div>
</div>
<div class="my-row">
<div class="my-column">
<h4 class="heading4">Klasické mobily</h4>
<ul class="my-list">
<li>Klasické</li>
<li>Stolní telefony</li>
<li>Dual SIM</li>
<li>Pro seniory</li>
</ul>
</div>
<div class="my-column">
<h4 class="heading4">Nositelná elektronika</h4>
<ul class="my-list">
<li>Fitness náramky</li>
<li>Chytré hodinky</li>
<li>Krokoměry</li>
<li>Řemínky</li>
<li>Příslušenství</li>
</ul>
</div>
<div class="my-column">
<h4 class="heading4">Powerbanky</h4>
</div>
</div>
<div class="my-row">
<div class="my-column">
<h4 class="heading4">Kabely a redukce</h4>
<ul class="my-list">
<li>USB-C kabely</li>
<li>USB micro kabely</li>
<li>Lightning kabely</li>
</ul>
</div>
<div class="my-column">
<h4 class="heading4">Držáky, stativy a selfie</h4>
<ul class="my-list">
<li>PopSockets</li>
<li>Klasické držáky</li>
<li>Stativy (tripody)</li>
<li>Selfie tyče</li>
<li>Držáky do ventilace</li>
<li>Držáky na opěrku hlavy</li>
<li>Držáky s bezdrátovým nabíjením</li>
<li>Držáky s magnetickým přichycením</li>
<li>Držáky pro tablety</li>
</ul>
</div>
<div class="my-column">
<h4 class="heading4">Příslušenství pro tablety</h4>
<ul class="my-list">
<li>Obaly a pouzdra</li>
<li>Fólie</li>
<li>Nabíječky</li>
<li>Stylusy</li>
<li>Ostatní</li>
</ul>
</div>
</div>
<div class="my-row">
<div class="my-column">
<h4 class="heading4">Příslušenství pro smartphony</h4>
<ul class="my-list">
<li>Obaly a pouzdra</li>
<li>Kryty</li>
<li>Fólie</li>
<li>Baterie</li>
<li>Nabíječky</li>
<li>Dokovací stanice</li>
<li>Ostatní</li>
<li>Gadgets</li>
<li>Handsfree</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
you need to set display: inline-block to your #tree > div > divto keep them all together.
#tree{
border-bottom: 1px solid black;
}
#tree ul{
list-style-type: disc;
margin-left: 18px;
}
#tree a{
font-size: 12px;
line-height: 1.6;
}
#tree h4 {
display: block;
margin: 0 0 04px 0;
}
#tree h4 a {
font-size: 16px;
color: #2576d1;
}
#tree > div{
padding: 14px 20px;
width: 100%;
height: 100%;
-moz-column-count:3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count:3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
#tree > div > div{
margin-bottom: 20px;
display: inline-block;
}
<div id="tree">
<div>
<div>
<h4>Smartphony</h4>
<ul>
<li>Apple iOS</li>
<li>Android</li>
<li>Odolné smartphony</li>
<li>Dual SIM smartphony</li>
</ul>
</div>
<div>
<h4>Tablety</h4>
<ul>
<li>Apple iOS</li>
<li>Android</li>
<li>Dětské tablety</li>
</ul>
</div>
<div>
<h4>Outdoorové mobily</h4>
</div>
<div>
<h4>Klasické mobily</h4>
<ul>
<li>Klasické</li>
<li>Stolní telefony</li>
<li>Dual SIM</li>
<li>Pro seniory</li>
</ul>
</div>
<div>
<h4>Nositelná elektronika</h4>
<ul>
<li>Fitness náramky</li>
<li>Chytré hodinky</li>
<li>Krokoměry</li>
<li>Řemínky</li>
<li>Příslušenství</li>
</ul>
</div>
<div>
<h4>Powerbanky</h4>
</div>
<div>
<h4>Kabely a redukce</h4>
<ul>
<li>USB-C kabely</li>
<li>USB micro kabely</li>
<li>Lightning kabely</li>
</ul>
</div>
<div>
<h4>Držáky, stativy a selfie</h4>
<ul>
<li>PopSockets</li>
<li>Klasické držáky</li>
<li>Stativy (tripody)</li>
<li>Selfie tyče</li>
<li>Držáky do ventilace</li>
<li>Držáky na opěrku hlavy</li>
<li>Držáky s bezdrátovým nabíjením</li>
<li>Držáky s magnetickým přichycením</li>
<li>Držáky pro tablety</li>
</ul>
</div>
<div>
<h4>Příslušenství pro tablety</h4>
<ul>
<li>Obaly a pouzdra</li>
<li>Fólie</li>
<li>Nabíječky</li>
<li>Stylusy</li>
<li>Ostatní</li>
</ul>
</div>
<div>
<h4>Příslušenství pro smartphony</h4>
<ul>
<li>Obaly a pouzdra</li>
<li>Kryty</li>
<li>Fólie</li>
<li>Baterie</li>
<li>Nabíječky</li>
<li>Dokovací stanice</li>
<li>Ostatní</li>
<li>Gadgets</li>
<li>Handsfree</li>
</ul>
</div>
</div>
</div>
Related
Admittedly, I'm new to coding so I'm sure there may be many issues in my code. The errors that are showing up right now are all " Element ol is not allowed here." If someone can please help me resolve this, it would be greatly appreciated, thank you. My code is listed below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paula's Lists</title>
<link rel="stylesheet" href="lists.css">
<style>
.instagramlogo{
position: absolute;
width: 50px;
left: 20px;
top: 20px;
cursor: pointer;
}
.linkedinlogo{
position: absolute;
width: 50px;
left: 100px;
top: 20px;
cursor: pointer;
}
* {
box-sizing: border-box;
}
.column1 {
margin-top: 40px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column2{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column3{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column4{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
.column5{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 600px;
width: 40%;
padding: 10px;
border-radius: 25px;
}
hr{
position: center;
margin-top: 10px;
border-color: #009688;
width: 40%;
margin-left: 31.5%;
}
</style>
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="images/pngfind.com-instagram-png-22629.png" alt="Instagram logo" class="instagramlogo">
<img src="images/pngfind.com-linkedin-png-533561.png" alt="Linkedin logo" class="linkedinlogo">
<ul>
<li>Home</li>
<li>Resume</li>
<li>Lists</li>
<li>Contact</li>
</ul>
</div>
<h1>Paula's Lists</h1>
<span>Get to know me better with the following lists which showcase my perspectives on tech-related concepts!</span>
<div class="row">
<div class="column1" style="background-color:#aaa;">
<h3>Programming Languages I'd Like to Learn</h3>
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
</div>
<hr>
<div class="column2" style="background-color:#bbb;">
<h3>Career Aspirations</h3>
<ul style="list-style-type:disc;">
<li>Software Engineer</li>
</ul>
<ul style="list-style-type:circle;">
<li>Video Game Developer</li>
</ul>
<ul style="list-style-type:square;">
<li>Cyber Security Analyst</li>
</ul>
</div>
<hr>
<div class="column3" style="background-color:#ccc;">
<h3>Favorite Language so Far</h3>
<dl>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets</dd>
</dl>
</div>
<hr>
<div class="column4" style="background-color:#ddd;">
<h3>Favorite Class + Topic</h3>
<ol>
<li>Introduction to Web Development</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</ol>
</div>
<hr>
<div class="column5" style="background-color:#ddd;">
<h3>My Inspiration in Tech</h3>
<ul>
<li>Elon Musk</li>
<ul>
<li>Founder and CEO of Tesla + SpaceX</li>
</ul>
</ul>
</div>
</div>
</div>
<script src=https://my.gblearn.com/js/loadscript.js></script>
</body>
</html>
As I stated, I am a noob with coding as I have just begun so I believe it may have something to do with spacing. I have tried to rearrange, but have failed miserably. Any help would be appreciated, thank you!
In your code you have
<ol>
<ol type="1">
<li>Python</li>
</ol>
<ol type="a">
<li>Javascript</li>
</ol>
<ol type="A">
<li>C</li>
</ol>
<ol type="i">
<li>Swift</li>
</ol>
<ol type="I">
<li>PHP</li>
</ol>
</ol>
You have ol elements directly inside an ol element. You should have li elements as the direct children of ol. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
You could have
<ol>
<li>
<ol type="1">
<li>Python</li>
</ol>
</li>
</ol>
Incorrect HTML often does work and may do what you want but it is likely to be different in different browsers and lead to problems later on.
What you're trying to achieve is nesting of <ol> (ordered list).
A nested list or a sublist is a list within a list. The trick to marking nested lists up correctly in HTML is to recognize that the sublist is actually a child of a list item and not of a list.
Start by creating a list. It can be ordered or unordered:
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
Now add a nested list to the first list item:
<ul>
<li>Python
<ul>
<li>Item</li>
<li>Item2</li>
</ul>
</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
Notice that the sublist is a child and not a sibling of an <li> tag.
And you can keep adding levels:
<ul>
<li>Python
<ul>
<li>Item</li>
<li>Item2</li>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
</ul>
</ul>
</li>
<li>JavaScript</li>
<li>C</li>
<li>Swift</li>
<li>PHP</li>
</ul>
This is the only correct way of nesting <ol>
Results:
I'm trying to get my codes work but not sure where's the issue. The links for the first 2 classes don't work and I cannot click on to open linked pages.
Here's the HTML:
footer {
width: calc(100%-80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style-type: none;
font-family: 'Catamaran';
font-size: 24px;
color: #fff;
line-height: 40px;
}
.footer-links-news {
display: none;
}
.footer-sm {
width: 50px;
float:right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
}
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
<div class="footer-sm">
<a href="#">
<img src="Images/plugsin-icon-yt.png" alt="Youtube Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-fb.png" alt="Facebook Icon">
</a>
<a href="#">
<img src="Images/plugsin-icon-tt.png" alt="Twitter Icon">
</a>
</div>
</footer>
The text of the link needs to go inside the anchor:
<!-- this -->
Home
<!-- not this -->
Home
You need the anchor to actual contain something so it is clickable.
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
Text should be between HERE tags
<footer>
<ul class="footer-links-main">
<li>Home</li>
<li>Developer</li>
<li>Vietnam Virtual Tour</li>
<li>Hanoi Photo Gallery</li>
<li>Contact</li>
</ul>
<ul class="footer-links-news">
<li>Lastest News on Vietnam News</li>
<li>Soptlights</li>
<li>Economy</li>
<li>Life & Style</li>
<li>Enviroment</li>
</ul>
</footer>
How can I align the bullets with the left margin of the text above the list? For example:
<html>
<style>
ul.p1 {padding-left: 40px}
ul.p2 {padding-left: 0px}
</style>
<body>
<h2>List A</h2>
<ul class="p1">
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>
<p>
Item 2.1
</p>
<p>
Item 2.2
</p>
</li>
</ul>
</body>
</html>
This gives the following output in Google Chrome:
Notice that the bullets in List B have disappeared. I would like to have the bullets exactly positioned over (aligned with) the "L" in the <h2> element above the list. Can this be done without using a trial and error approach?
Build you custom list style using pseudo element and you can easily control what you want:
ul {
padding-left: 0px;
list-style: none;
}
li {
padding-left: 1em;
position: relative;
}
li:before {
content: "•";
position: absolute;
left: 0;
font-size: 1.5em;
line-height: 0.9em;
}
/* to illustrate */
body {
border-left:1px solid grey;
}
<h2>List A</h2>
<ul >
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
<ul style="font-size:30px;">
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
Just remove margins/padding as necessary and use list-position:inside.
ul {
list-style-position: inside;
padding: 0;
}
p {
display: inline-block;
margin: 0;
}
<h2>List A</h2>
<ul class="p1">
<li>
<p>
Item 1.1
</p>
</li>
<li>
<p>
Item 1.2
</p>
</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>
<p>
Item 2.1
</p>
</li>
<li>
<p>
Item 2.2
</p>
</li>
</ul>
alternatively, wrap the paragraphs in a div
body {
margin: 1em;
}
ul {
list-style-position: inside;
padding: 0;
}
div {
display: inline-block;
vertical-align: top;
}
p {
margin: 0;
}
<h2>List B</h2>
<ul class="p2">
<li>
<div>
<p>
Item 2.1
</p>
<p>
Item 2.2
</p>
</div>
</li>
</ul>
You can try this modifications:
<html>
<style>
ul.p1 {padding-left: 20px}
ul.p2 {padding-left: 20px}
</style>
<body>
<h2>List A</h2>
<ul class="p1">
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</body>
</html>
i want to add dropdownload arrow for each top level menu and not sub.
this is the one i want to add from this site link below but its not working for me
https://amethystwebsitedesign.com/how-to-add-arrow-indicators-to-genesis-navigation-menus/
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
padding:0;
margin:0;
}
body{
background:#f0f0f0;
font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
overflow-x:hidden;
}
h1{
font-size:180px;
line-height:180px;
text-transform: uppercase;
color:#f9f9f9;
position:absolute;
text-shadow:0 1px 1px #ddd;
top:-25px;
left:-20px;
white-space: nowrap;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#DF7B61;
text-decoration:none;
text-transform: uppercase;
text-shadow:0 1px 0 #fff;
}
span.reference a:hover{
color:#000;
}
.box{
margin-top:129px;
height:460px;
width:100%;
position:relative;
background:#fff url(click.png) no-repeat 380px 180px;
-moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
}
.box h2{
color:#f0f0f0;
padding:40px 10px;
text-shadow:1px 1px 1px #ccc;
}
</style>
</head>
<body>
<nav><ul id="ldd_menu" class="ldd_menu">
<li>
<span>Vacations </span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li>South America</li>
<li>Antartica</li>
<li>Africa</li>
<li>Asia and Australia</li>
<li>Europe</li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li>Sun & Beach</li>
<li>Adventure</li>
<li>Science & Education</li>
<li>Extreme Sports</li>
<li>Relaxing</li>
<li>Spa and Wellness</li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li>Paradise Islands</li>
<li>Cruises & Boat Trips</li>
<li>Wild Animals & Safaris</li>
<li>Nature Pure</li>
<li>Helping others & For Hope</li>
<li>Diving</li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
<nav></div>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* the menu
*/
var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$this.find('.ldd_submenu').slideDown(300);
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
});
</script>
</body>
this is the code am trying to add
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
Check it works for me:
.genesis-nav-menu > .menu-item-has-children > a {
color: #333;
text-decoration: none;
}
.genesis-nav-menu > .menu-item-has-children > a:after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 24px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
<link href="https://rawgit.com/WordPress/dashicons/master/css/dashicons.css" rel="stylesheet"/>
<div class="genesis-nav-menu">
<div class="menu-item-has-children">Hello</div>
</div>
I have this HTML structure:
.subject{
width: 50px;
}
<div>
<span class = "subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class = "subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">+9400321532</span>
</div>
As you see, those columns aren't in the same line. I want this output:
/*
Name: John
Age: 23
cell phone: +9400321532
How can I do that?
Actually I need a fixed-width for span.subject the size of biggest content length which is cell phone in this case.
Here is my code in reality:
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>
You can use display:table, display:table-row and display:table-cell to make span as table
Use display: table-cell;
.subject {
display: table-cell;
width: 80px;
}
div {
display: table-row;
}
<div>
<span class="subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class="subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">+9400321532</span>
</div>
Please try this:
.subject{
width: 82px;
display: table-cell;
float: left;
}
You can make use of display table-row and table-cell to achieve this. Below code you can see that the width of the longest content is taken as the width if not it will take a min-width of 50px;
Hope this is what you are expecting :
.notifications_list{
margin-top: 1px;
padding-right: 15px;
direction: rtl;
overflow: scroll;
width: 100%;
height: 100%;
display: table;
}
.notifications_list div, .notifications_list ul{
display: table-row;
}
.notifications_list li{
list-style: none;
}
.notification_date_title{
font-size: 14px;
margin-top: 10px;
}
.note_icon{
}
.note_icon i{
font-size: 20px;
margin: 0px;
}
.note_type{
margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
<div class="notification_date_title">امروز +5</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">دیروز +10</div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
</li>
</ul>
<div class="notification_date_title">در هفته گذشته </div>
<ul>
<li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
</li>
<li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
</li>
</ul>
</div>
Try this also:
.subject{
width: 50%;
float:left;
}
.content{width: 50%;
float:right;
}
<div>
<span class = "subject">Name:</span>
<span class="content">John</span>
</div>
<div>
<span class = "subject">Age:</span>
<span class="content">23</span>
</div>
<div>
<span class="subject">cell phone:</span>
<span class="content">+9400321532</span>
</div>