I am looking for a solution without javascript, where I can use an link like this:
<a href='#link1 +60px'>
This is just an example for easier understanding. So what I am trying is, that I got an anchor in my website, and the link goes to that specific point + 60px further.
So far the following is the best method I could find to position the landing position w/o javascript
HTML (add an additional anchor tag)
<!-- Actual going to here -->
<a id="anchorpoint" class="anchor"></a>
<!-- Display point -->
<div>Some content here</div>
CSS
.anchor {
display:block;
padding-top:60px;
margin-top:-60px;
}
It's a slight modification of Fixed position navbar obscures anchors. The advantage lies there, that you don't prepopulate padding and margin of the actual container.
Try: https://jsfiddle.net/q6yvuhao/
This is impossible.
Your only options are JavaScript and linking explicitly to a spot (with its own ID) above where you want to link to.
Is the anchor point invisible? If so, add a class to the link and the following CSS:
a.link {
position:relative;
top:60px;
}
<a class="link" href='#link1'>
Related
http://www.artwars.net
Please take a look at the footer with logos two of the logos links bedpr and stormtrooper aren't working.
It is better to view the code through the browser than me paste it.
Appreciate the help.
Ant
Your markup is messy:
<div id="logo118" <a href="http://www.bedpr.com/"><img src="http://www.artwars.net/wp-content/themes/artwars2/images/bedpr.jpg" width="145" height="40"></div>
That's no valid HTML. You should close the starting div tag. I think you forgot the ">".
edit:
Take a look at the div's: The swarowski logo's div is missing
float:left; //So just add it there.
Also it has a
margin-left:360px;
instead of
left:360px; //This should not force design problems, just to improve your layout
Now, you have to adjust logo113 and logo115. Just like this:
top:-20px; //instead of -50px
Should work now.
I have an image, on which I want to place links, which could be either text or an image. Pretty much what Wikipedia has here for example (the map of Germany and its states): http://en.wikipedia.org/wiki/States_of_Germany
Back in the 90s I would've used the map tag to create clickable parts on the image.
I've looked at the source code of the map on Wikipedia and noticed that all the states of an absolute position. So is there an easy way to implement such a thing? Or do I have to use, for example, Photoshop to check for the absolute position and hardcode it in CSS/HTML?
As you already noticed, Wikipedia uses <div>-elements which are positioned over the image. One way or another you would need to provide the (absolute) coordinates for the texts you want to place on top of the image.
You can try to fiddle around to get the correct coordinates or use a(ny) image editing application to exactly find the required coordinates within the image.
Wikipedia uses some structure like this
HTML:
<div class="container">
<img src="myImage.png" />
<div class="text1">Text1</div>
<div class="text2">Text2</div>
</div>
CSS:
.text1 {
position:absolute;
left:50px;
top:100px
}
.text2 {
position:absolute;
left:200px;
top:50px
}
(Except that they directly put the CSS styles in the HTML elements...)
See this jsFiddle for an working example.
I guess you need a HTML map (example http://www.w3schools.com/tags/tag_map.asp) plus some javascript to include the text over it.
Please take a look to the following question, it might help you:
HTML, jQuery : Show text over area of image-map
If you are creating something similar in the link you mentioned, you gotta be pin pointing those positions. Isn't it? absolute positioning is good to go in that case.
But if your scenario does not require you to put those links in the exact locations on the image, you can try something like this.
CSS//////////
div.back{
background:url('path/to/your/image.extension');
width:/*width of the image*/;
height:/*height of the image*/
}
This div with class back will just work like the way you want. Then put the links inside the div and the links will be displayed on top of that image.
Check out this fiddle.
This is hard to sum up in a title, so forgive me.
Basically, here is what I have:
a img {
/ * style * /
}
However, I want to affect the a tag in this instance. Is there any way to do so in CSS without resorting to JavaScript wizardry?
Unfortunately the cascading in CSS only goes one way. From your example, I'm guessing you are trying to do something like this:
<a><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
<a>Hello</a> <!-- This A is normal -->
Most developers would accomplish it by simply adding a class.
<a class="icon"><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
Even better, use that class to make the icon a background image and add padding.
<style type="text/css">
a.icon { background:18px left center no-repeat; line-height:18px; }
</style>
<a class="icon" style="background-image:url('icon.gif');">Hello with icon</a>
Put all your icon images into classes too and you have some pretty clean HTML!
You want to apply styles to the tag only if it has an image correct? In short, using straight CSS there is no way to do that.
EDIT
BUT, if you wanted to do this w/ jquery you could do it like so:
$('a').has('img').addClass('hasImg');
then use .hasImg as your hook
a.hasImg{background:lime;display:block;height:200px;width:200px;}
Here's a demo on JSBin I put together (view source): http://jsbin.com/owafi4
CSS selectors can not ascend. It is a limitation of the language.
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.
I've inherited a large project that already has a large markup base coupled with a short deadline, so a complete rewrite is out of the question. As such, I have an issue that needs to be resolved ASAP:
(Forgive my cryptic shorthand in advance)
I have a header that contains an UL and a DIV.
div id="header"
ul id="nav"
<a li />
<a li />
<a li />
/ul
div id="promotion"
p
/div
/div
I want the background-image (ie., the entire DIV) to be a link, so I added this to the markup:
div id="header"
a id="overlay"
...
And the CSS for that reads something like this (not the exact CSS, I don't have access to the file while I'm at home):
a#overlay {display: block; width: xxx, height: xxx, z-index: -1
Now here's the kicker: the UL and the other DIV need to be positioned above "overlay," because they have their own links in them. This works in FF3 and IE8, but not IE6/IE7. I'm looking for a generic solution to this problem that is compatible in IE6/IE7 (and dropping IE6 is not an option, this is a BIG client)
Any suggestions? Here it is in simple terms: header --> link overlay --> ul with links --> other elements on top of link overlay
You could use JavaScript to attach a click handler to that background instead of relying on a link.
document.getElementById('overlay').onclick = function() {
window.location = 'http://www.google.com/';
}
IE6/7 does not respect the z-index stacking context as you'd expect. Have you tried setting a higher index on the child elements of the parent anchor?
Here's the generic solution I came up with after reading the link Tate Johnson provided.
I tested it and can confirm that it works in IE5.5/6/7/8, FF3, Chrome and Safari.
I was overlooking the fact that you need to declare the position of each element if you're going to use z-index. Setting everything to position: relative (except for the link, which is set to position: absolute) did the trick.