I was wondering how I could make the whole list item clickable and not just the words. In my list I am only able to click on the words. How could I turn the whole list area into a link? I have the list made with a link inside of it but I want you to be able to click anywhere inside the list area to get redirected. Thank you.
And I am new to this website so I am sorry if I am asking this wrong.
You need to make the anchor tag a block element and let it control the height of the list item
here is a sample:
HTML:
<ul>
<li>
click me!
</li>
</ul>
CSS:
ul {
width:200px;
padding:0px;
margin:0px;
list-style:none;
}
li {
width:100%;
background:green;
position: relative;
}
li a {
display:block;
height:50px;
}
jsfiddle:
http://jsfiddle.net/24ELw/
You could just insert buttons inside the list items and style them borderless and without a background color -> jsFiddle
Related
I have a div with overflow-x:scroll; and in that div I have a list, and that list have some links. But I don't seem to be able to make my list a wide as its links. Which results in my links jumping lines.
How would I fix this?
My html
<div class="menu">
<ul>
<li>
a long text that jumps lines
</li>
<li>
a line that don't jump
</li>
</ul>
</div>
My CSS
.menu{
width:400px;
overflow-x:scroll;
}
When you say Which results in my links jumping lines I guess is breaking in a new line, then you can use this property to avoid that:
.menu ul li {
white-space:nowrap;
}
Also to make your ul get the full width change his display property:
.menu ul {
display:inline-block;
}
The demo http://jsfiddle.net/5KSaM/7/
I want to show a div when I click on the image, but the div id not staying put when I am not clicking on the image similar to this site http://www.google.com/nexus/ my jsfiddle http://jsfiddle.net/7KJy4/.
please check my code and update if neccessary thanks! My html code contains a simple div and list items displayed as inline. I used element :active for the pop up when i clicked on the image, but when i clicked on the image the div does not hold for the user to click on the nav links.http://jsfiddle.net/7KJy4/
My html
<div id="hover">
<img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/menu-24-24.png">
<div id="menu">
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
</div>
</div>
my css
*
{
margin:0;
padding:0;
}
#hover
{
width:100px;
height:300px;
}
#hover:active > #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
#menu
{
visibility:hidden;
}
li
{
}
If you want to do it in pure css, you have to use :focus instead of :active and focus on the image:
#hover > img:focus + #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
You will also need to add "tabIndex" to the image so it can receive focus.
DEMO: http://jsfiddle.net/7KJy4/1/
The side-effect of this approch - user can Tab into the image so your menu can be activated by keyboard as well.
If you want to to it on click without above approach you will have to use some JS.
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 have bootstrap navbar and i want the links in the top of the list item
<li>
<a class="menuLinks" href="http://news.bootswatch.com">Blog</a>
</li>
CSS:
.menuLinks {
vertical-align:top;
}
I tried this too:
.menuLinks {
position:absolute;
top:0;
}
and it didn't work too.
How can I do that?
Try to add this properties:
display:table-cell;
height:40px;
vertical-align: top;
Need more information to know what you want to do. If its positioning the element, you can change that in your css with margins etc. Or if you want it above other elements then you need to move the html code above those elements. If you display more of the code it might make it easier to help you.
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