Member Avatar for rb1234567

Hi,

How do you stop divs from moving all over the place when you zoom in and out of browsers?

The website I am going to create has to be centered in the middle of the webpage.

I need to create a header with an animated gif in the left corner, text then a logo, then text link and another image on the right side.

I need to create a nav bar which does not move about when resizing the browser with 8 tabs, with the last 3 being drop down lists.

I then need a left sidebar, main content area and right sidebar and a footer below these.

Thanks for any help.

  • 2 Contributors
  • 6 Replies
  • 14K Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

If you provide the link to the site or sample code we can look.

Member Avatar for rb1234567

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Welcome</title>
<link rel="stylesheet" href="index.css" type="text/css" />
<style type="text/css">
body {
    background-color: #ccffcc;
}
</style>
</head>

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

  <div style="position: absolute; width: 83px; top: 7px; height: 51px; left: 199px; color: #F7EEEE;";>
      <div id="flag-header">
        <p> <img src="images/header/flag.gif" width="70" height="42" alt=""/></p>
      </div>

<div style="position: absolute; top: 45px; width: 95px; height: 17px; left: 8px; color: #Fff;">
  <p><strong>MADE IN</strong></p>
  <p><strong> ENGLAND</strong></p>
</div>

 <div style="position: absolute; left: 139px; top: 29px; width: 227px; height: 23px;"><strong>Telephone no.</strong></div>

 <div style="position: absolute; left: 388px; top: 8px; width: 169px;"><div id="logo-header"><img src="images/header/logo3.png" width="155" height="57"  alt=""/></div> 

  <div style="position: absolute; left: 185px; top: 21px; width: 242px;"><a href="mailto:email@email.co.uk" style="text-decoration:none;"><strong style="color: #FFFDFD; text-decoration:none;">Email: email@email.co.uk</strong></a></div>

  <div style="position: absolute; ><div id=; left: 437px; top: -10px; width: 108px; height: 75px;"badge-header"><img src="images/badge-header.png" width="104" height="75" alt=""/></div>

  </div>
    </div>
    <div class="clear">

   </div>
  </div>
    <div id="nav">

    <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Quality</a></li>
   <li><a href="#">Processes</a></li>
   <li><a href="#">Markets</a></li>
   </ul>

   <ul>
   <li><a href="#">Products</a>
   <ul>
   <li><a href="#">Product information</a></li>
   <li><a href="#">Product number one submenu</a></li>
   <li><a href="#">Product number two submenu</a></li>
   <li><a href="#">Product 3</a></li>
   <li><a href="#">Product 4</a></li>
   <li><a href="#">Product num 5</a></li>
   <li><a href="#">Products 6, more & products</a></li>
   <li><a href="#">Prod numb Seven</a></li>
   <li><a href="#">More products eight</a></li>
   <li><a href="#">More prods, prods and products</a></li>
   <li><a href="#">prod Stock List</a></li>
   </ul>
   </li>
   </ul>

    <ul>
   <li><a href="#">News</a>
   <ul>
   <li><a href="#">Latest news</a></li>
   <li><a href="#">Case Studies</a></li>
   <li><a href="#">Testimonials</a></li>
   </ul>
   </li>
   </ul>

   <ul>
   <li><a href="#">Contact</a>
   <ul>
   <li><a href="#">Contact us</a></li>
   <li><a href="#">Directions</a></li>
   </ul>
   </li>
   </ul>
  </div>

<div id="body">

<div class="sidebar2">
<ul>
<li>
   <h4><span>Top products</span></h4> 
   <ul class="block list"> 

                        <li><a href="#">Product 1</a></li>
                        <li><a href="#">product 2</a></li>
                        <li><a href="#">product 3</a></li>

                 </ul>
                    <h4>Links</h4>
                   <ul>
                      <li><a href="index.html" title="link 1"><strong>link 1</strong></a>link 1</li>
                      <li><a href="index.hmtl" title="link 2"><strong>link 2</strong></a>link 2</strong></li>
                      <li><a href="index.html" title="link 3"><strong>Link 3</strong></a>Link three</li>
                 </ul>
                   <p> </p>
                  <ul>

                    <li>
                       <form method="get" class="searchform" action="" >
                         <p>
                           <input name="s" type="text" class="s" size="22" />
                         </p>
                         <p>
                           <input type="submit" class="searchsubmit formbutton" formmethod="GET" value="GO" />
                         </p>
                       </form>   


                     </li>
                 </ul>
               </li>
          </ul> 
    </div>

    <div id="content">
            <h1><strong>Welcome to ....</strong></h1>
      <div class="box">

            <p><img src="images/.jpg" width="514" height="161"  alt=""/></p>

            <p> </p>

             <p>Content will be placed in this middle div, it will state when coming were established and who its run by and what products they make.</p>

        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
            <p> </p>
      </div>
    </div>
    <div class="sidebar">
      <ul>

       <li>
<h4><strong>LATEST NEWS</strong></h4>
                     </li>
      </ul>

        <p> <img src="images/resources/thumbs/.jpg" width="100" height="100" alt=""/></p>
        <p> </p>
        <p><a href="#">News Title here</a></p>
      <p> </p>

      <p style="text-align: center">A short summary of the news would be written in this section .... <a href="#">more</a></p>
      <p style="text-align: center">       </p>
      <ul>
        <li>

          <h4><strong>Follow us</strong></h4>
</li>
        <li>
          <div class="social-buttons" id="social-buttons">
            <div align="center"></div></div></li>
      </ul>
      <p> </p>
      <p> </p>
      <ul>
        <li>
          <h4><strong>Contact Us</strong></h4>
        </li>
        <li>          <a href="mailto:email@email.co.uk" class="myButton"> email@email.co.uk</a></li>
      </ul>

      </ul> 
    </div>

      <div class="clear"></div>
  </div>

  <div id="footer">
            <p>Copyright © 2014 company name   Tel:    Fax:    <a href="mailto:email@email.co.uk">email@email.co.ul.co.uk</a></p>
  </div>

</div>
</div>
</body>
</html>
Member Avatar for rb1234567

css:

body {
    background: #333;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #000;
}

* {
    padding: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 10px;
    margin-top: 0;
    float: none;
    text-align: center;
    list-style-image: none;
    list-style-type: none;
}

/** element defaults **/

code, blockquote {
    display: block;
    border-left: 5px solid #222;
    padding: 10px;
    margin-bottom: 20px;
}

code {
    background-color: #222;
    color:#ccc;
    border: none;
}

blockquote {
    border-left: 5px solid #222;
}

blockquote p {
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0;
    color: #333;
    height: 1%;
}

fieldset {
    display: block;
    border: none;
    border-top: 1px solid #ccc;
}

fieldset legend {
    font-weight: bold;
    font-size: 13px;
    padding-right: 10px;
    color: #333;
}

fieldset form {
    padding-top: 15px;
}

fieldset p label {
    float: left;
    width: 150px;
}

form input, form select, form textarea {
    padding: 5px;
    color: #333333;
    border: 1px solid #ddd;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

form input.formbutton {
    border: none;
    background: #333;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    letter-spacing: 1px;
    width: auto;
    overflow: visible;
}

form.searchform p {
    margin: 5px 0;
    text-align: left;
}

span.required {
    color: #ff0000;
}

h1, #content .box h1 {
    color: #000;
    font-size: 35px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    background: none;
    border-bottom: none;
    text-transform: none;
    line-height: 1.0em;
    padding: 0 0 5px;
}

h2 {
    color: #000;
    font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
    font-size: 22px;
    letter-spacing: 0px;
    font-weight: normal;
    padding: 0 0 5px;
    margin: 0;
}

h3 {
    color: #555;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

h4 {
    padding-bottom: 10px;
    font-size: 15px;
    color: #999;
}

h5 {
    padding-bottom: 10px;
    font-size: 13px;
    color: #999;
}

ul, ol {
    padding: 0px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 35px;
    margin-left: 35px;
}

li {
    padding-bottom: 5px;
    list-style-type: none;
}

li ol, li ul {
    font-size: 1.0em;
    margin-bottom: 0;
    padding-top: 5px;
}

#container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    background-color: #000000;
    overflow:hidden;
}

#header {
    padding: 0px 15px;
    background: #08A036 url('images/header3.jpg') repeat-x scroll top left;
    margin: 0 auto;
    height: 90px;
}

#flag-header {
    height:80px;
    width:116px;
}

#logo-header{
    width:155px;
    height:57px;    
}

#header h1 a {
    color: #fff;
    padding-top: 40px;
    font-size: 40px;
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -3px;
    float: left;
}

#header h2 {
    color: #366E30;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 48px;
    padding-left: 4px;
    letter-spacing: 0;
}

#nav {
    padding:0px;
    margin:0px;
    width:960px;
    height:37px;
    margin-right:auto;
    margin-left:auto;
    background-color:#31D549;
    border:none;
}

#nav ul{
    padding:0;
    margin:0;
    background:#666;
    list-style:none;
    width:auto;
}

#nav li ul{
    width:200px;
}

#nav li{
    float:left;
}

#nav li li{
    display:block;
    float:none;
    width:200px;
    margin:0px;
    padding:0px;
}

#nav ul li{
    background-color: #31D549;
    float: left;
    position: relative;
    list-style-type: none;
    width: auto;

}

#nav ul li a{
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:12px;
font-color:#fff;
font-style:normal;
text-decoration:none;
display:block;
line-height:35px;
width:90px;
height:32px;
text-align:left;    
font-weight:bold;
padding:0px 5px 0px 5px;
}

#nav ul ul li {
    display:block;
    float:none;
    width:225px;
    white-space:nowrap;
    }

#nav ul ul {
    position:absolute;
    visibility:hidden;
    width:auto;
}

#nav ul li:hover ul{
    visibility:visible;
}

#nav ul li:hover{
    background-color:#2AC523;
}

#nav a {
    display:block;
    width:200px;
    text-align:center;
}

#nav ul li a:hover{
    font-color:#fff;
}

#nav li a{
    color:#ffffff;
    display:block;
    font-weight:normal;
    text-decoration:none;
}

#body {
    background: none;
    margin: 0 auto;
    padding: 20px 12px;
    width: 960px;
    background-color: #ccffcc;
    float: none;
    min-width:750px;
    max-width:960px;
}

#content {
    float: left;
    padding: 0px;
    width: 540px;
}

#content h1 {
    color: #fff;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.5px;
    border-bottom: 1px solid #090;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.9em;
    padding: 5px;
    font-weight: bold;
    background: #50A145 url('images/header.jpg') repeat-x center;
    text-align: center;
}

.box {
    margin: 0;
    padding: 10px;
    background-color: #ccffcc;
    text-align: left;
}

.box p{
    text-align:left;
}

.sidebar {
    width: 186px;
    padding: 0;
    float: right;
    background-color:#ccffcc;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #090303;
}

.sidebar ul li {
    margin-bottom: 20px;
    line-height: 30px;
}

.sidebar li ul {
    padding: 10px;
    background-color: #fff;
}

.sidebar li ul li {
    display: block;
    border-top: none;
    padding: 6px 2px;
    margin: 0;
    line-height: 24px;
    font-size: 13px;
    border: none;
    text-align: left;
}

.sidebar li ul li a {
    font-weight: normal;
    color: #222;
}

.sidebar li ul li a:hover {
    color: #000;
}

.sidebar li ul.blocklist li {
    padding: 0;
    display: inline;
}

.sidebar li ul.blocklist li a {
    display: block;
    border-bottom:1px solid #e0e0e0;
    padding: 6px 5px;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}

.sidebar h4 {
    color: #fff;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.5px;
    border-bottom: 1px solid #090;
    text-transform: uppercase;
    margin: 0;
    line-height: 30px;
    padding: 5px;
    font-weight: bold;
    background: #50A145;
    text-align: center;
}

.sidebar li ul.blocklist li {
    padding: 0;
    display: inline;
}

 .myButton {
    -moz-box-shadow: 0px 10px 14px -7px #3dc21b;
    -webkit-box-shadow: 0px 10px 14px -7px #3dc21b;
    box-shadow: 0px 10px 14px -7px #3dc21b;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
    background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
    background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
    background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
    background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
    background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);
    background-color:#44c767;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:13px;
    font-weight:bold;
    padding:11px 11px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}


.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
    background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
    background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
    background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
    background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
    background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
    background-color:#5cbf2a;
}

.myButton:active {
    position:relative;
    top:1px;
}

.clear {
    clear: both;
}

.sidebar2 {
    width: 190px;
    float: left;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0px;
    padding-top: 0;
}


.sidebar2 ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

.sidebar2 ul li {
    margin-bottom: 20px;
    line-height: 30px;
}

.sidebar2 li ul {
    padding: 10px;
    background-color: #ccffcc;
}

.sidebar2 li ul li {
    display: block;
    border-top: none;
    padding: 6px 2px;
    margin: 0;
    line-height: 24px;
    font-size: 13px;
    border: none;
}

.sidebar2 li ul li a {
    font-weight: normal;
    color: #222;
}

.sidebar2 li ul li a:hover {
    color: #000;
}

.sidebar2 li ul.blocklist li {
    padding: 0;
    display: inline;
}

.sidebar2 li ul.blocklist li a {
    display: block;
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 5px;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    text-align: left;
}


.sidebar2 h4 {
    color: #fff;
    font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.5px;
    border-bottom: 1px solid #090;
    text-transform: uppercase;
    margin: 0;
    line-height: 30px;
    padding: 5px;
    font-weight: bold;
    background: #50A145;
}

.sidebar2 li ul.blocklist li {
    padding: 0;
    display: inline;
}

#footer {
    padding: 5px 13px 0;
    height: 30px;
    color:#000;
}

#footer p {
    color: #999;
}

#footer p a {
    color: #fff;
    font-weight: bold;
}
Member Avatar for JorgeM

You have elements in your code that are set to absolute positioning. That's fine, but you also have to set a parent container to a position other than their default of static. For example, I see moving around when you resize the screen/zoom is this div here:

<div style="position: absolute; >
    <div id=; left: 437px; top: -10px; width: 108px; height: 75px;"badge-header">
        <img src="images/badge-header.png" width="104" height="75" alt=""/>
    </div>
</div>

The element is set absolute relative to a parent container that has a position property set to something other than static, like relative or aboslute also.

A quick fix would be to set the container div to position:relative. Then the absolute positioning of these interior divs would be absolute in relation to the conainter div, not the body element.

Edited by JorgeM
Member Avatar for rb1234567

Thank you for your response, I really appreciate your advice.

When I add position: relative to the container div, the divs contained in the header no longer move out of the header div. However, the divs within the header are stuck to the right side now.

Would adding the absolute positioning of interior divs sort this out and if so, which interior divs should the absolute positioning be added to?

Member Avatar for JorgeM

So, this is what i usally do. While i'm not the greatest at designing, I lay out all of my HTML elements and let the natural layout flow occur first. Then, if you have certain elements, like icons and images that you need to place in a certain location, then consider absolute positioning.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.