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
    2,034
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.10985 seconds
  • Memory Usage 2,859KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (4)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates