I have this landing page. I'd like the email to be a link to mailto:info#domain.tld.
I tried to use a map (usemap="#mail" on body and then map name="mail">) but it doesn't work. I tried also with a blank transparent png image (to set the usemap to) but the link isn't clickable.
How can I achieve the area of the email to have a link upon it? Of course it should work on different resolutions.
Why don't you just render the email link as text? It looks like it can be similar to Open Sans: http://www.google.com/webfonts/specimen/Open+Sans
You could do something like this:
ADD CSS:
div#mail {
margin-left: 67%;
margin-top: 31.8%;
overflow: hidden;
width: 16%;
}
a {
color: transparent;
}
ADD HTML:
<div id="mail">info#gioiellidisapone.it</div>
Demo: http://jsfiddle.net/fXats/
It's not perfect, but maybe it's good enough. :)
This is how I modified your page directly using Inspect element, and the link stays on top of the image text. This is another option, but has fixed width and height to support the positioning of the email.
<body>
<div style="
width: 1430px;
position: absolute;
border: 1px solid #000;
height: 700px;
background-image: url(home2.jpg);
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
"><a href="#" style="
position: relative;
top: 450px;
right: 294px;
display: inline-block;
float: right;
">Info#gioiellidisapone.it</a>
</div>
</body>
Related
I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.
<head>
<style>
img{
border : none;
text-decoration: none;
}
#forum
{
background:url(forum_button.png) 0px 0px no-repeat;
width: 300px;
height: 81px;
}
#forum:hover
{
background:url(forum_button.png) -300px 0px no-repeat;
width: 300px;
height: 81px;
}
#facebook
{
background:url(social_buttons.png) 0px 0px no-repeat;
width: 29px;
height: 29px;
}
#facebook:hover
{
background:url(social_buttons.png) 0px -33px no-repeat;
width: 29px;
height: 29px;
}
#twitter
{
background:url(social_buttons.png) -31px 0px no-repeat;
width: 29px;
height: 29px;
}
#twitter:hover
{
background:url(social_buttons.png) -31px -33px no-repeat;
width: 29px;
height: 29px;
}
</style>
</head>
<body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
<img id="forum" />
<div id="social">
<img id="facebook">
<img id="twitter">
</div>
It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it
="#"><img id="facebook"></
It's not a border, what you see is the broken image border.
If you want to keep your code, change the img tag to a div..
Change
border: none;
to
border: none !important;
This way it will override all the parent's declarations and thus has to work.
That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.
Insert Image by using img src with proper height and width.
Use Paint or other tools to edit image.
example.
make sure that your original image dont have any border, if it have simply select and crop the image.
maybe the border is not html given but its in your img ?
So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.
You are trying to set an icon image on a link using a background image that can be repositioned on a hover event.
The simplest way of doing this is as follows.
The HTML can be as simple as:
<a class="test" id="test" href="#"></a>
and apply the following CSS:
.test {
background: beige url(http://placekitten.com/50/50) center center no-repeat;
display: inline-block;
width: 50px;
height: 50px;
border: none;
}
Apply the background image on the link (a tag) instead of an img tag, which is not needed.
See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/
having some CSS difficulties and hoping someone can help me out.
I am trying to get the navbar to expand out on both sides of the page (filled with a solid color), but have a transparent space where I can squeeze in my logo (as seen in the image below).
My page background is an image, so I can't just fill the {Logo} cell, with a bg colour - If it helps at all, I am also using Twitter Bootstrap.
Please can someone help me out with this. Been stuck for a a while now. :S
I was referring to something like this in my comment http://jsfiddle.net/slash197/Eh2xL/1/ This is just a proof of concept, you need to change the values and sizes.
HTML
<div class="bg">
<div class="nav">
<div class="logo">Logo</div>
</div>
</div>
CSS
body, html {
height: 100%;
}
.bg {
background: url("http://slashwebdesign.net/green-nature-wallpaper2.jpg") no-repeat center top;
width: 100%;
height: 100%;
padding: 30px 0px;
}
.nav {
background: url("http://slashwebdesign.net/nav.png") no-repeat center top;
height: 35px;
}
.logo {
margin-left: 100px;
color: #ffffff;
}
Maybe you could do something like this (no image needed, just pure css) :
http://jsfiddle.net/Jh4ya/6/
You have the right side of your navbar positioned as absolute :
#right {
left: 250px;
right: 0px;
position: absolute;
height: 30px;
background: #469;
top: 0px;
}
I think it is one of the most cleanest way to do it. Hope it helps
EDIT :
It may faces some widths issues. As a workarround, you could use display: table-cell; and display: table; properties. See this fork : http://jsfiddle.net/qxVce/
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
I am having problems with the following link:
the play image is a <span> element with a background image used with a css sprite.
When i hover over the isotope hydrology image like in the image above everything works fine (link and css sprite). The problem is in IE9, when the cursor hovers over the css sprite(play button) the sprite goes back to the non-hover look and you cannot click to the link from inside (see image below).
If anyone knows why this is happening that would be awesome. Here's a jsfiddle I made for it, but it doesn't recreate the problem.
I have the following html and css:
html:
<div id="video-box-left">
<div class="video-img">
<a href="#" onclick="window.open('http://wwwindex.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">
<span class="video-play-q-left">play</span>
<img src="resources-na/images/forum.PNG" width="200" height="155" border="1"></a>
</div>
<div class="video-text">
<p><strong>Food for the Future</strong></p>
</div>
</div>
css:
#video-box-left{
margin-left: 10px;
margin-right: 20px;
float: left;
width: 210px;
}
.video-img {
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
margin-bottom: 5px;
padding: 4px;
width: 200px;
height: 155px;
}
.video-text {
}
.video-play-q-left {
background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
background-position: center top;
height: 50px;
position: absolute;
text-indent: -9999em;
width: 50px;
left: 100px;
top: 127px;
}
a:hover .video-play-q-left{
background-position: center bottom;
}
I'd guess this is due to an issue with the DOCTYPE of your document which causes IE9 to render the document in quirks mode. That would explain why the JSFiddle doesn't reproduce the problem. Try opening the Developer Console in IE9 and make sure Document Mode and Browser mode are both set to IE9. If that solves your problem, make sure your DOCTYPE tag is set to HTML 5, e.g.
<!DOCTYPE html>
I have images that are also links, coded like this:
<img src="pages/squirrely.png" />
They work fine, but I want it to be a link, only if you click the general middle of the photo. If you click on the outer regions of the image, I don't want any linking to happen.
I tried changing the width and height of the lin, but it didn't work. My css is:
#magazine a {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
I would not work with an imagemap in this case, but do something like this:
The HTML:
<div class='container'>
<img .../>
<a ... ></a>
</div>
The CSS:
.container {
position: relative;
}
.container img {
width: 100px;
height: 100px;
border: 5px solid #fff;
}
.container a {
display: block;
width: 60px;
height: 60px;
position: absolute;
top: 25px;
left: 25px;
}
Basicly this puts your link on top of your image. I find it much easier to play with the positioning and the dimensions of the link this way. (I did not test the code, but i think it should work)
There are several web applications that'll allow you to choose the coordinates for the mapping. I've tried this one with great success:
http://www.maschek.hu/imagemap/imgmap
I hope this helps you with your project!