I know they are block elements, but I'm sure there is a way, maybe with CSS? I tried to use the span tag but it doesn't work. What did I do wrong? I would like to put the second element next to the first one on the website. Not under it, but next.
<span>
<section>
<h3>Favourite quotes</h3>
<ul>
<li>
“Pizza is good" ―Me
</li>
</ul>
</section>
</span>
<span>
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</span>
make the two "span" "inline-block" display and that's it!
.first,.second{
display:inline-block;
}
<span class="first">
<section>
<h3>Favourite quotes</h3>
<ul>
<li>
“Pizza is good" ―Me
</li>
</ul>
</section>
</span>
<span class="second">
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</span>
Try something like this
.displayList .ol .ul {
visibility: visible;
}
Using span this way is wrong because span is inline element and you can't wrap section like this and any other block's. You can use <table> or flexbox for this case.
.container {
display: flex;
}
.container section {
width: 50%;
}
<div class="container">
<section>
<h3>Favourite quotes</h3>
<ul>
<li>“Pizza is good" ―Me</li>
</ul>
</section>
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</div>
Related
I have a multi-level ul list like below.
<ul>
<li>
</li>
<li>
<a href="/">
</a>
<ul>
<li>
<ul>
<li>
</li>
<li>
<ul>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</li>
<li>
</li>
</li>
</li>
</ul>
There could be more levels inserted.
So I want every ul > li > a will have a padding-left+10 of it's parent a tag.
you can use forloop for adding css for all the anchor tags at once.
add class in anchor tag for get element by class
var lis = document.getElementByClass("link").getElementsByTagName("li");
after this you can implement css using javascript:
var sheet = window.document.styleSheets[0];
sheet.insertRule('a { padding-left: 50px; }', sheet.cssRules.length);
I cannot get a div within a list to display inline. It seems to create a line break.
I have tried using a clear div, setting the body font-size to 0, rearranging the html and all sorts of other things to no avail.
jsfiddle: https://jsfiddle.net/Loy4a2st/1/
.guiding_more_info_button{
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
display:none;
}
<h2>Itinerary</h2>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
P tag block element, apply p tag to inline
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
.inline{
display:inline;}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p class="inline">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I have used your code and made some adjustments.
.guiding_more_info_button {
font-family: maratExtraLightItalic;
cursor: pointer;
display: inline-block;
}
.guiding_more_info {
margin-left: 3rem;
font-family: maratExtraLight;
display: none;
}
#day3 {
display: inline-block;
}
<h2>Itinerary</h2>
<li>
<p>Day 01 </p>
</li>
<li>
<p>Day 02</p>
</li>
<li>
<p id="day3">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li>
<p>Day 04</p>
</li>
<li>
<p>Day 05.</p>
</li>
You can view the fiddle here:
https://jsfiddle.net/fo6ryj29/
You need to make both elements you want to show next to each other display:inline-block.
In your case the div and the p tag.
Your html isn't written correctly. You need to wrap your <li>'s in the <ul> element for it work properly.
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I'm using a plugin that has below output:
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
The problem is I need to keep single line for example line1. I can control CSS classes only. Is is possible to do this job through CSS class?
Try using this kind of code.
.CUSTOM ul li:nth-child(2){
background:black;
}
You can use a combination of :not and :first-child
.CUSTOM li:not(:first-child){display:none;}
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
This may not work in IE 8 or IE 7 : http://caniuse.com/#feat=css-sel3
At css, example changing line1:
ul li:nth-child(1)
{
/* example */
color: green;
border:2px solid black;
padding:6px;
}
Or at html, example changing line4 :
<div>
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li style="color:blue;padding:6px;"> line 4 </li>
</ul>
</div>
try this...
.CUSTOM.CODE li:first-child {display:none}
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
I am very new to this and my code is probably very sloppy, excessive and redundant, so I apologize for that.
I am trying to add one final piece to my nav bar. Here is the HTML, a fiddle will be attached at the bottom.
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li> <a id="h" href=".html">_______ _______ __________</a> </li>
</ul>
<ul class="second-nav">
<li> <a id="a" href=".html">_____ __</a> </li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<div class="flyout">
<li> <a id="r" href=".html">___________</a> </li>
<ul class="flyout-nav">
<li> ___ </li>
<li> ______ _ _____ </li>
<li> ______ ________ </li>
</ul>
</div>
<div class="flyout">
<li> <a id="c" href=".html">__________</a> </li>
<ul class="flyout-nav">
<li> ______ ________ </li>
<li> ___________ </li>
<li> ______ _____ </li>
</ul>
</div>
<li> ______ _______ </li>
</ul>
</li>
<li> _______ __ </li>
</ul>
</header>
I am attempting to select the two different "flyout-nav"s individually, however I cannot seem to find the correct specificity to select each individually.
All I need to do is round the top left corner on the second "flyout-nav" while keeping the first "flyout-nav"s top left corner square.
I believe my problem is that when I try to select the first child of the "flyout" is selects both "flyout-nav"s as they are both the first children and I have been looking into nth-children and other child selectors but to no avail. At this point after combing through the code for a few days now attempting to make it more efficient and find an order that will make it work I need some new eyes on the code to see what my eyes have been blinded to.
Here is the Jsfiddle with my css (note css is probably more sloppy than my code, still attempting to figure out the whole organization thing).
Thank you for the assistance and please don't hesitate to ask me to clarify anything.
Fix:
I changed the second "flyout-nav" to "flyout-nav1" and then updated all of the css that was associated with "flyout-nav" to also incorporate "flyout-nav1"
new Jsfiddle here
Your HTML structure is invalid. This is a valid HTML structure.
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li>
<a id="h" href=".html">_______ _______ __________</a>
</li>
</ul>
<ul class="second-nav">
<li>
<a id="a" href=".html">_____ __</a>
</li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<li class="flyout">
<a id="r" href=".html">___________</a>
<ul class="flyout-nav">
<li>___
</li>
<li>______ _ _____
</li>
<li>______ ________
</li>
</ul>
</li>
<li class="flyout">
<a id="c" href=".html">__________</a>
<ul class="flyout-nav">
<li>______ ________
</li>
<li>___________
</li>
<li>______ _____
</li>
</ul>
</li>
<li>
______ _______
</li>
</ul>
</li>
<li>
_______ __
</li>
</ul>
</header>
</div>
</body>
Then use :nth-child() selector, or add a custom class.
Try out nth-child here:
https://css-tricks.com/examples/nth-child-tester/
Try using the 'adjacent sibling selector' (+):
ul.drop-nav div.flyout + div.flyout ul.flyout-nav {
/* css for the second flyout */
}
JSFiddle Demo
I believe Mr__Goat wants to select the two elements individually so he can apply different styling to each. The following CSS selectors will refer to each element individually.
/* First .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(1) {
}
/* Second .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(2) {
}
I used image list style and trying to align it perfectly well with the text in vertical.
JSFiddle: http://jsfiddle.net/uwzW5/
But it seems the text is always down by 2px-3px. How can I fix this issue?
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> Detailed event tracking:
<ul class="sub-feature features-close">
<li> Timestamp</li>
<li> IP</li>
<li> Country</li>
</ul>
</li>
<li> Conversions Tracking
<ul class="sub-feature features-close">
<li> <a >Double tier conversion</a></li>
<li> <a>Configurable cookies</a></li>
<li> Track multiple conversions</li>
<li> Track product ID</li>
<li> Track custom parameters</li>
<li> Track conversion value</li>
<li> Track commission amount</li>
<li> http/https</li>
</ul>
</li>
<li> <a>Google Analytics UMT</a></li>
</ul>
</div>
and css
.feature-ul-section ul li {
list-style-image: url(../img/green-list.png);
font-family:'Source sans pro';
}
.feature-ul-section ul li ul li {
list-style-image: url(../img/grey-list.png);
}
You can add a span element inside each li element and then add CSS style to the span element
Try
HTML:
<div class="col-md-3 feature-ul-section">
<ul>
<h3>TRACK</h3>
<li> <span>Detailed event tracking:</span>
<ul class="sub-feature features-close">
<li> <span>Timestamp</span></li>
<li> <span>IP</span></li>
<li> <span>Country</span></li>
</ul>
</li>
</div>
CSS:
span{
position:relative;
top:-3px;
}
DEMO