...

View Full Version : Images get pushed to the bottom of the div when I add any align properties



ontargetpro
10-20-2009, 07:33 PM
When I try to add an image in the "intro" div, it shows up as you would expect when the alignment is set to "default". However, to get it to look right, and to use CSS, I have created alignright and alignleft settings. If I use either of those OR the old-fashioned align="right", the image appears to be pushed down the page and never shows up where you put it, sometimes it even shows up partially below the "intro" div.

I am using a lot of "sandbag" divs to make the text wrap around the leftimage div and the right background image. I wonder if this could be part of the problem.

My CSS and HTML are validating. Help, please? The page is here: http://www.artquestbeauty.com/css/permanentmakeup.html

Here is the HTML

<!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>Skin Care and Permanent Cosmetics in Canyon Lake, Texas - AQB</title>

<link href="menu.css" rel="stylesheet" type="text/css" />

<link href="wrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

<div id="content"><!-- #BeginLibraryItem "/Library/menudropdown.lbi" --><div id="menuholder"><ul id="menu">
<li><a href="../Library/index.html">Home</a>
</li>
<li><a href="../Library/about.html">About</a></li>
<li><a href="../Library/contact">Contact Us</a></li>
<li><a href="#">Services<img src="images/triangle.png" alt="SkinCareServices" width="18" height="12" border="0" /></a>
<ul>
<li><a href="#">Condition-Specific Treatments</a></li>
<li><a href="../Library/facials">Facials</a></li>
<li><a href="#">Home Care</a></li>
<li><a href="#">Lash and Brow Tinting</a></li>
<li><a href="#">Lash Extensions</a></li>
<li><a href="#">Makeup Application</a></li>
<li><a href="#">Permanent Makeup</a></li>
<li><a href="#">Skin Growth Removal</a></li>
<li><a href="#">Tattoos</a></li>
<li><a href="#">Tattoo Removal</a></li>
<li><a href="#">Waxing</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQs</a></li>

</ul></div><!-- #EndLibraryItem --><div id="foot"><ul>
<li>Patsy Keim
</li>
<li>1395 Sattler Road Suite #2</li>
<li> Canyon Lake Professional Building
</li>
<li>Canyon Lake, TX 78132
</li>
<li>830 964-4315<br />
<a href="contact.html">Contact Us</a>
</li>
</ul>Website design by <a href="http://www.ontargetpro.com" target="_blank">On Target</a>.

<!--end of foot div--></div>
<div id="top"></div>
<div id="intro">
<!--sandbag divs-->
<div id="sb1"><span></span></div>
<div id="sbr1"></div>
<div id="sb2permanentmakeup"><span></span></div>
<div id="sbr2"></div>
<div id="sbr3"></div>
<div id="sbr4"></div>
<div id="sbr5"></div>
<div id="sbr6"></div>
<div id="sbr7"></div>
<div id="sbr8"></div>
<div id="sbr9"></div>
<div id="sbr10"></div>
<!--end sandbag divs-->
<h1>Permanent Cosmetics</h1>
<p>See also <a href="faq.html">FAQs</a>.</p>
<p>Women all over are finding that permanent makeup is perfect for them. Whatever look you choose, you can work, exercise, shower or swim and always look your best. A skilled technician can offer suggestions and help you choose colors that are most complimentary with your skin tone. </p>
<p>Call 830 964-4315 today for your free consultation!</p>
<h3>A Brief History of Permanent Cosmetics</h3>
<p>Cosmetic tattooing first became popular in 1984, when Dr. Geora Angres published his now famous landmark article on the use of eyelash tattooing to create an eyeliner effect for cosmetic purposes. In the 1990s, states began regulati<img src="../Images/clientphotos/browsandliner.jpg" alt="Brow and Liner Permanent Makeup" width="400" height="200" class="align-left" />ng permanent cosmetics and today more than 15,000 technicians are practicing world-wide. In the US, one in four women has a tattoo and 8 million have permanent cosmetics.</p>
<h3><br />
Safety and Comfort Concerns</h3>
<p>Modern pigments that contain inert organic and inorganic compounds remain stable when implanted into the skin, are hypo-allergenic, fade-resistant and are MRI-safe because they do not contain ferromagnetics or heavy metals such as iron oxides. With the use of topical anesthetic creams, there is very little discomfort. Infections or allergic reactions are very rare. <img src="../Images/clientphotos/PermCos/LipsBeforeAfter.jpg" alt="Permanent Cosmetics" width="574" height="113" class="align-left" />However, a small spot test can be requested if you are concerned. </p>
<h3>Some Permanent Cosmetic Options</h3>
<p>Your natural eyebrows can be a basic guideline to follow for penciling-in or can be a total brow re-creation. Anything from a few hair strokes to fill those sparse spots or scarred areas to fully colored brows can be created and cost between $250 to $750.</p>
<p>Eyeliner can be applied in many styles, widths and colors, from a natural looking lash enhancement to a defined line, and costs $250 to $750. Mucosal liner really opens up the eyes and can cost $300 to $500.</p>
<p>Lip liner give lips more definition, can correct unevenness, or add fullness and costs from $350 to $850. Full lip color (see photo below) can be applied in either a natural hue or a more vivid one, and costs $400 to $1500.</p>
<p>Paramedical procedures, such as areola reconstruction range from $150 to $500 per hour.</p>
<h2>Call today for your free skin analysis and consultation.</h2>

