Seite 1 von 2 12 LetzteLetzte
ERLEDIGT
JA
ANTWORTEN
21
ZUGRIFFE
5756
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. #1
    Avatar von Orphelina
    Orphelina ist offline Mitglied Brokat
    Registriert seit
    Apr 2004
    Beiträge
    256
    Hallöchen,

    also, ich habe einen Header ein background-image. Leider zeigen mir die anderen Browser gar kein Hintergundbild an- woran liegt das?

    Gruss Orphelina

    HTML:
    HTML-Code:
    <body >
    
    <div id="Container">
     <div>
       <div id="Header" class="mainnav" style="padding: 95px 0px 0px 5px;">
          <a href="" >Bla1</a> | 
          <a href="" >Bla2</a> | 
          <a href="" >Bla3</a> | 
          <a href="" >Bla4</a>
        </div>
      </div>
     <div>
         <div class="Content">Content1mit viel Blabla</div>
       <div class="Content">Content2 mit viel Blabla</div>	
       <div id="Navi">Navigation</div>
       </div>
      <div id="Foot" class="mainnav" style="padding: 4px 0px 3px 5px;">
        </div>
     </div>
    </body>
    CSS
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    
    #Container {background:#FFFFFF;width:990px; height:590px;}
    #Header{
        width:990px; 
        height:120px; 
        background-image: url("img\head.png");
        float:left;
        }
    .content {margin:1px;
        background:#FFFFFF; 
        height:445px; 
        width:340px;
        padding:20px 20px 40px 20px;
        float:right;
        }
     
    .mainnav{font-family: Arial,Verdana, Tahoma; 
        font-size: 12px; 
        font-style:bold; 
        text-transform: uppercase;
        color:#CCCCCC;
        float:right;
        }
     
    #Navi{  
        font-family: Arial, Verdana, Tahoma; 
        font-size:14px; 
        width:150px; 
        padding:20px 2px 0px 10px; 
        float:left;
        }
     
    #Foot { height:25px; 
        width:990px; 
        }
    Geändert von Orphelina (24.03.05 um 13:27 Uhr)
     

  2. #2
    Maik Tutorials.de Gastzugang
    Der Fehler liegt an dem verwendeten Backslash:
    Code :
    1
    2
    3
    4
    5
    6
    
    #Header{
        width:990px; 
        height:120px; 
        background-image: url("img[color=red]\[/color]head.png");
        float:left;
        }
     

  3. #3
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.449
    Wie wär's, wenn du als Verzeichnisseparator das slash-Zeichen verwendest?
     

  4. #4
    Avatar von Orphelina
    Orphelina ist offline Mitglied Brokat
    Registriert seit
    Apr 2004
    Beiträge
    256
    Ich kann im FF und Opera nicht mal eine andere Hintergrundfarbe statt dem Bild nehmen, die ignorieren das einfach!
     

  5. #5
    Avatar von Orphelina
    Orphelina ist offline Mitglied Brokat
    Registriert seit
    Apr 2004
    Beiträge
    256
    Also Farben gehen, ich hatte nen Fehler drin, aber sobald ich versuche ein Bild einzufügen, ignorieren es alle...
    Und ich versteh es einfach nicht!
     

  6. #6
    c2uk ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    331
    Hast Du Gumbos Vorschlag denn auch umgesetzt?

    also anstatt img\bild.png => img/bild.png
     

  7. #7
    Registriert seit
    Dec 2002
    Ort
    Trier
    Beiträge
    17.449
    Dann wird wohl der relative URL zur Hintergrundgrafik nicht korrekt sein. Falls sich die Grafik in einem parallelen Verzeichnis zur CSS-Datei befindet, versich mal ../img/head.png als Pfadangabe.
     

  8. #8
    Maik Tutorials.de Gastzugang
    Wie gesagt, der Grafikpfad muß so lauten:

    Code :
    1
    
    background-image: url("img[B]/[/B]head.png");
     

  9. #9
    Avatar von Orphelina
    Orphelina ist offline Mitglied Brokat
    Registriert seit
    Apr 2004
    Beiträge
    256
    Ja das Bild geht jetzt endlich, vielen Dank erstmal!
    Jetzt hab ich halt das Problem, dass ich da noch ein Bild möchte... Also quasi ein Hintergrundbild wie ich es bereits habe und dann noch ein Logo. Aber er zeigt es mir nie an! Ich habe es schon mit dem z-index versucht, aber das hab ich wohl falsch angewendet, weil es gar nichts gebracht hat!
     

  10. #10
    c2uk ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    331
    Könntest Du uns mal vielleicht eine Onlineversion davon zur Verfügung stellen? Oder zumindest einen aktuellen Sourcecode vielleicht auch mit ner kurzen Info wie die Ordnerstrukturen sind dazu?
     

  11. #11
    Maik Tutorials.de Gastzugang
    Wenn du uns den kompletten Source-Code postest, können wir dir besser weiterhelfen
     

  12. #12
    Avatar von Orphelina
    Orphelina ist offline Mitglied Brokat
    Registriert seit
    Apr 2004
    Beiträge
    256
    Okay, ich kann die Sourcen leider nicht online stellen derzeit...
    Aber hier die beiden Files...
    Nicht töten, aber ich hab alle Dateien einfach auf meinen Desktop...

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    body{background:#CCCCCC;}  
    #container {background:#FFFFFF;     
    width:1020px;       
    height:550px;}  
    #head   {background-image: url(head_neu.png);   
    height:140px;       
    width:1020px;}  
    #logo   {background-image: url(logo_w.png);
    background-repeat:no-repeat;  
    background-position:750px 50%;}  
    .content{width:330px; 
    height:385px; 
    float:left} 
    .navi   {width:170px;
    height:385px; 
    float:left}  
    #foot   {width:1020px;      
    height:25px;           
     float:left}

    HTML-Code:
    <body >   
     <div id="container">          
    <div id="head">        
    <div id="logo"></div>        	     
    </div>          
    <div>          
    <div class="Navi" >Navigation</div>     
    <div class="Content" >Content2 mit viel Blabla</div>     
    <div class="Content">Content1 mit viel Blabla</div>	    
     <div class="Navi">News</div>	       
     </div>   
    <div style="float:both;"></div>   
    <div id="Foot">   
    <a href="" >Sitemap</a> |    
    <a href="">Kontakt</a> |    
    <a href="" >Impressum</a></div>    
     </div>
     

  13. #13
    Maik Tutorials.de Gastzugang
    Um das Logo über den Header zu legen, müssen die beiden DIVs entsprechend positioniert und das Logo-DIV mit einem höheren z-index versehen werden - also z.B.:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    #head
    {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-image: url(head_neu.png);    
    height: 140px;      
    width: 1020px;
    }  
     
    #logo
    {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-image: url(logo_w.png);
    background-repeat: no-repeat;  
    background-position: 750px 50%;
    }
    Evtl. solltest du für #logo eine Weiten- und Höhenangaben bestimmen.
     

  14. #14
    c2uk ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    331
    Zitat Zitat von michaelsinterface
    Um das Logo über den Header zu legen, müssen die beiden DIVs entsprechend positioniert und das Logo-DIV mit einem höheren z-index versehen werden - also z.B.
    Tut mir leid, aber das stimmt so leider nicht.

    Zitat Zitat von michaelsinterface
    Evtl. solltest du für #logo eine Weiten- und Höhenangaben bestimmen.
    Das ist eher der Fehler, gib #logo die gleichen Größenwerte wie dem header-div und es geht (im Firefox und IE, jedenfalls)
    Geändert von c2uk (24.03.05 um 17:31 Uhr)
     

  15. #15
    Avatar von Orphelina
    Orphelina ist offline Mitglied Brokat
    Registriert seit
    Apr 2004
    Beiträge
    256
    Mh, leider sehe ich das Logo immer noch nicht... Obwohl ich noch Weiten- und Höhenangaben gemacht habe...
     

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Bild über Body legen
    Von ts230 im Forum CSS
    Antworten: 2
    Letzter Beitrag: 26.02.09, 16:40
  2. div o. span über ein Bild legen?
    Von unlord im Forum CSS
    Antworten: 2
    Letzter Beitrag: 20.09.07, 11:53
  3. Bild über Bild legen
    Von arto im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 2
    Letzter Beitrag: 16.05.05, 22:33
  4. bild über objekt legen?
    Von bjflame im Forum Photoshop
    Antworten: 10
    Letzter Beitrag: 01.03.03, 21:03
  5. Schaltfläche über ein Bild legen
    Von maho15 im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 21.07.02, 14:24