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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Alignment Issues, Shifting text, code attached

    I updated the website and still have alignment issues:
    Please see attachment the footer is blending into the border. The text is shifted to the right. I use dream weaver and it showed it perfect in Live View. I don't understand what I am doing wrong. I am going to update to DW CS 5.5 I have 5 now I think 5.5 has enhancemnts but I would like to know what is wrong with my code? Thanks
    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>
    
    <title></title>
    
    <style type="text/css">
    
    #wrapper{margin: 0px auto; width: 1024px; height: 500px; border:3px ridge white;}
    
    #header{width:1024px; height: 95px; background-color:white;}
    
    #sliderWin{width:1018px; height:420px; margin:auto; background-color:white;}
    
    #footer{width:1024px; height:30px; clear:both; background-color:grey;}
    
    ul{float:right;}
    
    li{float:right; list-style:none;}
    
    p{float:left;}
    
    #apDiv1 {
    	position:absolute;
    	left:311px;
    	top:29px;
    	width:359px;
    	height:71px;
    	z-index:1;
    }
    #apDiv2 {
    	position:absolute;
    	left:623px;
    	top:57px;
    	width:397px;
    	height:33px;
    	z-index:2;
    }
    #apDiv3 {
    	position:absolute;
    	left:630px;
    	top:22px;
    	width:316px;
    	height:34px;
    	z-index:2;
    }
    #apDiv4 {
    	position:absolute;
    	left:252px;
    	top:127px;
    	width:197px;
    	height:25px;
    	z-index:3;
    }
    #apDiv5 {
    	position:absolute;
    	left:251px;
    	top:154px;
    	width:197px;
    	height:19px;
    	z-index:4;
    }
    #apDiv6 {
    	position:absolute;
    	left:250px;
    	top:178px;
    	width:201px;
    	height:19px;
    	z-index:5;
    }
    #apDiv5 {
    	font-family: Verdana, Geneva, sans-serif;
    }
    #apDiv4 {
    	font-family: Verdana, Geneva, sans-serif;
    }
    #apDiv4 {
    	font-family: Arial, Helvetica, sans-serif;
    }
    #apDiv7 {
    	position:absolute;
    	left:627px;
    	top:72px;
    	width:279px;
    	height:16px;
    	z-index:8;
    }
    #apDiv4 {
    	font-family: Georgia, Times New Roman, Times, serif;
    }
    #apDiv4 {
    	font-family: Times New Roman, Times, serif;
    }
    #apDiv5 {
    	font-family: Times New Roman, Times, serif;
    }
    #apDiv6 font {
    	font-family: Times New Roman, Times, serif;
    }
    #apDiv8 {
    	position:absolute;
    	left:880px;
    	top:26px;
    	width:282px;
    	height:18px;
    	z-index:6;
    }
    #apDiv9 {
    	position:absolute;
    	left:442px;
    	top:103px;
    	width:519px;
    	height:403px;
    	z-index:7;
    }
    body {
    	background-image: url();
    	background-color: #FF9;
    }
    #apDiv10 {
    	position:absolute;
    	left:588px;
    	top:119px;
    	width:423px;
    	height:319px;
    	z-index:8;
    }
    #apDiv11 {
    	position:absolute;
    	left:504px;
    	top:465px;
    	width:421px;
    	height:33px;
    	z-index:9;
    }
    body,td,th {
    	color: #666;
    	font-size: 14px;
    }
    #apDiv12 {
    	position:absolute;
    	left:232px;
    	top:337px;
    	width:295px;
    	height:24px;
    	z-index:10;
    }
    #apDiv13 {
    	position:absolute;
    	left:234px;
    	top:214px;
    	width:290px;
    	height:110px;
    	z-index:11;
    }
    #apDiv14 {
    	position:absolute;
    	left:1040px;
    	top:47px;
    	width:106px;
    	height:24px;
    	z-index:12;
    }
    #apDiv15 {
    	position:absolute;
    	left:891px;
    	top:47px;
    	width:143px;
    	height:23px;
    	z-index:13;
    }
    #apDiv16 {
    	position:absolute;
    	left:821px;
    	top:70px;
    	width:323px;
    	height:47px;
    	z-index:14;
    }
    #apDiv17 {
    	position:absolute;
    	left:196px;
    	top:146px;
    	width:88px;
    	height:25px;
    	z-index:15;
    }
    #apDiv18 {
    	position:absolute;
    	left:196px;
    	top:179px;
    	width:57px;
    	height:20px;
    	z-index:16;
    }
    #apDiv19 {
    	position:absolute;
    	left:197px;
    	top:209px;
    	width:136px;
    	height:21px;
    	z-index:17;
    }
    #apDiv20 {
    	position:absolute;
    	left:196px;
    	top:238px;
    	width:48px;
    	height:19px;
    	z-index:18;
    }
    #apDiv21 {
    	position:absolute;
    	left:195px;
    	top:265px;
    	width:95px;
    	height:20px;
    	z-index:19;
    }
    #apDiv22 {
    	position:absolute;
    	left:210px;
    	top:141px;
    	width:982px;
    	height:306px;
    	z-index:20;
    }
    #apDiv23 {
    	position:absolute;
    	left:784px;
    	top:76px;
    	width:404px;
    	height:34px;
    	z-index:21;
    }
    </style>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    
    
    <body>
    
    <div id="apDiv1"><img src="PSresize.jpg" width="424" height="75" /></div>
    <div id="apDiv8">13 Danbury Road (Rt. 7) Wilton, CT. 06897</div>
    <div id="apDiv11"><em>&quot;In my business image is everything&quot;---Philip DiMarino (owner)</em></div>
    <div id="apDiv14">(203) 761-4922</div>
    <div id="apDiv15">By Appointment Only</div>
    
    <div id="apDiv22"><strong>Keratin Treatments:</strong> Upon Consultation: 
      At Philip Salon we take every measure possible for the safety of our staff and clientele. Our Keratin treatments are performed inside a separate well ventilated room. <br />
      <br />
      <strong>Juvexin Keratin Treatment</strong> Do you have unmanageable, frizzy, damaged, hair that takes forever to blowdry, doesn't hold hair color? This is not a straigtener, but more or less a service to offer you beautiful, manageable, shinier, healthier hair.  It is almost like a miracle drug that helps take the frizz and curls out of your hair for up to 5 months! The Keratin Treatment with Juvexin is formulated to straighten the hair and leave it shiny, silky and manageable. The Keratin Treatment is specifically formulated as a revitalizing and rejuvenating treatment that eliminates frizz and curls).  What is Juvexin you ask?   It is a naturally derived protein similar to the structure of hair, which bonds to the surface and penetrates strands.<br />
      <br />
      <strong>Original Keratin Treatment</strong>  Superior straightening and anti-frizz results, Shampoo next day, its just that good.Universally effective on any chemically treated hair. Lighter product, quicker to apply and faster drying time Safer product for the customer and the stylist.
      
      Express
      
      "Less time, less money, less hassle" The fastest, simplest and most affordable way to have smoother, shinier and better-conditioned hair. 
      <br />
    
      <br />
      <strong>Keratin Express</strong> Treatment can give you unbelievable hair in as little as 35 minutes. Eliminate frizz, reduce volume, increase shine, strengthen hair and cut blow-dry or straightening time by 50% or more for 4-6 weeks!<br />
      <br />
      <strong>Relaxers</strong>.............................................................$90 and up
    <p>&nbsp;</p>
      <p><br />
        <br />
    
      </p>
      <p>&nbsp;</p>
    </div>
    <div id="apDiv23"><link rel="stylesheet" href="mbcsmb73g0.css" type="text/css" />
    
    <ul id="ebul_mb73g0_3" class="ebul_mb73g0" style="display: none;">
    <li><a title="">Hair Coloring</a></li>
    <li><a title="">Hair Cut</a></li>
    <li><a title="">Anti Frizz</a></li>
    <li><a title="">Styling</a></li>
    <li><a title="">Other Services</a></li>
    
    </ul>
    
    <ul id="mb73g0ebul_table" class="mb73g0ebul_menulist" style="width: 341px; height: 26px;">
      <li class="spaced_li"><a><img id="mbi_mb73g0_1" src="mb_home1.gif" name="mbi_mb73g0_1" width="52" height="26" style="vertical-align: bottom;" border="0" alt="Home" title="" /></a></li>
      <li class="spaced_li"><a><img id="mbi_mb73g0_2" src="mb_about_us1.gif" name="mbi_mb73g0_2" width="71" height="26" style="vertical-align: bottom;" border="0" alt="About Us" title="" /></a></li>
      <li class="spaced_li"><a><img id="mbi_mb73g0_3" src="mb_services1.gif" name="mbi_mb73g0_3" width="73" height="26" style="vertical-align: bottom;" border="0" alt="Services" title="" /></a></li>
      <li class="spaced_li"><a><img id="mbi_mb73g0_4" src="mb_products1.gif" name="mbi_mb73g0_4" width="68" height="26" style="vertical-align: bottom;" border="0" alt="Products" title="" /></a></li>
      <li><a><img id="mbi_mb73g0_5" src="mb_directions1.gif" name="mbi_mb73g0_5" width="73" height="26" style="vertical-align: bottom;" border="0" alt="Directions" title="" /></a></li>
    </ul>
    <script type="text/javascript" src="mbjsmb73g0.js"></script></div>
    <div id="wrapper">
    
      <div id="header">
        <ul>
          
    
    </ul>
    
      </div>
    
      <div id="sliderWin"></div>
    
      <div id="footer"> Philip Salon 2011 made by www.m2productionz.com</div>
    
    </div>
    
    
    
    
    
    </body>
    
    </html>
    Attached Thumbnails Attached Thumbnails Alignment Issues, Shifting text, code attached-anti.jpg  

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Check following links. Hope these links will help you out. You have to understand about css box model

    http://css-tricks.com/2841-the-css-box-model/
    http://www.w3schools.com/css/css_boxmodel.asp

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks I will check it out.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You DO know DW CS5 or whatever version you have, has nothing to do with good correct coding techniques. Updating to the newest version wont matter if YOU yourself are not writing the correct html and css to get your desired results.

    As vickram already stated, its basically a box model issue. The box model rule says that a parent element must be large enough to contain the child element WITH paddins and margins all included. When something "sticks" out, that most likely means you've broken this box model rule.
    Teed

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes I understand and her links provided a wealth of information. I need to get the alignment issue down. I have been reading her links and they are useful I need to apply it to my website and see how it comes out. I am getting confused(since I don't see it mentioned in the links) What is parent, child? I understand margin, border, padding but getting confused what the parent is, child?

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by xxnonamexx View Post
    Yes I understand and her links provided a wealth of information. I need to get the alignment issue down. I have been reading her links and they are useful I need to apply it to my website and see how it comes out. I am getting confused(since I don't see it mentioned in the links) What is parent, child? I understand margin, border, padding but getting confused what the parent is, child?

    Consider following code:

    Code:
    <div>
    <h1>&nbsp;</h1>
    <p>&nbsp;</p>
    </div>
    Here <div> is the parent of <h1> and <p> and both are children of <div>.

    <h1> and <p> are sibling to each other

    Let me know if it is understandable......


  •  

    Posting Permissions

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