Ergebnis 1 bis 3 von 3

Thema: faux columns

  1. #1
    HTML Newbie
    Registriert seit
    19.05.2013
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard faux columns

    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-Code:
    <?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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: faux columns

    Hallo,

    der Grafik nach kann das Problem nicht mit Faux Columns gelöst werden.

    Allerdings wäre ein Link zu deiner Seite sinnvoller. Ohne deine Grafiken ist das Problem nicht nachzustellen.

    Gruss

    MrMurphy

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: faux columns

    Bevor du den wrapper schließt, musst du noch clearen.

Ähnliche Themen

  1. Faux Columns - ohne Grafik
    Von Grevas im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 09.08.2010, 20:41
  2. Faux Column Problem
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 22.03.2009, 00:16
  3. divx mit faux columns - firefox und ie wollen beide nicht
    Von mr.tino im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 16.04.2008, 23:32
  4. tables, columns
    Von Finne im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 01.02.2007, 14:58
  5. faux columns
    Von GreenRover im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.09.2006, 15:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •