The images at the bottom arent't counted in the overflow:hidden attribute in the all class. They overflow and the positioning is very difficult as the border of the all div does not follow the images down.
<div class="all">
<div id="banner"><img src="images/banner1.jpg" alt="PCXD Banner"/></div>
<div class="nav">
...
</div>
<h1 class="under"><br/><br/>Image><br/></h1>
<table>
...
</table>
<img id="reviewI1" src="images/RL1.jpg" alt="Rocket League 1"/>
<img id="reviewI2" src="images/RL2.jpg" alt="Rocket League 2"/>
<img id="steam2" src="images/steam.png" alt="Steam"/>
</div>
CSS:
.all{
width:1200px;
margin:auto;
border:5px solid #404040;
overflow:hidden;
}
#reviewI1 {
width:500px;
position:absolute;
top:415px;
left:1010px;
border: 3px solid #fedd58;
}
#reviewI2 {
width:500px;
position:absolute;
top:710px;
left:1010px;
border: 3px solid #fedd58;
}
#steam2 {
width:100px;
left:1210px;
position:absolute;
top:1010px;
}
You need to add a height to the .all class e.g. height: 400px;
Yours images are in absolute position, that mean they are out of the DOM flow.
So the overflow property won't apply in that case. You need to remove absolute position to use it :
#reviewI1 {
width:500px;
top:415px;
border: 3px solid #fedd58;
}
See this fiddle
Remove the "position:absolute" from the images' styling.
Related
I've been trying to create a responsive navbar with just two images (which are hyperlinks and transparent) and I can't seem to get the formatting right. The way I want it to look is:
First image: width:60%
Second image: width: 40%
Both have the same height
Border: 2px solid black (around both images)
Padding: 10px (Around both images and between the two)
Keep the navbar on the top of the page
Hover effect that changes the background color
Basic Idea
The closest I've come is this code:
HTML:
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
CSS:
<style>
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color: #black ;
}
a{
display: block;
}
</style>
The main problem I'm having is that I cannot figure out where to implement the padding so that it will separate the two images and surround them.
First you need to clean up you HTML code into valid HTML so that your CSS selectors are able to apply styles to the elements in the DOM. Remove the backslashes from your HMTL code to give you this;
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
Add a -4px left-margin to the images to counter the space used by the borders (this prevents the second image from going to next line since they occupy 60% + 40% of the entire page width, yet right + left borders of images take up 4px).
Also add display:block; property to the "#outerdiv" selector and change the value of the display property for the "a" selector to inline.
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
see working snippet
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
I am trying to set shadow effect for a content and i can be able to set it. But i overlays with adjacent element which disturbs the look. Is there any possible way to remove the overlaying effect for specific area(in the red circle in image)? Pleas check the sample image below.
HTML:
<div id="container">
<div id="table1">
<table>
<tr><td>AAA</td></tr>
<tr><td>BBB</td></tr>
<tr><td>CCC</td></tr>
</table>
</div>
<div id="table2" class="Shadow">
<table>
<tr><td>aaa</td><td>eee</td></tr>
<tr><td>bbb</td><td>fff</td></tr>
<tr><td>ccc</td><td>ggg</td></tr>
<tr><td>ddd</td><td>hhh</td></tr>
</table>
</div>
</div>
CSS:
#container {
position: relative;
}
table,td,tr{
border:1px solid black;
}
#table1{
position: absolute;
}
#table2{
position:absolute;
background-color:pink;
margin-left:40px;
}
.Shadow{
-webkit-box-shadow: 0 0 30px 9px #476FCC;
box-shadow: 0 0 30px 9px #476FCC;
}
JS Fiddle link: http://jsfiddle.net/5JYPm/13/
I think the closest you are going to get is stacking the first table over the second, and ensuring you have a background colour on it:
#table1{
position: absolute;
z-index:2;
background-color:#fff;
}
#table2{
position:absolute;
background-color:pink;
margin-left:40px;
z-index:1;
}
http://jsfiddle.net/5JYPm/16/
you need to change the z-indexs of the tables and then add a background-color to table1
Example
Adjust the box-shadow to the right about half the spread?
.Shadow{
box-shadow: 15px 0 30px 0px #476FCC;
}
JSfiddle
<div id="table2" style="z-index:-1;" class="shadow">
How to set html5 web filter for a child element?
In my case I would like to see the image for the child element with brightens of 1 (so to have the image in the original state as would be without the filter applied)
Here a sample
http://jsfiddle.net/sMCfP/1/
div.scena
{
width:400px;
height:400px;
background:url(http://www.w3schools.com/css/klematis2.jpg) repeat;
border:1px solid black;
-webkit-filter: brightness(0.3);
}
div.snippet
{
border:2px solid black;
width:200px;
height:200px;
border:1px solid black;
opacity:1
-webkit-filter: brightness(1.7) !important;
}
<div class="scena">
<p>this is scena</p>
<div class="snippet">
<img src="http://www.w3schools.com/css/klematis2.jpg" alt="Smiley face" height="142" width="142">
</div>
</div>
Any idea how to do it?
Do you know any similar solution with a different approach using css3? I am targeting only webkit.
Solutions suggested, slight revised:
http://jsfiddle.net/sMCfP/7/
One approach is to contain both divs in a wrapper, and make them siblings:
jsFiddle (will need more layout but should give you an idea)
More informaation: CSS Opacity That Doesn’t Affect Child Elements
HTML
<div class="wrapper">
<div class="scena">
<p>this is scena</p>
</div>
<div class="snippet">
<img src="http://www.w3schools.com/css/klematis2.jpg" alt="Smiley face" height="142" width="142">
</div>
</div>
CSS
div.wrapper {
width:400px;
height:400px;
}
div.scena {
position: absolute;
top: 0;
left: 0;
width:400px;
height:400px;
background:url(http://www.w3schools.com/css/klematis2.jpg) repeat;
border:1px solid black;
-webkit-filter: brightness(0.3);
}
div.snippet {
position: absolute;
top: 0;
left: 0;
border:2px solid black;
width:200px;
height:200px;
border:1px solid black;
opacity:1;
-webkit-filter: brightness(1.7) !important;
}
You have to add the effect to the img itself:
http://jsfiddle.net/sMCfP/2/
div.snippet img {
-webkit-filter: brightness(1.7) !important;
}
i have two divs and and i want if when i hover on one div, border color of both divs should be change...
CSS :
.uperdiv {
width:80%;
background-color:black;
margin-left:10%;
border-style:none solid none solid ;
border-width:5px;
border-color:#fff;
border-top-style:none;
height:170px;
margin-top:-220px;
transition:border-color 2s;
-moz-transition:border-color 2s;
-webkit-transition:border-color 2s;
-o-transition:border-color 2s;
}
.uperdiv:hover + .lowerdiv{
border-color:#9900ff;
}
.lowerdiv {
border-style:none solid solid solid ;
border-color:#fff;
border-width:5px;
background-color:black;
width:80%;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height:50px;
margin-left:10%;
}
HTML
<div class="uperdiv">
Some text
</div>
<div class="lowerdiv">
</div>
I tried + sign but it changes lower div border color when i hover on uper div...and you can say that i want to create effects as of one div.
And now i have no idea.. is there any way to do it??
And plz don't use jquery and javascript only css and css3
Thanks in advance :)
Unfortunately, you can't (yet) target the previous sibling using CSS. You could put the two divs in a container, though, and apply the :hover to that.
html
<div class="container">
<div class="upperdiv">
Some text
</div>
<div class="lowerdiv">
Some text 2
</div>
</div>
css
.container:hover .upperdiv,
.container:hover .lowerdiv {
border-color: #9900ff;
}
This way, when you hover either .upperdiv or .lowerdiv, both will have the border-color applied.
We might be able to do this without the container in the future, using the subject indicator
It would look something like this;
.upperdiv:hover,
.upperdiv:hover + .lowerdiv,
.lowerdiv:hover,
!.upperdiv + .lowerdiv:hover { /* target .upperdiv when the next sibling is hovered */
border-color: #9900ff;
}
HTML:
<div class="anyClass">
<div class="upper">
</div>
<div class="lower">
</div>
</div>
Css:
.anyClass:hover div{
border:1px solid #ccc;
}
Just add a container with anyClass to hold your div's
then add the css
You need to add hover for the uper div class:
.uperdiv:hover
FIDDLE
Check it out:
html:
<div class="upperdiv">Some text</div>
<div class="lowerdiv"></div>
css:
.upperdiv, .lowerdiv{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.upperdiv:hover, .upperdiv:hover+.lowerdiv{
border-color: red;
}
It's kind of simplified but it's what you want.
Fiddle: http://jsfiddle.net/b58CU/
Try this
.uperdiv:hover, .uperdiv:hover + .lowerdiv{
border-color:#9900ff;
}
DEMO
I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<img src="img/newsbox1.jpg" width="270" height="140" border="0" />
<div class="news_box_bar"></div>
</div>
</div>
</div>
#mainbody {
margin: 0 auto;
width: 900px;
padding-top:30px;
padding-bottom:30px;
}
.news_box {
float:left;
width:288px;
height:348px;
background-color:#DDDDDD;
margin-right:5px;
margin-left:5px;
border:1px;
border-style:solid;
border-color:#BBBBBB;
}
.news_box_inside {
float:left;
margin:9px;
width:270px;
height:330px;
background-color:#FCFCFC;
}
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
}
I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can't get rid of the space. Anyone got a good solution ?
Best regards,
Kris
Add this to your CSS:
.news_box_inside > img {
display: block;
}
Example: http://jsfiddle.net/grc4/TV4zT/
Kris,
If you inspect <img> element by default it's css property display is set to inline-block, SO I suggest to apply style on <img> element and make it display:block
<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />
DEMO
Just add a margin to your newsbar as showm: DEMO
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
margin-top:-5px;
}
.news_box_bar {
background-color:#540000;
margin-top:-5px;
height:43px;
border:1px solid #892d2d;
}
set this in your CSS class
use link below to see working solution for your problem
http://jsfiddle.net/v7NwR/
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg" border="0" /></figure>
<div class="news_box_bar">sdfgsdfgsdfg</div>
</div>
</div>
</div>
css
.news_box{ float:left; border:5px #444 solid;}
figure{ font-size:0%;}
#mainbody{ color:#000;}
.news_box_bar{ background:red;}