...

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



kassarole
12-31-2012, 05: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

<img style="float:left;margin:0 5px 0 0;" src="images/pic 3.jpg" alt="" />
and here's my css

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:

<!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, 08: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 (http://www.quirksmode.org/css/clearing.html).

Have you sorted your first issue?

kassarole
12-31-2012, 05: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum