Have a parent div and 3 child div's. Know the height of child2 only. Want the child1 and child3 to have the same height as height getting reduced. Also border of the parent is collapsing. Want the border of parent to be visible around the child.
Pasted the code http://jsfiddle.net/586Cr/
Provided the code below.
<html>
<head>
<style>
#parentt{
background-color:#000000;
border:4px solid #0000FF;
}
#child1{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:25%;
}
#child2{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:30%;
height:100px;
}
#child3{
background-color:#000000;
border:4px solid #FF0000;
width:25%;
float:left;
}
.trans60 {
zoom: 1;
filter: alpha(opacity=60);
opacity: 0.6;
}
.trans100 {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
</style>
</head>
<body>
<div id="parentt">
<div id="child1" class="trans60"> child1</div>
<div id="child2" class="trans100">child2</div>
<div id="child3" class="trans60">child3</div>
</div>
</body>
</html>
Give overflow:hidden to your parent here the fiddle because child's are floating.
Briefly
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared.
Ok let's start off!
Anytime you float, it tends to break the parent. I know, children leave the parents broke.. it's just a habit we have in nature.
To fix this, I always make a class called 'clear' and just attach a div when I want to do clearing! I find this to be more useful than doing an overflow: hidden, as the clear class can be reused nearly any and everywhere.
//css
.clear { clear: both; }
// calling it up after the 3 children
<div class="clear"></div>
Ok, so that fixes that problem.
Now to do the div height, that's not overly complicated with some jQuery.
Now I could go on trying to explain this, but it would take a minute. Follow this tutorial:
Demo:
http://www.cssnewbie.com/example/equal-heights/plugin.html
Article:
http://www.cssnewbie.com/equalheights-jquery-plugin/#.UoX-neKrTIU
However, instead of on click, do it at document ready.
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
Div highlighting question
I have 2 divs stacked on top of each other inside a container.
Here is the behavior I want: when you mouseover the top div, nothing happens. when you mouse
over the bottom div, the top div background changes color, and the bottom div's background
changes a different color. In the sample code I tried, mousing over the container div makes
the top turn green and the bottom turn vlueviolet. I want a mouseover on the bottom to cause
this behavior, but I want a mouseover on the top to do nothing. I feel like I could get this
done in jQuery using a parent selector or something, but it seems like I should be able to
do this in pure CSS. Thanks!
Here is what I've tried, which of course doesn't work, but gives an idea of what I'm trying to do.
<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
I changed up your CSS a little bit. Basically to make it bigger.
The order is important here.
This is not perfect due to the outer div's border.
<style>
div {
border:1px dotted black;
font-family:Courier;
background:white;
}
div#top, div#bottom {
height: 200px;
width: 200px;
}
div#outer:hover #bottom:hover {
background:blueviolet;
}
div#outer:hover #top {
background:green;
}
div#outer #top:hover{
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
</style>
Is this what you're looking for?
div#outer:hover div#top:hover, div#bottom:hover{
background:white;
}
Alternatively, you could also use !important:
div#top:hover {
background: white !important;
}
I don't think you can do this... CSS selection only works one way, from parent to child or in cascade.... so you can only change the CSS of divs below another div.
For example look this jsFiddle: as you can see, only the bottom divs' style can change.
This code
div#fourth:hover ~ #first{
background:green;
}
doesn't work because the "first" div is above the "fourth" div...
Anyway, if you want to set the background of top div to white, you will see a rollover with the delay.
PS: Sorry for my bad English.
I'm been learning for web design as well as development for quite some time now but I'm still stumped by some basic rules of CSS.
I'm trying to figure out how the behavior of :hover works when hovering one element, to affect another. But I came across something unexpected...
Q: Why does element .one turn black when .two is hovered?
Here's the code and the fiddle.
HTML:
<div class="one">
<div class="two"></div>
</div>
CSS:
div {
width: 100px;
height: 100px;
position: absolute;
top:0;
}
.one {
left:0;
background: red;
border: 5px solid black;
}
.two {
left:200px;
background: yellow;
}
.one:hover {
background: black;
}
here is my jsFiddle
Help anyone?
The element .two is found inside the .one element. so hovering .two means that you are also hovering .one. The event "bubbles" up to the parent element.. even if it doesn't look like that visually. To hover each one independently you will have to take .two out of .one. You might want to wrap both in a container to properly set their positioning. working jsFiddle
<div class="someContainer">
<div class="one"></div>
<div class="two"></div>
</div>
You have to change your html structure to achieve this.
As right now div having class two is inside the div class one so two is becoming child of class one div so when you hover on div which have class two it automatics consider that you are hovring on class one div as well.
Use absolute div and don't make it child of class one div.
I've been searching for hours but I can't find a way to place 2 div's next to each other.
The below example works fine when the div's are smaller then the screen but when they are bigger then the screen they are below each other.
Also I would like the same classes for 2 pages:
1 page they both fit on the screen and I'd like to display them next to each other (not one on the left and one on the right)
the other page together they are bigger then the screen. (Sideways scrolling is no problem)
Take this example:
<style>
.wrapper
{
border:1px solid Red;
display: inline-block;
}
.left
{
float:left;
color: Green;
border:1px solid Green;
}
.right
{
float:right;
color: Blue;
border:1px solid Blue;
}
</style>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
In the actual design ASDF is replaced by a big <table>.
As I said above I've been searching for hours but can find a solution so I'm sorry if this has been asked before.
The wrapper div isn't necessary for the two to be lined up, but if you have it for other reasons (like a border, background, etc.), then it does not need to be set to inline-block.
Nothing technically needs to float. inline-block has the same effect and is more appropriate. Having said that, one float is needed to make things as fluid as possible and will be mentioned in a second.
Something that makes this and other css magic involving inline-block tricky and error-prone is that the element is treated in some ways like an inline element and in other ways like a block. This is not cross-browser consistent. Generally, this means that it can have block-level styling (like border, and width), and inline-level styling. Generally people just think of it as blocks that fall horizontally, "in a line". But inline element properties from a wrapper div such as font-size and white-space come in to effect as well (which is just annoying).
Having said all of that, here is the bare-bones recipe for side-by-side block elements that exceed the browser window and are inside of a block-level wrapper:
The inner blocks need to be set to inline-block.
The outer wrapper needs to have white-space set to nowrap, just as if you wanted a long line of text to expand horizontally beyond the browser window.
The outer wrapper needs to be set to float: left; clear: both;, because otherwise the wrapper's width will not go past the window width. The alternative is to set the width of the wrapper, but if you don't know how far it will expand, the float will force the wrapper to automatically shrink or grow to the width of it's contents. The clear:both prevents the floating from affecting any surrounding elements.
So for the following HTML:
<div class="wrapper">
<div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
<div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>
You would need the following CSS as a bare minimum:
.wrapper {
white-space: nowrap;
float:left;
clear: both;
}
.left, .right{
display: inline-block;
}
And then, for your example, you would add:
.wrapper {
border: 1px solid red;
}
.left
{
color: Green;
border:1px solid Green;
}
.right
{
color: Blue;
border:1px solid Blue;
}
Demo: http://jsfiddle.net/crazytonyi/jTknm/
This is one approach that could be used, coupling white-space: nowrap in the parent .wrapper element with display: inline-block in the child .left and .right elements:
.wrapper
{
/* other stuff */
white-space: nowrap;
}
.left
{
display: inline-block;
/* other stuff */
}
.right
{
display: inline-block;
/* other stuff */
}
JS Fiddle demo.
You can do this without floating by setting the inner divs to display: inline-block and letting the outer div have white-space: nowrap:
<div class="wrapper">
<div class="left">left</div><div class="right">right</div>
</div>
.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */
See it in action.
Be careful to not leave any whitespace between closing the first and opening the second div, because that will manifest as visible space in the render.
Erm, you need to use float:left for both them to begin with. Then force overflow:show for the wrapper or perhaps use the newer CSS 3 property overflow-x:scroll. Let me know if it still doesn't work.
Okay I have tested for you. The reason why this is not working is because you haven't specified fixed widths and some other stuff. Here is the working code:
<style>
.wrapper
{
border:1px solid Red;
width:100%;
overflow-x:scroll;
}
.left
{
float:left;
width:500px;
color: Green;
border:1px solid Green;
}
.right
{
float:left;
width:500px;
color: Blue;
border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
Then if you want to specify widths, either use Javascript to determine them on page load or use CSS.
Your divs need widths, try:
<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>
<style>
#left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
#left { margin-right:1%; }
</style>
Why when I want to resize div, image in div doesn't change its size !? It's CASCADE style sheets, isn't it?
--EDIT--
.box{padding:0px;margin-left:10px;display:inline-block;margin-right:auto;width:20px;height:20px;border:1px solid red;}
<div class="box">
<img src="larrow.gif"/>
</div>
It's cascade, but width and height are not inherited.
You might want to do something to make the image follow the size of its parent.
Like
div.box img { width: 100%; height: 100%; }
<img> tags have an implicit width of either the image's natural width or the width attribute of the tag that must be overriden with css. Try this to make the image 100% of the width of its parent <div>:
div img{
width: 100%;
}
I think you have a bit of a misunderstanding of what cascading actually is. I'd recommend reading the part of the spec that deals with the cascade.
Your style selector only matches elements with the class box. The div has that class, but the img doesn't. Thus, the div has the style applied and the img doesn't. Try:
.box
{
padding:0px;
margin-left:10px;
display:inline-block;
margin-right:auto;
border:1px solid red;
}
.box, .box img
{
width:20px;
height:20px;
}
<div class="box">
<img src="larrow.gif"/>
</div>