• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrund für Navigation

S

scorpi

Neues Mitglied
Hallo Freunde,
ich habe wieder mal (wahrscheinlich ein sehr einfaches) Problem. Und zwar möchte ich hinter der eigentlichen Navigation ein Background habe. Dafür habe ich um den divcontainer der navigation noch einen divcontainer erstellt. Dieser aber ist unsichtbar =) man sieht ihn nicht etc. ihr werdet es schon merken...;)
HTML: 
<!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="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #000;
	background-image: url(images/bg.jpg);
	background-repeat: repeat-x;
}

-->
</style></head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
  <!-- end #header --></div>
  <div id="obernavi"><div id="navi">
   	<ul>
    	<li class="active">
        	<a href="index.html" title="Zur Startseite">Home</a>
        </li>
        <li>
        	<a href="#" title="Zur Startseite">Malunterricht</a>
        </li>
        <li>
        	<a href="#" title="Galerie">Galerie</a>
        </li>
        <li>
        	<a href="#" title="Projekte">Projekte</a>
        </li>
        <li>
        	<a href="#" title="Über mich">Vita</a>
        </li>
        <li>
        	<a href="#" title="Philosophie">Philosophie</a>
        </li>
        <li>
       	  <a href="#" title="Nehmen Sie Kontakt auf">Kontakt</a>
        </li>
   	</ul>
  </div></div>
  <div id="mainContent">
 
    <h1>Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  <!-- end #mainContent --></div>
  <div id="footer">
    <p align="center">  <a href="#" title="Startseite">Home</a> : <a href="#" title="Kontakt">Kontakt</a> :
       <a href="#" title="Startseite">Impressum</a> <br />
      © 2011 oxart.de. Alle Rechte vorbehalten.
      </p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Code: 
@charset "utf-8";
* {
margin:0px;
padding:0px;
}
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColFixCtrHdr #container {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 2px solid #fff;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	background-image:url(images/header.jpg);
	height:200px;
						 
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
	margin-top:50px;
	margin-bottom:20px;
}
.oneColFixCtrHdr #container #mainContent h1 {
	font-size: 30px;
	color: #8f0100;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.oneColFixCtrHdr #container #mainContent h2 {
	font-size: 24px;
	color: #8f0100;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-top:20px;
}
.oneColFixCtrHdr #container #mainContent p {
	font-size: 18px;
	color: #000;
	font-family: Verdana, Geneva, sans-serif;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#8f0100;
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	color:#FFF;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}
.oneColFixCtrHdr #footer a {
	text-decoration:underline;
	color:#FFF;	
}
.oneColFixCtrHdr #obernavi{
	background:#8f0100;}
#navi ul{
	list-style:none;
	margin-left:4px;
}
#navi li{
	float:left;
	text-decoration:none;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}
#navi li a{
	display:block;
	padding:6px 10px 6px;
	text-decoration:none;
	font-weight:bold;
	background:#8f0100;
	color:#FFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px;
}
#navi .active a, #navi li a:hover{
	background-color:#FFF;
	color:#8f0100;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 20px;
}
Ich weiß, dass es irgendwie geht, weil ich es bevor mein Computer abgestürzt ist und alle Informationen verloren gingen, irgend wie geschafft habe.
Danke im Voraus
 
Die Listenpunkte in deiner #navi sind gefloatet. Dadurch nimmt #navi keine Höhe an. Du müsstest ein clearing ergänzen um dem #navi eine Höhe zu geben (z.B. noch ein letztes <li> mit "clear: both;float: none;" und ggfs. weiteren Eigenschaften die das Element quasi unsichtbar machen). Ein zusätzliches <div> außen rumm ist eigentlich unnötig dafür.
 
Das zusätzliche divtag brauche ich um an den Seiten der Buttons Farbe zu bekommen quasi als Verlängerung der Buttons die mit margin-left in der Mitte stehen...
 
Schön, dass Du nur auf den letzten Satz meines Beitrags eingegangen bist. Über das andere machst Du dir wohl noch Gedanken?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben