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.
Related
Im starting to learn HTML and CSS and i want to ask how can i move the button under the logo. As I said im kinda new to this soo please dont be to harsh on me haha. I tried to mess with display, justify-content and align-items, but im not sure that i'm looking at the right place.
P.S The button itself isnt made by me. I just changed it a bit so my first html+css documents would not look that bad. And course I'm not doing this commercially, just for my own satisfaction and learning.
Site
Code
You can use onClick event handler on img html tags. So, you don't need buttons under images. However, if you want to do it, you can use z-index css property.
img{
z-index:1;
}
button{
z-index:0;
}
I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>
Soooo... I was working on this page using jsFiddle and it doesn't work the same on the actual page!
http://jsfiddle.net/8Hpmj/8/
http://ktaadn.me/about/
The ktaadn.me example isn't left-justified and filling the width below the logo.
What did I do wrong?
If you need inspiration this is my seductive, unhelpful cat.
http://4.bp.blogspot.com/-NVtngGt43Rs/Tcmmw6RR-zI/AAAAAAAABOI/UPYJJHpAlk8/s640/IMG_9728.jpg
Thanks!
add padding:0; to .nav1
and width:100% to the anchor tags odd.a and such
that should fix it.
tip: do not use these css grid frameworks if you are not very solid at it.
good luck man.
I am having a problem with some links I have made in Dreamweaver; I have made these links by putting the web address onto the link field in Dreamweaver.
But when I preview in browser the whole image does not turn into a link, only the bottom part of it does. So when I hover my mouse over the image, only at the very bottom of the image it turns into a hand.
The code for the page is here http://jsfiddle.net/BGpu8/ and the links with this problem are at the bottom of the page - Facebook, Twitter etc.
Any ideas on why this is happening would be much appreciated! Thank you in advance!
It should really be marked up like this:
<div id="fb"> <p><a href="http://www.facebook.com/group.php?gid=232587661141"><img src="graphics/social graphics/facebook.gif" width="31" height="31" alt="Facebook Logo" />
Find Us <br />on Facebook</a></p></div>
Put inline elements like anchors and images inside block level elements like paragraphs. In the DreamWeaver generated code it had the anchor in there twice and other wonkiness. If you have time you should take some of the other posters advice and try to learn by hand.
please check if you missed to provide "display:block;" css property to your anchor tag.
try to code like this,
<div class="fbIcon"> </div>
and corresponding CSS as:
.fbIcon{
background:url(ur image url);
height:xx px;
width: xx px;
}
.fbIcon a{
display:block;
}
Now it shud work!
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.