I want to make the horizontal boxes with the size of 200 x 200 pixel each. I decide to use the ul li. and you guys know well that I must apply the float:left attribute to the li tag to make it horizontal.
My problem is that when I apply the float:left to the li element, all content in li completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.
Here is my code
HTML :
<div class="content-box">
<h3 class="box-header">Recent Files</h3>
<ul class="horizontal-content">
<li>
<div class="filebox">
</div>
</li>
</ul>
</div>
and the css :
.content-box {
position:relative;
width:800px;
border:1px solid #dadada;
margin-left:10px;
padding:10px;
}
ul.horizontal-content {
list-style:none outside none;
}
ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}
.filebox {
position:relative;
padding:15px;
width:200px;
height:200px;
border:1px solid #dadada;
background-color:#ecf0f1;
}
Now you see all of my code, please help me figure out what I have done wrong.
You dont really need float:left to make it horizontal. Just add display:inline-block and remove float
ul.horizontal-content > li {
padding:10px;
background:grey;
display:inline-block
}
DEMO
Add:
ul.horizontal-content {
overflow: auto;
}
here use overflow:auto and here is link of demo Click Here
I have been trying many of the solutions but they won't solve. I will create the JSfiddle for you guys to see what went wrong
Okay, all problems are solved with clear:both
Related
I am going to create a cascading menu with divs, for example when an <a> hovered another div shows:
I can create it with li and ul but want to do it with div.
My problem: When mouse pointer is on <a> the div shows but when mouse pointer come to div, div will disappear (display:none;)
this is my demo
<div id="topDiv">
<img src="http://www.balit.ir/kgl/pic/user/logo.png" id="logo"/>
<div id="rightTopMenu">
<a href="about.html">About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
</a>
Contact KGL
KGL Website
KGL Gallery
</div>
My CSS:
body{
margin:0;
}
#topDiv{
position:absolute;
background: black;
}
#logo{
width:65px;
height:auto;
margin-left:40px;
}
#rightTopMenu{
float:right;
margin-top:20px;
}
#rightTopMenu a{
position:relative;
color: white;
display: inline-block;
text-align: center;
text-decoration:none;
width: 103px;
}
.hoverMenuDiv{
position:absolute;
top:40px;
background:#CAD20E;
display:none;
text-align:center;
width:130px;
}
#rightTopMenu a:hover, #rightTopMenu a:focus{
color:#CAD20E;
}
#rightTopMenu a:hover+.hoverMenuDiv{
display:block;
}
JSFiddle
In your CSS, you need
.hoverMenuDiv:hover{
display:block;
}
This ensures that when you hover over the div, it will stay there.
Also, in my JSFiddle, I've put your HTML to this:
About KGL
<div class="hoverMenuDiv">
About Samuel
About Hoshange
About GhochAli
</div>
You can't have <a> tags in <a>'s.
Here is a second JSFiddle with the previous work done, but also deleting top in .hoverMenuTop. I think it looks better this way and behaves how most websites would.
You have to add this when the user is inside menu.
.hoverMenuDiv:hover{
display:block;
}
also remove top from this class .hoverMenuDiv
fiddle
This selector is too broad. It is targeting ALL of your anchors.
#rightTopMenu a { ... }
You need to only select the immediate child:
#rightTopMenu > a {
Also, consider using an unordered list as your menu container, not nested A-tags.
See: http://www.dhtmlgoodies.com/?whichScript=dhtmlgoodies_menu3
Consider using the '>' selector instead of the '+' selector, like this:
#rightTopMenu:hover>.hoverMenuDiv{
display:block;
}
The '+' selector is used for finding subsequent tags, but .hoverMenuDiv is actually a child tag of #rightTopMenu.
See w3 schools for a quick reference on this.
I would like to do responsive centered list of boxes.
So I used text-align:center, but the last line is centered too:
http://jsfiddle.net/NWmpL/1/
I was trying to use additional wrapper which closely surrounds <li>, but only way which I know to "closely surround" content is using display:inline
http://jsfiddle.net/NWmpL/2/
but here text-align:left dont working
And width:200px should be flexible (because in my case it is browser width)
Is there any other way to "closely surround" content? Or is there any other solution ?
Thanks in advance.
More clearly: http://jsfiddle.net/NWmpL/6/
I want change this
to this
You should be using display:inline-block for layout, not display:inline.
display:inline is only intended for text content; if you have any block content inside the element and you want inline behaviour, you should always use inline-block instead.
So I went to your fiddle and changed the inline to inline-block.
Guess what.... that fixed the problem; it now looks the way you wanted.
See http://jsfiddle.net/NWmpL/8/
You could also consider using float:left to achieve this kind of layout, but since we've got a working answer with inline-block, I'll leave it at that.
Add
float:left;
to
.center li { }
FIDDLE
ul.center {
display: table;
margin: 0 auto;
width:250px; }
ul.center li {
display: block;
float: left;
width:75px; height:75px;
margin: 2px;
list-style: none;
background-color: #CCC; }
check the updated fiddle:
http://jsfiddle.net/4t6ha/2/
Try this different approach:
CSS:
.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}
ul
{
list-style:none;
}
li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}
I have a list of li's which has display:table-cell property in order to vertically center the text inside. I can not use additional markup for this. I can not use line-height as there may be multiple lines of text.
When I give the li's to display:table-cell property, they float next to each other.
How can I force them to be below each other, like they would with display:block? Or I can't?
http://jsbin.com/orijam/1/edit
li {
height:50px;
border:solid black;
vertical-align:middle;
min-width:100px;
display:table-cell;
}
ul {
border:solid red;
width:100px;
display:inline-block;
}
Set the li:s to table-row and move the table-cell styling to your a elements (assuming you have a ul li a setup)
(written on phone)
Edit: http://jsfiddle.net/Z7Sgg/
Edit2: If you're missing the a:s you could add them (or a span) using JS:
$(function () {
$('#menu li').wrapInner('<span></span>');
});
Use display:table instead of display:table-cell. It will work.
Use a span tag instead.
<li><span>li</span></li>
<li><span>li</span></li>
Here is the solution.
The HTML:
<ul>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
<li><span>li</span></li>
</ul>
The CSS:
span {
height:50px;
border:solid black;
min-width:100px;
vertical-align:middle;
display:table-cell;
}
ul {
border:solid red;
width:100px;
display:inline-block;
}
ul li {display:block;}
By inseting a span tag inside the li, you can make sure that you can keep the vertical alignment middle for the li's as well as make them appear to be block.
Hope this helps now.
ive got a list set up with a background image set to the left of each of the lines of text
although they dont seem to line up, i put a span around the text to try and reposition the text but it didnt seem to work
heres the code im using..
HTML
<ul class="price-features">
<li><span>One page website with contact form</span></li>
<li><span>Social Media Integration</span></li>
<li><span>One year hosting + Domain registration</span></li>
</ul>
CSS
.price-features{
margin-top:30px;
}
.price-features li{
background-image:url(/images/prices/orange-arrow.png);
background-repeat:no-repeat;
background-position:left;
padding-left:15px;
height:30px;
border-bottom:#999 1px solid;
background-color:#996;
}
.price-features li span{
padding-top:5px;
}
http://i.stack.imgur.com/rV1LM.png
Padding only affects block-level elements. You'll need to either change your span to be a block-level element or override the default display to be block or inline-block.
.price-features li span{
display: block;
padding-top:5px;
}
I would like to align the text and input in the LI to be horizontaly aligned with the menu on the left. Here how it looks.
I need the newsletter to be align with the menu on the left.
CSS
#footer .div1{
float:left;
}
#footer ul{
list-style:none;
}
#footer li{
float:left;
padding-left:20px;
font-size:18px;
}
#footer li:first-child{
padding-left:0px;
}
HTML
<div id="footer">
<div class="div1">
<ul>
<li><b>WE ♥ TO NETWORK</b></li>
<li>FACEBOOK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>NEWSLETTER : <input type="text" name="email" id="emailNl" style="font-family:arial; width:200px; margin:0px; padding:0px;"/> <span id="submitNl" style="cursor:pointer">OK</span></li>
</ul>
</div>
<div style="clear:both"></div>
</div>
Thanks
IMAGE UPDATED!
With padding and margin 0px it's almost there but you can notice a slight difference. :S
UPDATE 2
By changing the float:left of my LI to display:inline-block, now the text is align but the input seems to be like padding-top 2px too much ... I think i'll tweak this to make it fit and see through each browsers.
Your problem is caused by float: left;. Replace it with display: inline-block; and you'll be fine.
Try it yourself: inline-block vs float:left
Try putting it in a jsfiddle. It looks to me like the input tag is trying to put some padding/margin (oh how I always forget which is which) around itself. Try setting those to 0px.
try reset the padding and margin of the element and try vertical-align property - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
although, I tested, they align just perfectly as it is. below is the preview from firefox
You can try
#footer ul {
list-style: none outside none;
margin: 0;
overflow: auto;
padding: 0;
}
input[type=text]{
padding:0;
margin:0;
}
see if it works.
Don't know if this will look good but this sure does the job.
#emailNl{
margin-top:-3px;
}