www.webdeveloper.com
Results 1 to 5 of 5

Thread: Block of links as wide as images (far too wide)?

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    264

    Block of links as wide as images (far too wide)?

    Why is my block of the links of my website off-line as wide as the images?

    <!DOCTYPE html>
    <html><head>
    <!-- saved from url=(0022)http://internet.e-mail -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Eduard Lid</title>

    <link rel="stylesheet" type="text/css" href="ex1.css">
    <link rel="stylesheet" href="panning-slideshow.css">
    <link rel="stylesheet" href="bsa.css" type="text/css" media="screen">
    <script src="jquery-latest.js"></script>
    <script src="jquery_002.js"></script>
    <script src="jquery.js"></script>
    <script src="image-rotator.js"></script>
    <script src="bsa.js" async="" type="text/javascript"></script>
    <script async="async" src="s_3a3793f622db4a9dea3bfa355c5b2441.js" id="_bsap_js_3a3793f622db4a9dea3bfa355c5b2441" type="text/javascript"></script>
    <style id="bsa_css" type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}
    .style1
    {
    color: #00FF00;
    }
    .style2
    {
    text-align: center;
    }
    .style3
    {
    color: #000000;
    font-size: large;
    }
    .style4
    {
    color: #00FF00;
    font-size: xx-large;
    }
    </style>
    </head>



    <body>

    <div id="container">

    <div class="style2"> <br class="style1">
    <br class="style1">
    <h1> <span class="style4" lang="en-gb">Eduard
    Lid Web Design</span></h1>
    <br class="style1">

    <br>
    </div>
    <div id="window">
    <ul style="top: -350px; left: -960px;" id="slideshow">
    <li class="box1"><img src="tiger.jpg" alt="Tiger"></li>
    <li class="box2"><img src="macaw.jpg" alt="Macaw"></li>
    <li class="box3"><img src="bald-eagle.jpg" alt="Bald Eagle"></li>
    <li class="box4"><img src="panda.jpg" alt="Panda"></li>
    </ul>
    </div>

    <div id="bottom">


    <ul class="links">
    <li><a href="american.html">More</a></li>
    <li><a href="spanish.html">Más</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    </ul>


    <p id="copyright">Copyright © 2013</p>



    <a href="http://ar.linkedin.com/in/eduardlid">

    <img id="rot" src="http://www.linkedin.com/img/webpromo/btn_viewmy_120x33_es_ES.png?locale=" width="120" height="33" border="0" alt="Ver el perfil de Eduard Lid en LinkedIn"</image>*

    </a>

    </div>

    </div>

    </body>
    </html>


    * {
    margin:0;
    padding:0;
    list-style-type:none;
    }


    body{
    font: bold 15px arial,geneva,SunSans-Regular,sans-serif;
    background-color:#000000;
    }

    #container {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    }

    .linka
    {
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    .links
    {
    background-color:#7A991A;
    }


    #copyright {
    top:40px;
    float:right;
    font-size:10px;
    color:#FFFFFF;
    }

    #rot {
    margin-top:5%;
    transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* IE 9 */
    -moz-transform:rotate(-30deg); /* Firefox */
    -webkit-transform:rotate(-30deg); /* Safari and Chrome */
    -o-transform:rotate(-30deg); /* Opera */
    }

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    It may be because you have to many DIVS
    Edit: Counted 8 so it can't be that.
    (When putting code try to make it neat if possible and when posting try to put in the correct code tags.)

    I posted your code correctly, so that if anyone else wants to help it's easier on the eyes to read.

    HTML:

    Code:
    </head>
    
    
    
    <body>
    <!DOCTYPE html>
    <html><head>
    <!-- saved from url=(0022)http://internet.e-mail -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Eduard Lid</title>
    
    <link rel="stylesheet" type="text/css" href="ex1.css">
    <link rel="stylesheet" href="panning-slideshow.css">
    <link rel="stylesheet" href="bsa.css" type="text/css" media="screen">
    <script src="jquery-latest.js"></script>
    <script src="jquery_002.js"></script>
    <script src="jquery.js"></script>
    <script src="image-rotator.js"></script>
    <script src="bsa.js" async="" type="text/javascript"></script>
    <script async="async" src="s_3a3793f622db4a9dea3bfa355c5b2441.js" id="_bsap_js_3a3793f622db4a9dea3bfa355c5b2441" type="text/javascript"></script>
    <div id="container">
    
    <div class="style2"> <br class="style1">
    <br class="style1">
    <h1> <span class="style4" lang="en-gb">Eduard
    Lid Web Design</span></h1>
    <br class="style1">
    
    <br>
    </div>
    <div id="window">
    <ul style="top: -350px; left: -960px;" id="slideshow">
    <li class="box1"><img src="tiger.jpg" alt="Tiger"></li>
    <li class="box2"><img src="macaw.jpg" alt="Macaw"></li>
    <li class="box3"><img src="bald-eagle.jpg" alt="Bald Eagle"></li>
    <li class="box4"><img src="panda.jpg" alt="Panda"></li>
    </ul>
    </div>
    
    <div id="bottom">
    
    
    <ul class="links">
    <li><a href="american.html">More</a></li>
    <li><a href="spanish.html">Más</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    </ul>
    
    
    <p id="copyright">Copyright © 2013</p>
    
    
    
    <a href="http://ar.linkedin.com/in/eduardlid">
    
    <img id="rot" src="http://www.linkedin.com/img/webpromo/btn_viewmy_120x33_es_ES.png?locale=" width="120" height="33" border="0" alt="Ver el perfil de Eduard Lid en LinkedIn"</image>* 
    
    </a>
    
    </div>
    
    </div>
    
    </body>
    </html>
    CSS:

    Code:
    .one{position:relative}
    
    .one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}
    
    .one .bsa_it_ad a{text-decoration:none}
    
    .one .bsa_it_ad a:hover{text-decoration:none}
    
    .one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}
    
    .one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}
    
    .one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}
    
    .one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}
    
    .one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}
    
    .one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}
    
    .style1
    {
    color: #00FF00;
    }
    .style2
    {
    text-align: center;
    }
    .style3 
    {
    color: #000000;
    font-size: large;
    }
    .style4 
    {
    color: #00FF00;
    font-size: xx-large;
    }
    * {
    margin:0;
    padding:0;
    list-style-type:none;
    }
    
    
    body{
    font: bold 15px arial,geneva,SunSans-Regular,sans-serif;
    background-color:#000000;
    } 
    
    #container {
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    }
    
    .linka 
    {
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    }
    .links 
    {
    background-color:#7A991A;
    }
    
    
    #copyright {
    top:40px; 
    float:right;
    font-size:10px;
    color:#FFFFFF;
    }
    
    #rot {
    margin-top:5%;
    transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); /* IE 9 */
    -moz-transform:rotate(-30deg); /* Firefox */
    -webkit-transform:rotate(-30deg); /* Safari and Chrome */
    -o-transform:rotate(-30deg); /* Opera */
    }
    Last edited by theyoker; 02-12-2013 at 08:15 PM.

  3. #3
    Join Date
    Feb 2012
    Posts
    264
    Thanks! However, I solved it already sunday.

  4. #4
    Join Date
    Dec 2012
    Posts
    44
    Great post and i have faced the same kind of problem few days ago but has been solved out.

  5. #5
    Join Date
    Feb 2012
    Posts
    264
    I solved this problem (www.website2013.site50.net). But how do I make it look more professional?

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.16096 seconds
  • Memory Usage 3,033KB
  • Queries Executed 13 (?)
More Information
Template Usage (30):
  • (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
  • (2)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (5)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (5)postbit
  • (5)postbit_onlinestatus
  • (5)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (27):
  • ./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
  • ./includes/functions_threadedmode.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 (71):
  • 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_threaded
  • showthread_threaded_construct_link
  • 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