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.
Related
I have tried and researched many ways but I couldn't find out how to align unordered list in center. it seems like the bullets are not connected to the text and stay still.
here is the html code:
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
and this is the css code:
#facts {
text-align: center;
}
the result will be like
You can use list-style-position: inside; to set the bullets in front of the text like this:
#facts {
text-align: center;
list-style-position: inside;
}
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
You can put your Unordered List in an element with the class of .container and define .container like this:
.container{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
<div class="container">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Set</li>
</ul>
</div>
I have the following code in HTML:
<div id="side">
<ul class="sideCol sideCol-fixed">
<li>
<div class="user-view" style="background-color: #141E30;">
<u><i><b>LINK TO EXTERNAL PAGE</b></i></u>
</div>
</li>
<div class="steps">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
</ul>
</div>
and the following code in CSS:
#side li a:hover{
color: black;
}
I only recently added in the line <u><i><b>LINK TO EXTERNAL PAGE</b></i></u> and previously I had set the css so that when the cursor hovers over Link 1, Link 2 and Link 3, the text turns black, where previously the text is white.
The text for the "LINK TO EXTERNAL PAGE" anchor tag is also initally white, but unlike the other links I do not want it to turn black when I hover on it. I have tried adding an id to the anchor tag (<a id="newid" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>), and then adding css to that id in the stylesheet (code at bottom of question) to make it so that the text turns white when hovered over (thus aiming to make it not turn black) but this does not work and the text still turns black. Would anyone know how to achieve this?
#newid:hover{
color: white;
}
Selector that you tried to apply has lower css specificity.
Solution:
Use selector with higher specificity to override this style.
For example you can use:
.user-view > #newid:hover {
color: white;
}
or
#side #newid:hover {
color: white;
}
or
#side li .user-view a:hover {
color: white;
}
Here: https://specificity.keegan.st/ you can calculate your selector specificity.
#side li a:hover{
color: black;
}
Has specificity 1.1.2 where,
#newid:hover{
color: white;
}
Has specificity 1.1.0 so this style in other words, was less important and thus not applied.
Here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity you can read more about it.
Did you tried to add a css class instead?
<div id="side">
<ul class="sideCol sideCol-fixed">
<li>
<div class="user-view" style="background-color: #141E30;">
<a class="externallink" href="https://hypotheticallink"><u><i><b>LINK TO EXTERNAL PAGE</b></i></u></a>
</div>
</li>
<div class="steps">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
</ul>
</div>
CSS
.externallink:hover{
color: white;
}
use this to select you list item
<div id="side">
<ul class="sideCol sideCol-fixed">
<li>
<div class="user-view" style="background-color: #141E30;">
<u><i><b>LINK TO EXTERNAL PAGE</b></i></u>
</div>
</li>
<div class="steps">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</div>
</ul>
</div>
css:
.steps :hover {
/* your css code here */
color:black;
}
I'm currently making a website using a Tumblr theme. I want one of my links (Merchandise) to open a dropdown menu for different options. Is there a way to do this without switching the entire navigation to li elements? I can style it all after, I just have no idea how to do this without ruining the entire theme.
Thanks in advance.
#pages {
float: right;
}
#pages a {
float: right;
color: black;
margin: 22px;
padding: 5px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
font-size: 10px;
}
#pages a:hover {
color: #d95e40;
}
<div id="pages" class="desktop">
<h2 class="page">Contact</h2>
<h2 class="page">Merchandise</h2>
<h2 class="page">Videos</h2>
<h2 class="page">Lyrics</h2>
<h2 class="page">Releases</h2>
<h2 class="page">Shows</h2>
</div>
There's a useful site that has made a plugin just for this sort of situation
http://labs.abeautifulsite.net/jquery-dropdown/
On there you'll see the option to add a dropdown to an <a> tag.
Merchandise
Your actual dropdown list would then reside in the jq-dropdown-1 div. Or whatever you'd like to name it.
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="jq-dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
The plugin Does the rest, giving you a simple solution to <a> tag dropdowns after simply linking to the required scripts
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>
Which can be found on the GitHub page here >> https://github.com/claviska/jquery-dropdown
I am using CSS selectors to try to hide everything in my .text-wrap div except for the first UL and the first H3, however the selectors I have below are not working as expected.
CSS:
.text-wrap {
>*:not(h3:first-of-type):not(ul:first-of-type) {
display: none;
}
}
HTML:
<div class="text-wrap>
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
As stated by the specification, the :not() pseudo class currently only accepts simple selectors:
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
This means that :not(h3:first-of-type) currently doesn't work since h3:first-of-type is not a simple selector.
6.6.7. The negation pseudo-class
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
To work around this, you can break up your selector and hide all the elements except the first of each type and then use a separate selector to hide everything except h3/ul elements:
.text-wrap > :not(:first-of-type),
.text-wrap > :not(ul):not(h3) {
display: none;
}
.text-wrap > :not(:first-of-type),
.text-wrap > :not(ul):not(h3) {
display: none;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph1</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph2</p>
</div>
Alternatively, in your case, it seems like the easiest solution is to select all the sibling elements after the first ul element using the general sibling combinator, ~:
.text-wrap > ul:first-of-type ~ * {
display: none;
}
.text-wrap > ul:first-of-type ~ * {
display: none;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph1</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph2</p>
</div>
You can do this with the css adjacent selector:
/* hide the elements */
.text-wrap p,
.text-wrap ul {
display: none;
}
/* show the element after the h3 */
.text-wrap h3 + ul {
display: initial;
}
<div class="text-wrap">
<h3>My h3</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<p>paragraph</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
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.