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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    image won't float to the left right and my main wrapper wont include my photo galley

    For some reason the text keeps going under the image. I just want the image on the left and text on the right. http://lashessence.com
    I used this code
    Code:
    <img style="float:left;margin:0 5px 0 0;" src="images/pic 3.jpg" alt="" />
    and here's my css
    Code:
    body {   
    margin: 0;
    font-family: arial, "sans-serif";
    font-size: 16px; 
    background-image:url('http://www.lashessence.com/bg2.jpg');
    background-repeat:repeat;
    }
    
    #wrap {
    padding: 0; 
    width : 85%;
    margin : auto;
    background-color : #fff;
    }
    
    #navbar {
    	margin: auto;
    	padding: 0;
    	height: 1.9em;
    width : 100%;
    background-color: #5DB2B6;
    }
    #navbar li {
    	list-style: none;
     	 float: left;
    }
    #navbar li a {
    	display: block;
    	padding: 3px 8px;
    	background-color: #5DB2B6;
    	color: #fff;
    	text-decoration: none;
    font-family:Arial,Helvetica,"sans-serif";}
    
    #navbar li ul {
    	display: none; 
    	width: 10em;
    	background-color: #5DB2B6;}
    
    
    #navbar li:hover ul {
    	display: block;
    	position: absolute;
    	margin: 0;
    	padding: 0; }
    
    #navbar li:hover li {
    	float: none; }
    
    #navbar li:hover li a {
    	background-color: #5DB2B6;
    	border-bottom: 1px solid #fff;
    	color: #ffffff; }
    
    #navbar li li a:hover {
    	background-color: #B9BA17; }
    
    #left {
    width : auto;
    padding: 0px;
    }
    
    h1 {
    text-align : left;
    padding : 0px;
    }
    
    h2 {
    text-align : right;}
    
    #footer {
      clear : both; 
     padding : 0px;
      text-align : center;
      font-size : 0.9em;
    width : 100%;
    height : auto;
    font-family : arial,"sans-serif";
    }
    Also the background for my main website wrapper wont include my photo gallery? http://lashessence.com/gallery The css is the same as above but here's the html part:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <link href="http://lashessence.com/main.css" rel="stylesheet" type="text/css" media="screen" />
    <title>Lash Essence</title>
    
    <!--
    
    This CSS image gallerydisplay was writen by www.brightcherry.co.uk.
    
    For support, please visit www.brightcherry.co.uk/scribbles/
    
    -->
    
    <style type="text/css">
    
    #gallerywrapper{	
    float:left;
    	position:absolute;
    z-index:5;
    }
    
    .gallerydisplay {
    	padding:0;
    	margin:0px 0 0 0;
    	list-style-type:none;
    	float:left;
    }
    
    .gallerydisplay img.mainimage,
    #defaultimage img.mainimage{
    	border:0;
    	width:476px;
    	height:357px;
    }
    
    
    .gallerydisplay li {
    	float:left;
    	margin:10px 0 10px 0;
    }
    
    .gallerydisplay li a img.mainimage {
    	position:absolute;
    	left:0;
    	display:none;
    	border:0;
    	top:55px;
    	z-index:5;
    }
    
    .gallerydisplay li a:active img.mainimage,
    .gallerydisplay li a:hover img.mainimage,
    .gallerydisplay li a:focus img.mainimage {
    	display:block;
    }
    
    .gallerydisplay li img.thumbnail{
    	height:27px;
    	width:27px;
    	margin-right:4px;
    	border:1px solid #666;
    }
    
    .gallerydisplay li a:active img.thumbnail{
    	border:#eee solid 1px;
    }
    
    #defaultimage img{
    	position:absolute;
    	top:55px;
    	left:0;
    	z-index:-1;
    }
    
    </style>
    </head>
    <body>
    <div id="wrap">
    <h1><a href="index.html"><img src="http://lashessence.com/images/logosmall.jpg" alt="Lash Essence" width="149" height="103" /></a></h1>
    <ul id="navbar">
    <li><a href="index.html">Home</a> </li>
    <li><a href="about/">About</a> 
    <ul>
    <li><a href="about/gallery.html">Gallery</a></li>
    </ul>
    </li>
    <li><a href="faq/">FAQ</a></li>
    <li><a href="training/">Training</a> 
    <ul>
    <li><a href="training/signup.html">Sign Up</a></li>
    </ul>
    </li>
    <li><a href="store/index.html">Shop</a> </li>
    <li><a href="contact/">Contact</a> </li>
    </ul>
    <div id="left">
    <div id="gallerywrapper">
    <div id="defaultimage"><img class="mainimage" title="Before Extensions" src="http://lashessence.com/images/before1.jpg" alt="Image 1" /></div>
    <ul class="gallerydisplay">
    <li> <a href="#"> <img class="thumbnail" title="Before Extensions" src="http://lashessence.com/images/before1.jpg" alt="Before Extensions" /> <img class="mainimage" title="Image 1" src="http://lashessence.com/images/before1.jpg" alt="Before Extensions" /> </a> </li>
    <li> <a href="#"> <img class="thumbnail" title="Image 2" src="http://lashessence.com/images/after1.jpg" alt="After Extensions" /> <img class="mainimage" title="Image 2" src="http://lashessence.com/images/after1.jpg" alt="After Extensions" /> </a> </li>
    <li> <a href="#"> <img class="thumbnail" title="Image 3" src="http://lashessence.com/images/before2.jpg" alt="Before Extensions" /> <img class="mainimage" title="Image 3" src="http://lashessence.com/images/before2.jpg" alt="Before Extensions" /> </a> </li>
    </ul>
    </div>
    </div>
    <div id="footer">| About | Privacy Statement | Contact | Link Us |</div>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Remove absolute positions applied to #gallerywrapper and #defaultimage img. You may use floats to make column layouts and set overflow:auto; to the wrapper to clear the floats.

    Have you sorted your first issue?
    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 to the CF scene
    Join Date
    Nov 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    When i take out the absolute positions though it messes the gallery up. like when you put the mouse over a picture it pops up somewhere else. http://www.lashessence.com/gallery/

    and yes i figured the first issue out.


  •  

    Posting Permissions

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