I have an unordered list used for navigation tabs. I want them to have space between them but I also want the beginning of the list to line up with the rest of the text to the left.
I know this is simple but I can't figure it out.
http://jsfiddle.net/29g9S/3/
<body>
<div class="page-box">
<p>I am trying to get the ul's li's to line up with the "My Blog" text and still flow with the document</p>
<h1>My Blog</h1>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
CSS
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
left:0px;
}
ul>li{
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
The key is killing the margin / padding on the ul:
.page-box{
position:relative;
left:50px;
}
ul{
position:relative;
margin:0;
padding:0;
}
ul>li{
display:inline-block;
position:relative;
margin:0 100px 0 0;
list-style-type:none;
}
Here is an updated jsFiddle. Notice the use of display:inline-block; instead of float:left;. Floats are a one way ticket to old webville! Embrace the wonder that is display:inline-block! :D
If i understood correctly css can be modified as follows,
http://jsfiddle.net/fTdHH/
ul{
position:relative;
left:0px;
padding:0px;
}
ul>li{
float:left;
position:relative;
/* margin-left:100px; */
margin-right:100px;
list-style-type:none;
}
Set
ul {
margin: 0;
padding: 0;
}
ul>li {
// no margin-left
margin-right: 100px;
}
http://jsfiddle.net/beautifulcoder/29g9S/8/
PlantTheldea is right about the margin/padding on the ul. If you want to keep the list items floated with margin-left, just remove the margin-left from the first list-item by using li:first-child:
.page-box {
position:relative;
left:50px;
}
ul {
margin:0;
padding:0;
position:relative;
left:0px;
}
ul>li {
float:left;
position:relative;
margin-left:100px;
list-style-type:none;
}
ul>li:first-child {
margin-left:0;
}
Also, is there are reason you're using position:relative on everything rather than just adding margin or padding to .page-box?
Related
I have a undefined list with 6 items. I want to organize these items in 2 columns, odd in left, even in right side, regardless the item content height.
CSS basically:
ul li
{
list-style:none;
width:270px;
background:#eee;
margin-bottom:10px;
padding:10px;
display:inline;
}
ul li:nth-child(odd)
{
float:left;
}
ul li:nth-child(even)
{
float:right;
clear:right;
}
Here's the example: http://jsfiddle.net/cbacelar/x9jLdg8k/
You can simply use display: inline-block without float. Just make your LI width: 50%.
http://jsfiddle.net/x9jLdg8k/2/
Changed your ul li rules to the following: Added width:50% as well.
ul li
{
list-style:none;
width:50%;
background:#eee;
margin-bottom:10px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
clear:both;
}
I have a CSS design problem for a day and a halve now and it is driving me nuts. I have an horizontal navigation bar with a single unordered list inside. Each list item contains an anchor (or hyperlink) to a page within the website, the CSS is as follows:
nav#main{
background:#000;
width:100%;
overflow:auto;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:auto;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
}
nav#main a:hover{
background:#EF7E05;
background-clip:padding-box;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
And the HTML:
<nav id="main">
<ul>
<li>Link text</li>
<li>Link text</li>
<li>Link text</li>
</ul>
</nav>
<div id="contentArea">
<!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. -->
</div>
This works all like it should work.
However what i am trying to accomplish is that the border image is displayed outside the nav bar and that it doesn't push the contentArea downwards a 25px. Any ideas?
I also tried to absolute position a block with a.hover::after. This works beautifully, however the width of the block cannot be set equal to a. Perhaps any ideas on this one too?
You need to clear your floated elements using a clear rather than overflow:visible
If you do this you can use your absolute positioning to create the border:
nav#main{
background:#000;
width:100%;
}
nav#main:after {
content:'';
display:block;
clear:both;
}
nav#main ul{
list-style:none;
}
nav#main li{
float:left;
display: block;
overflow:visible;
}
nav#main a{
display:block;
padding:1em;
color:#FFF;
text-transform:uppercase;
font-size:1.6em;
position:relative;
overflow:visible;
}
nav#main a:hover{
background:#EF7E05;
}
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
border-width:0 0 15px 0;
border-image:
url('../images/nav.png')
0
0
25
stretch;
}
Example
I have noticed that the border image thing doesn't work in firefox or ie so this will give you the same effect and is more browser friendly:
nav#main a:hover:after{
background-clip:padding-box;
content:'';
position:absolute;
top:100%;
left:0;
right:0;
height:15px;
background: url('../images/nav.png') left top no-repeat;
background-size: 100% 15px;
}
Example
Trying to vertically align text for the buttons in the middle, however i want entire button are to be a link (not just text) so i stretched the anchor tag, now i cannot vertically align text anymore even if i wrap it in another tag still does not work for some reason.
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
border-spacing:15px;
width:100%;
display:table;
}
li {
display:table-cell;
background-color:#ccc;
height:75px;
text-align:center;
}
a {
width:100%;
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
}
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
ABOUT<HR/>US
</li>
<li>
NEW<hr/>EVENTS
</li>
</ul>
Key points:
I like to keep buttons auto stretch to the page width like it is now.
I like to have entire button area to be click able not just text.
I like to keep unordered list for menu structure as its semantically correct for menu
http://jsfiddle.net/vWrE8/
Final Result Should look like this http://i.stack.imgur.com/kKEc8.png
In my opinion wrapping text inside anchor tag with div is a way to go and then valign-middle, however i cannot make it work.
Here is one solution that may work for you:
Demo Fiddle
You need to remove the disiplay:block from the anchor tags, and vertically align them throught he li element.
CSS
li {
// other styles here
vertical-align: middle;
background-color:#FCF; //<-move the bg to here
}
a {
// other styles here
// display:block;
// background-color:#ccc;
}
I don't think this is achievable without wrapping the multi-line texts in another element, but once that's done, it's quite straightforward. Assuming that wrapper element is a div, just add
a div {
display:inline-block;
width:100%;
vertical-align:middle;
}
a:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
As per http://jsfiddle.net/vWrE8/9/
BadAdviceGuy's solution is good, but given you want whole block to be clickable, you can try fluid padding for the anchor tags. Fiddle
CSS:
a {
width:100%;
height:100%;
display:block;
padding: 50% 0;
text-decoration:none;
opacity:0.5;
}
This is as close as I can get to what you want: http://jsfiddle.net/vWrE8/6/
Only works for one line break, after that it falls apart... =/
* {
margin:0;
padding:0;
}
hr {
border:0;
height:1px;
background-color:#000000;
}
ul {
width:100%;
list-style:none;
}
li {
display:inline-block;
vertical-align:top;
background-color:#ccc;
min-width:110px;
height:75px;
text-align:center;
margin:0px 10px;
}
a {
height:100%;
display:block;
background-color:#FCF;
text-decoration:none;
opacity:0.5;
line-height:2em;
}
a span {
position:relative;
display:block;
line-height:1em;
top:30%;
}
<ul>
<li> <span>HOME<span></li>
<li><span>ABOUT<span></li>
<li><span>ABOUT <HR/>US<span></li>
<li><span>NEW <HR/>EVENTS<span></li>
</ul>
what im trying to do is have a vertical list with a solid border on the left side, but with 1 or 2 px space between each li. I can't use margin-bottom because then the border would break. I'm ultimately trying to have a list with a solid color on it's left side(no spaces), and when i hover the individual li for it to actually go left, over the existing border.I'm not set about using borders, but i've tried to do it with a wrapper div and i just can't seem to get it right, so any suggestions are welcome :)Oh and the vertical list is gonna be changing in height, so just putting a div as a background without having the height to auto to the list element is a no go.Heres the working link http://jsfiddle.net/hDHDF/ and i have the following code
<div id="menu">
<ul class="menu">
<li class="openmaincategory"><span>###</span></li>
<ul class="categories">
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
</ul>
<li class="maincategory"><span>###</span></li>
</ul>
</div>
and the corresponding css:
#menu{
position:absolute;
right:0px;
left:0px;
top:120px;
height:auto;
width:190px;
margin-top: 35px;
margin-left:67px;
}
.menu {
list-style-type:none;
padding-right:10px;
color:#6c6762;
}
.maincategory{
background-color:#ada397;
height:40px;
}
.openmaincategory{
height:40px;
background-color:#ada397;
}
.menu li a{
display:inline-block;
height:100%;
width:100%;
}
.menu li{
border-left:solid #6c6762 40px;
}
.menu li:hover{
border-left:solid #6c6762 20px;
padding-left:10px;
}
.menu span a{
color:#5b5856;
font-size:20px;
padding-left:4px;
padding-top:6px;
}
.menu a{
text-transform:none;
text-decoration:none;
color:#6c6762;
}
.subcategory {
background-color:#d7d1c9;
height:40px;
}
It sounds like you want to use padding rather than margin. I set up an example here based on your code.
Key parts are moving the subcategory class to the span from the li and adding the .last so you can play around with final spacing.
.categories li span{
background-color:#d7d1c9;
height:40px;
padding-top:2px;
}
.subcategory .last{
padding-bottom:2px;
}
Update with the padding for the anchor on the last li.
Have the border on the list itself, not on the list items.
I fixed it by adding the border to the list itself and making the hover effect margin-left:-20px.
I can't seem to figure out how to get 6 list items (with spacing) to horizontally align evenly across the site. The width of the page is 1000px, this is what I have...
<ul id='mp_locations'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
#mp_locations {
clear:both;
list-style:none;
padding:0;
margin:0;
width: 1000px;
}
#mp_locations li {
float:left;
width:180px;
list-style:none;
height:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
padding:0;
margin:0;
margin-left:10px;
width:15%;
}
#mp_locations li:first-child {
margin-left:0;
}
</style>
The issue with this is that 15% is too small but 16% is too big. Since you can't do decimals (to the best of my knowledge) I can't set it to a set amount. So basically, how can I get 6 boxes to line up evenly across the page?
Hey now define with of your id #mp_locations li 15.83%
#mp_locations li {
width:15.83%;
}
live demo http://tinkerbin.com/kzx7nX9s
you can do decimals :) http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html
there are two width rules in #mp_locations li
you could change it to
#mp_locations li {
float:left;
width:156px;
list-style:none;
....
margin:0;
margin-left:10px;
And I advice you to change the margin too:
margin: 0px 5px;
dont repeat same style attribute un necessarily. you can get the desired output just by changing margin-left see below:
css
#mp_locations {
clear:left;
list-style-type:none;
padding:0;
margin:0;
width: 1000px;
background-color:red;
overflow:hidden;
}
#mp_locations li {
float:left;
height:100px;
border-radius:5px;
background-color: #F5F5F5;
margin-left:8px;
width:16%;
display:inline;
}
#mp_locations li:first-child {
margin-left:0;
}
html
<ul id='mp_locations'>
<li>d</li>
<li>f</li>
<li>d</li>
<li>ff</li>
<li>fff</li>
<li>ddfdfdfd</li>
</ul>
Working DEMO