Solved

HTML/CSS beginner with issues on "section"-tags and positions

Posted on 2014-01-24
1
304 Views
Last Modified: 2014-01-24
Hello all and thanks for reading this post!

I'm having a beginner issue with creating a simple site

I have been able to create and style a top fixed menu bar as I would like it, however, when I try to add a new section (e.g., the content of the page), the top menu overlaps and hides this text

My question is as follows:
How can I position the top menu bar to always be on top, while the next section (called "content" starts directly below it?

Thanks in advance!

HTML
<body>
<section id="navigation">
        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>
</section>

<section id="content">
This is where the main page will go
</section>

<section id="footer">
Things in the bottom footer
</section>
</body>

Open in new window



CSS
@charset "utf-8";

body {
    width: 900px;
    height: 100%;
    padding: 0;
}

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/
nav {
	display: block;
	background-color: #434343;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	overflow: hidden;
}
nav > ul {
	display: inline-block;
	border-radius: 0.3em;
	box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25);
	padding: 0.5em 1.5em 0.5em 1.5em;
}
nav > ul > li {
	display: inline-block;
	list-style-type: none;
	text-align: center;
	padding: 0 1.5em 0 1.5em;
}

nav > ul > li > a {
	color: rgba(255,255,255,0.75);
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.75em;
	letter-spacing: 0.25em;

	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	
	outline: 0;
}
nav > ul > li:hover > a {
	color: #FF0072;
}
/*********************************************************************************/
/* Content                                                                         */
/*********************************************************************************/
section#page_content {
    width: 80%;
    margin: 0 auto;
}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
footer#page_footer {
    position: absolute;
    height: 20px;
    width: 100%;
    left: 0;
    bottom: 0;
}

Open in new window

0
Comment
Question by:Cohagen
1 Comment
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39808157
Remove position:absolute from nav{}
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now