I have an issue with nth-child, any Idea whats wrong?
HTML:
<div class="comment">
<div class="header">
<div class="by">Euismod nam.</div>
</div>
<div class="content">
...
</div>
<div class="date">12-15-23</div>
</div>
<div class="comment">
<div class="header">
<div class="by">Euismod nam.</div>
</div>
<div class="content">
...
</div>
<div class="date">12-15-23</div>
</div>
CSS:
/*--*/
.comment {
width:600px;
overflow:auto;
margin:0;
margin-top:5px;
padding:0;
border:solid 1px #CCC;
/*border-top:none;*/
}
.comment .header {
margin:0;
padding:1px 2px;
overflow:auto;
background:#B2A98A;
color:#FFF;
}
.comment .header:nth-child(even) {
background:#62798B;
}
.comment .header .by {
float:right;
z-index:90;
}
.comment .content {
margin:0;
padding:5px 2px;
overflow:auto;
background:#FeFeFe;
color:#000;
}
.comment .date {
margin:0;
padding:1px 2px;
overflow:auto;
background:rgba(178,169,138,0.5);
color:#FFF;
}
.comment .date:nth-child(even) {
background:rgba(98,121,139,0.5);
}
I don't see an issue within the code, or am I missing something? [JSFIDDLE]
.header is only one child in .comment, you should select parent :
.comment:nth-child(even) .header {
background:#62798B;
}
http://jsfiddle.net/Qn49d/1/
Change from:
.comment .header:nth-child(even) {
to:
.comment:nth-child(even) .header {
The reason for this is that the .comment divs are siblings. If the .header elements were under a single .comment your initial markup would work.
Related
Basically I want to have something like this: http://i.stack.imgur.com/GwtOm.png
I want the div containing the headline to fit to the size of the headlines. I know this can be achieved with display:inline-block; or display:table-cell; but when I add another div that I want to overlap the line, it pushes everything down.
Not sure if there’s a way to avoid that or if there's a better way to get the effect I’m going for. Any suggestions are much appreciated!
Two code examples:
body,html {margin:0;border:0;padding:0; vertical-align: baseline; line-height: 1;
}
.banner {
width:600px;
height: 400px;
background-color:grey;
}
.outer {
display:table;
margin:0 auto;
background-color:pink;
position:relative;
}
.inner {
display:table-cell;
}
.top{
border-bottom: 2px black solid;
}
.top, .bottom{
padding:20px;
text-align:justify;
}
.overlap{
position:relative;
background-color:pink;
text-align:center;
top:65px;
z-index: 100;
line-height:1;
padding:0 10px;
}
.txty{
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:16px;
}
<div class="banner">
<div class="outer">
<div class="inner">
<div class="overlap"><span class="txty">AND</span></div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="top">
<span class="txty">
Hi, this div fits to the content and it is horizontally centered, too.
</span>
</div>
<div class="bottom">
<span class="txty">
hey cool</span>
</div>
</div>
</div>
</div>
Or the other way I tried was this:
body {
background-color:grey;
margin:0;
}
.overr {
position:relative;
background-color:green;
display:inline-block;
text-align:center;
top:43px;
z-index: 100;
line-height:1;
padding:0 10px;
}
.outer {
text-align:center;
background-color:pink;
position:relative;
top:20px;
}
.inner1 {
display:inline-block;
background-color:green;
line-height:0;
}
.a{
border-bottom:4px solid black;
}
.b {
display:inline-block;
line-height:0;
}
<div class="outer">
<div class="overr">AND</div>
</div>
<div class="outer">
<div class="inner1">
<div class="a">
<p>hi, this div fits to the content and it is centered, too. Cool!</p>
</div>
<div class="b">
<p> test</p>
</div>
</div>
</div>
try position:absolute and adjust top and left
.overlap{
position:absolute;
background-color:pink;
text-align:center;
top:65px;
z-index: 100;
line-height:1;
padding:0 10px;
}
else apply float to the div and apply proper margins
I have a sidebar which is only taking up enough space for the content it contains rather than taking up 100% of the wrapper which contains all elements, the image below should get across what I mean:
Here is some of the code I'm working with:
HTML
<body>
<div id="wrapper">
<div id="top">
...
</div>
<div id="topnav">
<...
</div>
<div id="banner">
<img id="img" src="images/2for20.png" alt="banner1" />
</div>
<div id="subbanner">
...
</div>
<div id="content">
...
</div>
<div id="rightSide">
<p>This is the sidebar</p>
</div>
<div id="footer">
<p>© Copyright 2015 Celtic Ore, All Rights Reserved</p>
</div>
</div>
</body>
CSS
#wrapper
{
width:1000px;
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:220px;
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
This works for me:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
> #wrapper
{
width:100%; //change this to 100%
height:100%;
margin:0px auto;
background-color:#efefef;
}
#rightSide
{
float:right;
position:relative;
width:100%; //Change this to 100%
height:100%;
background-color:#efefef;
}
#rightSide img
{
vertical-align:middle;
}
#rightSide h2
{
padding:10px 0px;
}
#rightSide p
{
padding:10px 0px;
}
#footer
{
width:100%;
padding: 10px 0px;
background-color:#000000;
float:left;
}
#footer p
{
color:white;
text-align:center;
}
Hello guys I have a small form within a div I have already centered it but the img with it can't be center properly with it its always kinda on top or in the bottom i want the h4/form/img to appear as if they are on one line here is the code:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
HTML:
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
</div>
http://jsfiddle.net/mohamedkna/djhL2z27/
Thanks in advance
You need to set vertical-align to img:
img {vertical-align: middle}
http://jsfiddle.net/djhL2z27/4/
Try like this: Demo
CSS:
form {
margin:0px;
display:inline-block;
line-height:40px;
vertical-align:middle;
}
img {
display:inline;
line-height:40px;
vertical-align:middle;
}
Add vertical-align: middle to the img and form. That should more or less do the job. The rest fine tuning u can do.
Try using align attribute:
<div class="outer">
<div class="inner" align="center">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
You have problem here:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
Change to this:
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.inner {
text-align:center
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
Please update css. All content will be in center as you need
function useless() {
alert(hello);
}
.outer {
display:block;
max-width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
}
body {
background:#dee
}
form {
margin:0px;
display:inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
display:inline-block;
vertical-align: middle;
}
h4 {
display:inline-block;
vertical-align: middle;
margin:0px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>
A different way is to use negative margin (not good for ie <8)
img {
margin-bottom:-15px;
display:inline;
}
I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?
Thanks
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
You need to clear your float. This is what it looks like.
http://jsfiddle.net/ZT59d/
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
If you don't mind, I'm going to give you some suggestions on how to improve your code.
First, you're using HTML5 but you're not using some of the new elements. Let's replace them.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
Here's what you're new css would look like.
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.
Here's the fiddle with everything together.
Easy way to fix this is to add such CSS rules:
#footer
{
clear: both;
}
#container {
overflow: hidden;
}
DEMO
Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.
I am trying to place some text inside an image, but the text div is not coming on top of the image, rather it is hidden and invisible right below the image. thanks in advance!
Here is a link to jsfiddle:
http://jsfiddle.net/XrXZj/1/
have the following in my css file:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:relative;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
font-size:15px;
line-height:25px;
width:500px;
}
and here is the content of html file:
<div class="spotlight">
<img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>" border="0" />
<div class="wrapper">
<div class="middle">
<div class="spotlight-copy">
<spring:message code="content.location.title" />
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
.spotlight .wrapper {
position:absolute;
top: 0;
}
I put there a solution http://jsfiddle.net/NPh76/
HTML is:
<div class="wrapper">
<div class="middle">
<div class="spotlight">
<img src="http://www.springsource.org/files/header/logo-spring-103x60.png" border="0" />
<div class="spotlight-copy">
message in spotlight copy
</div>
</div>
</div>
<div style="clear: both;"></div>
notice about HTML:
<IMG> is into .middle to be at same level as .spotlight-copy
CSS is:
.spotlight {
color:#FFFFFF;
display:table;
height:120px;
margin-bottom:15px;
margin-left:0px;
overflow:hidden;
padding:0 50px;
position:absolute;
width:840px;
}
.spotlight .wrapper {
position:absolute;
}
.spotlight .middle {
display:table-cell;
height:50px;
vertical-align:middle;
}
.spotlight .spotlight-copy {
position:absolute;
top: 0px;
font-size:15px;
line-height:25px;
width:500px;
color:#FF0000;
}
notice about CSS
position:absolute; in .spotlight-copy
top: 0px; for position
color:#FF0000; to see something ;)