Thread: Adding a link to an image - appears to move?

Hi all,

Once again thanks for all the help but I have an issue where I add a link to an image and for some reason I can't fathom moves it!

HTML Code:

<div id="right_column">
                    <h2>Help for Heroes Links</h2>
                <div id="h4h_main_image">
                    <h3>Their main website link</h3>
                    <a href="http://www.helpforheroes.org.uk"><img style="width: 200px; height: 100px;" alt="" src="images/h4h.jpg"></a>                        
                </div>
                <div id="h4h_donation_image">                
                    <h3>Their donation website link</h3>
                    <img style="width: 200px; height: 100px;" alt="" src="images/h4h_donations.jpg" >
                </div>
            </div>

My CSS is :

Code:

body{
    font-size:80%;
    font-family:verdana,arial,'sans serif';
    min-width: 800px; 
    margin:50px 0px; padding:0px;
    text-align:center;
    background-image: url(images/background5.png);
    background-repeat: repeat-x;
}
h1 {
font-size:160%;
fontweight:bold;
}
h2 {
font-size:130%;
font-weight:bold;
}
h3 {
font-size:110%;
font-weight:bold;
}
h4 {
font-size:90%;
font-weight:bold;
}
ul{
list-style-type:none; 
}
li{
display:inline; 
}
a{
float:right;
width:6em;
text-decoration:none;
color:white;
font-weight:bold;
padding:5px;
}
a:hover{
color:#ff0000;
}
#wrapper {
    width:800px;
    margin:0px auto;
}
#menu{
    position: absolute;
    left: 300px;
    top: -10px;
    text-align: center;
}
#left_column{
    position: absolute;
    left: 0px;
    top: 140px;
    width: 350px;
    height: 563px;
    text-align: left;
}
#right_column{
    position: absolute;
    left: 450px;
    top: 140px;
    width: 350px;
    height: 400px;
    text-align: left;
}
#h4h_main_image{
    position: absolute;
    left: 0px;
    top: 50px;
}
#h4h_donation_image{
    position: absolute;
    left: 0px;
    top: 250px;
}
#products{
    position: absolute;
    left: 400px;
    top: 350px;
    width: 350px;
    height: 300px;
    text-align: left;
}
#product_menu{
    position: absolute;
    left: -300px;
    top: -15px;
    text-align: center;
}
#copywrite_footer{
    position: absolute;
    left: 90px;
    top: 750px;
    width: 627px;
    height: 14px;
    text-align: center;
}

Its strange as it looks fine until I add the actual links. Ah well

Many thanks for any help that comes my way

K

Just a quick suggestion, as I'm in a rush:

It's much easier for us to debug live web pages, rather than eyeball the code and guess how it ought to work. If you have a link showing this problem in action, then we can also use developer tools such as Firebug to speed up the process.

Mike,

No problems. Sorry I never thought it would be easier.

The website is - here - to view

The css sheet is - here

Many thanks

K

No problem. I should have a chance to look at this tomorrow (rushing off out now), but by then I expect someone will already have solved it.

In

Code:

a{
float:right;
width:6em;
text-decoration:none;
color:white;
font-weight:bold;
padding:5px;
}

Change
[FONT=Courier New]float:right;[/FONT]
to
[FONT=Courier New]float:left;[/FONT]

shalom_m,

