Skip navigation
Currently Being Moderated

Div tag placement error

Dec 4, 2012 3:25 PM

Tags: #error #placement #div_tag

Hi-

I have placed text within a div tag that is wrapped within another div (Figure 1) but I can't seem to identify the proper placement.  I tried to solve the problem by assuming that the placement of the div was incorrect.  However, I cannot place a div within the area that I want (red arrow indicates correct placement), therefore, the text is appearing at the bottom of where it should, under what seems to another extraneous div.  Any help in solving this is greatly appreciated. Thanks!

 

Two images: website in browser (left) and in design view from Dreamweaver (right).

DivTagIssue.JPGDivTagIssue2.JPG

 
Replies
  • Currently Being Moderated
    Dec 4, 2012 3:53 PM   in reply to sbaisden12

    Please put it online and post a link.

    Screen caps are pretty, but useless.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2012 5:00 PM   in reply to sbaisden12

    Start by cleaning up your code errors.  You have unbalanced <p> tags and an illegal tag called <footer> which is an HTML5 tag; not an XHTML tag. 

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sbaisden. com%2F

     

    Then review the CSS Box Model:

    http://css-tricks.com/the-css-box-model/

     

    Bare in mind that all elements including divs, have default margins and padding added by browsers.  To neutralize this, look at CSS Resets.

    http://cssresetr.com/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 4, 2012 7:33 PM   in reply to sbaisden12

    Have a lokk here http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sbaisden. com%2F

     

    You are constantly changing the online version. This makes it impossible for me to find an answer to your problem although you are getting closer. Just set a width and you should be right.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 9:59 AM   in reply to sbaisden12

    Steve -

     

    You have a few loose ends in your CSS file -

     

     

    body {

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

        background-repeat:repeat-x;

        background-color:#e4e4e4;

        backgound-attachment:fixed; This should be removed

        background-position:top;

    }

     

    .header {

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

        background-repeat:no-repeat;

        background-position:top center;

        height:83px;

        width:988;    Add px after the 988 (only a zero value can omit the unit of measure)

    }

     

    .navMain ul li{

        margin:0px;

        padding:0px 20px;

        list-style:non;  You left off the e on none

        display:inline;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 4:39 PM   in reply to sbaisden12

    Code errors cause layout issues.

    Focus on fixing your code errors first.

    Then we'll look at the layout issues.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 5:00 PM   in reply to sbaisden12

    You're tap dancing around a lack of knowledge about CSS Layouts.

     

    #1 Position:absolute isn't helping you here.  Don't use positioning.  You don't need it.

     

    #2 Font-weight: normal is the default.  You don't need to express this.  And you can't have normal and bold in the same rule. Simplify your CSS.  Stick with what you need and leave out the rest.

     

    #3 Start with a basic 2-column CSS layout.

    File > New > Blank page > HTML > Layout (pick 2-col fixed centered, header & footer).  Hit Create button.

     

    This is all you need to get things back on track.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2012 5:37 PM   in reply to sbaisden12

    Try 2-col fixed, left-sidebar, header & footer. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 5:19 PM   in reply to sbaisden12

    I recommend that you replace the tables with HTML Definition Lists.  It  makes more sense semantically.  

    http://www.maxdesign.com.au/articles/definition/

     

    PS. What's with that green background?  Eeeek! 

    Green borders, sure.  Green text on white background, sure.  But Green with black text is working against you, not for you.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2012 1:42 PM   in reply to sbaisden12

    You need a wider page to hold the floated links and iframe.  Also your iframe is too short for the amount of content it needs to display.

     

    I took the liberty of re-coding your page layout and in so doing removed a lot of the images and replaced them with CSS.   Copy & Paste this code into a NEW, blank document and see if it makes sense.

     

     

    <!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>Steve Baisden | Home</title>
    <link rel="shortcut icon" href="favicon.ico" />
    
    
    <style type="text/css">
    body {
    background-color:#e4e4e4;
    width: 1100px;
    margin: 0 auto;
    }
     .container {overflow: hidden; /*float containment*/}
    
    .header {
    background:#000;
    border-radius:20px;
    border: 4px solid silver;
    min-height:83px;
    width:1000px;
    }
    .header img.logo {
    float:left;
    margin:25px 0px 25px 25px;
    }
    
    .navMain {
    margin:30px 28px 30px 0px;
    float:right;
    }
     .navMain ul {
    margin:0px;
    padding:0px;
    }
    .navMain ul li{
    margin:0px;
    padding:0px 20px;
    list-style:none;
    display:inline;
    }
    .navMain ul li a{
    margin:0px;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    font-size:18px;
    font-family: "Arial Unicode MS";
    text-transform:uppercase
    }
    .navMain ul li a:hover{
    text-decoration:underline;
    }
    
    /**persistent page indicator**/
    body.home .navMain li a.home,
    body.about .navMain li a.about,
    body.portfolio .navMain li a.portfolio,
    body.resume .navMain li a.resume,
    body.contact .navMain li a.contact{
    color:rgb(143,203,3)
    }
    
    .content {
    border-radius:20px;
    border:4px solid silver;
    background-color:#428301;
    width:1000px;
    margin:10px 0;
    padding:0;
    overflow:hidden; /*for float containment*/
    position:relative;
    box-shadow:7px 7px 5px #999
    }
    
    #leftCol {
    float:left;
    width:249px;
    min-height: 370px;
    background:#FFF;
    border-radius:16px 0 25px 25px;
    }
    .wrapLinks {
    margin:10px 0px 0px 0px;
    padding:3px 0px 0px 0px;
    font-family:"Arial Unicode MS";
    }
    .wrapLinks li{
    margin:0px;
    padding:9px 0px 0px 30px;
    list-style:none;
    }
    
    .wrapLinks li a {
    font-size:13px;
    color:#428301;
    text-decoration:none;
    }
    /**arrow after links**/
    .wrapLinks li a:after {
    content:' \2799';
    }
    .wrapLinks li a:hover{
    text-decoration:underline;    
    }
    
    h2.title {
    margin:0px;
    padding:0px;
    font-size:24px;
    font-weight:normal;
    font-family:"Arial Unicode MS";
    }
    
    /**carousel**/
    iframe{
    position:relative;
    float:right; 
    width: 751px;
    height:375px;
    border:none;
    margin-top:0;
    border-radius: 0 16px 0 0;
    }
    
    #LearnMore{
    margin:0px;
    padding:0px;
    background: url(http://www.sbaisden.com/images/button_content.png) no-repeat;
    height:75px;
    width: 145px;
    position:absolute;
    right:25px;
    top:275px;    
    opacity: 0.8;
    cursor:pointer;
    }
    #LearnMore p { /**move text off screen**/
    text-indent:-9999em}
    
    #LearnMore:hover{
    opacity: 1.0;
    }
    
    .greeting {
    clear:both;
    font-family: "Arial Unicode MS";
    font-size: 20px;
    font-style: normal;
    color: #FFF;
    padding:20px;
    }
    .bottom {
    text-align:center;
    margin:0px auto;
    padding:0;
    font-family:"Arial Unicode MS";
    font-size:16px;
    font-weight:bold;
    }
    
    .footer {
    font-family:"Arial Unicode MS";
    font-size:10px;
    color:#666;
    padding:0 20px;
    margin:0;
    clear: both;
    }
    </style>
    </head>
    
    <body class="home">
    
    <div class="container">
    <div class="header">
    <a href="index.html"><img class="logo" src="http://www.sbaisden.com/images/header_logo.png" width="241" height="27" border="0" alt="Steve Baisden" /></a> 
    
    <div class="navMain">
    <ul>
    <li><a class="home" href="index.html">Home</a></li>
    <li><a class="about" href="about.html">About</a></li>
    <li><a class="portfolio" href="portfolio.html">Portfolio</a></li>
    <li><a class="resume" href="resume.html">Résumé</a></li>
    <li><a class="contact" href="Contact.php">Contact</a></li>
    </ul>
     <!-- end .navMain --></div>
    <!-- end .header --></div>
    
    <div class="content">
    
     <!--carousel-->
    <iframe src="http://www.sbaisden.com/carousel.html" scrolling="auto"></iframe>
    <!--end carousel-->
    
    <div id="LearnMore">
    <p><a href="#">LEARN MORE</a></p>
    <!--end LearnMore-->
    </div>
    
    <div id="leftCol">
    <ul class="wrapLinks">
    <li><h2 class="title">Transportation</h2><a href="portfolio.html">Get more information</a></li>
    <li><h2 class="title">GIS/Data Analysis</h2><a href="portfolio.html">Get more information</a></li>
    <li><h2 class="title">Map Design</h2><a href="portfolio.html">Get more information</a></li>
    <li><h2 class="title">(Re)Development</h2><a href="portfolio.html">Get more information</a></li>   
    </ul>
    <!--end leftCol--></div>  
    
    <div class="greeting">
    <h4>Greetings! Welcome to my online portfolio.</h4>
    <p>This website contains a collection of my academic papers, projects and maps that I have compiled into one
    <br />source, displaying my abilities and skills within the realm of Urban Planning.</p>
    <p>Please explore this site and feel free to leave a comment.</p>
    <!-- end .greeting --></div>
    
    <div class="bottom">
    <p>***Certain pages of this site are still "under construction". Please check back for future developments.***</p>
    <!--end bottom--></div>
    
    <!--end .content--></div>
    
    <div class="footer">
    <p>Copyright © 2012 Steve Baisden</p>
    <!--end .footer--></div>
    
    <!--end container--></div>
    </body>
    </html>

     

     

    happy_holidays.gif

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2012 4:49 PM   in reply to sbaisden12

    If this is your carousel, it looks OK to me in Firefox, Chrome and IE9.

    http://www.sbaisden.com/carousel.html

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 15, 2012 10:57 AM   in reply to sbaisden12

    You're welcome.  Glad to be of help when I have time to do it.

     

    Ok I see what you mean now. These three images are referenced in your carousel code but they're not found on your server.  Note the path, they should be in your root folder.

     

    http://www.sbaisden.com/buttonscaption.gif

    http://www.sbaisden.com/buttonsplaypause.gif

    http://www.sbaisden.com/buttonsbrbl.png

     

    I think if you upload the buttons to your root folder, it should work.

     

     

    Nancy O.

     
    |
    Mark as:

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