HIntergrundbild aus containern wo der inhalt verschwindet


 
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
blondie
Mitglied

BeitragHIntergrundbild aus containern wo der inhalt verschwindet Antworten mit Zitat

axinio Internet Marketing
Hallo,

ich hoffe ihr könnt mir helfen ich sehe den wald vor lauter bäumen nich.
Ich habe mir ein Hintergrundbild mit 4 containern gebastelt. Wird auch wunderbar angezeigt. Aber ausser dem Bild sieht man nix der komplette Inhalt verschwindet dahinter. Was muss ich tun damit der inhalt nach vorne kommt . Denn Kommentiere ich im xhtml die vier Container aus sehe ich den Inhalt wieder komplett. Hier sind beide codes
Code:
 <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
   <title></title>
   <!--UTF-8: Zeichensatz mit dem beinahe alle Zeichen dargestellt werden können -->
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
</head>
<body>
<div id="container">    
    <div id="branding">
    <p id="contact-top">
    </p>
       <img src="logo.png" alt="Text: " />
    </div>
   
    <div id="navigation">
    </div>
   
    <div id="teaser">
    </div>
   
    <div id="inhalt">
       <div id="news">
       </div>
       <div id="Losung">
       </div>
       <div id="box">
       </div>
    </div>
       
    <div id="sponsoren">
    </div>
   
   <div id="fusszeile">
    </div> 
   
</div>

<div id="extraDiv1"></div>
<div id="extraDiv2"></div>
<div id="extraDiv3"></div>
<div id="extraDiv4"></div>

</body>
</html>


und hier das CSS :

Code:
*{
   margin: 0px;
   padding: 0px;
}

body  {
font-family : "Sans", "Bitstream Vera Sans","Helvetica", sans-serif;
font-size: 10pt;
background : #122981 url(back_bg.jpg) repeat-x;
margin : 0;
}

#container {
   width: auto;
   margin: 40px 0px 20px 40px
   float: left;
   }

*#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4,
{ position: absolute;  }

#extraDiv1 {
   background: transparent url(1.jpg) repeat-x;
   top: 0px;
   right: 0px;
   width: 100%;
   height: 104px;
   }

#extraDiv2 {
   background: transparent url(2.jpg) repeat-x;
   top: 104px;
   right: 0px;
   width: 100%;
   height: 75px;
   }
#extraDiv3 {
   background: transparent url(3.jpg) no-repeat;
   z-index: 3;
   top: 0px;
   left: 0px;
   width: 472px;
   height: 481px;
   }
#extraDiv4 {
   z-index: 2;
   top: 125em;
   left: 0px;
   width: 100%;
   height: 426px;
   background: transparent url(4.jpg) repeat-x left bottom;
   }
 


vielen dank. Ich hoffe es kann mir jemand sagen was ich da für mist fabrieziert habe. Confused Ist mein erster Versuch so eine HP zu erstellen.
18 Jun 2009 18:00
Benutzer-Profile anzeigen Private Nachricht senden
Werner
Homepage-Total.de
Moderator

Beitrag Antworten mit Zitat

Nach deiner Beschreibung kann der Fehler nur bei "z-index" sein.
Du musst den Inhalt der Seite auch einen "z-index" zuweisen!
(Je höher die Zahl ist, umso weiter vorne liegt das Element)

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
19 Jun 2009 00:10
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
blondie
Mitglied

Beitrag Antworten mit Zitat

Vielen Dank Werner für deine Antwort.

Habe auch gleich mal ausprobiert ob es an den z-index lag leider nicht Sad
Habe die z-index der extradiv auf 1 gesetzt und alle anderen auf 9.
Ich sehe aber immer noch nur das hintergrundbild und keinen Inhalt .

Ganz zur verzweiflung bringt mich ja das http://jigsaw.w3.org/css-validator/validator mir Gratuliere! Keine Fehler gefunden raus gibt. Mad
19 Jun 2009 02:47
Benutzer-Profile anzeigen Private Nachricht senden
Werner
Homepage-Total.de
Moderator

Beitrag Antworten mit Zitat

Im CSS sind zwei Fehler:
Code:

#container {
   width: auto;
   margin: 40px 0px 20px 40px
   float: left;
}

*#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4,
{ position: absolute;  }

Da ist ein Strichpunkt zuwenig und ein Komma zuviel.
Benutze im Firefox die Fehlerkonsole,
diese zeigt JavaScript und CSS-Fehler an.


Vielleicht hilft das ein bisschen weiter:
Code:
#container {
   width: auto;
   margin: 40px 0px 20px 40px;
   float: left;
   position: absolute;
   z-index: 20;
 }

_________________
Bei Fragen oder Fehlermeldungen - Bitte ausführlichen Code posten!
Wie man Fragen richtig stellt
19 Jun 2009 18:47
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
axinio Internet Marketing
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    Webmaster Forum -> Hilfe für Webmaster -> CSS Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  

Ähnliche Beiträge
Thema Webmaster Forum Antw. Autor Verfasst am
Keine neuen Beiträge Hintergrundbild CSS 4 gonzo76 26 März 2009 19:04 Letzten Beitrag anzeigen
Keine neuen Beiträge Frameset mit durchgängigem Hintergrun... (X)HTML 5 bOMMEL 01 Okt 2007 16:59 Letzten Beitrag anzeigen
Keine neuen Beiträge hintergrundbild in mehreren frames pe... Hilfe für Webmaster 13 GAst 05 Jun 2007 13:30 Letzten Beitrag anzeigen
Keine neuen Beiträge kleines bild anklicken ändert inhalt ... (X)HTML 5 gestaltvoll 28 Mai 2007 15:42 Letzten Beitrag anzeigen
Keine neuen Beiträge Ordner mit inhalt erstellen PHP / MySQL 2 Schwarzi1 21 März 2007 21:58 Letzten Beitrag anzeigen