Can I assume that this is caused by the a{ being generic to the whole site.

That fix works fine but could I ask if there is a way to have two menus on the same page?

From what I have read it might go something like;

HTML Code:

a.1{
float:right;
width:6em;
text-decoration:none;
color:white;
font-weight:bold;
padding:5px;
}

I have it on the page - here

Thank you for the help with the last problem.

K

Note that a class or ID cannot start with a digit. All your classes and IDs should start with a letter.

So .1 is wrong; .c1 is okay.

Generally you want to organise your CSS using classes, so that you're not constantly repeating yourself and overriding rules that override other rules that override still more rules...

Organising CSS well is non-trivial. As a basic start, you want to avoid doing stuff like cramming the specific styles for your navigation links into the general a {...} styles.

So a {...} contains only basic link styling, such as would be used for normal links in your content. Then you put all the navbar-specific CSS into something like .navbar a {...}

Mike,

I have gone over my CSS this morning and I feel that it is better organised.

I started from scratch by cutting and pasting from one sheet to the next and commenting as required and learnt quite a bit.

What I need to get into my head is the ability to see what I can mix and match with the elements and classes.

Hopefully that will come in time.

Please feel free if you have time to critique code:

HTML Code:

/* Basic Body for the website */
body{
    font-size:80%;                                                /* Font size as a percentage */
    font-family:verdana,arial,'sans serif';            /* Font family as a type */
    min-width: 800px;                                         /* Sets minimum size of element */
    margin:40px 0px; padding:0px;                            /* Sets margins around body with/out padding */
    text-align:center;                                        /* Centers the page */
    background-image: url(images/background5.png);    /* Site background image */
    background-repeat: repeat-x;                            /* Repeats image as its only 2px in width */
}
/* Setting heading font details */
h1 {
font-size:160%;
fontweight:bold;
}
h2 {
font-size:130%;
font-weight:bold;
}
h3 {
font-size:110%;
font-weight:bold;
}
h4 {
font-size:90%;
font-weight:bold;
}
/* Setting the default line/lists */
a{
width:80px;
text-decoration:none;
color:white;
font-weight:bold;
padding:15px;
}
a:hover{
color:#ff0000;
}
/* Setting details for all page divisions */
#wrapper {
    width:800px;
    margin:0px auto;
}
#header {
/* Leaving blank as a holding element */
}
/* Setting logo and menu background positions */
#logo{
    position:absolute;
    left: 0px;
    top: 0px;    
    width:311px;
    height:102px;>
}
#menu_background{
    position:absolute;
    left: 200px;
    top: -20px;
    width: 482px;
    height: 38px;
}
/* Setting the top menu position */
#menu{
    position: absolute;
    left: 300px;
    top: -5px;
    text-align: center;
}
#menu ul li{
    display:inline;
}
/* Setting the left column position details */
#left_column{
    position: absolute;
    left: 0px;
    top: 140px;
    width: 350px;
    height: 485px;
    text-align: justify;
    border-left:1px solid black;
    padding:10px;
}
/* Setting the right column position details */
#right_column{
    position: absolute;
    left: 450px;
    top: 140px;
    width: 350px;
    height: 485px;
    text-align: justify;
    border-right:1px solid black;
    padding:10px;
}
#products{
    position: absolute;
    left: 0px;
    top: 350px;
    width: 700px;
    text-align: left;
}
#product_menu{
    position: absolute;
    left: 65px;
    top: 0px;
    text-align: center;
}
#product_menu_background {
    position: absolute;
    left: -100px;
    top: -15px;
    width: 800px;
    height: 70px;
}
#product_menu ul li{
    display:inline;
}
/* Help for Heroes - image details */
#h4h_main_image{
    position: absolute;
    left: 0px;
    top: 50px;
}
#h4h_donation_image{
    position: absolute;
    left: 0px;
    top: 250px;
}
/* Footer with copywrite details */
#copywrite_footer{
    position: absolute;
    left: 90px;
    top: 670px;
    width: 627px;
    height: 14px;
    text-align: center;
}

Code:

a{
width:80px;
text-decoration:none;
color:white;
font-weight:bold;
padding:15px;
}

I would say that's a strange way of organising styles. Of course, it depends on which applications you consider "standard" and which you consider the "exceptions".

I would normally not associate much "base styling" with links, since they can appear in so many different places. I would only apply the styles that you want appearing in a typical link-inside-a-paragraph.

For example, here is the CSS from my site:

Code:

a:link {
	color: #00f;
	background-color: inherit;
}
a:visited {
	color: purple;
	background-color: inherit;
}

Notice that those are "base styles" and have almost no rules inside them. When I want to do something fancier, I add the rules to that specific item -- for instance, here is the CSS for my navigation bar links:

Code:

ul#topNav a {
	color: #fff;
	background-color: #e3ecff;
	float: left;
	width: auto;
	padding: 0em 1em;
	text-decoration: none;
	border-left: 2px solid #b7d3fd;
	font-size: 100%;
}

(Nowadays I would write the selector as just .topNav a {...} ).

So you can see that the base elements have relatively little styling applied to them. Special instances of those elements -- such as the links inside a navbar -- should declare their own styles, rather than polluting the base element styles.

As I said before, this stuff gets very complicated very quickly. Most complex sites -- including my own -- have badly organised CSS. As a minimum, however, I would recommend you avoid overloading the base elements with styles that really belong to specific applications.

If you really want to know about organising CSS properly, watch this video: http://www.stubbornella.org/content/...f-massive-css/ . This is guru-level stuff, however: it's not intended for beginners.