Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - Code exceeds content.

    Hey there! I really hope someone can help me. I am currently working on a site and the whole site is almost finished but i got a problem..

    Ive found this cool css for pictures and its all going good but somewhere in the following code is something that exceeds my site. been trying to find out what it is but i cant find it.

    its posted in the middle of the HTM. and exceeds to some extend below the bottum.

    [CODE]
    .gallerycontainer{
    position: relative;
    width: 550px;
    height: 300px;
    margin: 0px auto -1px auto;
    }

    .thumbnail img{
    /*border: 1px solid white;*/
    margin: 0 5px 5px 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    }

    .thumbnail:hover img{
    */border: 1px solid blue;*/
    }

    .thumbnail span{
    position: absolute;
    /*background-color: lightyellow;*/
    padding: 0px;
    left: -1000px;
    border: 1px #FFFFFF;
    /*box-shadow:0px 0px 30px white;*/
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{
    visibility: visible;
    top: 0;
    left: 230px;
    z-index: 50;
    }
    [CODE]



    Hope you can help. Me

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Can't help without a link to your page or the full html.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok here goes:


    HTML

    [Code]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Crossfire.no</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>

    <body bgcolor="#000000">

    <div id="wrapper">
    <div id="navMenu">
    <ul>
    <li><a href="enter.htm">Home</a>

    <ul>
    <li><a href="nyheter.htm">Nyheter</a></li>
    <li><a href="kommersnart.htm">Kommer Snart</a></li>
    </ul>
    <!--end Inner UL-->
    </li>
    <!--en Main LI-->
    </ul>
    <!--end Main UL-->
    <ul>
    <li><a href="#">Media</a>

    <ul>
    <li><a href="playlist.htm">Spilleliste</a></li>
    <li><a href="video.htm">Video</a></li>
    </ul>
    <!--end Inner UL-->
    </li>
    <!--en Main LI-->
    </ul>
    <!--end Main UL-->
    <ul>
    <li><a href="#">Opptreden</a>

    <ul>
    <li><a href="#">Bilder</a></li>
    </ul>
    <!--end Inner UL-->
    </li>
    <!--en Main LI-->
    </ul>
    <!--end Main UL-->
    <ul>
    <li><a href="#">Informasjon</a>

    <ul>
    <li><a href="#">Biografi</a></li>
    <li><a href="#">Historie</a></li>
    </ul>
    <!--end Inner UL-->
    </li>
    <!--en Main LI-->
    </ul>
    <!--end Main UL-->
    <ul>
    <li><a href="#">About</a>

    <ul>
    <li><a href="design.htm">Designs</a></li>
    <li><a href="specialthanks.htm">Spesiell Takk Til</a></li>
    <li><a href="contact.htm">Kontakt</a></li>
    </ul>
    <!--end Inner UL-->
    </li>
    <!--en Main LI-->
    </ul>
    <!--end Main UL-->

    <br class="clearFloat" />
    </div>
    </div><!--end navMenu-->
    </div><!--end wrapper-->
    <br />
    <br />
    <div id="box"> </div>

    <div class="gallerycontainer">

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupninethumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupnine.png" /><br /></span></a>

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/brylluptenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupten.png" /><br /></span></a>

    <br />

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupeleventhumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupeleven.png" /><br /></span></a>

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/brylluptwelvethumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/brylluptwelve.png" /><br /></span></a>

    <br />

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupthirteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupthirteen.png" /><br /></span></a>

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupfourteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupfourteen.png" /><br /></span></a>

    <br />

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupfifteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupfifteen.png" /><br /></span></a>

    <a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupsixteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupsixteen.png" /><br /></span></a></div>
    <div id="crossfirebutton"><a href="playlisttwo.htm"><img src="buttonnext.png" border="0" align="right" onmouseover="this.src='buttonnextbig.png'" onmouseout="this.src='buttonnext.png'" /></a></div>
    </body>
    </html>
    [CODE]

    And here is the CSS

    [CODE]
    @charset "utf-8";

    h1 {
    color:#FFFFFF;
    font-size:12px;
    font-family:Georgia, "Times New Roman", Times, serif;
    }

    h2 {
    color:#FFFFFF;
    font-size:12px;
    font-family:Georgia, "Times New Roman", Times, serif;
    }

    h3 {
    color:#ff0000;
    font-size:14px;
    font-family:Georgia, "Times New Roman", Times, serif;
    }

    h4 {
    color:#99D2D7;
    font-size:13px;
    font-family:Georgia, "Times New Roman", Times, serif;
    }

    body
    {
    background-image:url('backgroundfullbody.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top center;

    }

    #navMenu {
    background:#fff;
    border-top:4px solid #000;
    margin:0;
    padding:0;
    }

    #navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    }

    #navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#000000;
    }

    #navMenu ul li a {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-styleblique;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#FFFFFF;
    border:1px solid #000000;
    /** text-shadow:#FFFF99 1px 1px 1px ;**/
    }

    #navMenu ul ul li a {
    font-style:italic;
    font-weight:bold;
    }

    #navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
    display:inline;
    }

    #navMenu ul li:hover ul {
    visibility:visible;
    }

    /***********************************************************/

    #navMenu li:hover {
    background:#460e0e;
    }

    #navMenu ul li:hover ul li a:hover {
    background:#460e0e;
    color:#ff0000;
    }

    #navMenu a:hover {
    color:#ff0000;
    }

    .clearFloat {
    clear:both;
    margin:0;
    padding:0;
    }

    /***********************************************************/

    #wrapper {
    width: 760px;
    height: 30px;
    margin: 0px auto -1px auto;
    }

    #box {
    width: 760px;
    height: 250px;
    margin: 0px auto -1px auto;
    }

    #textbox {
    width: 500px;
    height: 236px;
    margin: 0px auto -1px auto;
    }

    #textboxtwo {
    width: 486px;
    height: 236px;
    margin: 0px auto -1px auto;
    }

    #container {
    width: 510px;
    height: 300px;
    margin: 0px auto -1px auto;
    }

    #topboxnyheter {
    width: 760px;
    height: 225px;
    margin: 0px auto -1px auto;
    }

    #listofsongs {
    width: 254px;
    height: 300px;
    float: left;
    }

    #listofsongs2 {
    width: 254px;
    height: 300px;
    float: right;
    }

    .clear {
    clear:both;
    }

    #videolist {
    width: 510px;
    height: 50px;
    margin: 0px auto -1px auto;
    }


    #crossfirebutton {
    width: 533px;
    height: 50px;
    margin: 0px auto -1px auto;
    }
    /*****************Galery CSS********************/

    .gallerycontainer{
    position: relative;
    width: 550px;
    height: 325px;
    margin: 0px auto -1px auto;
    }

    .thumbnail img{
    /*border: 1px solid white;*/
    margin: 0 5px 5px 0;
    }

    .thumbnail:hover{
    background-color: transparent;
    }

    .thumbnail:hover img{
    /*border: 1px solid blue;*/
    }

    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    /*background-color: lightyellow;*/
    padding: 0px;
    left: -1000px;
    border: 1px #FFFFFF;
    /*box-shadow:0px 0px 30px white;*/
    visibility: hidden;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    [CODE]


    Sorry if it looks sloppy, Just letting you know all the other pages in my website works just fine. The blank Div is there to keep the background in order. Only the recent addition i mention before makes the blank space in the bottum.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    There is error in your css code. please check hightlighted one:

    Code:
    #navMenu ul li a {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-styleblique;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#FFFFFF;
    border:1px solid #000000;
    /** text-shadow:#FFFF99 1px 1px 1px ;**/
    }

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Was just written close together, doesnt help with my problem tho -.-

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    All I get is a black page with links - no obvious gaps - but then this may be the lack of images. Can you give a link to the live page instead?

    You do have a mismatched div tag - check the w3c validator.

    [Also, please wrap your code with #tags - makes this page easier to navigate]

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,175
    Thanks
    23
    Thanked 601 Times in 600 Posts
    The question here is this line:
    "..somewhere in the following code is something that exceeds my site"

    What exactly do you mean by 'exceeds my site'? What error are you getting? Is it the bandwidth? what size is the pictures? etc. Please give details.

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically 'a blank space in the bottum' when i have the site on fullscreen. Im sorry the site is not online yet, will be soon, with errors. seems i have to do it over when i have done it, kinda stupid ive been matching the content to the background -.- lol im a sandboxer. been over 8 years since i made an 'html' site lol ah well gotta learn somehow right? I think i figured out the problem. I have a list of thumbnails that 'show' the image to the right side. and its looking alright i think that the code somehow sees the picture next to the thumbnail itsself first then looks at the disignated area. i now minimized the thumbnails a bit more so it shows better. and no blank space. but thank you guys for reading the post i made. this is a really helpfull forum, lots of soulfood xD


  •  

    Posting Permissions

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