Hallo,
bin noch relativ neu im Bereich CSS Gestaltung.
an meinem derzeitigen Projekt habe ich das Problem, dass unter der Navigation ein leerer Platz ist(siehe Bild).
Nach langem googeln bin ich auf die Technik Faux Column gestoßen.
ich bekomme das einfach nicht hin mit der Grafik.
CSS
Code
@charset "utf-8";
/* Body Bereich */
* {margin:0px; padding:0px;}
body
{
background-color:#C36
color:#393
border:0px;
}
#wrapper {
color: black;
width: 1000px; /* Breite des Inhaltsbereichs */
position: relative;
background-image: url(bilder/faux.jpg); background-repeat:no-repeat;
}
#teaser {
background-image: url(bilder/design1_r1_c2.jpg);
width:1000px; height:196px;
}
.textmenue{
color:#0F6;
font-family:"Arial Black", Gadget, sans-serif;
font-size:16px;
font-variant: normal;
height:54px;
line-height: 39px;
text-align:center;
}
#navibereich{
float: left;
width: 1000px;
height: 44px;
padding: 0px;
padding-bottom:
}
#navibereich ul
{
width: 1000px;
list-style-type: none;
}
#navibereich li
{
float:left
}
#navibereich a
{
display: block;
width:152px;
height:40px;
background-image:url(bilder/menue1.gif);
text-decoration:none;
}
#navibereich a:hover
{
margin: 0;
padding: 0;
width: 152px;
height: 40px;
background-image: url(bilder/menue2.gif);
}
#navibereich a:active{
margin: 0;
padding: 0;
width: 152px;
height: 40px;
background-image: url(bilder/menue3.gif);
}
#navibereich #navstartseite a{
background-image: url(bilder/menue3.gif);
}
#navibereich #navunternehmen a{
background-image: url(bilder/menue3.gif);
}
#navibereich #navprodukte a{
background-image: url(bilder/menue3.gif);
}
#navibereich #navreferenzen a{
background-image: url(bilder/menue3.gif);
}
#navibereich #navkontakt a{
background-image: url(bilder/menue3.gif);
}
#navibereich #navimpressum a{
background-image: url(bilder/menue3.gif);
}
#foot {
display: block;
clear: both;
background-image:url(bilder/design1_r6_c1.gif);
width:1000px; height:115px;
color: black;
background-color: white; /* Deckweiß */
}html
HTML
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Startseite </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body id="index">
<div id="wrapper">
<div id="teaser"></div>
<!-- ENDE TEASER -->
<div id="navibereich">
<ul>
<li ><img src="bilder/design1_r2_c1.gif"></li><li class="textmenue" id="navstartseite"><a href="index.html">Startseite</a></li>
<li class="textmenue" ><a href="unternehmen.html">Unternehmen</a></li>
<li class="textmenue" ><a href="index.html">Produkte</a></li>
<li class="textmenue" ><a href="kontakt.html">Referenzen</a></li>
<li class="textmenue" ><a href="index.html">Kontakt</a></li>
<li class="textmenue" ><a href="kontakt.html">Impressum</a></li>
<li><img src="bilder/design1_r2_c8.gif"></li>
</ul>
</div>
<!--ENDE MENUE -->
<div id="main">
</div>
<!-- ENDE MAIN -->
<div id="foot"></div>
<!-- ENDE FOOT --><!-- ENDE WRAPPER -->
</div>
</body>
</html>Hoffe mir kann jemand helfen... nach 5 Stunden verbleiben nicht mehr viele Nerven [Blockierte Grafik: http://www.css-info.de/forum/images/smilies/icon_confused.gif]