Skip navigation
Dovydas Kaltanas
Currently Being Moderated

Trouble aligning centered objects

Feb 18, 2013 10:48 AM

Tags: #align="left" #align-center #dreamweavercs6

Hi, I want to have 2 objects one a contact form the other is text with links along side each other centered.

 

I have enclose two images, one is my best outcome which was done using tables ( which I was not happy as I couldnt edit their margins ) and the secound is an edited image on ps to clarify what I want.

 

http://postimage.org/image/c0j8z6for

 

http://postimage.org/image/e6ilqspgr/

 

HTML

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

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

</head>

 

<body>

 

<div class="wrapOverall">

 

<div class="container" id="header container"><div class="header">

           <img class="logo" src="../Home/images/images/Home-Page_03.png" width="447" height="69" boreder="0" />

              

              

           <div class="navMain">

              

               <div class="navMain">

              

                   <ul>

                       <li><a href="#"><img src="../Home/images/Home-Page_06 home.png" width="52" height="13" border="0" alt="Home"></a>

                     <li><a href="#"><img src="../Home/images/Home-Page_08 portfolio.png" width="92" height="13" border="0" alt="Portfolio"></a>

                     <li><a href="#"><img src="../Home/images/Home-Page_10 pricing.png" width="57" height="13" border="0" alt="Pricing"></a>

                     <li><a href="#"><img src="../Home/images/Home-Page_12 about.png" width="54" height="13" border="0" alt="About"></a>

                     <li><a href="#"><img src="../Home/images/Home-Page_14 blog.png" width="40" height="13" border="0" alt="Blog"></a>

                     <li><a href="#"><img src="../Home/images/Home-Page_16 contact.png" width="79" height="13" boreder="0" alt="Contact"></a>

                   </ul>

               

               </div><!--END navMain-->

             

</div><!--END logo-->

          

</div><!--END header--></div>

 

     

<!--MAIN CONTENT-->

 

<center><table>

    <tr>

        <td width="208">

            <div id="leftContact">

              <h5><img class="email"><img src="images/images/Contact_Email.jpg" width="106" height="25">                </h5>

              <h5><img class="emailad"><a href="#"><img src="images/images/Conatct_Email_ad.jpg" width="175" height="23"></a></h5>

              <h5> </h5>

              <h5> </h5>

             

              <h5><img src="images/images/Contact_Follow.jpg" width="168" height="25"></h5>

              <h5> <a href="#"><img src="images/images/Contact_fb.jpg" width="103" height="23"></a></h5>

            </div>

        </td>

        <td width="500">

            <div id="rightContact"><iframe width="500" height="550" frameborder="0" src="http://www.foxyform.com/form.php?id=355482&sec_hash=cd579c6c6a8"></iframe></div>

        </td>

    </tr>

</table></center>

 

<!-- END MAIN CONTENT-->

 

  <div class="container" id="footer"><div class="footer">

                <img src="../Home/images/images/Home-Page_25-copyright_25.png" alt="" width="166" height="30" class="copyright" boreder="0"/>

                    <div class="fbLike">

  <script type="text/javascript">

// BeginOAWidget_Instance_2149022: #OAWidget

 

    var urlToLike = 'http://www.facebook.com/DKphotos.net';

    if (urlToLike == '') {

            urlToLike = window.location.href;

      }

      urlToLike = encodeURIComponent(urlToLike);

 

      var font = encodeURIComponent('arial');

 

 

document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=en_US&href='+urlToLike +'&layout=button_count&show_faces=false&width=450&height=150&action=li ke&font='+font+'&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:450; height:150"></iframe>')

 

 

// EndOAWidget_Instance_2149022

  </script>

    </div><!--END fbLike-->

            </div>

           

           

    </div></div>

 

 

</div><!--END wrapOverall-->

</body>

</html>

 

 

CSS

 

@charset "utf-8";

/* CSS Document */

 

body {

    background-image: url(images/bg_body.jpg);

    background-color: #ffffff;

    background-attachment: fixed;

    background-position: top;

    margin: 20px;

 

}

 

 

    .wrap {

        position: relative;

        margin: 100;

        /*replace 900px with your width*/

        width: 1920px;

    }

 

 

.wrapOverall {

    width: 1920px;

    display: inline;

}

 

.container {

 

width: 100%;

 

min-width: 1100px;

 

max-width: none;

 

}

 

.header {

    background-image:url url(images/images/Home-Page_03.png);

    background-repeat:no-repeat;

    background-position:top center;

    height:97px;

   

}

.header img.logo{

    float: left;

    margin: 10px 15px 0px 15px;

}

.navMain {

    margin:15px 12px 12px 0px;

    float:right;

}

 

.footer img.copyright{

    float: left;

    margin: 5px 15px 0px 15px;

}

 

.footer div.fbLike{

    float:left;

    margin: 5.6px 0px 0px 0px;

   

}

 

/* ##############################*/

/*    General Navigation Rules   */

/* ##############################*/

 

.navMain ul {

    margin:0px;

    padding:0px;

}

.navMain ul li {

    margin: 0px;

    padding: 0px 15px;

    list-style: none;

    display: inline;

}

.navMain ul li a {

    margin:0px;

    padding:0px;

}

.navMain ul li a:hover {

   

}

 

 

.leftContact img.email{

    margin:0px 0px 0px 0px;

   

}

 

 

.rightContact{

    margin:40px 0px 20px 0px;

   

}

 

 

    #header, #footer {

        width:100%;

        float:left;

    }

   

        #footer {

    position: fixed;

    bottom: -125px;

    z-index: 999999;

    background-color: #FFF;

    }

   

   

.header img.logo{

    float: left;

    margin: 10px 15px 0px 15px;

}

 

 

Thanks

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points