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/
Related
I am working on a supposedly simple drop down menu using HTML and CSS, and have encountered an issue. After scouring google and the forums to no avail, figured it was time to ask. I am trying to get the drop down menu to line up with it's parent element.
I have experimented with a few different methods, so far the most hopeful seems to be setting the "left:" value to the necessary percentage.
This brings up another issue though:
Issue: when I set the left value, I end up with a bunch of blank space to the right of the item that I can't seem to get rid of. Can't get the width right.
Code located here: https://jsfiddle.net/c6mz3t08/5/
HTML
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
CSS for dropdown
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
It seems the alignment problem happens because the <ul> starts after the word "About" in the second <li>.
a.) for positioning adjust the leftparameter in .horizontal li ul (-39px seems to work well).
b.) for the width of the submenus adjust the width parameter in .horizontal li ul li (70px worked well here, but depends on the content)
Do not guess on the left. The reason it is pushed to the right is because the ul has by default some padding.
Setting the padding to 0 and the left to 0 will fix this.
The space on the right is added because you set the width to 100%. If you remove the width it will fit its container. But that might not be what you want because the text will wrap, it might be better to set white-space:nowrap on it.
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}
Updated demo at https://jsfiddle.net/c6mz3t08/6/
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
I struggled for this issue for hours, but can't get it work still.
I have the html code like this :
<ul>
<li><div>aa</div><div>aa11</div><li>
<li><div>bb</div><div>bb11</div><li>
</ul>
I wondered how to use css to let the <div> display in one line each li. But the <ul><li> label still have its vertical style.
I am new to CSS, and any help will be thankful.
ul li{
display: table;
}
ul li div{
float: left;
}
This will make the <div> inside the <li> to look side by side.
You might also want to add
list-style-type: none;
in order to get rid of the bullet-points. In addition to what #Viswalinga Surya S said
Doing that, would give you this --> http://jsfiddle.net/A35Fe/
It looks like you forgot to close your <li> tags, you have opening <li> tags but you didn't close them with </li>. If you want to make aa and aa11 side-by-side you also need to add a display: inline-block; style to your divs. Here's a demonstration: http://jsfiddle.net/5wLku/
Here's my solution:
<ul>
<li><div>aa</div><div>aa11</div></li>
<li><div>bb</div><div>bb11</div></li>
</ul>
<li style="float:left"><div>aa</div><div>aa11</div></li>
and end your list items with
</li> not with <li>
I have Updated your code, Here is the JSFiddle link and let me know if you want more change:
http://jsfiddle.net/h5bMa
HTML:
<ul>
<li><div>aa</div><div>aaa1</div></li>
<li><div>bb</div><div>bbb1</div></li>
</ul>
CSS:
ul li{
float: left;
}
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
Within my #header #nav, I have a <ul> within an <li> that displays on li:hover. I want to put a border around everything but for some reason adding a border around the main <li> makes the <ul> within it fall out of alignment by one px on the left.
Here's a jsFiddle to show what I'm doing:
http://jsfiddle.net/Mh3Hg/
Here is my HTML:
<div id="header">
<div id="nav">
<ul>
<li id="thisli">Main Element
<ul id="children">
<li>First Child</li>
<li>Second Child</li>
</ul>
</li>
</ul>
</div><!-- end nav -->
</div>
The border that throws it off is the border-left:1px solid #99B3FF applied to li#thisli. Can anyone help me figure out what's wrong?
The inner ul was always inside the li. The border is something which is supposed to be around the content, so it is theoretically around the inner ul as well. If you explicitly define the position of the inner ul:
#nav li:hover ul {
display:block;
z-index:100;
left: 0px;
}
it is aligned: http://jsfiddle.net/Mh3Hg/4/