Results 1 to 9 of 9

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

  1. #1
    New Registered User Karti's Avatar
    Join Date
    Jan 2011
    Posts
    41

    Default Adding a link to an image - appears to move? 5 Jan 2011 @ 16.53

    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
      Reply With Quote

  2. #2
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 5 Jan 2011 @ 17.54

    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.
      Reply With Quote

  3. #3
    New Registered User Karti's Avatar
    Join Date
    Jan 2011
    Posts
    41

    Default 5 Jan 2011 @ 18.08

    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
      Reply With Quote

  4. #4
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 5 Jan 2011 @ 18.38

    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.
      Reply With Quote

  5. #5
    Member shalom_m's Avatar
    Join Date
    Jan 2009
    Posts
    488

    Default 5 Jan 2011 @ 19.47

    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]
      Reply With Quote

  6. #6
    New Registered User Karti's Avatar
    Join Date
    Jan 2011
    Posts
    41

    Default 5 Jan 2011 @ 20.10

    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
      Reply With Quote

  7. #7
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 5 Jan 2011 @ 23.56

    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 {...}
    Last edited by Mike Hopley; 6 Jan 2011 at @ 00.04.
      Reply With Quote

  8. #8
    New Registered User Karti's Avatar
    Join Date
    Jan 2011
    Posts
    41

    Default 6 Jan 2011 @ 12.05

    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;
    }

    Last edited by Karti; 6 Jan 2011 at @ 12.07. Reason: Added CSS code
      Reply With Quote

  9. #9
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 6 Jan 2011 @ 12.33

    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.
    Last edited by Mike Hopley; 6 Jan 2011 at @ 12.41.
      Reply With Quote

Similar Threads

  1. Adding Flash banner to site
    By trixiemay in forum HTML & CSS
    Replies: 0
    Last Post: 13 Feb 2011, @ 23.18
  2. Headline appears with red bg?
    By trixiemay in forum HTML & CSS
    Replies: 3
    Last Post: 15 Mar 2010, @ 08.08
  3. Adding site search
    By trixiemay in forum HTML & CSS
    Replies: 2
    Last Post: 20 Jan 2010, @ 09.14
  4. adding html on top of flash
    By sudhakararaog in forum HTML & CSS
    Replies: 10
    Last Post: 17 Dec 2009, @ 15.57

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •