I'm trying to make a sidebar navigation list containing another list whose contents show/hide when clicked. For the li containing the collapsible list, I put in a custom list-style-image (actually, two that are toggled between with JS when clicked.) The problem is that the custom image is rendering on the edge of the page instead of in line where a regular bullet point would be. The image has a transparent background, so that's not the problem. Maybe it's something with how I floated the div to the left?
Here's my HTML and CSS and a screenshot of how it's displaying.
Code snippets (css/html):
#sidebar{
position: fixed;
float: left;
width: 20%;
background-color: green;
}
#main{
float: right;
width: 75%;
background-color: blue;
}
#songs{
margin-bottom: 0;
}
.song{
list-style: decimal;
}
.songclosed{
display: none;
}
.closed{
list-style-image: url("../images/closed.png");
}
.open{
list-style-image: url("../images/open.png");
}
<div id="sidebar">
<ul>
<li>
<p>Home</p>
</li>
<li>
Info
</li>
<li id="openclose" class="closed" onclick="openclose()">
<p id="songs">Songs</p>
<ol>
<li class="song songclosed">
Song 1
</li>
<li class="song songclosed">
Song 2
</li>
<li class="song songclosed">
Song 3
</li>
</ol>
</li>
</ul>
</div>
Image--See the little black triangle on the left?
I've tried list-style-position: inside and overflow: hidden. Both made a difference, but neither worked properly.
Final note: The images are bigger (100x100) than a regular bullet point so that may be a slight problem, but I can edit them down and see what changes if someone can tell me how big a regular bullet is.
Related
With CSS and HTML, I am having trouble styling ul and its li elements such that the following happen:
The ul and constituent elements are rendered horizontally instead of vertically.
The li retain their bullet styling.
The li are rotated -45 degrees.
The li bullets start on the same vertical plane and similar with the li text.
So far, I can make no. 1-3 happen. So far, making no. 4 happen is beyond my knowledge. The problem seems to be that the li have different content lengths.
The end goal should look approximately like this hand-drawn image: . Please ignore that the text becomes smaller in the attached image. That was an artifact of the tool I used.
I have tried:
li {
transform: rotate(-45deg);
float: left;
}
with:
<ul>
<li>aaa
</li>
<li>aaaaaa
</li>
<li>aaaaaaaaaa
</li>
<li>aaaaaaaaaaaaa
</li>
<li>aaaaaaaaaaaaaaaa
</li>
</ul>
It yields something like this, which I don't want:
Bonus points if you can make a horizontal line run through the bullet points as well as you see in the intended diagram. :-)
Use transform-origin to rotate around a particular point
li {
transform: rotate(-45deg);
float: left;
border: 1px solid red;
transform-origin: bottom left
}
ul {
margin-top: 50px;
}
<ul>
<li>aaa
</li>
<li>aaaaaa
</li>
<li>aaaaaaaaaa
</li>
<li>aaaaaaaaaaaaa
</li>
<li>aaaaaaaaaaaaaaaa
</li>
</ul>
I am relatively inexperienced with HTML and CSS and I am having a spot of difficulty trying to change the padding and margin values of my navigation bar on a second page without it affecting the index page.
NB: I want to style the nav slightly different on the second page.
I have 2 navigation bars .navbar and .navbar2 each with identical code.
<div class="navbar">
<nav class="large clearfix">
<ul>
<li>
Home
</li>
<li>
Famous People
</li>
<li>
Places to Visit
</li>
<li>
Contact Us
</li>
</ul>
<div class="veggieburger">≡</div>
</nav>
</div>
How do I call out navbar2 UL LI properties from a syntactical perspective in the CSS in order to style it different without affecting the navigation values aligned to the index page.
I have tried without success in the CSS.
.navbar2 > li {
margin-top: 50px;
}
Well, for managing different classes (.), and IDs (#), we use these selectors in the brackets I've written in.
Say for example you want to style navbar and navbar2 independently, you would directly style them differently by using the selector ".". Just add a "." in front of the class, and apply your properties as needed.
So for example, imagine my HTML is all done up, this would be the CSS:
.navbar
{
width: 100%;
height: 30vw;
color: red; /*this would make the text red*/
}
.navbar2
{
width: 100%;
height: 30vw;
color: green /*and this makes the text green*/
}
Hope that helped!
I have the following code: https://jsfiddle.net/u8db2j75/1/ and it works fine, I have the effect I wanted - a picture and some text next to it. But now I want to add another component, a navigation bar - and I want to add it on top of the page. So what I followed the example given here http://css-snippets.com/simple-horizontal-navigation/ and I created the code like this:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
https://jsfiddle.net/u8db2j75/2/ however, after modifying css as well -as you can see - the effect is far from what I expected... What did go wrong here?
Give your .nav ul and .nav a min-width of 100%.
Example:
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
https://jsfiddle.net/u8db2j75/4/
I don't have 50 reputation to comment the answer above, but:
List item needs to be displayed inline, or floated to the left so the result will be a horizontal navigation as per the examble shown in the issue.
On this website, the menu has the following structure:
<ul>
<li class="page_item page-item-2 current_page_item">
Home
</li>
<li class="page_item page-item-7">
Features
</li>
<li class="page_item page-item-18">
News & Reviews
</li>
<li class="page_item page-item-20">
Contact
</li>
</ul>
The current_page_item class changes the background of the currently selected menu item to black via the following rule:
.mainnav li.current_page_item a {
background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}
This works for the Home menu item, but for all others a small gap is left on the left-hand side of the selected menu item, highlighted by the yellow circle in the image below
I can't seem to figure out why this problem occurs for all menu items except Home.
Your <li> tags are display: inline-block; and there are spaces between the tags.
Because your <li> tags are inline-block, they respect whitespace in the HTML, just like inline elements and text.
In the end, the background image is covering the background of the element correctly. Your best option to get rid of the spacing is to remove all whitespace between </li> and the next <li> tags.
As mentioned by #ajp15243 below, you can omit the closing tag, or use some wacky tricks to get the HTML to swallow up the whitespace.
You should use display:table-cell for .mainnav_wrapper .mainnav ul li class.
then add a padding to center the menu items to your ul element:
.mainnav_wrapper ul {
padding-left:192px;//this is especially for this project
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 960px;
}
and you are ready to go...
I am trying to create custom bullet points and it is not working.
This is my HTML.
<div id="services">
<ul id="serviceText">
<h2 id="serviceHeader"><strong>Services I Offer:</strong></h2>
<li>Intros</li>
<li>Transitions</li>
<li>Lower Third Titles</li>
<li>Web Page Design</li>
<li>and more...</li>
</ul>
</div>
This is my CSS
ul#serviceText {
list-style-image: url(images/checkmark.gif);
font-size: 14px;
float: right;
padding-top: 5px;
color: white;
}
My site is located here xdtrammell.com/lol if it helps you to see all my code.
change your selector to ul#serviceText li. Also keep in mind that you can't include h2 element in ul. Is not valid html.
Specifically I think you're trying to create custom bullets that are images, here is how I would do it.
The CSS
.list {
margin: 0;
padding: 0;
}
.list-li {
background: url('../directory/your image here.jpg') no-repeat top left;
margin: 0;
padding: 4px 0 4px 20px;
list-style: none;
}
The key thing to note is the background image is in the top left, so take that into consideration when you adjust your padding. Padding is: Top, Right, Left, Bottom.
The HTML
<ul class="list">
<li class="list-item">lorem ipsum</li>
<li class="list-item">lorem ipsum</li>
</ul>
I hope this helps!
You're far better of using a CCS background for your list items than using list-style-image. You get far greater control over the positioning of the graphic and the spacing of the text.
See: http://preview.moveable.com/JM/ilovelists/
Does it need the ../ before the image URL so it knows to go up a directory? In other words, does your image exist in the top level directory or in one of the next-levels? If it doesn't exist in the top level then it needs "../"
Just change the path to image folder in URL like this(../images/checkmark.gif) and "li" tag element is enough as a selector.
li {list-style-image: url(../images/checkmark.gif);}
my case was,
the bullet was hidden or invisible when list-style: inside was not set.