</div>
<div id="leftimagepermanentmakeup"></div>
<!--end of text div-->
</div>


</body>
</html>
And the menu.css

@charset "utf-8";
/* CSS Document */



#menuholder {
position:relative;
width:auto;
height:auto;
z-index:5;
margin-left: auto;
margin-right:auto;
top: 0px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
visibility: inherit;
right: 0px;
left: -2px;
bottom: 0px;
}
#menuholder ul {
padding: 0;
list-style: none;
font-size: 13px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-style: italic;
font-weight: bolder;
font-variant: small-caps;
text-align: center;
display: inline;
}
#menu a {
display: block;
width: auto;
background-color: #A72254;
font-weight: bold;
color: #FFF;
font-style: italic;
font-variant: small-caps;
letter-spacing: .2em;
border: medium outset #CB9C56;
text-decoration: none;
text-align: center;
padding-top: 1px;
padding-right: 3px;
padding-bottom: 1px;
padding-left: 3px;
font-size: 13px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#menu a:hover {
display: block;
width: auto;
background-color: #FFF;
font-weight: bold;
color: #000;
font-style: italic;
font-variant: small-caps;
letter-spacing: 0.1em;
border: medium outset #A72254;
text-decoration: none;
text-align: left;
padding-top: 1px;
padding-right: 3px;
padding-bottom: 1px;
padding-left: 3px;
font-size: 13px;
}
#menu li {
float: left;
width: 166.6px;
text-align: center;
}
#menu li ul {
position: relative;
width: 10em;

}
#menu li:hover ul {
left: auto;
background-color: #A72254;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
width: 125px;
}
#menu ul {
padding: 0;
list-style: none;
font-size: 12px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: absolute;
text-align: center;
}
#menu a {
display: block;
width: auto;
background-color: #A72254;
font-weight: normal;
color: #FFF;
font-style: italic;
font-variant: small-caps;
letter-spacing: 0.1em;
border: medium outset #CB9C56;
text-decoration: none;
text-align: center;
padding-top: 1px;
padding-right: 3px;
padding-bottom: 1px;
padding-left: 3px;
}
#menu a:hover {
display: block;
width: auto;
background-color: #FFF;
font-weight: normal;
color: #000;
font-style: italic;
font-variant: small-caps;
letter-spacing: 0.1em;
border: medium outset #A72254;
text-decoration: none;
text-align: center;
padding-top: 1px;
padding-right: 3px;
padding-bottom: 1px;
padding-left: 3px;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
}

#menu li:hover ul {
left: auto;
background-color: #A72254;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: inset;
border-left-style: inset;
width: 125px;
}

and the wrap.css

@charset "utf-8";
/* CSS Document */
html {
text-align: center;
}

body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
text-align: center;
margin: 0px;
padding: 0px;
}
#content {
position:relative;
min-height:852px;
z-index:1;
background-image: url(images/bgdouble.jpg);
background-position: right top;
border: thin solid #E8D7B9;
text-align: center;
margin: auto;
width: 1000px;
background-repeat: repeat-y;
}
#text {
top: 212px;
border: medium none #069;
position: absolute;
height: 103px;
width: 630px;
text-align: justify;
}

