I need to have an UL on the right side of a SPAN (http://jsfiddle.net/Shg9L/8/).
When the width is not enough I would like the UL to keep being on the right side of the SPAN but the LI items to start stacking ...
The problem is that when I resize down the window the UL goes under the SPAN.
The code I currently have is (http://jsfiddle.net/Shg9L/8/):
HTML
<div>
<span>Categories</span>
<ul>
<li>Book</li>
<li>Computer</li>
<li>Tablet</li>
<li>Toy</li>
<li>Music</li>
<li>Audio</li>
<li>Game</li>
</ul>
</div>
CSS
div {.clear;}
div span {
background-color: #E0E0E0;
float: left;
margin-right: 8px;
margin-bottom: 8px;
padding: 8px;
}
div ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
.clear;
}
div ul li {
background-color: #F0F0F0;
float: left;
margin-right: 8px;
margin-bottom: 8px;
padding: 8px;
}
.clear:after {
content: "";
display: table;
clear: both;
}
Does anyone knows how to solve this?
Thank You,
Miguel
Fiddle
remove float:left; in your div ul
You can use div {white-space:nowrap;} to make sure it doesn't break on the contents of the div. The ul has display:inline-block; instead of float: left;. Float left makes it go to the left, leaving the flow of the text, and inline-block still keeps it in the flow of the text, while not taking up a new line.
demo
Related
Well, I want this text to be up the top roughly 20 PX from the top of the wrapper (background color) I did the margin up there but nothing happened if anyone can help it will be greatly appreciated.
CODE
.wrapper {
background-color: #01172c;
}
.footerid {
list-style: none;
}
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
}
.footerid h3 {
padding-top: 20px;
margin-top: 20px;
}
<footer>
<div class="wrapper">
<ul class="footerid">
<li><img src="logo-f.png" style=" width:80px; height:105px;"></li>
<li><h3>lol</h3></li>
</ul>
</div>
</footer>
Run the code sample in full screen to see properly.
You have to indicate the li element about the vertical-align which I would set to top for this case
Please see https://jsfiddle.net/4zr9j3eg/
I have also disabled the padding property for your h3 element which will sumup the margin that make the text distance from the top to 40px
Also I changed the text-color to color: #fff; for debug easier
As a general tips, you can set the wrapper to position: relative;
By doing this you can easily "control" the elements (children) inside the parent (in this case, the wrapper) with position absolute.
Example:
#wrapper {
position:relative;
}
#wrapper .child {
position: absolute;
top: 20px;
}
Apply vertical-align: top to <li>:
.footerid li {
padding-left: 125px;
padding-top: 20px;
padding-bottom: 20px;
display: inline;
display: inline-block;
vertical-align: top;
}
and remove padding and margin from .footerid h3.
I have a unordered list, which is inside a div element. The goal is to make list elements fill the <div> from one side to the other perfectly.
Right now the left side is positioned just as I need, but I need the right side to look the same way. Hopefully you get the idea of what I mean.
Fiddle
HTML code:
<div id="currency">
<ul>
<li>Currency £</li>
<li>Sign in</li>
<li>My Account</li>
<li>My Gifts</li>
<li>My Basket</li>
</ul>
</div>
CSS code
#currency{
height: 11px;
width: 360px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 11px;
text-align: justify;
}
#currency ul{
list-style-type: none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
}
#currency ul li{
display: table-cell;
}
I think want you want to achieve is using text-align properly.
#currency ul li{
text-align: center;
}
#currency ul li:first-child {
text-align: left;
}
#currency ul li:last-child {
text-align: right;
}
Fiddle
Try the flexbox model since it's meant for situations like this:
The flex CSS property is a shorthand property specifying the ability
of a flex item to alter its dimensions to fill available space. Flex
items can be stretched to use available space proportional to their
flex grow factor or their flex shrink factor to prevent overflow.
#currency {
width: 500px;
background-color: green;
float: right;
margin-top: 11px;
margin-right: 11px;
line-height: 11px;
font-size: 14px;
text-align: justify;
padding:10px;
vertical-align:middle;
}
#currency ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content:center;
width: 100%;
}
#currency ul li {
flex-grow:2;
text-align:center;
margin:3px;
background:#fc0;
height:20px;
padding:5px;
}
See fiddle
All colors, paddings and margins were added in order to show how it works since your tiny example is very difficult to see
I would like to use the full width of the UL-element for the floated LI-elements. Is this somehow possible with using %-values for the padding of the LI-elements? I can't use a fixed width for the LIs, since the content is not the same lenght.
This is my HTML code:
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>...</li>
</ul>
And here comes my CSS:
ul {
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
background-color: blue;
}
li {
float: left;
padding-left: 3%;
padding-right: 3%;
background-color: #dd0000;
border-left: 1px solid #ffffff;
}
li:hover {
background-color: #ff0000;
}
Find the example at JsFiddle: http://jsfiddle.net/6Uy4y/
So the red LI-elements should end, where the blue UL ends, even when changing the width of the UL.
Thanks for pointing me into the right direction!
It looks like this is the start of tabular data. I'd use a <table>. If I'm mistaking, you can fake a table with CSS.
ul {
display: table;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
li {
display: table-cell;
padding: 0 3%;
}
Here's a quick little demo: http://jsbin.com/iwacum/1/edit
I'm trying to build a HTML/CSS dropdown menu which is flexible in width. Due to the position:absolute for the second level of the navigation, I don't get the width of the first level. Removing the position:absolute will move all following elements on hover...
How can I solve this?
Here is the code:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
<ul class="level_1">
<li>
Level one (1)
<ul class="level_2">
<li>Level two (1)</li>
</ul>
</li>
<li>Level one (2)</li>
</ul>
<p>Paragraph</p>
See the result here: http://jsfiddle.net/5uf2Y/
Hover "Level one (1)" and you will see, that the second level is not the same size like the first level...
You have forgotten two elements for display 100%.
Correction here
1st elements forgets it's :
Position relative on level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
**position:relative;**
}
2nd elements corrections it's :
change size of 2nd li
.level_2 {
display: none;
position: absolute;
width: 100%;
}
With "width:100%" on .level_2 it automatically turns out with the width of its parent.
Add position:relative to level_1 > li
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
position:relative;
}
Try to set the body { width:100%;} property, it will fix this issue, like shown below (added to your original CSS):
body{ width:100%;}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}
Hey man you have a margin of 6px on your first row li thats why its a little bigger. I would use a margin left rather than right. That should fix the spacing.
I am trying to build a simple horizontal list, where each list item is a div and I want them all to sit next to one another. When I try to use the code below though, the divs end up on separate lines. Here's what I've got:
HTML:
<ul id="navlist">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>
CSS:
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
I have tried to give my divs a max width and a width but that doesn't work either. Basically, they show up without bullet points on separate lines.
Some help on fixing this would be very appreciated, thanks!!
#navlist li { display:inline }
#navlist div { display:inline }
Making the <li> inline while leaving the <div> as block is your problem.
Alternatively, you may want inline-block for the <li> if you are going to be controlling sizes or margins.
You may also be interested in this demo: http://phrogz.net/JS/ul2menu/purecss_testsuite.html
I'm not sure why you have <div> inside your <li>, but I presume you have your reasons.
CSS
* {
margin: 0;
padding: 0;
}
ul {
background: #48D;
height: 35px;
line-height: 25px;
width: 300px;
}
li {
float: left;
list-style-type: none;
margin: 5px 0 0 5px;
}
li div {
background: #6AF;
padding: 0 5px;
}
HTML
<ul>
<li><div>Text</div></li>
<li><div>Text</div></li>
<li><div>Text</div></li>
</ul>
Each div inside the list items is displayed as a block by default. Display them inline as well and it should work.
#navlist div, #navlist li
{
display: inline;
}
#navlist li
{
list-style-type: none;
padding-right: 20px;
}
Try float: left; on the list items, perhaps something like that:
#navlist li
{
float: left;
list-style-type: none;
padding-right: 20px;
}
Also, make sure to specify a height to the ul because the elements will go out of the flow, meaning that the ul won't have any height. You can also use a clearfix to fix this behavior:
.clear:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear
{
display: inline-block;
}
html[xmlns] .clear
{
display: block;
}
* html .clear
{
height: 1%;
}
You just add class="clear" to the <ul>. Google clearfix css for more infos :)