We have this htmls in our page:
<div id="img"></div>
<div id="mouse_target">
<img style="-moz-user-select: none; border: medium none; width: 27px; height: 35px;" usemap="#imgmap1" src="http://i.stack.imgur.com/S9eo1.png">
<map name="imgmap1"><area href="javascript:void(0)" style="cursor: pointer;" title="" shape="poly" coords="11,25,22,11,11,1,1,11,11,25,11,33"></map>
</div>
And the css:
#img,#mouse_target{
width:27px;
height:35px;
position:absolute;
left:40px;
top:100px;
}
#img{
background:url("http://i.stack.imgur.com/S9eo1.png") no-repeat;
-moz-transform:rotate(45deg);
}
#mouse_target{
opacity:0.01;
}
#mouse_target map{
-moz-transform:rotate(45deg);
}
#mouse_target map area{
-moz-transform:rotate(45deg);
}
JsFiddle
Now,we have two problems:
implement the rotate across browser
Since the -moz-transform does not work on ie.
make the div#mouse_target or div#mouse_target map or
div#mouse_target map area rotate with the div#img.
Is this possible?
Related
I can't get my images to align correctly between all browsers:
I'm wondering if it's a border issue?
Question: would the best way to resolve this be to create a media query? Right now I sort of try to find a good middle ground, but when viewed on a safari mobile app, those few pixels make a big difference. Or is there a better way to contain the image between the .mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 divs?
Here is my relevant HTML:
<div id="officials">
<div class='mnhouse'>
<div class="membersublist">
<div class="memberLink"><span id="mnhouselink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='housemember' class='lcc_gis_member'></div>
<div id='housedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='housephoto' class='mnhouse_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
<div class='mnsenate'>
<div class="membersublist">
<div class="memberLink"><span id="mnsenlink">Show District <i class="fa fa-external-link-square"></i></span></div>
<div id='senatemember' class='lcc_gis_member'></div>
<div id='senatedistrict' class='lcc_gis_memberdistrict'></div>
</div>
<img id='senatephoto' class='mnsenate_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>
</div>
</div>
And here is my relevant CSS:
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: relative;
top: -56px;
border:none;
}
.membersublist{
margin-top:15px;
}
.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 {
height:87px;
background-color: #e6e6e6;
border-top: 1px solid #a7a5a6;
border-right: 1px solid #a7a5a6;
border-bottom: 1px solid #a7a5a6;
border-left: 3px solid #a7a5a6;
}
Here is the demo, in case I miss any relevant code (you need to select a point on the map to open the results).
The issue is your use of negative relative positioning to try to line it up.
#officials img {
...
position: relative;
top: -56px;
...
}
Basically you are positioning it relative to the offset created be the text, which can never be counted upon to be 100% consistent across browsers.
Instead, consider adding positioning to .mnhouse wrapper, and then using absolute positioning to position the images.
.mnhouse {
position: relative;
}
#officials img {
height: 100%;
min-height: 87px;
max-width: 65%;
position: absolute;
top: 0;
border:none;
}
Here is my css code:
.footer{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left{
float:left;
width: 50%;
}
.footer-right{
float:right;
width:50%;
}
.footer-nav .list-1 {
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2 {
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li{
display:inline;
padding:8px;
}
.copyright{
font-size:13px;
text-align: center;
}
Here is my JSfiddle link: http://jsfiddle.net/3jet0dfu/12/
May i know how to set background image to 100% attached with window screen.and the footer content need to display right of image.
Now i added <hr /> line for footer-left and footer-right at the top and bottom.
But it shows at the top only, Can anybody help me exact css style to fix this.
I need look like this http://s30.postimg.org/gvqtdrmqp/article_page4.jpg.
Thanks in advance.
add to css
header,section{
margin:0 auto;
width:939px;}
and edit body css like this
body{
font-family: Raleway, sans-serif;
}
this working page jsfiddle
remove the 2 and replace the following html and add the css
<div id="footer-holder">
<div class="footer-left">
<img src="http://s18.postimg.org/itr24b7s9/footer1.png" alt="footer-image" />
<div class="footer-content">
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
learn more
</div>
</div>
<div class="footer-right">
<img src="http://s18.postimg.org/gl8a98bah/footer2.png" alt="footer-image" />
<div class="footer-content">
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
learn more
</div>
</div>
<div style="clear:both"></div>
</div>
#footer-holder{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 11-12.1 */
border-image:url(border.png) 30 30 round;
border-left:none;
border-right:none;
width: 100%;
}
I've to follow below HTML structure.
<a class="abc" style: {background:"blue"}">
<img src="ImgPath" />
</a>
CSS
.abc{
width: 177px;
height: 177px;
display:inline-block;
}
abc img {
display:block;
z-index:9999;
width:50px;
height:50px
}
I want to display transparent image on top of the background color. I shouldn't use background-image/background: #c1c1c1 url('img.png') no-repeat; css property. I don't want use image as background-image. Image is hiding of background color.
Any help?
The image is probably not showing because you have unclosed quotes:
<a class="abc" style: {background:"blue"}">
You should have:
<a class="abc" style="background:blue">
Better to use CSS
.abc {
background: url("ImgPath") 0 0 no-repeat blue;
}
You can give an elment a background color and set a background image like this:
CSS
.abc{
background: #c1c1c1 url('path/img.jpg') no-repeat;
}
HTML
<a class="abc"></a>
This way the color is not hided.
Are you looking something this kind of effect?
Not sure you are looking this kind of stuff. check Demo link. http://jsbin.com/wibaxuyu/1/
a.abc{
width:200px;
height:200px;
background:rgba(145 ,145 ,89 ,00.5);
display:inline-block;
position:relative;
}
a img{
position:absolute;
top:20%;
left:20%;
z-index:9999;
width:100px;
height:100px;
opacity: 0.8;
filter: alpha(opacity=80); /* IE 5-7 */
-moz-opacity: 0.8;
}
<a class="abc">
<img src="http://lorempixel.com/100/100" />
</a>
I'm trying to get the shoutbox on www.talkjesus.com (vBulletin forum) to float left while the verse of the day (orange) to float on the very right side of the shoutbox. I've tried so many variations but it's not working, I'm stuck. Your help appreciated.
The forumhome template code I'm using now is:
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
<div style="text-align: center; line-height: 0" class="blockrow">
<div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
<div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
</div>
</div>
</div>
<br />
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
<div>
<div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
<script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&type=js2&tw=auto&tbg=ffffff&bw=0&bc=000000&ta=L&tc=43A6DF&tf=Open Sans&ts=14&ty=B&va=L&vc=43A6DF&vf=Open Sans&vs=12&tt=3&trn=NASB"></script>
</div>
</div>
</div>
</div>
relevant CSS code...
/* Auto-clearing of floats */
.floatcontainer:after,
.formcontrols .blockrow:after,
dl.stats:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:inline-block;
font-weight:normal;
}
/* IE-Mac hide \*/
* html .floatcontainer,
.formcontrols .blockrow,
dl.stats {
height:1%;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:block;
}
.blockrow {
padding:12px;
}
.blocksubhead {
padding:12px;
}
.blockhead_info, .blocksubhead_info {
float:right;
font-weight:normal;
}
Have you tried applying the float property to the .floatcontainer element?
.floatcontainer {
width: 50%;
float: left;
}
Setting the width property will be necessary here because the output of the script in the second .floatcontainer block adds a div element to the document which has a width of 100%. Take a look at the output here: http://goo.gl/Bw7iaD (see inline styles of first element). This makes the verse box span full-width unless it's parent container has a specified width.
Here is an example of the working code: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe
I am having a problem with my css sprites. It looks like it is working (well, to me it looks like it should work). All the sprites just show the first icon but not the other ones.
Looked at many places and could not find an answer.
Thanks for helping me.
I put it up on a seperate page to save time.
[dead link]
And for those who aren't able to go to that page for any reason, here is the code:
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="iconFB linkIcon" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" class="iconFL linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
And the css is here (shortened):
.iconFB {background-position:0 -40px;}
.iconFL {background-position:0 -82px;}
.iconRSS {background-position:0 -164px;}
.iconY {background-position:0 -246px;}
.linkIcon {
width: 36px;
height: 36px;
background: url(iconSprite.png) no-repeat top left;
}
Thank you very much for helping!
You have a CSS specificity problem.
The CSS like this:
.iconFB {
background-position:0 -40px;
}
is being overridden by this:
.linkIcon {
..
background: url(iconSprite.png) no-repeat top left;
..
}
because background is shorthand for (amongst other things) background-position.
The easiest way to fix this is to swap around the two blocks of CSS, like this:
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align:middle;
background: url(iconSprite.png) no-repeat top left;
}
.iconFB {
background-position:0 0;
}
.iconFL {
background-position:0 -82px;
}
.iconRSS {
background-position:0 -164px;
}
.iconY {
background-position:0 -246px;
}
(I fixed the position of the Facebook icon, from 0 -40px to 0 0)
.linkIcon.iconFB and .linkIcon.iconFL and so on will solve this. Currently your linkIcon style overwrites the positions you set in .iconFB because it's further down in the CSS file.
Edit: (or just move the iconFB etc. styles below the .linkIcon styles)
The position of the background image is being overridden by the shorthand background in .linkIcon.
Either re-order the CSS, or use separate background-image and background-repeat declarations (and no background-position) in .linkIcon. I'd argue the latter is preferable.
Another way would be to use id's as these icons are probably unique and not reused on the same page. As it is used to "identify" a certain icon it makes sense to use an ID instead of a class.
<style>
#iconFB {
background-position: 0 0px;
}
#iconFL {
background-position: 0 -82px;
}
#iconRSS {
background-position: 0 -164px;
}
#iconY {
background-position: 0 -246px;
}
.linkIcon {
width: 36px;
height: 36px;
cursor: pointer;
cursor: hand;
vertical-align: middle;
background: url(iconSprite.png) no-repeat top left;
}
</style>
<div class="iconDiv">
<a href="http://facebook.com/" title="Facebook Page">
<img src="./1px.png" class="linkIcon" id="iconFB" alt=""/><span>Facebook</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.flickr.com/" title="Flickr Page">
<img src="./1px.png" id="iconFL" class="linkIcon" alt=""/><span>Flickr</span>
</a>
</div>
<div class="iconDiv">
<a href="#" title="RSS Page">
<img src="./1px.png" id="iconRSS" class="linkIcon" alt=""/><span>RSS</span>
</a>
</div>
<div class="iconDiv">
<a href="http://www.youtube.com/" title="Youtube Page">
<img src="./1px.png" id="iconY" class="linkIcon" alt=""/><span>YouTube</span>
</a>
</div>