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

kassarole · 12-31-2012, 04:49 AM

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>

abduraooft · 12-31-2012, 07:02 AM

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?

kassarole · 12-31-2012, 04:46 PM

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.