9 Replies Latest reply on Jul 28, 2014 12:33 PM by Nancy OShea

    text / images do not align properly

    Mrjberry

      Good Afternoon Everyone

       

      Many of you will more thank likley tell me to look up different tutorials however my problem is that i learn as i go along ( im like a sponge) the way i learn is by getting it wrong to begin with.

       

       

      My question is. when i sometimes add an image or text they are perfectly inline for where i want them to be. however when i go into live mode, they are either too high up or too low down.

      How do i correct this? ive tried to switch between relative, absolute ect. but all i see that changes is that in absolute i can move the text / image

       

      If you could tell me what im doing wrong and how to fix this this would be great..

       

      I am very new to this and i am wanting this to be a great project...

       

       

      Thank you in advance

        • 1. Re: text / images do not align properly
          Preran Adobe Employee

          Hi Mrjberry,

           

          You will have to provide us with a link to your site or provide the code for us to understand what you are trying to do and where you are going wrong.

           

          Thanks,

          Preran

          • 2. Re: text / images do not align properly
            Mrjberry Level 1

            Hi there.

             

            As you will see form the image the "tj lettings is way out of line in the design just to show how bad it is in the live version. im wanting both pieces of text to sit above the grey banner.

            site1.png

             

            the code for the website is as follows ( I think):

            <!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>Untitled Document</title>

            <style type="text/css">

            .a {

                font-family: "Century Gothic";

                font-size: 16px;

            }

            .white {

                color: #FFF;

            }

            .blue {

                color: #09F;

            }

            .white {

                color: #FFF;

                font-family: "Century Gothic";

                font-size: 16px;

            }

            .telephone {

                font-family: "Century Gothic";

                font-size: 16px;

                color: #09F;

            }

            .colouredbox {

                font-family: "Century Gothic";

                font-size: 16px;

                font-style: normal;

                line-height: normal;

                font-weight: normal;

                font-variant: normal;

                color: #09F;

                background-color: #999;

                height: 20px;

                width: 150px;

            }

            </style>

            </head>

            <body bgcolor="#0099FF">

             

            <div id="TJ" style="position: absolute; left: 356px; top: -46px; width: 285px; height: 274px; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 230px; color: #FFF;"><P align="center" class="tj">TJ</P></div>

            <div id="undertrim" style="position: absolute; left: -3px; top: 393px; z-index: 2;"><img src="website/Undertrim_BLue.png" width="1454" height="500" /></div>

             

            <div id="Tjlogo" style="position: absolute; left: -95px; top: -36px; z-index: 1; : height: 285px; width: 252px;"><img src="website/logo2.png" width="500" height="500" /></div>

            <div id="arrowgrey" style="position: absolute; left: 223px; top: 434px;"><img src="website/BannerArrow.png" width="42" height="29" /></div>

            <div id="bannertop" style="position: absolute; left: 0px; top: 224px; z-index: -1; width: 1406px; height: 49px;"><img src="website/bannertop.jpg" width="1450" height="50" /></div>

            <div align="center" id="email" style="position: absolute; left: 345px; top: 220px; width: 413px; font-size: 18px; font-family: 'Century Gothic';"><p> <span class="blue">e:</span> <span class="white">info@tjcondtruction-propertyservices.co.uk</span></p></div>

            <div id="tele" style="position: absolute; left: 947px; top: 222px; width: 203px;"><p class="telephone"><span class="blue">t:</span></span> <span class="white">01159 875 747</span></p></div>

            <div id="twitter" style="position: absolute; left: 851px; top: 275px;"><img src="website/twitter.jpg" width="60" height="59" /></div>

            <div id="instagram" style="position: absolute; left: 926px; top: 274px; width: 54px; height: 56px;"><img src="website/insta.jpg" width="55" height="59" /></div>

             

            <div id="topprop" style="position: absolute; left: -3px; top: 275px; z-index: -2;"><img src="website/Riverbank launch 030.JPG" width="1453" height="617" /></div>

             

            <div id="Lettings" style="position: absolute; left: 652px; top: -176px; width: 693px; height: 215px; font-size: 152px; color: #FFF; font-family: Georgia, 'Times New Roman', Times, serif;"><p>Lettings</p></div>

            <div id="bannertag" style="position: relative; left: 0px; top: 430px; z-index: 2;"><img src="website/bannertop.jpg" width="222" height="21" /></div>

            <div id="pofw" style="position: absolute; left: 12px; top: 438px; z-index: 3;"><p class="white">Top Property of the week</p></div>

             

             

             

             

            </body>

            </html>

            • 3. Re: text / images do not align properly
              Ken Binney Adobe Community Professional & MVP

              You are heading for a trainwreck if you try to use absolute positioning as a layout method.

              See these for reasons:

              http://www.apptools.com/examples/pagelayout101.php  and

              http://css-tricks.com/css-beginner-mistakes-1/

               

              You will also need to pick a better Domain name.  UK regulations would not allow the name shown in the picture (even if you correct the spelling).

              • 4. Re: text / images do not align properly
                osgood_ Level 8

                Sorry to be the messenger of bad news but you are going about building in completely the incorrect way.

                 

                Stop using 'absolutely' positioned <divs> as they can only lead to problems and trouble. You should be using a combination of static and positioned <div> containers:

                 

                Think in terms of a serious of simple boxes in which you position all the elements:

                 

                 

                <!DOCTYPE HTML>

                <html>

                <head>

                <meta charset="UTF-8">

                <title>Untitled Document</title>

                <style>

                * {

                    /* fixes the box-model problem where padding got added to width of container */

                    -webkit-box-sizing: border-box;

                    -moz-box-sizing: border-box;  

                    box-sizing: border-box;       

                }

                body {

                    margin: 0;

                    padding: 0;

                        background-color: #0099FF;

                }

                #pageWrapper {

                        width: 980px;

                    margin: 0 auto;

                }

                #header {

                    overflow: hidden;

                }

                #companyLogo {

                float: left;

                width: 200px;

                 

                }

                #companyName {

                    float: left;

                        width: 780px;

                    font-size: 100px;

                    color: #fff;

                    padding: 0 0 0 20px;

                }

                  

                #companyName span {

                    font-family: Georgia, 'Times New Roman', Times, serif;

                    font-size: 175px;

                }

                #greyBanner {

                    font-family: 'Century Gothic';

                font-size: 18px;

                    background-color:#ccc;

                    background-image: url(website/bannertop.jpg);

                    background-repeat: no-repeat;

                    overflow: hidden;

                    text-align: right;

                    padding: 10px ;

                }

                #email {

                    float: left;

                    width: 60%;

                }

                #email span {

                color: #09F;

                }

                 

                #tel span {

                color: #09F;

                }

                #tel {

                    float: left;

                    width: 40%;

                }

                #propertyImage {

                }

                </style>

                </head>

                <body>

                <div id="pageWrapper">

                <div id="header">

                <div id="companyLogo"><img src="website/logo2.png" width="200" height="200" /></div>

                <div id="companyName"><span>TJ</span> Lettings</div>

                </div>

                <div id="greyBanner">

                <div id="email"><span>e:</span> info@xxxxxxxxxxxxx.co.uk</div>

                <div id="tel"><span>t:</span> 01159 875 747</div>

                </div>

                <div id="propertImage">

                <p>Property Image goes here</p>

                 

                </div>

                </div><!-- end pageWrapper -->

                </body>

                </html>

                • 5. Re: text / images do not align properly
                  osgood_ Level 8

                  Ken Binney wrote:

                   

                  You will also need to pick a better Domain name.  UK regulations would not allow the name shown in the picture (even if you correct the spelling).

                   

                  I can't see the domain name in the image but the email address used in the code is perfectly ok in UK

                  • 6. Re: text / images do not align properly
                    Ken Binney Adobe Community Professional & MVP

                    Hi Os.... so good to see you again.

                    OP has email as <span class="white">info@tjcondtruction-propertyservices.co.uk</span>

                    (note the "d"instead o "s" in the domain name).

                    Even if the spelling were corrected, Nominet would not allow it

                     

                    tjconstruction-property.services.co.uk

                        Error for "tjconstruction-property.services.co.uk".

                        This domain cannot be registered because it contravenes the Nominet UK

                        naming rules.  The reason is: the domain name contains too many parts.

                    • 7. Re: text / images do not align properly
                      osgood_ Level 8

                      Ken Binney wrote:

                       

                      Hi Os.... so good to see you again.

                      OP has email as <span class="white">info@tjcondtruction-propertyservices.co.uk</span>

                      (note the "d"instead o "s" in the domain name).

                      Even if the spelling were corrected, Nominet would not allow it

                       

                      Hi Ken,

                       

                      Didn't notice the spelling error but its still an acceptable domain name.

                       

                      WHOIS results | Nominet

                       

                       

                      tjconstruction-property.services.co.uk

                          Error for "tjconstruction-property.services.co.uk".

                          This domain cannot be registered because it contravenes the Nominet UK

                          naming rules.  The reason is: the domain name contains too many parts.

                       

                       

                      That wouldn't be because its got a 'period' between the words 'property'.'service' (can't see if that what the image shows?

                      • 8. Re: text / images do not align properly
                        Ken Binney Adobe Community Professional & MVP

                        You are probably correct about the dot. Now all we have to do is get James to upload his files to a test folder on the domain so we can see everything down the road.

                        • 9. Re: text / images do not align properly
                          Nancy OShea Adobe Community Professional & MVP

                          Where did all those awful inline styles and absolute positioning come from?  I find it hard to believe that DW generated all of this.  Were you using another code generator?   Code wise, there's not much worth salvaging here.  I would start fresh with one of the pre-built CSS Layouts in DW.

                           

                          1. File > New > Blank page > HTML.
                          2. Pick a layout from the 3rd panel.
                          3. Hit Create button

                           

                          Oh, and don't use Absolute positioning for anything until you understand the consequences.

                          http://www.apptools.com/examples/pagelayout101.php

                           

                           

                           

                           

                          Nancy O.