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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Image Layout Help - Float and Clear

    I'm having trouble using the clear: right and clear: left css tags on this page. I'm trying to get three images to line up vertically and clear the left of the images. You can find them in the div class img-stacker right underneath the beginning of the div content They are doing one of two things. When I have the img-stacker on display: block they line up vertically, but don't clear the left side. Instead, it pushes all the text underneath it. Or, if I have it on display: inline it will display all of the images horizontally, which I don't want. I'm somewhat of a novice at laying out the page content in a website. I would appreciate somebody skimming through my code and telling me what I'm doing wrong. I don't know if I'm using paragraphs wrong, div classes, etc.

    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>Panoptica | Home</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    	<div id="page">
    		<div id="header" class="home">
    			<div id="logo"><a href="index.html"></a></div>
    			<ul id="nav">
    				<li id="home"><a href="index.html">Home</a></li>
    				<li id="about"><a href="about.php">About Us</a></li>
    				<li id="contact"><a href="contact.php">Contact Us</a></li>
    			</ul>
    		</div>
    		<!-- Header BG, Logo, Nav -->
    		<?php include("head.php"); ?>
    		<ul id="head-container" class="home">
    			<li id="one"><a href="#"><span>What We Are</span></a></li>
    			<li id="two"><a href="#"><span>What We Do</span></a></li>
    			<li id="three"><a href="#"><span>Contact Us</span></a></li>
    		</ul>
    		<div id="content">
    			<div class="img-stacker">
                	<div class="stack-left">
                        <img src="images/home/img-01.jpg" width="157" height="126" alt=""/>
                        <img src="images/home/img-02.jpg" width="157" height="174" alt=""/>
                        <img src="images/home/img-03.jpg" width="157" height="176" alt=""/>
                    </div>
                </div>
    		  <h1>The human visual system is remarkable and<br /> essential to our daily lives</h1>
    			<p>
    				We all know that the eye is an extraordinary camera. 
    				Light enters the eye and falls upon specialized photosensitive cells of the retina. 
    				These cells then transmit visual information to a specialized area to the back of the 
    				brain that ultimately allows us to perceive the world around us.
    			</p>
    			<p>
                <img src="images/home/img-04.jpg" width="150" height="225" alt="" class="clear-left"/>
    				Fortunately, most of us will require only the use of eyeglasses to optimize our visual 
    				potential throughout life. However, there are many individuals who are not as fortunate 
    				and who suffer from disabling disease of the eye that result in the temporary or even
    				permanent loss of eyesight. While many common eye diseases can be treated effectively 
    				with today’s medicines, others cannot. That’s where we hope to play a key role in the 
    				years ahead.			
                </p>
    			<p>
    			  <img src="images/home/img-05.jpg" width="232" height="153" alt="Scientist" class="clear-left" />
    				When vision is impaired, patients seek the help of eye doctors with a fierce hope that 
    				they will receive the help they need in order to see well again for the remainder of 
    				their lives. We understand the anxiety that patients feel when they first realize that 
    				glasses may not be enough to improve their vision. 
              	</p>
                <p>
                	<img src="images/home/img-07.jpg" width="176" height="175" alt="Eyechart" class="clear-right" />
                	We also understand the frustration that eye doctors have when they are unable to help 
                    patients who seek their services because there are often few or no effective therapies for
                    the diseases they treat. Through the efforts of scientists and pharmaceutical companies, 
                    therapies for eye diseases once thought untreatable such as some forms of age-related
         			macular degeneration are now commonplace. Yet, treatments for other common eye diseases 
                    such as  dry macular degeneration, diabetic retinopathy and dry eye syndrome remain elusive. 
    			</p>
    			<p class="clear-btm">
    				<img src="images/home/img-06.jpg" width="176" height="175" alt="Eyechart" class="clear-left" />
    				The scientific advancements that have recently made possible new or more effective 
    				treatments for some eye diseases such as glaucoma and wet macular degeneration are 
    				continual. Many scientists and small companies are presently taking advantage of these 
    				advancements to develop even more promising therapies to treat disorders of the eye. 
    				Sometimes, small laboratories require partnering or additional financial resources to 
    				take their discoveries further along the development pathway.  They often seek to license
    				their discoveries to companies such as PanOptica who have the ability to assess whether 
    			  these potential products offer the potential to deliver on their promise of better therapy.			</p>
    			<div id="box-1" class="clear-right">
    				<div id="head">
    					<p>
    						Our aim is to develop new ocular therapeutics to help patients see their very best 
    						throughout their lives
    					</p>
    					<p class="shdw">
    						Our aim is to develop new ocular therapeutics to help patients see their very best 
    						throughout their lives
    					</p>
    				</div>
    				<div id="content">
    					<p>
    						Whether the medications we develop are eye drops or are designed to be sustained release 
    						platforms for medication placed in or around the eye, the only thing we care about is 
    						that it offers improved visual outcomes that are not available to patients today. These 
    						may be advances to existing treatments, or first-in-class treatment for previously 
    						untreatable disorders.
    					</p>
    			  </div>
    			</div>
    			<p class="move-inline">
    				If we see such opportunities and assess them positively, we may license or acquire the 
    				rights to further develop these products. While large pharmaceutical companies are often 
    				highly effective at manufacturing and distributing new pharmaceutical agents, they often 
    				look to smaller biotechnology specialty companies such as ours as a source for their 
    				potentially innovative new products. 
    			</p>
    		  <h1>What does the future of eye therapy look like?</h1>
    			<div class="img-stacker">
                	<div class="stack-right">
                        <img src="images/home/img-08.jpg" width="176" height="175" alt="Eyechart"/>
                        <img src="images/home/img-09.jpg" width="176" height="175" alt="Eyechart"/>
                    </div>
                </div>
                <p>
                    Nearly 100 years ago, the first therapy for the common ocular disorder of glaucoma was made 
    				widely available. Not surprisingly, it was in the form of an eye drop. Although eye drops 
    				remain a popular choice for delivering ophthalmic medications, some chemical compounds do 
    				not lend themselves well to eye drop delivery. This may be because they are highly water 
    				insoluble or they might be peptide antibodies that are not very stable and can degrade quickly 
    				in storage at room temperature. Newer technologies have become available to deliver small 
    				molecules, antibodies, and other novel therapies using gene delivery to targets in the eye 
    				with precision and safety that hold the promise of increased patient satisfaction. In some 
    				cases, they can release drug payload for a period of months to make disease treatment more 
    				efficient and less burdensome. In other cases, new drugs delivered internally to the eye might 
    				be used to enhance surgical outcomes. At PanOptica, we are interested in all of these modalities. 
    				Only those that hold the promise for the greatest patient and doctor benefit will be pursued 
    				for licensure, acquisition or development. 
    			</p>
    		</div>
    		<div id="footer">
    			<p> © Panoptica 2009 | <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a></p>
    		</div>
    	</div>
    </body>
    </html>

    CSS:


    Code:
    /* RESET */
    html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
    h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
    ul,ol { list-style: none; }
    fieldset,img { border: none; }
    caption,th { text-align: left; }
    table { border-collapse: collapse; border-spacing: 0; }
    
    body { background: url("images/bg.png") repeat-x; }
    
    /* PAGE */
    
    #page { width: 800px; height: auto; display: block; margin: 0px auto; }
    
    /* HEADER */
    
    #header, #logo, #nav li a { background: url("images/global.png"); } 
    #header { background-position: 0 -30px; width: 100%; height: 130px; position: relative; z-index: 2; }
    
    /* LOGO */
    
    #header #logo { background-position: 0 -190px; width: 251px; height: 113px; position: relative; top: 30px; left: 20px; }
    
    /* NAVIGATION */
    
    #header #nav { width: 380px; height: 40px; position: relative; top: -23px; left: 400px; }
    #header #nav li { display: inline; }
    #header #nav li a { float: left; height: 0; padding-top: 40px; overflow: hidden; }
    
    /* BUTTONS */
    
    #header #nav li#home a { background-position: 0 -333px; width: 95px; }
    #header #nav li#about a { background-position: -95px -333px; width: 132px; }
    #header #nav li#contact a { background-position: -227px -333px; width: 153px; }
    
    /* HOVER STATES */
    
    #header #nav li#home a:hover { background-position: 0 -373px; }
    #header #nav li#about a:hover { background-position: -95px -373px; }
    #header #nav li#contact a:hover { background-position: -227px -373px; }
    
    /* ACTIVE STATES */
    
    #header #nav li#home a:active { background-position: 0 -413px; }
    #header #nav li#about a:active { background-position: -95px -413px; }
    #header #nav li#contact a:active { background-position: -227px -413px; }
    
    /* ON STATES */
    
    #header.home #nav li#home a { background-position: 0 -453px; }
    #header.about #nav li#about a { background-position: -95px -453px; }
    #header.contact #nav li#contact a { background-position: -227px -453px; }
    
    /* ON STATES HOVER */
    
    #header.home #nav li#home a:hover { background-position: 0 -493px; }
    #header.about #nav li#about a:hover { background-position: -95px -493px; }
    #header.contact #nav li#contact a:hover { background-position: -227px -493px; }
    
    /* HEAD CONTAINER */
    
    #head-container { width: 800px; height: auto; position: relative; z-index: 1; }
    
    /* HEAD CONTAINER - HOME */
    
    #head-container.home { background: url("images/headButtons.png") no-repeat; height: 243px; }
    #head-container.home li { dipslay: inline; }
    #head-container.home li a { position: absolute; }
    #head-container.home li a *{ display: none; }
    
    /* BUTTONS */
    
    #head-container.home li#one a { width: 166px; height: 142px; left: 119px; top: 49px; }
    #head-container.home li#two a { width: 230px; height: 160px; left: 285px; top: 41px; }
    #head-container.home li#three a { width: 166px; height: 142px; left: 515px; top: 49px; }
    
    /* TYPE */
    
    body { font: 12px/24px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; color: #656565; }
    h1 { font-size: 24px; color: #3299cc; line-height: 28px; margin: 2px 0px 18px 0px; text-align: center; }
    h2 {}
    h3 {}
    h4 {}
    
    /* IMAGES AND IMAGE CONTAINERS */
    
    img { background: #f0f0f0; display: inline; padding: 4px; border: 1px solid #e6e6e6; }
    img.clear-left { float: right; clear: left; margin: 4px 0px 8px 22px; }
    img.clear-right { float: left; clear: right; margin: 4px 22px 8px 0px; }
    .img-stacker { width: 157px; height: auto; display: block; background: #cfcfcf; padding: 10px; }
    .stack-left { float: left; clear: right; margin: 4px 22px 8px 0px; } 
    .stack-right { float: right; clear: left; margin: 4px 0px 8px 22px; }
    
    /* PAGE CONTENT */
    
    #content { width: #fff; height: auto; margin-top: 22px; }
    #content p { font-size: 14px; color: #656565; line-height: 19px; text-align: left; padding-bottom: 16px; }
    #content p.clear-btm { padding-bottom: 0px; display: inline; } 
    #content p.move-inline { display: inline; }
    
    /* PAGE BOXES */
    
    #box-1 { width: 35%; height: auto; margin: 16px 22px 16px 0px; }
    #box-1.clear-right { display: block; float: left; clear: right; }
    #box-1.clear-left { display: block; float: right; clear: left; }
    #box-1 #head { background: #6caece; padding: 12px 20px 6px 20px; }
    #box-1 #head p { font-size: 20px; color: #389bcd; text-align: left; line-height: 30px;  }
    #box-1 #head p.shdw { font-size: 20px; color: #fff; text-align: left; line-height: 30px; margin-top: -167px; }
    #box-1 #content { background: #3299cc; padding: 12px 20px 2px 20px; margin-top: -10px; }
    #box-1 #content p { font-size: 14px; color: #e2f5ff; line-height: 26px; }
    
    /* FOOTER */
    
    #footer { width: 100%; height: 20px; border-top: 1px solid #c5c5c5; margin: 2px 0px 40px 0px; }
    #footer p { font-size: 12px; color: #a5a5a5; padding-top: 4px; text-align: left; text-transform: uppercase; }
    #footer p a { color: #a5a5a5; text-decoration: underline; }
    #footer p a:hover { color: #777777; }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Your intention is completely clear.
    Code:
    <div class="img-stacker">
                	<div class="stack-left">
                        <img src="images/home/img-01.jpg" width="157" height="126" alt=""/>
                        <img src="images/home/img-02.jpg" width="157" height="174" alt=""/>
                        <img src="images/home/img-03.jpg" width="157" height="176" alt=""/>
                    </div>
                </div>
    Why do you need two divs to wrap your images?
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Here's a link to the site: www.steadfastdesigns.com/panoptica/index.html. However, it is still under construction, so there are still issues with a few other things. I would appreciate you taking a look.

    I don't really know why I have it in two divs. Is that whats giving me the problem?

    Thank you abduraooft,

    Taylor

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    50
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Oh, and one more note. I'm trying to float the img-stacker on the right, and not the left. But when I try to float it on the right side with the img.stack-right it pushes all of the text down underneath the box and still floats on the left side of the page. That's the problem.

    Thanks,

    Taylor

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Isn't
    Code:
    .img-stacker {/*styles.css (line 90)*/
    background:#CFCFCF none repeat scroll 0;
    float:left;
    height:auto;
    margin-right:10px;
    padding:10px;
    width:157px;
    }
    Code:
    <div class="img-stacker">
                	
                        <img width="157" height="126" src="images/home/img-01.jpg" alt=""/>
                        <img width="157" height="174" src="images/home/img-02.jpg" alt=""/>
                        <img width="157" height="176" src="images/home/img-03.jpg" alt=""/>
                   
                </div>
    enough?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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