Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts

    Angry HTML5 <section> tag content is not showing.

    Hello kyhryt,
    I wonder if position: fixed; is really what you mean to use. I'm not sure why the negative margins either. If you really do want <header> to be fixed, you should use top or bottom, and left or right to move the element where you want it. Look at a positioning tutorial that might help here.

    You also have an element, #wrapper, that is closed in the wrong place. I'm not sure what the purpose of #wrapper would be, it looks like divitis to me. Either that or you've started it in the wrong place and you meant for #wrapper to contain <header>?

    Have a look at it without the positioning -
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Introduction</title>
    <style type="text/css">
    html, body {
    	background: #fff;
    	color: #000000;
    	font: 13px Arial, Helvetica, sans-serif;
    }
    #wrapper {
    	width: 800px;
    	margin: 0 auto;
    	overflow: auto;
    	background: #ccc;
    }
    header {
    	background: #000;
    	height: 180px;
    	width: 100%;
    }
    	#logo {
    		margin-left: auto;
    		margin-right: auto;
    		margin-top: 80px;
    	}
    	nav {
    		padding-top: 23px;
    		font-size: 1.2em;
    		word-spacing: 6px;
    		word-spacing: 6px;
    		font-family: PTSansNarrowRegular;
    	}
    #greybar {
    	background: #333;
    	height: 35px;
    	width: 100%;
    }
    section {padding: 20px;}
    </style>
    </head>
    <body>
        <div id="wrapper">
            <header>
                    <div id="logo"><a href="introduction.html"><img src="MAL_Logo.png" alt=" Modern London Architecture" /></a></div>
                <nav>
                    <a href="introduction.html">introduction</a>
                    <a href="buildings.html">buildings</a>
                    <a href="contactIMD.html">contact</a>
                    <a href="reply.html">reply</a>
                    <a href="sources.html">sources</a>
                    <a href="architects.html">architects</a>
                    <a href="exhibitions.html">exhibitions</a>
                </nav>
            </header>
            <div id="greybar"> </div>
            <section> 
                	<h1>The background of Modern Architecture: </h1>
                <p>
                    Modern (also known as International style, Neue Sachlichkeit and functionalism) 
                    architecture refers to simple building styles and came into fame in the late 19th and
                    20th centuries. Unlike other architectural styles, Modern architecture is based on functionalist 
                    planning. In other words, Modernism rejected traditional building methods. 
                </p>
            </section>
        <!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #2
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry HTML5 <section> tag content is not showing.

    The text in my <section></section> tag won't display. I think there is something completely wrong with the way I designed my header. Can someone please help? I've included the HTML5, & CSS Code below. I have also included a snapshot of what is showing on my site.

    Thanks!





    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Introduction</title>
    <link rel="stylesheet" href="IMD110.css">
    <script src="fixIE.js"></script>
    
    <!--[if lt IE 9]>
    <script src="name.js">
    </script>
    <![endif]-->
    
    </head>
    
    <body>
     
    <header>
    
    <div id="wrapper">
    
    <div id="logo">
    <a href="introduction.html">
    
    <img src="MAL_Logo.png" alt=" Modern London Architecture" />
    </a>
    </div>
    
    <nav>
    <a href="introduction.html">introduction</a>
    <a href="buildings.html">buildings</a>
    <a href="contactIMD.html">contact</a>
    <a href="reply.html">reply</a>
    <a href="sources.html">sources</a>
    <a href="architects.html">architects</a>
    <a href="exhibitions.html">exhibitions</a>
    
    </nav>
    
    </header>
    
    <div id="greybar"> </div>
    
    <section>
    
    <h1>The background of Modern Architecture: </h1>
    
    Modern (also known as International style, Neue Sachlichkeit and functionalism)
    architecture refers to simple building styles and came into fame in the late 19th and
    20th centuries. Unlike other architectural styles, Modern architecture is based on functionalist
    planning. In other words, Modernism rejected traditional building methods.
    </section>
    
    </div>
    </body>
    </html>


    CSS Code Below:

    Code:
    a:link
    {color:#8B8B83; text-decoration:none;}    /* unvisited link */
    a:visited
    {color:#8B8B83; text-decoration:underline;} /* visited link */
    a:hover
    {color:#9FD0CB;}   /* mouse over link */
    a:active
    {color:#8B8B83;}  /* selected link */
    
    header, section, article, aside, nav, footer, figure, hgroup
    {
    display: block;
    }
    
    
    @font-face {
        font-family: 'PTSansNarrowRegular';
        src: url('PTN57F-webfont.eot');
        src: url('PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
             url('PTN57F-webfont.woff') format('woff'),
             url('PTN57F-webfont.ttf') format('truetype'),
             url('PTN57F-webfont.svg#PTSansNarrowRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    
    body {
    font-size:13px;
    font-family: Arial,Helvetica, sans-serif;
    background-color:#FFFFFF;
    color:#000000;
    }
    
    header {
    background-color:#000000;
    height:180px;
        width:100%;
        margin-left: -10px;
        margin-top: -68px;
        position: fixed;
        }
    
    #greybar {
    background-color:#333333;
    height:35px;    
    width:100%;
        margin-left: -10px;
        margin-top: 100px;
        position: fixed;
    }
    
    nav {
    z-index: -10px;
    padding-top:23px;
    font-size:1.2em;
    word-spacing:6px;
    word-spacing:6px;
    font-family:PTSansNarrowRegular;
    }
    
    #logo {
    margin-left:auto;
    margin-right:auto;
    margin-top: 80px;
    z-index:-8px;
    }
    
    
    #wrapper {
    position: relative;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    z-index: 10;
    }
    Attached Thumbnails Attached Thumbnails HTML5 &lt;section&gt; tag content is not showing.-screen-shot-2013-02-06-10.18.22-pm.jpg  

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Two issues. "Header" is before "wrapper", but closed inside of it.

    "Header" is positioned absolutely. Let it float and the text will appear.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Tags for this Thread

    Posting Permissions

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