I want to do items style like here
and I'm doing it with UL. Here is the code what I have http://jsfiddle.net/WVLR9/1/
ul.gallery_items {
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li {
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-left: 19px;
}
ul.gallery_items li:first-child {
margin-top: 25px;
margin-left: 0px;
}
but I have no idea why the 4th item have bigger margin-left option... it should be in the same place like 1st item but in the second line. Can anyone help me?
http://jsfiddle.net/WVLR9/2/
You put margin-left: 19px on the li's rather than margin-right.
Margin left was causing the 4th row to be a certain margin away from the left border
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px;
}
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
You are explicitly giving the first item a different left margin:
ul.gallery_items li:first-child{
margin-left: 0px;
}
ul.gallery_items li{
margin-left: 19px;
}
4th item has the same margin as other items, you just removed margin from the first item:
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
and it looks like something is wrong with 4th element;
You could use margin-right instead of margin-left
You could wrap each row with additional <div class="row">
You could remove margin-left: 0 form the first element, and give margin-left: -19px to the parent element
how about this :)
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px; /* maybe you will need to adjust your margin on the ul element. */
}
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 10px;}
this should do it.
You've applied a
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
thats why first item didnt have left margin
Related
How to set fit-content for width in right side. I used fit-content value for width and every things Okay in left side, but in right side content put in center of page. I use this CSS for make dynamic width by content:
.chat li.right .chat-body {
margin-right: 60px;
border: 1px solid $c-grey;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
margin-left: 20%;
max-width: 80%;
width: fit-content;
}
It's my chat example:
CodePen Example
Replace with my give code.
.chat li.left .chat-body {
margin-left: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-right: 20%; */
max-width: 80%;
width: fit-content;
float: left;
}
.chat li.right .chat-body {
margin-right: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-left: 20%; */
max-width: 80%;
width: fit-content;
float: right;
}
and:
.chat li small.pull-left {
padding-left: 60px;
padding-top: 5px;
clear:both;
}
.chat li small.pull-right {
padding-right: 60px;
padding-top: 5px;
clear:both;
}
Working Demo
I'm having issues with getting this code player in progress to look proper:
http://invigorateme.net/viperbox.html
When I hover over a list item (the list items are the four tabs on top), the background changes, but it doesn't fill the space for the two on the sides. I was trying to learn from another source code, but I just couldn't get the tweaking quite right, and am still having issues.
The Question: How can I make it so when you hover over a list item, the background changes and fits the background?
If you go to my site link, you'll see what I mean when you hover over one of these elements. It simply changes color, but not as I expected.
Here's the relevant CSS behind it, let me know if it's horrendous and what I can do better, I'm still learning:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
border: 2px solid #B7B7B7;
border-radius: 10px;
margin: 0px auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0px auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0px;
padding: 7px 5px 0px 5px;
border-right: 2px solid #B7B7B7;
}
#codetabs li:hover{
background-color: grey;
}
If anyone thinks I might have left out any important code or info, let me know that as well. I didn't believe the HTML was necessary.
Basically your problem is that your list items are all rectangles that are contained in a pill shaped box (id="codetabs"). If you want the background color to fill each button, you're going to need to use some pseudo classes (:first-child and :last-child) to specify border radius values on your first and last li items.
This is the working CSS:
#codetabs{
width: 197px;
height: 30px;
position: relative;
top: 8px;
background-color: white;
margin: 0 auto;
padding: 0;
}
#codetabs ul{
height: 50px;
position: relative;
margin: 0 auto;
padding-left: 5px;
}
#codetabs li{
text-align: center;
float: left;
height: 23px;
list-style: none;
margin: 0;
padding: 7px 5px 0px 5px;
border-width: 2px 2px 2px 0;
border-color: #B7B7B7;
border-style: solid;
}
#codetabs ul :first-child {
border-radius: 10px 0 0 10px;
border-left-width: 2px;
}
#codetabs ul :last-child {
border-radius: 0 10px 10px 0;
}
#codetabs li:hover{
background-color: grey;
}
http://jsfiddle.net/d09xgfzc/1/
i'm having 3 containers with not the same height and i want to stack them horizontally howver the smaller boxes are at the bottom. How can i fix it?
Here is the code i'm using for the boxes:
.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 200px;
}
vertical-align has to be used for inline and inline-boxe content, defaut vertical-align value is baseline.:
.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align:top;
width: 200px;
}
Can you not just put
position:relative;
top:0px;
See: fiddle
When the window is long enough, both divs are in the same line, but when it's smaller, the second div(.footers) moves to a new line. I wan't them to be in the same line all the time.
Css from the left div:
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
Css from the right div:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
}
What is causing this problem?
If you only want to give the left div (.footer_links) a fixed height, instead of floating the div on the right (.footers), give it overflow:hidden. This will cause it to fill the remaining width of the page:
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
JSFiddle
.footer .footer_links {
float: left;
width: 20%; // In percent
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer .footers {
text-align: left;
float: left;
width:70%; // In percent
padding: 0px 20px 0px 20px;
}
You can add to a .footers div a white-space , and fixed height:
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
white-space: nowrap;
height: 20px;
}
try this give max-width:
DEMO
CSS
footer {
background: #f2f2f2 !important;
margin-top: 20px;
padding: 10px 0px 10px 0px;
}
.footer .footer_links {
float: left;
width: 250px;
padding: 25px 0px 0px 20px;
min-height: 95px;
border-right: 1px solid #d9d9d9;
text-align: left;
}
.footer a {
font-size: 14px;
color: #898989 !important;
}
.footer .footers {
text-align: left;
overflow:hidden;
padding: 0px 20px 0px 20px;
}
.footer .footers p {
font-size: 14px;
color: #898989;
line-height: 20px;
}
.clear{
clear: both;
}
in DEMO2 you have write max-width: then its working
DEMO2
CSS
.footer .footers {
text-align: left;
float: left;
padding: 0px 20px 0px 20px;
max-width:300px;
}
I want to build a menu where every single <li> hovers out. But weirdly the whole menu always hovers out. Here is the fiddle code.
I have the following css code:
body {
background-color: #eee;
margin: 0;
padding: 0;
overflow: hidden;
}
.tabs {
width: 80%;
position: fixed;
bottom: -20px;
left: 100px;
}
.tabs ul {
display:block;
}
.tabs li {
width: 60px;
height: 80px;
margin-bottom: -20px;
padding: 10px;
float: left;
list-style: none;
display: inline;
background-color: #ccc;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
font-family: verdana;
text-align: center;
}
.tabs li:hover {
margin-bottom: 20px;
}
Reason is that when you give margin to it then it's push whole ul. It's better give bottom instead of margin. write like this:
.tabs li:hover {
bottom: 20px;
}
Check this http://jsfiddle.net/X96KE/17/
using jQuery will solve your problem if you are familiar with it try this
jQuery("li").mouseover(function() {
jQuery(this).css("margin-bottom","20px");
}).mouseout(function(){
jQuery(this).css("margin-bottom","0px");
});
It's because you haven't specified what to do with the margin-top. Here's an updated example: http://jsfiddle.net/X96KE/18/
.tabs li:hover {
margin-bottom: -40px;
margin-top: -40px;
}