Skip navigation

Ap Div help

Apr 18, 2012 10:23 AM

  Latest reply: The Cruiser, May 9, 2012 10:30 AM
Replies
  • The Cruiser
    Currently Being Moderated
    15. The Cruiser,
    May 7, 2012 10:10 AM   in reply to The Cruiser
    Report

    We have tried to replicate your page... this is our 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>Untitled Document</title>
    <link href="nancy_style.css" rel="stylesheet" type="text/css" />
    <!--
    STYLE SHEET

    @charset "utf-8";
    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-color: #ffffcc;
    margin: 0px;
    padding: 0px;
    color: #4f5972;
    }
    #header {
    margin: 0px;
    padding: 0px;
    min-height: 100px;
    }
    #navbar {
    color: #FFFFFF;
    background-color: #0000CC;
    margin: 0px;
    padding: 0px;
    min-height: 22px;
    }
    #upper_content {
    background-color: caba66;
    margin: 0px;
    padding: 0px;
    min-height: 200px;
    }
    #lower_content {
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    min_height: 200px;
    }
    #footer {
    margin: 0px;
    padding: 0px;
    min-height: 100px;
    border-top-width: 4px;
    border-top-style: solid;
    border-top-color: #CCCCCC;

    }
    .section {
    width: 920px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-left: 12px;
    }
    .right {
    text-align: right;
    }
    .center {
    text-align: center;
    }
    .float_left {
    float: left;
    width: 50%;
    }
    .float_right {
    float: right;
    width: 50%;
    }
    .float_right:after {
    font-size: 0px;
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    }
    .float_left:after {
    font-size: 0px;
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
    }
    #header_ h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 4.75em;
    font-style: oblique;
    color: #caba66;
    }
    #header_h2 {
    font-size: 1.75em;
    color: #00000;
    margin-top: 12px;
    margin-right: 240px;
    }
    -->
    </head>

    <body>
    <div class="section" id="header">Content for  class "section" id "header" Goes Here</div>
    <div class="section" id="navbar">Content for  class "section" id "navbar" Goes Here</div>
    <div class="section" id="upper_content">Content for  class "section" id "upper_content" Goes Here
      <div class="right">Content for  class "float_right" Goes Here</div>
    </div>
    <div class="section" id="lower_content">Content for  class "section" id "lower_content" Goes Here
      <div class="right">Content for  class "float_right" Goes Here</div>
    </div>
    <div class="section" id="footer">Content for  class "section" id "footer" Goes Here
      <div class="float_left">Content for  class "float_left" Goes Here</div>
      <div class="right">Content for  class "float_right" Goes Here</div>
    </div>
    </body>
    </html>

     

    ...and this is what it comes out to look like http://www.frankton-lapel.org/schools/lshs/baylor/background.html

     

    Thanks

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    16. Nancy O.,
    May 7, 2012 11:13 AM   in reply to The Cruiser
    Report

    Your CSS styles are commented out <-- STYLESHEET

     

    This is how mine looks.

    http://alt-web.com/TEST/LHS-test.html

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • The Cruiser
    Currently Being Moderated
    17. The Cruiser,
    May 8, 2012 10:06 AM   in reply to Nancy O.
    Report

    I took it out of the comment, here is the site that I tried to recreate using your css... http://www.frankton-lapel.org/schools/lshs/baylor/background.html

    Any ideas on why my page is not reacting to the css like yours?

     

     

    We really appreciate the help!

    Thanks

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    18. Nancy O.,
    May 8, 2012 11:04 AM   in reply to The Cruiser
    Report

    Because your HTML is completely different from mine.  No shortcuts allowed for this type of layout.

     

    <div id="header">

    <div class="section">

    <p>Div id header, div class section goes here</p>

    </div>

    </div

     

    <div id="navbar">

    <div class="section">

    <p>Div id navbar, div section goes here</p>

    </div>

    <div>

     

    <div id="upper_content">

    <div class="section">

     

    <!--FLOATS COME FIRST-->

     

    <div class="float_right">

    <p class="right>Div id upper_content, div class section, div class float_right, p class right goes here</p>

    </div>

     

    <p>Upper_content goes here</p>

    </div>

    </div>

     

    I think you get the idea.  Good luck!

     

    PS. check your CSS again, you're missing a # on one of your background-color values.

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • The Cruiser
    Currently Being Moderated
    19. The Cruiser,
    May 9, 2012 10:30 AM   in reply to Nancy O.
    Report

    We have got it now, thanks a lot... It was dreamweaving not putting the code out correctly.

     

    Thanks a lot for all your help, Me and the web design kids in our class really appreciate it.

     

    Thakns

     
    |
    Mark as:
Actions

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