HTML5 <section> tag content is not showing.

Excavator · 02-07-2013, 07:28 AM

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>

kyhryt · 02-07-2013, 04:29 PM

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;
}

jerry62704 · 02-07-2013, 04:54 PM

Two issues. "Header" is before "wrapper", but closed inside of it.

"Header" is positioned absolutely. Let it float and the text will appear.