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 to the CF scene
    Join Date
    Oct 2009
    Location
    Canyon Lake, Texas
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Images get pushed to the bottom of the div when I add any align properties

    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
    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>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
    Code:
    @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
    Code:
    @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; }
    Last edited by ontargetpro; 10-20-2009 at 07:43 PM. Reason: Left out my link!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • Users who have thanked SB65 for this post:

    ontargetpro (10-20-2009)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Location
    Canyon Lake, Texas
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Oct 2009
    Location
    Canyon Lake, Texas
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Huh....

    The images work on this page.....

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

    Must be something I can figure out somehow...

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.htm
    l


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


  •  

    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
    •