Beginner doubt: I would like to hide the parent div when the child div is visible. Is this possible to do with css? maybe using the z-index?
Another thing, Can I format the child div with different css atributes, or they need to be the same ones of the parent?
Thanks!
<!doctype html>
<style type="text/css">
#intro {
width:100%;
float:left;
padding-top:3%;
background-repeat:no-repeat;
background-size:100%;
position:relative;
z-index:50;
}
.wrapper_intro {
display:block;
width:38%;
margin: 7% 3% 3% 7%;
float:right;
color:black;
padding:3% 3% 4% 3%;
background-color:none;
position:absolute;
z-index:100;
right: 0px;
}
.parent {
display:block;
font-size:5em;
color:yellow;
margin-top: 2%;
margin-bottom:3%;
text-align:center;
z-index: 102;
}
.child {
display:none;
}
.parent:hover .child {
display:block;
background-color: rgba(242, 218, 192, 0.9);
margin-top:5%;
color:black;
text-align:center;
z-index: 101;
}
</style>
<div class="wrapper_intro">
<div class="parent">
<div>Ola!</div>
<div class="child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
When you hide a parent div, all elements inside it also will get hidden.
Didn't understand ur scenario. If you want them to be separate, don't nest them in a div. Keep them separate.
Yes the css can be different for parent and child. You can use !important to over ride any css already used for parent.
Due to comment it should be quite simply, what about adding just
.parent:hover > div:first-child {visibility: hidden}
http://jsfiddle.net/czd1z5jh/
OR if you want to move .child to the top:
.parent:hover > div:first-child {display: none}
http://jsfiddle.net/czd1z5jh/1/
Related
I have this two column layout, made with display: table and display: table-cell, and I want to put in the second column a div with horizontal scroll, but the table expands itself and the scroll goes to the entire page rather then the div.
HTML
<div class="wrapper">
<div id="one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis finibus metus. Suspendisse commodo rutrum sapien, eu faucibus metus. Nunc elementum augue eu aliquet condimentum.
</div>
<div id="two">
<div id="horizontal">
<img src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" />
<img src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" />
</div>
</div>
</div>
CSS
.wrapper {
display: table;
table-layout: fixed;
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
display: table-cell;
width: 100%;
}
#horizontal {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
Here is the jsfiddle:
http://jsfiddle.net/cUCvY/2597/
In this example I'd like to have the horizontal scroll active on the div with the images inside and not on the page.
Hope i understood correctly:
.wrapper {
display: table;
table-layout: fixed;
width:100%
}
#one {
display: table-cell;
background-color: gray;
width: 200px;
}
#two {
}
#horizontal {
overflow-x: scroll;
white-space: nowrap;
}
#horizontal img {
max-width: 200px;
}
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
border-bottom:2px solid #000;
}
}
http://jsfiddle.net/cUCvY/2600/
<article style="max-width:500px;" class="post" id="post-<?php the_ID(); ?>">
<div class="circle">
<div class="month"><?php the_time(d) ?></div>
<div class="year"><?php the_time('M Y');?></div>
</div>
<div class="thot">
<h4><?php the_title(); ?></h4>
<?php the_excerpt('Read More'); ?>
<hr />
</div>
</article>
<style>
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: white;
color:black;
line-height:35px;
}
.month{
font-size:60px;
font-weight:bold;
}
.year{
font-size:20px;
}
</style>
What is the best way to move the "thot" div next to the "circle" div?
("Cirle") [POST aka "thot div"]
Link http://ramovamusic.com/?page_id=165
Example: ramovamusic.com/example.jpg
So now that I understand your question. The problem is you have a set width on your article tag (500px) this needs to be increased so you can float your class circle and class thot. that way they will be next to each other.
Here is a working demo as to what I am talking about New Demo Working
Notice I removed the width on the article, added float right and width to class thot and float left on the circle. And now they are on the same line. You need to fiddle with it a bit to align it to your linking.
html:
<article style="" class="post" id="post-171">
<div class="circle">
<div class="month">20</div>
<div class="year">Mar 2015</div>
</div>
<div class="thot">
<h4>test 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tellus urna, mollis in nibh nec, fermentum rhoncus lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ante arcu, laoreet ut efficitur vel, ornare sed risus. Cras eget interdum erat, finibus facilisis justo. Nam lorem mi, laoreet at dui non, rutrum semper felis. <a class="read-more" href="http://ramovamusic.com/?p=171">Read More</a></p>
<hr />
</div>
</article>
css:
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%;
background: red none repeat scroll 0% 0%;
color: #000;
line-height: 35px;
float:left;
}
.thot{
float:right;
width:60%;
}
Add float:left to your circle div and some right margin, and for the .date class, add:
.date {
transform: translateY(-50%);
width: 165px;
top: 50%;
position: relative;
}
for .thot class add:
.thot {
float:left;
width: 300px; /* or whatever width works for you */
}
and finally you need to clear floats:
.post:after {
content: '';
display: table;
clear:both;
}
Here you go, better to apply the circle in a span to keep all the text together! Otherwise it can end up getting tricky like you saw!
https://jsfiddle.net/75tn8yps/3/
div{
float:left;
}
span.circle{
border: 1px solid red;
border-radius: 100%;
width: 100px;
height: 100px;
display: inline-block;
margin-left: 10px;
line-height: 95px;
text-align:center;
}
p{
text-align:center;
margin-top:40px;
}
Demo In Fiddle
I did change few things in the CSS File
.circle {
height: 165px;
width: 165px;
display: table-cell;
text-align: center;
vertical-align: middle;
color:white;
border-radius: 50%;
background: black;
color:black;
position:absolute;
}
.month{
font-size:40px;
font-weight:bold;
color:white;
line-height:90px;
}
.year{
font-size:20px;
color:white;
line-height:60px;
}
.thot{
border:1px solid black;
float:right;
width: calc(100% - 180px);
height:200px;
position:relative;
}
The new CSS. Check The fiddle.
I need help with css, I have this setup:
<div class="embedInner">
<div class="embed_code"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sapien. Quisque risus. Ut laoreet hendreri mi.</p></div>
<div class="copy"><p>COPY</p></div>
</div>
http://jsfiddle.net/h7u8J/11/
I want both child divs always to stay in single line, both left and right, and text in embed_code to be overflow:hidden and not to fall into new line, so if space become smaller than width of the parent div.
If you will provide certain width to the parent div and the embedded div, then you can achieve what you want.
.embedInner{
position:absolute;
/*background: #333;*/
width: 100%; // newly added
}
.embed_code{
float:left;
background: #333;
overflow:hidden;
width: 90%; // newly added
}
.embed_code p{
padding:5px;
margin:0;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.copy {
background: #ddd;
float:right;
}
.copy p{
padding:5px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
float:right;
}
Please check if it can help you. Thanks :)
i changed your code!
i think this is what you want! DEMO
CSS:
.embedInner{
display:inline-block;
position:relative;
width:100%;
/*background: #333;*/
}
.embed_code{
position:relative;
left:0;
width:90%;
display:inline-block;
float:left;
background: #333;
overflow:hidden;
}
.embed_code p{
padding:5px;
margin:0;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
display:inline-block;
white-space: nowrap;
}
.copy{
display:inline-block
background: #ddd;
float:right;
position:relative;
right:0;
width:10%;
background:green;
text-align:center;
}
.copy p{
padding:5px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
float:right;
}
HTML:
<div class="embedInner">
<div class="embed_code">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sapien. Quisque risus. Ut laoreet hendreri mi.
</p>
</div>
<div class="copy"><p>COPY</p></div>
</div>
I want a fixed width image in the middle.
That is no problem.
But i want the left and right div beside it to be 2 lines.
Example.
I have a 100px * 100px image in the middle and want the 2 divs to be 50% - 50px in width without using calc. The 2 divs should have a line which is also no problem.
I just use
{ background: white; margin-top: 48px; margin-bottom: 48px; }
Now the problem is to make those 2 divs fill the left and right space of the image.
Needless to say the width of the entire screen is dynamic.
Is there anyway to do this only with CSS?
Here is my solution using a wrapper for the left and right div, which have a width of 50% and contain other divs with margins of half the image's width. The image itself is positioned in the wrapper using absolute positioning.
HTML
<div class="wrapper">
<div class="left"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div></div>
<div class="right"><div>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div></div>
<img src="your_image.png" alt="" />
</div>
CSS
.wrapper {
position: relative;
overflow: hidden;
height: auto; /* match the height of the floating divs */
}
.wrapper > div > div {
min-height: 100px; /* at least as high as the image */
}
.wrapper > .left {
float: left;
width: 50%;
}
.wrapper > .left > div {
margin-right: 50px;
background: blue;
}
.wrapper > .right {
float: right;
width: 50%;
}
.wrapper > .right > div {
margin-left: 50px;
background: red;
}
.wrapper > img {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 50%;
margin-left: -50px;
}
Here is a JSFiddle: http://jsfiddle.net/j84LB/
You could try warpping it, and giving the divs on the sides 25% and the image 50%. This is the same as the divs having values 50% of the images width.
CSS
.wrapper {width: 200px;}
.left {width: 25%;}
.right {width:25%;}
.image {width: 50%;}
HTML
<div class="wrapper">
<div class="left"></div>
<div class="image">
<img src="" />
</div>
<div class="right"></div>
</div>
Seems easy using enough display:table/display:table-cell
No need to extra divs etc.
JSfiddle Demo
HTML
<body>
<div class="wrapper">
<div class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
</div>
<div><img src="http://lorempixel.com/output/abstract-q-c-100-100-6.jpg" alt="" /></div>
<div class="right">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
</body>
CSS
.wrapper {
position: relative;
overflow: hidden;
height: auto;
display:table;
}
.wrapper > div {
display:table-cell;
vertical-align: middle;
padding: 1em;
}
.wrapper > div:nth-child(2) {
min-height: 100px;
width:100px;
padding:0;
}
I think this is because I'm floating all three divs "columns" to the left, inside of the main body div.
How can I tell the main body div to expand as big as it needs to fit the content divs?
Here it's with min-height:
And here with the min-height taken away:
Here is my relevant code.
#body
{
border:1px solid blue;
width:950px;
margin-left:auto;
margin-right:auto;
margin-top:15px;
}
#leftcolumn
{
min-height:500px;
float:left;
width:190px;
}
#contactarea
{
font-family:Arial;
}
#contactarea p.heading
{
Color:#000;
font-size:large;
position:relative;
left:14px;
}
#contactarea p.tag
{
color:#000;
font-size:medium;
position:relative;
left:10px;
}
#leftnavigation ul
{
margin:0;
padding: 0;
list-style: none;
}
#leftnavigation ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#leftnavigation ul li:first-child {border-top: none;}
#leftnavigation ul li:last-child {border-bottom: none;}
#leftnavigation ul li a
{
padding: 10px;
display: block;
color: #fff;
background-color:#222222;
text-decoration: none;
}
#leftnavigation ul li a:hover {background: #111;}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:594px;
margin-left:5px;
margin-right:5px;
}
#advertisingarea
{
width:150px;
float:left;
min-height:500px;
background-image:url('images/advertisingAreaBackground.png');
background-repeat:repeat-y;
}
.advert
{
height:190px;
overflow:hidden;
}
.advert img
{
padding:0;
margin:0;
position:relative;
left:25px;
top:5px;
}
.advert p
{
font-size:x-small;
font-family:Arial;
margin-left:8px;
margin-right:8px;
margin-top:5px;
}
<div id="body">
<div id="leftcolumn">
<div id="leftnavigation">
<ul>
<li>Automoviles</li>
<li>Clases y Talleres</li>
<li>Electronicos</li>
<li>Inmobiliaria</li>
<li>Libros</li>
<li>Musica, Peliculas y Juegos</li>
<li>Ninos</li>
<li>Otros</li>
<li>Ropa</li>
</ul>
</div>
<div id="contactarea">
<p class="heading">Anuncios Premium</p>
<p class="tag">Destaque sus anuncios con una cuenta premium!</p>
</div>
</div>
<div id="contentarea">sdfg<h1>asdasd</h1></div>
<div id="advertisingarea">
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
</div>
<div class="advert">
<img src="../../Content/images/advertImage.png" alt="Advert" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nibh nisi, volutpat a vehicula eget</p>
</div>
</div>
</div>
The easiest way is just to set the oveflow of the container:
#body
{
...
overflow: auto;
}
For a div to "wrap" around the elements it contains you have to float it (float:left) if you have already floated other elements.
For the floated div to be centered the best cross-browser solution is to wrap it on another not-floated div (invisible) and center that div. Something like this:
<div id="centered">
<div id="floated">
</div>
</div>
This way you can have the inside div wrapping the elements it contains while not specifying any hieght value, while the outer div (invisible, just with width) keeps it centered ;)
you should use firebug to resolve css issues like this. You'd be surprised how useful it is.
In answer to your question -
It has no height because of the floating elements. You need to clear the floats within that element for the parent to display as expected. You can do this a few ways.
make a clear class and simply add it as an element after the floats:
<style>
.clear{clear:both;}
</style>
<div class="parent">
<div class="float_left">left</div>
<div class="float_right">right</div>
<div class="clear"></div>
</div>
a more proper auto clear for any element that has a class of "container":
<style>
.container:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.container {
display: inline-block;
}
html[xmlns] .container {
display: block;
}
* html .container {
height: 1%;
}
</style>
<div class="parent container">
<div class="float_left">left</div>
<div class="float_right">right</div>
</div>