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 07: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



Recent Articles