Beiträge von tarky

tarky

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ß */
      }

Alles anzeigen

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>

Alles anzeigen

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]