Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member Stryke_the_Orc's Avatar
    Join Date
    Mar 2014
    Posts
    62
    Member #
    38674
    Liked
    4 times

    Thumbnails change position?

    Hey guys,
    I have this odd issue where one of the images on a page I'm making for class falls out of place when I maximize my screen. It does it in every browser I've tried (IE11, Firefox, and Chrome) so I don't believe its a browser issue. I have attached an image showing what happens and my code for this div is below. Thanks!

    This is the page itself...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaJam Coffee House</title>
    <link rel="stylesheet" href="../CSS/javajam.css">
    <link href="../CSS/javajammobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:550px)">
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
    </head>
    <div class="wrapper">
    <header>
    <embed type="application/x-shockwave-flash"
    	src="../images/javalogo.swf"
    	width="100%" height="117"
    	title="Javajam Coffee House"></embed>
    <h1>JavaJam Coffee House</h1>
    </header>
    <div id="leftcolumn">
    <nav>
    <ul>
      <li><a href="../../javajam/index.html">Home</a></li>
      <li><a href="../../javajam/pages/menu.html">Menu</a></li>
      <li><a href="../../javajam/pages/music.html">Music</a></li>
      <li><a href="../../javajam/pages/jobs.html">Jobs</a></li>
    </ul>
    </nav><br /><br />
    </div>
    <div id="rightcolumn">
    <div id="content">
    <div class="wrapper"><p>The first Friday night each month at JavaJam is a special night. Join us from 8pm to 11pm for some music you won&rsquo;t want to miss!</p>
    </div>
    <h2>January</h2>
    <div class="details"><a href="../../javajam/images/melanie.jpg"><figure class="floatleft"><img src="../../javajam/images/melaniethumb.jpg" height="80" width="80" alt="A picture of Melanie Morris"></figure></a>&nbsp;Melanie Morris entertains with her melodic folk style. Check out the podcast! CDs are now available.</div><br />
    <h2>February</h2>
    <div class="details"><a href="../../javajam/images/greg.jpg"><figure class="floatleft"><img src="../../javajam/images/gregthumb.jpg" height="80" width="80" alt="A picture of Tahoe Greg"></figure></a>&nbsp;Tahoe Greg&rsquo;s back from his tour. <a href="../../javajam/audio/greg.mp3">New songs.</a> New stories. CDs are now available.</div>
    </div>
    </div>
    <br class="clearleft" />
    </div>
    <br />
    <br />
    <footer>JavaJam Copyright &copy; 2013 Coffe House<br>
    <a href="mailto:CarlLittrell@email.com">Carl Littrell</a></footer>
    <br /> <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" />
    </a>
    </p>
             
    </html>
    and the CSS

    Code:
    /*Styles Below*/
    body { background-image:url( ../../javajam/images/background.gif ); color:#330000; font-family:Verdana, Arial, sans-serif; }
    img { border-style:none; }
    header { background-color:#ccaa66; color:#000000; text-align:left; margin:0; background-position: center; background-repeat: no-repeat; height: 117px; }
    h1 { text-indent:-99999px; margin:0;}
    h2 { text-transform: uppercase; background-color: #ffffcc; color:#663300; font-size: 1.2em; border-bottom:1px solid #000000; padding: 5px 0 0 5px; margin-right: 20px; clear: left; }
    nav { float:left; width:100px; padding-top:10px; text-align:center; }
    nav a { Text-decoration:none; padding-bottom:15px; }
    nav a:link { color:#996633; }
    nav a:visited { color:#ccaa66; }
    nav a:hover { color:#330000; }
    nav ul { list-style-type: none; }
    footer { background-color:#ccaa66; color:#000000; font-size:.60em; font-style:italic; text-align:center; padding-top:20px; padding-bottom:20px; clear: both; }
    footer a:link { color:#ffffcc; }
    footer a:visited { color:#f2eab7 }
    footer a:hover { color:#330000 }
    header, nav, figure, footer, table { display: block; }
    table { width:75%; margin:auto; }
    th,td { padding:10px; }
    tr:nth-of-type(odd) { background-color:#ccaa66; }
    label { float:left; display:block; text-align:right; width:120px; padding-right:30px; }
    textarea { display:block; margin-bottom:20px; padding-left:30px; }
    input { display:block; margin-bottom:20px; padding-left:30px; }
    /*ID's Below*/
    #content { padding:10px 20px 30px 20px; margin-left:150px; background-color:#f2eab7; color:#000000; }
    #mobile { display:none; }
    #desktop { display:inline; }
    #logo { position:center; }
    /*Classes Below*/
    .details { padding-left:20%; padding-right:20%; padding-bottom:35px }
    .floatleft { float:left; padding:0 20px 20px 0; }
    .allclear { clear: both; }
    .clearleft { clear:left; }
    .clearright { clear:right; }
    .floatright { float: right; padding:0 0 0 20px; }
    .wrapper { background-color:#ffffcc; min-width:700px; margin-left:auto; margin-right:auto; -webkit-box-shadow:5px 5px 5px #828282; -moz-box-shadow:5px 5px 5px #828282; box-shadow:5px 5px 5px #828282; }

    belowborder.jpg

  2.  

  3. #2
    Member Stryke_the_Orc's Avatar
    Join Date
    Mar 2014
    Posts
    62
    Member #
    38674
    Liked
    4 times
    Anyone? This is truly annoying me. Lol

    Slithering from the nether regions of a twisted mind and tarnished soul

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The div needs a min-height to keep it from doing that. It's shrinking as the text takes up fewer lines, and since the image is floated left (or rather the anchor around it), it won't keep the container from collapsing.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Member Stryke_the_Orc's Avatar
    Join Date
    Mar 2014
    Posts
    62
    Member #
    38674
    Liked
    4 times
    Quote Originally Posted by Ronald Roe View Post
    The div needs a min-height to keep it from doing that. It's shrinking as the text takes up fewer lines, and since the image is floated left (or rather the anchor around it), it won't keep the container from collapsing.
    Excellent! Thank you so much!

    Slithering from the nether regions of a twisted mind and tarnished soul


Remove Ads

Posting Permissions

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

Search tags for this page

code to postion the image and text in javajam

,

javajam coffee house web design music page

,

javajam web design

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:37 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com