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 13 of 13
  1. #1
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Images jumping under border

    hi,

    i have taken a still of the video, and done the same as the images, with the border and the hover, however...

    i cant get it to sit inside the container div, its seems only to be a problem on the video page, yet it uses the same stylesheet as all other pages. really confusing me lol

    Video Page

    Code:
    <div id="vidthumbnail">
    <a href="8n9.php"><img src="8n9_thumb.jpg"></a>
    </div>
    and the css:

    Code:
    #vidthumbnail {
    	float: left;
    	width: 148px;
    	height: 116px;
    }
    Anyone got any ideas as to why its not playing the game?

    Thanks

    Jon
    Last edited by jonnybinthemix; 05-05-2006 at 11:51 PM.

  • #2
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    ooooh spooky

    it seems to be inside the div now and i havent changed anything!!!

    Wouldent go in the right place all of last night or this morning, and now all of a sudden its moved!! spooky! lol

  • #3
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    i thought it was impossible that the my magic genie had fixed it!!

    When i add more of the images, the one above goes up inside the border and the bottom sticks its usless arse end out the bottom!!

    anyone got any hunts for me?!

    thanks guys

    jon

  • #4
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    i think i have fixed it but not sure if i did it the correct way, i just put a bottom margin of 30px on the vidthumbnail div and it seems to keep everything inside.

    Is that the right way?

  • #5
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    after fixing that, i decided that i wanted the video links to display slightly differently.

    so, i created another 2 divs, one for the left and on for the right, and set one at 50% float:left and the other to 49% float right, and then put some links in each. this works absolutley fine, however i cannot now get either the left or right div to sit inside the container div even though they are put inside :S

    Heres the code......

    Code:
    <body>
    
    <div id="container">
    		<div id="logo">
    			<img src="logo_main.jpg" alt="mail logo">
    		</div>
    
    <div id="menu">
      	<ul>
        	<li><a href="jon.php">Home</a></li>
        	<li><a href="skating.php">Ice Skating</a></li>
        	<li><a href="pool.php">Pool</a></li>
        	<li><a href="random.php">Random Images</a></li>
        	<li><a href="video.php">Videos</a></li>
        	<li><a href="upload_image.php">Upload an Image</a></li>
    	<li><a href="#">Contact Me</a></li>
      	</ul>
    </div>
    <br>
    <br>
    <div id="description">
    
    	<i>Here you can view videos of various things, Trickshots carried out by my friends and i,
    		funny videos i have seen, and as always feel free to upload video clips that you have found
    		or recorded.</i>
    </div>
    <br>
    
    <div id="vidleft">
    
    <div id="vidthumbnail">
    <a href="8n9.php"><img src="8n9_thumb.jpg"></a>
    </div>
    
    <div id="vidthumbnail">
    <a href="upover.php"><img src="upover.jpg"></a>
    </div>
    
    <div id="vidthumbnail">
    <a href="touchdown.php"><img src="touchdown.jpg"></a>
    </div>
    
    </div>
    
    <div id="vidright">
    
    
    <div id="vidthumbnail">
    <a href="curve.php"><img src="curve.jpg"></a>
    </div>
    
    </div>
    
    </div>
    </body>
    I dont understand why they dont stretch the container div to fit around them, they do on all the other pages and if i edit the description the containter div gets bigger!

    Any help would be greatly appreciated.

    thanks

    jon

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Okay, I see all four of your screenshot div inside the container. Could you be more specific as to what the problem is and what you're trying to achieve? ...because I don't see the problem.
    Last edited by Arbitrator; 05-05-2006 at 12:45 PM. Reason: total revision
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    oh sorry mate,

    the problem is, they dont show up inside the container div...

    video page

    notice that its all below the containter div (the container div has the 2px dotted border.

    Thanks again

    Jon

  • #8
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    i have now noticed, that the images do sit inside the border in IE, but not in FF.

    Also, if you hover over a menu in IE the border jumps up and cuts the bottom images off completley.

    I must be doing something wrong, anyone any ideas?

    thanks

  • #9
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    anyone got any ideas cuz im going balder ripping it all out! ive tried everything! lol

    It seems to be a different problem in IE and FF!

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Code Problems

    You should check your code using the W3C HTML Validator; you'll see that you have several errors. The main error is that you're using IDs for multiple objects on the same page. An ID identifies one object; if you want to identify more than this with a style rule, use a class. In addition, the alt attribute is required to be specified for all images; if the image fails to display, the alternate text is displayed instead. The unacceptable use of the head and body tags as mentioned by the validator, is because you're using invalid XHTML closing tags in a HTML 4 document. Since you're already using some XHTML syntax, I'd recommend the XHTML 1.0 Strict DTD. It'll keep all the browsers in standards mode and keep you using and learning modern code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    This will also mean that all of your img and br tags will require closing slashes since all elements must be closed in XHTML. The last error is that you haven't specified a character encoding. Here's that for ISO-8859-1:

    <meta http-equiv="content-type" content="text/html; charset = iso-8859-1"/>

    Also, the center tag is deprecated and should not be used. Use CSS text-align on the containing element to center text.

    Your Specific Problem

    When measuring sizes of objects contained inside other objects of fixed width, I generally think it a bad idea to use percentages for width and height properties. The following should be working provided that there's actually enough space for the elements to float on the same line. If not there's some other problem.

    <div id="contentarea">
    <div id="vidleft" style="float: left;">
    <div class="photoblock"></div>
    <div class="photoblock"></div>
    <div class="photoblock"></div>
    </div>
    <div id="vidright"> <!-- should be on the same line; wraps if insufficient space -->
    <div class="photoblock"></div>
    </div>
    </div>

    However, personally I think an easier and more organized way to do things would be:

    <div id="contentarea">
    <div class="row">
    <div class="photoblock"></div>
    <div class="photoblock"></div>
    </div>
    <div class="row">
    <div class="photoblock"></div>
    <div class="photoblock"></div>
    </div>
    <div class="row">
    <div class="photoblock"></div>
    </div>
    </div>

    Hope that helps.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    hi and thanks for the responce..

    I have added the bits you mentioned...

    And i have tried what you sugested with a couple of images to see what happend, and the images are goin down column style as before, where as my understanding of your suggestion was to have one column with both images and descriptions in. Also, the images are both below the border again as before.

    I imagine i am doing something wrong, im just too blind (or dumb!) no notice, any ideas?

    here what i added:

    Code:
    <div id="contentarea">
    
    	<div class="row">
    
    			<div class="photoblock">
    			<a href="8n9.php"><img src="8n9_thumb.jpg" alt="image"></a>
    				<center><br /><i><b>8'n'9</b><br />Check out this really cool trickshot done
    								by a friend of mine Jon 'Shortshooter' Davies.</i></center>
    
    			</div>
    
    
    
    	<div id class="photoblock">
    		<a href="upover.php"><img src="upover.jpg" alt="image"></a>
    				<center><br><i><b>Over the Top</b><br />Another one of 'The Shortshooters' finest,
    						Nice shot Jon.</i></center>
    	</div>
    
    
    	</div>
    
    </div>
    and the css:

    Code:
    #contentarea {
    	width: 100%
    }
    
    .row {
    	width: 100%;
    	float: left;
    }
    
    .photoblock {
    	width: 370px;
    	height: 116px;
    	margin-bottom: 40px;
    }
    thanks again for you help

    jon
    Last edited by jonnybinthemix; 05-06-2006 at 12:22 AM.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Okay, here's a solution; it was a royal pain too. In both Firefox and IE, there's some odd thing where the container div won't expand to encompass the contents containing float elements unless I put something inline below the those contents which is really stupid... If you intend on expanding upon this design, I'd just say "to hell with it" and stick a table where the photos and their descriptions go. The menu was also troublesome because, again, the container was simply pretending that its contents didn't exist in Firefox so I had to come up with a workaround for that too. Here's the story:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html lang="en">
    <head>
    
    <!-- This Page Is Valid XHTML 1.0 Strict! -->
    
    <meta http-equiv="content-type" content="text/html; charset = iso-8859-1"/>
    <base href="http://www.fartingfish.com/"/>
    
    <title>FartingFish.com - the online photo album</title>
    
    <style type="text/css">
    /* DISABLED
    @import url("style.css"); */
    
    * {
      margin: 0;
      border: 0;
      padding: 0;
      text-decoration: none;
      list-style-type: none;
      }
    
    div#container {
      width: 800px;
      margin: 10px auto;
      border: 2px dotted #666;
      }
    div#logo {
      height: 140px;
      background: url("logo_main.jpg") center center no-repeat;
      }
    div#menu {
      width: 610px;
      margin: auto;
      }
    div#menu li {
      display: inline;
      float: left;
      }
    div#menu li a {
      border: 1px dotted #87888d;
      border-left: 0;
      padding: 0.2em 0.6em;
      background: #c3d9f9;
      color: #000;
      }
    div#menu li a:hover {
      background: #848484;
      }
    div#menu li#first a {
      border-left: 1px dotted #87888d;
      }
    div#clear { /* for Firefox to space out description and menu */
      height: 30px;
      }
    div#description p {
      width: 400px;
      margin: auto;
      padding: 5px;
      text-align: center;
      font-style: italic;
      }
    div.row {
      width: 800px;
      }
    div.thumbnail {
      width: 390px;
      float: left;
      padding: 5px;
      }
    div.thumbnail img {
      float: left;
      border: 1px dotted #87888d;
      padding: 0.2em 0.6em;
      background: #c3d9f9;
      color: #000;
      }
    div.row img:hover { /* :hover pseudo-class on non-achor elements broken in lt IE7 */
      background: #848484;
      }
    div.row p {
      width: 213px;
      float: left;
      text-align: center;
      font-style: italic;
      }
      
    /* General Page Fixes */  
    img#workaround { /* consumes more height than expected due to inline display */
      width: 1px;
      height: 1px;
      visibility: hidden;
      }  
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    div#clear { /* IE perceives space differently */
      display: none;
      }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div id="container">
    
    <div id="logo"></div>
    
    <div id="menu"> 
    
    <ul>
      <li id="first"><a href="jon.php">Home</a></li>
      <li><a href="skating.php">Ice Skating</a></li>
      <li><a href="pool.php">Pool</a></li>
      <li><a href="random.php">Random Images</a></li>
      <li><a href="video.php">Videos</a></li>
      <li><a href="upload_image.php">Upload an Image</a></li>
      <li><a href="#">Contact Me</a></li>
    </ul>
    
    </div>
    
    <div id="clear">
    <!-- clears space for overly-complex menu -->
    </div>
    
    <div id="description"><p>Here you can view videos of various things, Trickshots carried out by my friends and i, funny videos i have seen, and as always feel free to upload video clips that you have found or recorded.</p></div>
    
    <div class="row">
    
    <div class="thumbnail">
    <a href="8n9.php"><img alt="" src="8n9_thumb.jpg"/></a>
    <p><strong>8'n'9</strong><br/>
    Check out this really cool trickshot done by a friend of mine Jon 'Shortshooter' Davies.</p>
    </div>
    
    <div class="thumbnail">
    <a href="upover.php"><img alt="" src="upover.jpg"/></a>
    <p><strong>Over the Top</strong><br/>
    Another one of 'The Shortshooters' finest, Nice shot Jon.</p>
    </div>
    
    </div>
    <div class="row">
    
    <div class="thumbnail">
    <a href="touchdown.php"><img alt="" src="touchdown.jpg"/></a>
    <p><strong>Touchdown</strong><br/>
    Touchdown is a term most commonly used in American Football. But not always! Check out Mr Davies showing off again.</p>
    </div>
    
    <div class="thumbnail">
    <a href="curve.php"><img alt="" src="curve.jpg"/></a>
    <p><strong>Curve</strong><br/>
    The Shortshooter impresses yet again, check out how the cueball bends after hitting the rail! Very clever shot Jon.</p>
    </div>
    
    <img id="workaround" alt=" " src="8n9_thumb.jpg"/> <!-- forces container border to accommodate area; bug? -->
    
    </div>
    
    </div>
    </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    wow! i dident realise it was going to be that complicated! lol i thought id typed something wrong! lol

    Amazing though mate, works perfectly

    thanks mate

    Jon
    "You only live once, play it right, and once is enough" - me :)
    "When i die only god can take my soul" - me again! :P


  •  

    Posting Permissions

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