www.webdeveloper.com
Results 1 to 3 of 3

Thread: Adding link to image messes up CSS

  1. #1
    Join Date
    Jun 2011
    Posts
    10

    Adding link to image messes up CSS

    Hi.

    I wanted to make the pictures on the front page of http://extinction.dk/ link to the same page as the "Ls mere" link.

    I would've thought it would be as simple as taking the original code:
    Code:
    <div class="block_inside">  <img src="<?php echo $row_getArticle1['thumbnail']; ?>" class="thumbnail" alt="Mini1"  />
            <h4><?php echo $row_getArticle1['title']; ?></h4>
            <p><?php echo $row_getArticle1['description']; ?> <a href="articles/article.php?article_id=<?php echo $row_getArticle1['article_id']; ?>">Ls mere</a></p>
            <small><?php echo $row_getArticle1['formatted']; ?></small> </div>
    And adding a simple <a href [...] like so:
    Code:
          <div class="block_inside">  <a href="articles/article.php?article_id=<?php echo $row_getArticle1['article_id']; ?>"><img src="<?php echo $row_getArticle1['thumbnail']; ?>" class="thumbnail" alt="Mini1"  /></a>
            <h4><?php echo $row_getArticle1['title']; ?></h4>
            <p><?php echo $row_getArticle1['description']; ?> <a href="articles/article.php?article_id=<?php echo $row_getArticle1['article_id']; ?>">Ls mere</a></p>
            <small><?php echo $row_getArticle1['formatted']; ?></small> </div>
    But apparently this is wrong, as I get the following result:
    http://extinction.dk/pic.png

    The CSS for the front page is as follows:
    Code:
    @charset "utf-8";
    /*CSS reset*/
    body, div, h1, h2, h3, h4, h5, h6, p, ul, img{margin:0px;padding:0px;}
    a img {border: none; }
    
    /* Font styles */
    body, td, pre {color:#606060; font-family:Arial, Helvetica, sans-serif;	background-color:#e2e2e2; font-size: 14px;}
    h4 {font-size: 24px; font-weight: bold;}
    small {font-size: 12px; color: #373737;}
    #content a, #sidebar a {color: #2a3f53; font-weight: bold; text-decoration: none;}
    #content small {float: left; position:absolute; right:330px; bottom:20px; font-style: italic;}
    .block_inside a {position:absolute; right:30px; bottom:20px;} /* "Læs mere" linket */
    
    /* Header */
    #main {background: url(../images/header_slice.jpg) repeat-x;}
    #logo {background: url(../images/logo.png) no-repeat; height: 120px; width: 450px;}
    #logo h1 {text-indent: -9999px;}
    #header {padding-top: 38px;}
    ul.dropdown {padding-top:30px;}
    
    /* Content */
    .container {width:1000px; margin: 0 auto;} /*Container er 'beholderen' til alt andet indhold på siden*/
    #content {padding-top:25px;	width:630px; float:left;}
      
    /* Sidebar */
    #sidebar{float:left; margin-left:10px; margin-top:25px;}
    
    .block_inside, #sidebar {margin-bottom:10px; position:relative; overflow:auto; background:none; background-color:#e2dddc; padding:15px; border-radius: 10px; border:1px solid #a1a1a1; box-shadow: 3px 3px 4px #555;}
    #sidebar {width:260px;}
    
    .thumbnail {float:left; margin-right:20px; border:1px solid #979390; }
    
    /*Footer*/
    #footer {background:url(../images/footer_slice.gif) repeat-x; padding-top:20px; padding-bottom:30px; margin-top:25px; color:#e2e2e2;}
    #footer p {float:left;}
    #footer img {position:relative; left:400px; top:-10px;}
    where ".thumbnail" is the specific styling for the thumbnail image.

    Thanks for your help.

  2. #2
    Join Date
    Aug 2006
    Posts
    1,917
    This style:
    Code:
    .block_inside a {position:absolute; right:30px; bottom:20px;} /* "L&#195;&#166;s mere" linket */
    gets applied when you put the anchor around the images. I suspect that's not what you wanted!

    Dave

  3. #3
    Join Date
    Jun 2011
    Posts
    10
    Oh, that totally slipped right by my sight.

    Great, thanks a lot! Fixed now

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles