My HTML:
<div id="content">
<ul>
<li>first list---ipsum ipsum ipsum<li>list inside list....ipsumipsumipsumipsum</li></li>
<li class="last">last list content--ipsumipsumipsumipsum</li>
</ul>
</div>
My CSS:
#content{
padding:30px 0 25px 0;
}
#content ul{
display:inline;
margin:0;
padding:0;
list-style:none;
}
#content li{
display:block;
float:left;
width:500px;
margin:0 45px 0 0;
}
#content li.last{
width:290px;
float:right;
}
The output I get is list with 'last' class comes parallel to the list inside the first list. My intention is to get it parallel with the first list.
Demo
Use a negative margin on .last.
http://jsfiddle.net/calder12/eXFYY/
Like that? You're floating the last list element right, what did you expect to happen exactly?
#content li.last{
width:290px;
float:left;
}
And yeah looking closer at the HTML that is messed up, you shouldn't have list elements inside list elements. You can however have another list inside a list element like this:
<ul>
<li>Something
<ul>
<li>Something else</li>
</ul>
</li>
</ul>
If you change your CSS to this, it does what you want.
#content ul{
display:inline;
margin:0;
padding:0;
list-style:none;
position relative;
}
#content li{
float:left;
width:500px;
margin:0 45px 0 0;
}
#content li.last{
width:290px;
position:absolute;
top:0;
right:0;
clear:both;
}
put these code into #content li.last style
position:absolute;
top:30px;
margin-left:300px;
Your code works fine just change html like this as #ZoltanToth said and reduce li width
<div id="content">
<ul>
<li>first list---ipsum ipsum ipsum
<ul>
<li>list inside list....ipsumipsumipsumipsum</li>
</ul>
</li>
<li class="last">last list content--ipsumipsumipsumipsum</li>
</ul>
</div>
http://jsfiddle.net/xBEQc/1/
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
For some reason there are horizontal gaps between the <li> elements in this example, and I simply cannot fathom why they are there.
Markup
<ul>
<li>
Stuff
</li>
<li>
Things
</li>
<li>
/dev/null
</li>
<li>
Use Jquery!
</li>
</ul>
CSS
ul {
margin:0;
padding:0;
height:50px;
}
ul > li {
display:inline-block;
background-color:silver;
height:100%;
width:20%;
max-width:300px;
list-style-type:none;
text-align:center;
line-height:50px;
}
What is causing these gaps?
ul {
margin:0;
padding:0;
height:50px;
}
ul > li {
display:inline-block;
background-color:silver;
height:100%;
width:20%;
max-width:300px;
list-style-type:none;
text-align:center;
line-height:50px;
}
<ul>
<li>
Stuff
</li>
<li>
Things
</li>
<li>
/dev/null
</li>
<li>
Use Jquery!
</li>
</ul>
Those are whitespaces generated by the line breaks in the HTML source.
Remove them like so:
<ul>
<li>
Stuff
</li><li>
Things
</li><li>
/dev/null
</li><li>
Use Jquery!
</li>
</ul>
or put comments between them:
<ul>
<li>
Stuff
</li><!--
--><li>
Things
</li><!--
--><li>
/dev/null
</li><!--
--><li>
Use Jquery!
</li>
</ul>
Add
float:left;
to ul > li to remove the gap.
ul {
margin:0;
padding:0;
height:50px;
}
ul > li {
display:inline-block;
background-color:silver;
height:100%;
width:20%;
max-width:300px;
list-style-type:none;
text-align:center;
line-height:50px;
float:left;
}
<ul>
<li>
Stuff
</li>
<li>
Things
</li>
<li>
/dev/null
</li>
<li>
Use Jquery!
</li>
</ul>
I prefer doing like this:
https://jsfiddle.net/8acpf2jt/1/
ul {
margin:0;
padding:0;
height:50px;
}
ul > li {
display:block;
position: relative;
float: left;
background-color:silver;
height:100%;
width:20%;
max-width:300px;
list-style-type:none;
text-align:center;
line-height: 3em;
margin: 0;
padding: 0;
}
so, I think padding was the deal and display type.
Im trying to have 3 columns with lists horizontally with margin-right.
And Im almost get it, but Im having some problem aligning my #col3 at right.
Im trying with float:right, but dont works, but works with float:left, but I guess its not correct because when I do this #info #col3 {width:200px; float:left;} and then give background:color to my #info, my div dont contains what was supposed to. So there is some kind of conflict.
Do you know a correct way to do this??
here is my issue: http://jsfiddle.net/tvj4C/
Here is my code:
html:
<div id="page-content">
<h1>Title of the post</h1>
<img src="../image1.jpg" width="700px" height="360px" />
<div id="info">
<h2>Info</h2>
<ul id="col1">
<li>Adress 1</li>
<li>Adress 2</li>
</ul>
<ul id="col2">
<li>Phone 1</li>
<li>Phone 2</li>
</ul>
<ul id="col3">
<li>Email 1</li>
<li>Email 2</li>
</ul>
</div>
<div id="clear"></div>
<div id="content">
<h2>Subtitle of the post</h2>
<p>Content of the post.</p>
</div>
CSS:
#page-content
{
float:left;
width:700px;
font-size:16px;
}
#page-content h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}
#page-content ul
{
list-style:none;
}
#page-content ul li
{
font-size:17px; margin-top:7px; text-decoration:none;
}
#info
{
margin:10px auto;
background:yellow;
}
#page-content h2
{
font-size:22px; color:#444; font-family:'bariol_boldbold'; font-weight:100;
}
#info #col1
{
float:left;
width:200px;
margin-right:50px;
}
#info #col2
{
float:left;
width:200px;
margin-right:50px;
}
#info #col3
{
width:200px;
}
#info ul li a
{
text-decoration:none;
color:#000;
margin-left:10px;
}
#content
{
margin-top:5px;
background-color:red;
}
#content p
{
font-size:16px;
line-height:25px;
text-align:justify;
}
#clear
{
clear:both;
}
display: inline-block;
I think that no more comment is needed here ;).
http://jsfiddle.net/tvj4C/1/
You should also read about display: table, and display: table-cell. And if you will use display: table, remember about vertical-align property for each table-cell.
BTW: Question is a little bit complicated, so if this answer didn't hit the point, please update question and I will update answer ;).
different solution without inline-block
with the use of float:left;
http://jsfiddle.net/tvj4C/2/
The issue isn't
float: left vs display: inline-block.
You set
#page-content { width: 700px; }
which is too narrow because your ul's have a default left padding pushing them wider than the 200px you specified.
I updated your original code here: http://jsfiddle.net/97PHv/1/
So, I have a navigation bar. I want each link text to grow and bold when on hover. I have achieved this using css, but now whenever teh mouse hovers over the link the text size grows,b ut so does the div to accomodate that text. Any ideas on how to fix this. Here is the jsfiddle link:
jsfiddle
CODE:
<!DOCTYPE html>
<body>
<div id = "navigation">
<ul id = "nav">
<li>Home</li>
<li>Our Team</li>
<li>Gallery</li>
<li>Community</li>
<li>FIRST</li>
</ul>
</div>
</body>
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
padding:0 6%;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
To fix the horizontal pushing:
Instead of using padding to space the items apart, one solution is to use width and text-align: center; so that the items don't push the other items after them.
To fix the vertical pushing:
One solution is to specify a line-height equal to the largest font-size (which would be your :hover size)
#navigation{
background-color:black;
width:98%;
font-family:calibri;
padding:1%;
margin-left:0px;
position:absolute;
top:0;
left:0;
display:block;
}
#nav{
list-style-type:none;
}
ul#nav li{
float:left;
width: 15%;
text-align: center;
}
.navlink{
display:block;
background-color:black;
text-decoration:none;
color:white;
line-height:14pt;
}
.navlink:hover{
font-weight:bold;
font-size:14pt;
}
<!DOCTYPE html>
<html>
<body>
<div id = "navigation">
<ul id = "nav">
<li>Home</li>
<li>Our Team</li>
<li>Gallery</li>
<li>Community</li>
<li>FIRST</li>
</ul>
</div>
</body>
</html>
Add a max-height: 30px; to #navigation.
In general, if you are looking for something that transform shape/size aesthetically, it's easier to work with min/max width in pixels, rather then %.
So I've got some simple code here:
<div id="nav">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
CSS-
ul
{
list-style-type:none;
width:700px;
height:44px;
padding:0;
}
li
{
float:left;
margin:0;
padding:0;
width:80px;
height:auto;
}
a
{
height:40px;
text-decoration:none;
border:2px solid black;
background:blue;
}
-#nav
{
width:786px;
height:66px;
border:2px solid black;
background:#C4BD97;
margin:5px;
}
This code should force my a tags to align themselves horizontally and give them a definite height/width. They align perfectly, but their height and width WILL NOT change no matter what I do. Never ran into this problem before, is my HTML broken? Thanks.
display: inline elements do not respect height. Change them to display: inline-block (or perhaps block) or use line-height to alter the height.
http://jsfiddle.net/kHkyh/
Try setting the height and/or width on the anchor tags in the li. That is, push out the li using the anchor tags. You can do this in a decently uniform way using padding to make sure the entire area of the anchor is clickable. Also, this approach works back to I believe ie6(not sure about ie5, have not tested it). Following is roughly what I'm talking about:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body, #menu, #menu li
{
position: relative;
display: block;
padding:0px;
margin: 0px;
}
#menu
{
list-style-type:none;
width:100%;
}
#menu a
{
position:relative;
display:block;
float:left;
width:25%;
padding:10px 0px 10px 0px;
text-align:center;
}
</style>
</head>
<body>
<ul id="menu">
<li>One item</li>
<li>Another item</li>
<li>hola</li>
<li>Hi</li>
</ul>
</body>
</html>
This is my simple code of menu
<ul id="admin-ul">
<li id="admin-li" class="no1">Dodaj informacije za sdf dsf dsfdddd</li>
<li id="admin-li" class="no2">Pregledaj</li>
<li id="admin-li" class="no3">Veterinari</li>
<li id="admin-li" class="no4">Logout</li>
</ul>
and CSS
ul#admin-ul
{
list-style-type:none;
margin:0;
padding:0;
}
li#admin-li
{
display:inline-block;
width:24%;
height:270px;
}
ul li a
{
display:block;
height:270px;
line-height:270px;
text-align:center;
}
I would like to know how to wrap my text because it is showing like this
Simply use vertical-align: top on your <li>s. Please note that all ids must be unique so this is invalid HTML:
<li id="admin-li" class="no1"></li>
<li id="admin-li" class="no1"></li>
You can style all <li>s more easily using the child selector like this:
ul#admin-ul > li {
/* other li rules */
vertical-algin: top;
}
You can than update your list to this:
<ul id="admin-ul">
<li class="no1"></li>
<li class="no1"></li>
</ul>
Final demo: http://jsfiddle.net/eXKdG/
Update
As I didn't notice the vertical centering of the text within the block level <a>-tag: tesdki is right in simply using display: table-cell; on the <a>-tags.
Try this out:
ul#admin-ul
{
list-style-type:none;
margin:1em 0 0 0;
padding:0;
}
li#admin-li
{
display:table;
width:24%;
position:relative;
float:left;
overflow:hidden;
height:270px;
margin: 0 3px;
}
ul li a
{
display:table-cell;
vertical-align:middle;
height:270px;
text-align:center;
}
Derived from here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
This doesn't work in IE7 standard mode, but pretty much everything else is good.