I'm trying to make a custom splitter which is a <div> between page1 and page2, but some weird lines is showing which I don't know where they came from, or how to hide them!
spiltter.png
pattern1.png
Snippedshot
.zikzak, .splitter, .split-content
{
float:left;
width:100%;
}
.splitter
{
height:250px;
}
.split-content
{
margin-top:-50px;
height:250px;
background:url(img/pattern1.png) repeat;
}
.zikzak
{
position:relative;
height:50px;
}
HTML:
<div class="splitter">
<div class="zikzak" style="background:url(img/spiltter.png) repeat-x"></div>
<div class="split-content"></div>
<div class="zikzak" style="background:url(img/spiltter2.png) repeat-x"></div>
</div>
Problem with you image called spiltter.png As the image edges are transparent not solid, that's why you are getting strange behavior.
To solve this bug you have to filled image edges with solid color.
Related
i saw an effect in a website and i tried to write the code my self and i could.
you can see it in here:
click to see the effect
as you can see a black and white image becomes colorful but i only used a trick to do that.the code sets the black and white image's height to 0px while the colorful image is hidden behind it and so it is shown as we hover on the black and white image.
my question is that are there any simple ways to do the same thing?
or change it a little bit, for example can the color drop frop the top of image?
here's my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.bgimg {
background-image: url("1.png");
background-repeat:no-repeat;
height:190px;
-webkit-transition:0.5s;
}
.main{
height:190px;
-webkit-transition:0.5s;
background-image: url("2.png");
background-repeat:no-repeat;
}
div:hover .bgimg{
height:0px;
}
</style>
</head>
<body>
<div class="main">
<div class="bgimg">
</div>
</div>
</body>
</html>
It looks pretty simple to me as you have it! If you want the colour to come from the top, just swap the image sources and the heights, so the colour image expands down instead of the b&w image shrinking up:
.main {
height:190px;
-webkit-transition:0.5s;
background-image: url("http://kh-salamat-sk.ir/sweep/1.png");
background-repeat:no-repeat;
}
.bgimg {
background-image: url("http://kh-salamat-sk.ir/sweep/2.png");
background-repeat:no-repeat;
height:0px;
-webkit-transition:0.5s;
}
.main:hover .bgimg {
height:190px;
}
<div class="main">
<div class="bgimg"></div>
</div>
Obviously you can use the same trick to do the same from left and right.
If you want to do more complicated transitions such as a checkerboard fade, then CSS alone probably isn't sufficient (although maybe you can do something with gradients) and you will need Javascript and probably canvas.
I have this html with a wordpress theme
div class="fullWidthDarkBlue">
<div class="hpRentArrears">
<section id="black-studio-tinymce-8" class="widgetcontainer widget_black_studio_tinymce"><div class="textwidget"><h2>Rent Arrears</h2>
<p>Does ...t on your behalf.</p>
</div>
</section>
</div>
<div class="clearer"></div>
</div>
<div id="footer">...
And some css like this:
#footer {
margin-top:0px;
border:none;
}
.fullWidthDarkBlue {
width:100%;
background:#365162;
padding-top:30px;
}
.hpRentArrears {
width:346px;
float:left;
background:#f2f1ed;
border:2px solid #a7cfdb;
}
.hpRentArrears p {
margin:0;
}
.clearer {
clear:both;
}
All works well except in FF there is a gap between the bottom of the dark blue box and the footer. I find I can remove this gap by putting a border onto the #footer - but I don't really want to
What's causing the gap and how do I get rid of it?
I tested your piece of code, its working fine in ff, safari and chrome. Must be the footer inside element that is throwing some margin.
Share your code and i will fix it.
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px;
height:180px;
width:62%;
margin:auto;
}
.im1{
height:180px;
width:200px;
}
<div id="one">
<img src="inspirational1.jpg" alt="picture1" class="im1"/>
<img src="inspirational2.jpg" alt="picture2" class="im1"/>
<img src="inspirational3.jpg" alt="picture3" class="im1"/>
<img src="inspirational4.jpg" alt="picture4" class="im1"/>
<img src="inspirational5.jpg" alt="picture5" class="im1"/>
</div>
The code above woks perfectly when I'm working im my desktop, but as soon as I open in my laptop all the images are all over the place. I would like to fit them in the div making sure they don't go everywhere if open the website in a new browser, or scree. Any advice is more than welcome please
http://jsfiddle.net/LYL2S/1/
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding:20px;
margin:auto;
width:620px;
}
.im1{
height:180px;
width:200px;
}
If I understood right you can use float instruction for your images
in css add this line:
#one img { float:left; }
where #one is the the container div
or using class on the images:
im1 {float:left;}
and after your container add a div with class .clear where clear {clear:both;}
Since your saying just for css.. you can't do it dynamically like if the number of images change..
However with just css and a fixed amount of images, like the 5 you showed in your question, you can just use percentages instead , like this
.im1 {
width: 19%;
}
Because 100% width of parent / 5 images = 20% , but sometimes you want to set a little lower to make sure some browsers don't render it incorrectly, so they all fit on the same line.
Also, since your using an id #one for the parent, you might need to use
#one .im1 {
width: 19%;
}
instead
The following works in some browsers but not in IE:
Expected result: By default, Blue div covers image... however mouse hover over any visible part of image brings entire image forward (in front of blue div).
http://jsfiddle.net/NUz3M/
CSS:
.container { position:relative; }
.bigpic { position:relative;width:300px;height:300px; }
.bigpic img { z-index:2; position:relative; }
.bigpic img:hover { z-index:10; }
.shade { z-index:3;
position:absolute; top:20%;left:0;
width:100%; height:200px;
background-color:blue; }
HTML:
<table>
<tr>
<td class="container" >
<div class="bigpic">
<img src="http://s8.postimg.org/xhqgtehlh/sample.jpg" />
</div>
<div class="shade"></div>
</td>
</tr>
</table>
Any ideas? suggestions? Trying to stay away from Javascript for this.
Thanks!
This is based on information from the link by #showdev. If the parent z-index is changed on hover instead of the image, it works.
.bigpic:hover { z-index:10;} rather than .bigpic img:hover { z-index:10;}
jsfiddle.net/sMg7a/1/
You do need to make a little more effort reading the links given in your comments.
P.S. Tested in IE 10.0(.9200.16721)
Here is my HTML:
<div id="leftMenuWrapper">
<div id="ramps" class="leftMenuHeaderButton"></div>
<div id="carServiceRamps" class="leftMenuSubButton"></div> <div class="clear"></div>
<div id="67RaceRampsXT" class="leftMenuProductButton"></div>
</div>
Here is my CSS:
#leftMenuWrapper{
background:url(../images/main_elements/leftMenu_BG.jpg) repeat-y;
border:#777777 thin solid;
width:160px;
margin-left:-19px;
position:absolute;
padding-bottom:5px;
}
.leftMenuHeaderButton{
width:175px;
height:35px;
position:relative;
top:-16px;
left:-11px;
}
#ramps{
background:url(../images/main_elements/leftMenu/Ramps.png) no-repeat;
}
.leftMenuSubButton{
width:169px;
height:21px;
position:relative;
float:right;
left:1px;
}
#carServiceRamps{
background:url(../images/main_elements/leftMenu/car-service-ramps.png) no-repeat;
}
.leftMenuProductButton{
width:160px;
height:20px;
clear:both
}
#67RaceRampsXT{
background:url(../images/main_elements/leftMenu/67-Race-Ramp-XTs.jpg) no-repeat;
width:160px;
height:20px;
}
.clear{clear:both}
Everything works, except <div id="67RaceRampsXT" class="leftMenuProductButton"></div> won't display it's BG image (it won't even display a BG color). The element is there, because if I adjust the sizes, it adjusts accordingly, but it won't display images in FF or Chrome.
I can put an <IMG> in it no problem, and I can even assign a BG to .leftMenuProductButton but not to #67RaceRampsXT
I don't think ids can start with number. Try to change your id to something like RaceRamps67XT and test it that way - in both HTML and CSS and see what it does.
Pretty sure only class identifiers can start with a number. For IDs you want [A-Za-z_]. Try changing your ID to #sixtySevenRaceRampsXT. Check out this question on valid IDs for more information:
What are valid values for the id attribute in HTML?