I just have been looked into Google's source code and I saw that the side bar is created from the <ul> and <li> tags which the use for them is making list.
So as I said I saw their side menu bar and I tried to do the same, something like this : http://jsbin.com/oyibok/edit#javascript,html,live
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<ul>
<li> dsds </li>
<li> dsds </li>
</ul>
</body>
</html>
not quiet worked out, is there any technique that I can use to do the same as Google's did and make a list without the followed dot?
To get rid of the dots, just add the following css:
ul {
list-style: none;
}
yes - the answer is css. you should do something like
ul {
list-style-type: none; /* look mom - no dots */
}
ul li {
display:inline; /* look mom - no block display - only if you want a horizontal nav */
}
a {
text-decoration:none /* look mom - no underline */
}
also as you may notice if this is a navbar you probably would put links inside the li element with a elements
by the way - all modern nav bars are lists..
In addition to removing the bullets/dots in CSS, you may also want to reset the margins to margin: 0px if you want the top-level list items to be flush with the left side of their container.
In most browsers, just removing the bullets still leaves white space where they normally are.
A list has the bullet points by default, and also some margins and padding.
<ul>
<li>list item 1</li>
</ul>
With CSS you can change the way the list looks.
<style>
/* the styles go in between the style tag */
</style>
You can use CSS to grab each element in the list and change the properties.
For example I usually start by removing the list style, margin and padding.
ul { list-style:none; margin:0; padding:0; }
Next you can change the link or anchor tags to have a width and height and background colour.
Links by defaul are inline elements, which means they don't force a new line but flow inline.. I need them to be displayed as a block element so I can style it.
ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue; }
Now when the user hovers the mouse over the link you can change its colour again, CSS stacks so all the styles you wrote above will still apply but we can over write whatever we choose.
ul a:hover { background:orange; }
Some reading: http://www.w3schools.com/css/css_list.asp
Once you know how to select elements using CSS, you will be able to create pretty much anything.
You can give HTML elements a unique id or a class.
An id is used to select a single element, on it's own.
But if you have a lot of elements, a class is used.
"#" for Ids and a "." For classes.
Example:
<div id="something">some text wrapped in a div with an id</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<style>
#something { background:red; }
.something { background:blue; }
</style>
The startings
http://jsbin.com/oyibok/5/edit
Related
I am trying to remove the indentation and bullets from a bulleted list using CSS. Here is what I am doing:
.entry-content ul{
list-style-type:none;
padding:0;}
The bullet points are removed from the list, but the indentation is not fixed. Here is the HTML:
<div class="entry-content">
<ul class=wp-block-categories wp-block-categories-list">
<li class="cat-item cat-item-8">Advice
</li>
</ul>
</div>
Here is an image before I apply the CSS:
https://imgur.com/Sw31pHJ
Here is an image after I apply the CSS:
https://imgur.com/Utnt5vI
Does anyone know why the indentation isn't being removed? I am doing this in wordpress.
You have an error in your HTML.
<ul class=:wp-block-categories wp-block-categories-list">
should be
<ul class="wp-block-categories wp-block-categories-list">
As for your CSS, one of these is the most likely:
The li may have a margin as well. try .entry-content ul li { margin-left: 0; }
Your selector isn't specific enough, try .entry-content ul.wp-block-categories-list instead
Your ul may have margin instead of padding (doubtful)
You can try and diagnose these with DevTools/your browsers inspector, it will show you all of the positions/margins/paddings and everything related to the element's bounding box:
You likely also need to apply:
.entry-content ul li {
margin-left: -20px;
}
The exact amount of margin will differ based on the size of your font, but 20px is the default.
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I'm fighting with CSS and can't figure out how to remove bullets. Yeah, I know this sounds easy, but hear me out. I have another external CSS file from our corporate office that has styles that are getting in the way and I can't for the life of me figure out how to override them. I've tried the !important token and it doesn't work either. I'm using chrome and the inspector hasn't yet helped me figure out what's causing it. Anyway, here's my code which works great stand-alone, but once I put the corporate CSS file in there, the stupid bullets come back. Ugh!
<ul style="list-style-type:none;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
This sounds like more of an issue with CSS specificity. You can't "override" the other styles, per se, you can merely create additional styles which are more specific. Without knowing what the other CSS looks like, there are generally three ways to do this:
Inline styles
Exactly like you have in your example. These are most specific, so they're guaranteed to work, but they're also guaranteed to be a pain in the neck to work with. Generally, if you're using these, something needs to be fixed.
Add an id attribute to the unordered list,
Then use the id as a selector in your CSS. Using an id as a selector is more specific than using a class or an element type. It's a useful tool for cutting through a bunch of styling that you might be inheriting from somewhere else.
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
ul#the-one {
list-style-type: none;
}
Wrap all of your HTML in a div with the id attribute set.
This is what I usually do. It allows me to use that div with it's id in my CSS styles to make sure my styles always take precedence. Plus, it means I only have to choose one meaningful id name, then I can just style the rest of my HTML as I normally would. Here's an example:
<div id="wrapper">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<p>Some text goes here</p>
</div>
div#wrapper ul {
list-style-type: none;
}
div#wrapper p {
text-align: center;
}
Using that technique is a pretty good way to make sure that you spend most of your time working on your own styles and not trying to debug somebody else's. Of course, you have to put div#wrapper at the beginning of each of your styles, but that's what SASS is for.
I had the same problem, I was trying to change the CSS for a joomla website, and finally found that the li had a background image that was a bullet... (the template was JAT3). This is the code:
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
...
}
Hope it helps someone.
Ensure the rule you're trying to override is on the UL, rather than the LI. I've seen that rule applied to LIs, and overriding the UL as you have above would have no effect.
My situation is similar to the one described by #fankoil: my inherited css had
main-divname ul li{
background-image:url('some-image.png');
}
to get rid of this for a specific ul, I gave the ul an id
<ul id="foo">
...
and in the css, turned off background image for this particular ul
ul#foo li {
background-image: none !important;
}
So to add some clarification to some previous answers:
list-style-type is on ul
background-image in on li
It's better if instead of having the style inline you call it using a class:
<ul class="noBullets">
.noBullets {
list-style-type:none !important;
}
If you can't find the style that's overwriting yours, you can use the !important property. It's better to first inspect your code online using chrome or firefox's Inspect element (or firebug).
EDIT:
Accordnig to your comment, the style comes from div#wrapper ul. Did you try:
div#wrapper ul {
list-style-type:none !important;
}
The Trick is very simple:
HTML get that:
<ul id="the-one">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Style get that:
ul#the-one {list-style-type: none;}
But, the next two options will blow your mind:
li {width: 190px; margin-left: -40px;} // Width here is 190px for the example.
We limit the width and force the li paragraph to move left!
See a Awesome example here: http://jsfiddle.net/467ovt69/
Good question; it's odd how the bullets show in IE even with the list-style:none;
This is the code that removed the bullets:
/* media query only applies style to IE10 and IE11 */
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* removes bullets in list items for IE11*/
li {
list-style-position: outside;
overflow: hidden;
}
}
check for the following line of code in your css:
.targeted-class-name>ul>li>a:before {
content: "•";
}
That was the culprit in my case
i think you could solve also your problem by wrapping text in your list-item with span then used something like this:
ul>li:nth-child(odd) > span:before {
display:none;
}
ul>li:nth-child(even) > span:before {
display:none;
}
Odd and even are keywords that can be used to match child elements whose index is odd or even, and display=none will do the trick to by not displaying element before the span element.
I'm attempting to use tabs generated by CSS to show an active state of an arrow under the tab. I was trying to position the image for the hover event with the background position properties, but it would bring the image outside of the given proportions of the tab.
This is the page: http://thegoodgirlsnyc.com/holly/about. The active tab should look like this:
The CSS styles are the following one:
#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p
How can I get this image to show at the bottom of the predefined background? These tabs will be included in multiple locations, with varying length of text, so they should only use the one image.
Due to the background image with diagonal lines I doubt it is possible to do what you need by styling one tag only.
The solution could be either styling both the LI and the inner A tags (see an example that is very close to your image there: http://www.litecommerce.com/services.html) or wrapping the anchor text into SPAN and styling the A and the inner SPAN tags.
Here's is HTML and CSS i got from tweaking your page in Firebug that gets the desired effect:
<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
Featured
</li>
You can convert the inline styles to the appropriate CSS styles. The above markup is just for the selected LI element and the anchor element inside.
Hope this helps you.
Ok, here's an updated version for you that should work (note, the above CSS should only be applied to the selected LI and the A element within):
Your HTML Markup
<ul class="nav">
<li class="nav-one current">Services</li>
<li class="nav-two">Clients</li>
</ul>
NOTE: class='nav-one current' on selected LI element instead of A element
Your NEW CSS
ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }
There is an error in your CSS selector. It should be:
#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }
Here's a sample of what i did in Chrome and the result:
NOTE: Also, it looks like your image path is not resolving to the image on your server correctly, in my case it is because I put in the full path to the image.
NOTICE: You didn't change the markup to have the "current" class on the LI element instead of the A element.
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.