#top {
position:relative;
width:1000px;
height:215px;
z-index:2;
background-image: url(images/top.png);
background-repeat: no-repeat;
top: 30px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#leftimage {
position:absolute;
width:250px;
height:300px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/PerfectSkin1.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #FFF;
}
#leftimageabout {
position:absolute;
width:250px;
height:400px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-color: #FFF;
text-align: left;
list-style-image: url(images/flowerbullet.png);
}
#leftimagefacials {
position:absolute;
width:250px;
height:700px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/facial.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #FFF;
text-align: left;
}
#leftimagehomecare {
position:absolute;
width:250px;
height:212px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/skincondition1.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #FFF;
text-align: left;
}
#leftimagemakeup {
position:absolute;
width:250px;
height:270px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/clientphotos/makeup1.jpg);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFF;
text-align: left;
}
#leftimageskintreatments {
position:absolute;
width:250px;
height:270px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/SkinProblem1.jpg);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFF;
text-align: left;
}
#leftimagestattoos {
position:absolute;
width:250px;
height:270px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/tattoo1.jpg);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFF;
text-align: left;
}
#leftimagefaq {
position:absolute;
width:250px;
height:300px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/enzymepeel.jpg);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFF;
text-align: left;
}
#leftimagelashandbrow {
position:absolute;
width:250px;
height:300px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/eyelashes1.jpg);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFF;
text-align: left;
}
#leftimagepermanentmakeup {
position:absolute;
width:250px;
height:300px;
z-index:2;
left: -20px;
top: 342px;
border: thin double #E8D7B9;
background-image: url(../Images/permanentcosmetics1.jpg);
background-repeat: no-repeat;
background-position: left center;
background-color: #FFF;
text-align: left;
}
#intro {
position:relative;
width:auto;
z-index:3;
top: -30px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
left: 6px;
padding-left: 5px;
text-align: justify;
list-style-position: outside;
list-style-type: disc;
}
h1 {
font-size: 24px;
font-weight: bold;
color: #CAA560;
font-style: oblique;
letter-spacing: 0.2em;
text-align: center;
}
h2 {
font-size: 16px;
color: #791B1B;
font-style: italic;
letter-spacing: .1em;
padding-left: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
background-position: left top;
height: 23px;
}
#foot {
position:absolute;
width:1000px;
height:35px;
z-index:2;
bottom: -55px;
padding-bottom: 0px;
}
#foot ul li {
display: inline;
list-style-type: disc;
padding-left: 25px;
background-image: url(images/star.png);
background-repeat: no-repeat;
background-position: left;
}
#middle {
position:absolute;
width:383px;
height:316px;
z-index:3;
top: 315px;
left: 249px;
}
#underimage {
position:absolute;
width:630px;
height:115px;
z-index:2;
top: 630px;
}
#sb1{
width: 1px;
height: 130px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
}

#sb2 {
width: 225px;
height: 400px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
}
#sbr1{
width: 375px;
height: 130px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}

#sbr2 {
width: 375px;
height: 115px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr3 {
width: 375px;
height: 20px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr4 {
width: 400px;
height: 120px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr5 {
width: 325px;
height: 80px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr6 {
width: 375px;
height: 80px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr7 {
width: 475px;
height: 180px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr8 {
width: 365px;
height: 85px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr9 {
width: 350px;
height: 115px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sbr10 {
width: 375px;
height: 2455px;
float: right;
clear: right;
margin: 0px;
padding: 0px;
}
#sb2homecare {
width: 225px;
height: 230px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
list-style-image: url(images/flowerbullet.png);
}
#sb2facials {
width: 225px;
height: 700px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
list-style-image: url(images/flowerbullet.png);
}

#sb2makeup {
width: 225px;
height: 275px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
;
}
#sb2skintreatments {
width: 225px;
height: 275px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
;
}#sb2tattoos {
width: 225px;
height: 275px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
;
}
#sb2faq {
width: 225px;
height: 315px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
;
}

#sb2lashandbrow {
width: 225px;
height: 320px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
;
}
#sb2permanentmakeup {
width: 225px;
height: 320px;
float: left;
clear: left;
margin: 0px;
padding: 0px;
;
}

.align-right { float:right; margin: 0 0 15px 15px; }

.align-left { float:left; margin: 0 15px 15px 0; }

SB65
10-20-2009, 10:12 PM
Hi there

I think you're right - it is the "sbx" divs which are all floated which are causing the issue. They also make your code a bit messy.

An alternative approach might be to ditch all these divs, and instead apply a width to your text elements on the left (without floating them), setting the width in different ids/classes to allow them to fit around your right side image. You should then be able to insert the required images within the text more simply.

ontargetpro
10-20-2009, 11:18 PM
Thank you (again) SB65. Thing is, I'm kind of attached to the sandbox divs. Without them the content area is going to have to be real narrow in spots. If I use text elements with specified widths instead, I'm going to have issues in inserting text in a way that looks natural. I'll have to think about another option.

ontargetpro
10-20-2009, 11:40 PM
The images work on this page.....

http://www.artquestbeauty.com/css/facials.html

Must be something I can figure out somehow...

SB65
10-21-2009, 08:18 AM
If I use text elements with specified widths instead, I'm going to have issues in inserting text in a way that looks natural. I'll have to think about another option.

Hmm, I'm not sure I understand that. At the moment your text does not extend all the way across because of the width of your "sandbag" divs. For example #sbr1 is 375px wide. It sits within #content which is 1000px wide. Hence the space available at for the text is 625px wide. So the effect is surely the same as setting the width for the text as 625px? I'd set the width by paragraphs so it's not too "jagged".


The images work on this page.....

http://www.artquestbeauty.com/css/facials.html


Here the images are all below the floated "sandbag" divs so the problem doesn't occur



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum