Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jun 2009
    Posts
    9
    Member #
    19236
    Hello, I am laying out a webpage, and i have what i want it to look like. but the layout gods hate me.

    please help the bottom bars are in the middle of the page, and the text is floating in the to part of the page.
    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>About</title>
    <style type="text/css">
    <!--
    
    
    ul {
        margin: 0;
    }
    #container {
        height:49.94em;
        width:62.38em;
        margin: 0 auto;
    }
    .bottom.bar {
        background-color: #0000cc;
        width: 62.38em;
        position: relative;
    }
    .footer {
        background-color: #1C1C1C;
        height:1.19em;
        width: 62.38em;
        position: relative;
    }
    .left-layout {
        background-color: #cecfce;
        height: 30.63em;
        width: 10.94em;
    }
    .content-holder {
        border: none;
        height: 30.63em;
        left: 10.94em;
        width: 51.44em;
        background-color: #525152;
        margin-top: -30.63em;
        margin-right: auto;
        margin-left: 10.94em;
    }
    .header {
        height:4.88em;
        width: 62.38em;
        background-color: #cecfce;
    }
    .ticker-bar {
        background-color: #2f2f2f;
        height: 1.50em;
        line-height: 1.50em;
        padding-bottom: 0.19em;
        padding-top: 0.19em;
        top: 4.94em;
        width: 62.38em;
    }
    .breadcrumbs {
        background-color: #00c;
        height: 2.25em;
        width: 62.38em;
    }
    .logo {
        height: 4.88em;
        line-height: 4.88em;
        width: 4.69em;
    }
    .top-navbar {
        background-color: #F0F;
        float: right;
        height: 1.25em;
        /* left: 10.94em;*/
        width: 21.25em;
        margin-right: auto;
        /*margin-left: 34.69em;*/
        margin-top: -4.38em;/*-4.38em;*/
        position:relative;
    }
    .main-image {
    }
    .content-intro {
        margin-left:12.44em;
        margin-top:-15.81em;
        height: 2.63em;
        width: 47.75em;
    }
    .nav-box-1 {
        margin-left:12.44em;
        width: 23.875em;
        margin-top:-13.18em;
    }
    .nav-box-2 {
        margin-left:36.81em;
        width: 23.875em;
        margin-top:-13.18em;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
      <div class="header">
        <div class="logo"><img src="../images/logo.gif" width="87" height="85" alt="" /></div>
      </div>
      <div class="top-navbar">linkone    linktwo    linkthree    linkfour    linkfive    linksix</div>
      <div class="ticker-bar">Tickertape layer here remove text and leave a space</div>
      <div class="breadcrumbs">Content for  class &quot;breadcrumbs&quot; Goes Here</div>
      <div class="left-layout">
        <ul>
          <li>left layout one</li>
          <li>left layout two</li>
          <li>left layout three</li>
          <li>left layout four</li>
          <li>left layout five</li>
        </ul>
      </div>
      <div class="content-holder">
        <div class="main-image"><img src="images/header.jpg" width="822" height="220" alt=""/></div>
      </div>
      <div class="content-intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
      <div class="nav-box-1">
        <p>link here<br />
        intro about link here</p>
        <p>link here<br />
    intro about link here</p>
        <p>link here<br />
    intro about link here</p>
      </div>
      <div class="nav-box-2">
        <p>link here<br />
        intro about link here</p>
        <p>link here<br />
    intro about link here</p>
        <p>link here<br />
    intro about link here</p>
      </div>
      <div class="footer">footer</div>
      <div class="bottom bar">&nbsp;blue bar</div>
    </div>
    </body>
    </html>

  2.  

  3. #2
    Junior Member
    Join Date
    Jun 2009
    Posts
    9
    Member #
    19236
    ok here is what someone helped me with. will post if i get everything working and what had to change for other people.
    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>About</title>
    <style type="text/css">
    <!--
    
    
    ul {
        margin: 0;
    }
    #container {
        height:49.94em;
        width:62.38em;
        margin: 0 auto;
    }
    .bottom.bar {
        background-color: olive;/*#0000cc;*/
        width: 62.38em;
        position: relative;
    }
    .footer {
        background-color: #1C1C1C; clear: both;
        height:1.19em;
        width: 62.38em;
        position: relative;
    }
    .left-layout {              float: left;
        background-color: #cecfce;
        height: 30.63em;
        width: 10.94em;
    }
    .content-holder {
        border: none;
        height: 30.63em; /* is this too much for just an image 822*220? if the nav-box-1 and nav-box-2 divs are meant  to be inside this div, then move the markup inside the div*/
        left: 10.94em;
        width: 51.44em;
        background-color: lime;/*#525152;*/
        /*margin-top: -30.63em;*/
        margin-right: auto;
        margin-left: 10.94em;
    }
    .header {
        height:4.88em;
        width: 62.38em;
        background-color: #cecfce;
    }
    .ticker-bar {
        background-color: #2f2f2f;
        height: 1.50em;
        line-height: 1.50em;
        padding-bottom: 0.19em;
        padding-top: 0.19em;
        /*top: 4.94em;*/
        width: 62.38em;
    }
    .breadcrumbs { 
        background-color: yellow;/*#00c;*/
        height: 2.25em;
        width: 62.38em;
    }
    .logo {
        height: 4.88em;
        line-height: 4.88em;
        width: 4.69em;
    }
    .top-navbar {
        background-color: #F0F;
        float: right;
        height: 1.25em;
        /* left: 10.94em;*/
        width: 21.25em;
        margin-right: auto;
        /*margin-left: 34.69em;*/
        margin-top: -4.38em;/*-4.38em;*/
        position:relative;
    }
    .main-image {
    }
    .content-intro { background-color: skyblue; float: left;
        margin-left:12.44em;
        /*margin-top:-15.81em;*/
        height: 2.63em;
        width: 47.75em;
    }
    .nav-box-1 { background-color: pink; float: left;
        margin-left:12.44em;
        width: 23.875em;
        /*margin-top:-13.18em;*/
    }
    .nav-box-2 { background-color: violet; float: left;
        /*margin-left:36.81em;*/
        width: 23.875em;
        /*margin-top:-13.18em;*/
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
      <div class="header">
        <div class="logo"><img src="../images/logo.gif" width="87" height="85" alt="" /></div>
      </div>
    
      <div class="top-navbar">linkone    linktwo    linkthree    linkfour    linkfive    linksix</div>
      <div class="ticker-bar">Tickertape layer here remove text and leave a space</div>
      <div class="breadcrumbs">Content for  class &quot;breadcrumbs&quot; Goes Here</div>
      <div class="left-layout">
        <ul>
          <li>left layout one</li>
    
          <li>left layout two</li>
          <li>left layout three</li>
          <li>left layout four</li>
          <li>left layout five</li>
        </ul>
      </div>
      <div class="content-holder">
    
        <div class="main-image"><img src="images/header.jpg" width="822" height="220" alt=""/></div>
        <div class="content-intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
      <div class="nav-box-1">
        <p>link here<br />
        intro about link here</p>
        <p>link here<br />
    
    intro about link here</p>
        <p>link here<br />
    intro about link here</p>
      </div>
      <div class="nav-box-2">
        <p>link here<br />
        intro about link here</p>
    
        <p>link here<br />
    intro about link here</p>
        <p>link here<br />
    intro about link here</p>
      </div>
      </div>
      <div class="footer">footer</div>
      <div class="bottom bar">&nbsp;blue bar</div>
    
    </div>
    </body>
    </html>


Remove Ads

Posting Permissions

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

Search tags for this page

web design middle bar

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:20 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com