Page in question: http://bit.ly/1xLOmeS
Every third LI has extra spacing at bottom that isn't supposed to be there.
I've tried using nth-child (odd) and (even) as shown below, and have also tried just the li:nth-child(2n+2) condition with the right margin set to 0px to prevent every 2nd box being shifted to the next line. Where is this space coming from??
CSS
ul.comment-card {
padding: 0;
margin: 0;
list-style: none;
}
.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;
height: 300px;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li .meta {
color: #767da1;
font-weight: 400;
line-height: 1.4em;
}
.comment-card .meta img {
position: relative;
top: -8px;
}
.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}
Example: jsFiddle
Related
My slick slider dots are positioned so that one is under another, what's happening here and how can I fix it?
slick-theme.css:
.slick-dots
{
/*position: absolute;*/
/*bottom: -25px;*/
display: inline-block;
/*width: 100%;*/
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 20;
display: inline;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
I've never seen anything like this in another persons code and I can't find any results on Google. Please help, thank you.
I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden
Is there a way to have the dimensions of #main automatically change without having to hard-code it in?
I've tried:
overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline
but none of them work.
Here's the link to the html page:
http://goo.gl/Ml2FIo
here's the css code:
/* HEADERS*/
h1 {
margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;
}
/* MAIN NAVIGATION */
#main {
/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;
}
#main ul {
/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;
}
#main ul li {
width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#main ul li a {
text-decoration: none;
color: #ffffff;
}
/*
#main li a:hover{
opacity: 0.8;
}
*/
/*SIDE NAVIGATION*/
#side {
min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #ffffff;
position: fixed;
top: 0px;
right: 0px;
text-align: center;
overflow: hidden;
margin: 0 auto;
padding: 0;
display: inline-block;
border: 1px solid #fcacac;
padding: 0px 10px;
text-align: center;
float: left;
list-style: none;
}
#side a {
font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;
}
body {
background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
background-attachment: fixed;
}
/* PARAGRAPH */
section {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;
}
/* FOOTER */
footer {
display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;
}
/* TITLE IMAGE */
#title-img {
/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
EDIT 1:
I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.
You can use flex. It's a nice and easy way to set width, margins, paddings for things.
Here's a wonderful "Complete guide to flexbox":
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could do something like this:
nav {
display: flex;
flex: 1;
/* you can set some width if you want
width: 400px;
*/
background-color: #eee;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex: 1;
list-style-type: none;
background-color: #ddd;
border: 1px solid #00f;
}
nav ul li {
display: flex;
flex: 1;
padding: 5px 10px;
margin-right: 10px;
background-color: #bbb;
border: 1px solid #f00;
}
nav ul li:last-child {
margin-right: 0;
}
<nav>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</nav>
You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".
I can't get my css to center the content dive in IE. It works in all other browsers. Please help. I have tried align = center as well and even that didn't help. If there is something that I have done in and around the content div to make it not center I would like to know. Thank you.
BODY {
background-color: #eee;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
.wqlogin .fullwrap {
width: 100%;
margin: 0 auto;
background-color: #f7f7f7;
}
.wqlogin .topp {
width: 100%;
height: 110px;
background-color: #fff;
border-bottom: solid 1px #ddd;
}
.wqlogin .topp .wq_logowrap {
width: 910px;
margin: auto;
}
.wqlogin .topp .wq_logowrap .logo {
float: left;
/*margin-left: 10px;*/
display: block;
width: 115px;
height: 105px;
}
.wqlogin .content {
width: 910px;
background-color: #fff;
border: solid 1px #ccc;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.wqlogin .left {
display: block;
float: left;
width: 620px;
overflow: hidden;
}
.wqlogin .left .wrap {
margin: 5px 0 15px 5px;
}
.wqlogin .left .imgholder {
float: left;
margin: 8px 8px 15px 8px;
width: 288px;
height: 186px;
}
.wqlogin .rgt_login {
display: block;
float: left;
width: 280px;
height: 320px;
overflow: hidden;
}
.wqlogin .rgt_login .logwrap {
padding: 10px;
}
.wqlogin .footer {
width: 100%;
float: left;
overflow: hidden;
background-color: #fff;
}
.wqlogin .toptxt {
padding: 10px 10px 0 10px;
font-size: 24px;
/*font-weight: bold;*/
color: #666;
}
.wqlogin .toptxt .sml {
font-size: 20px;
padding-top: 0;
}
.wqlogin .error_txt {
float: left;
width: 100%;
overflow: hidden;
color: #8d0000;
}
.wqlogin .error_txt .message {
float: left;
overflow: hidden;
}
.wqlogin .username, .wqlogin .password {
width: 100%;
margin: 0 0 5px;
padding: 5px 5%;
display: block;
}
.wqlogin .login_link1 {
font-size: 12px;
text-decoration: none;
}
.wqlogin .vzw_header {
border-bottom: solid 1px #ddd;
}
.wqlogin .vzw_button {
margin: 10px 0 10px 0;
}
/*TABLE { border-spacing: 0px; border-collapse: collapse; }*/
For older versions of IE, use a text-align: center in the surrounding container.
Also, make sure the surrounding container is centered itself.
Alright, so I have searched the Internet, I have looked at at the very least twenty different posts on this site, and spent several hours with this issue and either I am blind, or perhaps rustier at this than I thought. I have two divs within a wrapper- the left div is float:left, and I want to space them apart from one another, but when I add padding or margin to the left side of the right div nothing happens. If I manually add space using the code for space, it pushes the paragraph down rather than over. I am at a loss, I tried using inline-block display, I tried floating the right paragraph. The only thing that sort of worked was adding right padding to the left box, but because the content in the left box is centered it then messed up the display of the left box. I uploaded the site contents so you could see what I am talking about, and the stylesheet is pasted below. Any help with this would be greatly appreciated! I usually just use tables and iframes, but I got yelled at for that so I was trying to do this the "right way" (I guess?) for a friend. http://www.djcproductions.net/GSFlook/
/* CSS Reset */
* { margin: 0; padding: 0; }
body {
font-family:Tahoma, Geneva, sans-serif;
background-color:#282828;
}
#container {
width: 1024px;
height: 1200px;
background-image:url(../images/body_bg.jpg);
background-repeat: repeat-x 0 0;
margin: 0 auto;
padding: 0 2px;
}
#header {
width: 1024px;
height: 88px;
}
#nav {
clear: both;
height: 34px;
width: 1024px;
background-image:url(../images/nav_bg.jpg);
}
#nav ul {
float: left;
}
#nav ul li {
display: block;
float: left;
height: 34px;
list-style-type: none;
padding: 0 1px 0 0;
}
#nav ul li a {
color: #ffffff;
display: block;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 100%;
line-height: 34px;
padding: 0 0 0 18px;
}
#nav li a span {
display: block
float: left;
height: 100%;
padding: 0 18px 0 0;
}
#nav li a:hover, #nav li.active a {
background: url(../images/atab.jpg) no-repeat center;
color: #fff;
cursor: pointer;
text-decoration: none;
}
#homegallery {
width: 1024px;
max-height: 302px;
padding: 37px 0 0 49px;
}
#preview_box{
width: 390px;
height: 236px;
background-image:url(../images/preview_bg.jpg);
background-repeat:no-repeat;
padding: 24px 0 0 0;
}
#preview_shadow{
width: 390px;
height: 236px;
background-image:url(../images/filler.png);
float: left;
padding: 0 0 0 0;
}
.shadow{
-moz-box-shadow: 2px 5px 5px 1px #ccc;
-webkit-box-shadow: 2px 5px 5px 1px #ccc;
box-shadow: 2px 5px 5px 1px #ccc;
}
#content{
padding: 118px 0 0 33px;
}
#scroller{
background-image:url(../images/scroller_bg2.jpg);
background-repeat:no-repeat;
position: relative;
width: 202px; /*marquee width */
height: 267px; /*marquee height */
overflow: hidden;
padding: 0 0 0 0;
float: left;
}
#scroller_content{
width: 98%;
position: absolute;
padding: 20px 0 0 0;
}
#scroll{
font-family:Tahoma, Geneva, sans-serif;
color: #8f8f8f;
}
#scroll li{
padding-top:5px;
list-style-type:none;
}
#company_info{
font-family:Tahoma, Geneva, sans-serif;
color: #000000;
width: 90%;
padding: 0 0 0 0;
}
p {
font-family:Tahoma, Geneva, sans-serif;
text-indent: 30px;
line-height: 25px;
}
The div
<div id="company_info">
Is not floating, but the div to the left of it with id=scroller is.
For a quick solution, you will need to make #company_info:
#company_info {
float: left;
width: 70%;
margin-left: 20px;
}
Also make sure to clear float after those two divs!
You didn't post HTML so I made my own markup, with the parameters you were looking for:
HTML
<div class="container">
<div class="left">
<p>Services</p>
</div>
<div class="right">
<p>Our company</p>
</div>
CSS
p {margin-left: 30px; font-family: Arial, sans-serrif; color: #FFF;}
.container {
margin: 0 auto;
width: 620px;
height: 400px;
padding: 10px;
background: #CCC;
}
.container .left {
margin: 0 auto;
float: left;
width: 300px;
height: 390px;
background: #999;
}
.container .right {
margin: 0 auto;
float: right;
width: 300px;
height: 390px;
background: #666;
}
jsFiddle
So I have a div that is supposed to have 100% height. It's only parent element is <body>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout. Here is my css. If you would like to see what the site looks like right now, here is the link: http://ion.comli.com/projects/
body, ul {
margin: 0;
padding: 0;
}
body {
background: url('/images/background.png') no-repeat fixed;
}
/* CONTENT */
.content{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50px;
left: 15%;
height: 100%;
width: 70%;
background-color: #ffffff;
}
/* END CONTAINER*/
/* CONTAINER */
.container{
background: #ffffff;
margin: 5% 10%;
text-align: center;
}
.container .title a {
font-family: Franchise, "sans-serif";
font-size: 48px;
color: black;
line-height: 48px;
text-align: center;
text-decoration: none;
}
.container .date {
font-family: Ubuntu, "sans-serif";
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
text-decoration: none;
}
.container .body {
font-family: Ubuntu, "sans-serif";
font-size: 16px;
text-align: left;
}
/* END CONTAINER */
/* PROJECT */
.project {
display: block;
margin: 5% auto;
height: 100px;
width: 500px;
border-radius: 10px;
background: url("/images/background.png");
opacity: 0.5;
}
.project h2 {
font-family: Franchise;
font-size: 48px;
color: white;
text-align: center;
}
/* END PROJECT */
/* NAVIGATION */
nav ul {
background-color: #1b1b1b;
display: table;
list-style: none;
position: fixed;
top: 0;
height: 50px;
width: 100%;
box-shadow: 0 0 6px #888888;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: Ubuntu;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
background-color: #1b1b1b;
}
nav #menu {
padding: 0 25px;
background-color: #1b1b1b;
}
nav #menu:hover {
box-shadow: none;
background-color: #292929;
}
nav li:hover #menu {
box-shadow: none;
background-color: #292929;
}
nav ul ul {
background: #292929;
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 15%;
}
nav ul ul li {
background: #292929;
float: left;
position: relative;
clear: both;
}
nav ul li:hover > ul {
box-shadow: none;
display: block;
}
/* END NAVIGATION */
/* SCROLLBAR */
/* END SCROLLBAR */
Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!
You have to make sure all parents of .content have a height defined.
So in your case what is missing is:
html, body {
height: 100%;
}
Alternative
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
Make body 100% high
html, body {
height: 100%;
}