zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Heutige Beiträge

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Ebenen auf 100% Bildschirmbreite und Höhe...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.01.2006, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 16.01.2006
Beiträge: 2
xKHALIDx befindet sich auf einem aufstrebenden Ast
Standard 3 Ebenen auf 100% Bildschirmbreite und Höhe...
Hi,

Ich bin leicht am Verzweifeln und hoffe, Ihr könnt mir hier weiterhelfen...
Ich habe mich mal an CSS gewagt um meine Homepage ein wenig neu zu gesatallten...an sich ist mir mehr oder weniger schon alles klar bei CSS...aber ich weiß einfach nicht wie ich hierbei vorgehen soll (arbeite zusammen mit DreamWeaver :

Ich habe 3 Layer (Ebenen) nebeneinander, welche mein Header darstellen sollen....

Ein Header-Bild oben links...dann ein - ich nenne es Puffer - der sich als 2. Ebene zwischen den beiden äußeren Ebenen befindet...habe Ihn auf width:100% gestellt, so daß ich eine 100%ige breite des Bildschirms ausfülle...und eine 3. Ebene mit meinem 2. Header-Bild, welches ich mit right:0px an den rechten Bildschirmrand gebracht habe ... so weit so gut ...
Da aber mein rechtes Header-Bild etwas kleiner ist als der Puffer scheint jetzt der Puffer unter dem rechten Header-Bild heraus ...
Wie bekomme ich es hin, daß der Puffer nur bis zur Kante des 3. Header-Bildes (3. Ebene) läuft und so mein rechtes Header-Bild nicht vom Puffer beeinträchtigt wird .... damit ist das Chaos wohl komplett...

Hier mal ein Link auf mein bisheriges Ergebnis:

http://xkhalidx.funpic.de

und der passende Quelltext:

Zitat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
top: 0px;
left: 0px;
}
body {
background-image: url(background.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Layer2 {
position:absolute;
left:241px;
top:0px;
width:100%;
height:110px;
z-index:2;
background-image: url(puffer_oben.png);
}
#Layer3 {
position:absolute;
top:0px;
width:565px;
height:50px;
z-index:3;
right: 0px;
}
#Layer4 {
position:absolute;
top:50px;
width:565px;
height:60px;
z-index:4;
right: 0px;
}
#Layer5 {
position:absolute;
left:0px;
top:171px;
width:160px;
height:100%;
z-index:5;
background-image: url(puffer_links.png);
}
-->
</style>
</head>

<body>
<div id="Layer1">[img]ecke_links_oben.png[/img]</div>
<div id="Layer2"></div>
<div id="Layer3">[img]ecke_rechts_oben.jpg[/img]</div>
<div id="Layer4">[img]balken_rechts_oben2.png[/img]</div>
<div id="Layer5"></div>
</body>
</html>

Was mache ich hier falsch ... ?!?


Desweiteren habe ich noch ein 2. Problem...
Wenn ich einen 2. Puffer am linken bildschirmrand laufen habe der (als Hintergrund für mein späteres Navigationsmenü) vertikal verläuft und ich ihn auf heith:100% setze, verläuft er mehr als 100% und geht so nach unten hin über den Bildschirmrand hinaus... Was habe ich da Übersehen ?!?

ALso wenn Ihr mir dabei helfen könntet, wäre das schon echt Super...

Danke schonmal im Vorraus....



Gruß
xKHALIDx
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.01.2006, 15:33
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard Re: 3 Ebenen auf 100% Bildschirmbreite und Höhe...
Zitat:
Zitat von xKHALIDx
Hi,

Ich bin leicht am Verzweifeln und hoffe, Ihr könnt mir hier weiterhelfen...
Ich habe mich mal an CSS gewagt um meine Homepage ein wenig neu zu gesatallten...an sich ist mir mehr oder weniger schon alles klar bei CSS...aber ich weiß einfach nicht wie ich hierbei vorgehen soll (arbeite zusammen mit DreamWeaver :
im Textmodus, hoffe ich. Das WYSIWIG ist nicht zu empfehlen.

Zitat:
Zitat von xKHALIDx
Ich habe 3 Layer (Ebenen) nebeneinander, welche mein Header darstellen sollen....

Ein Header-Bild oben links...dann ein - ich nenne es Puffer - der sich als 2. Ebene zwischen den beiden äußeren Ebenen befindet...habe Ihn auf width:100% gestellt, so daß ich eine 100%ige breite des Bildschirms ausfülle...und eine 3. Ebene mit meinem 2. Header-Bild, welches ich mit right:0px an den rechten Bildschirmrand gebracht habe ... so weit so gut ...
erster Einwand: "Puffer" ohne Inhalt sind Quark. Dazu gibts margin und padding.
zweiter Einwand: 100% Breite sind 100% Breite von übergeorndeten Element, wenn das der Body oder etwas gleichfalls Bildschirmfüllendes ist, hast Du mit den daneben liegenden Boxen über 100% und somit Scrollbalken.

Zum Code: Benutze doch besser floats anstelle absoluter Positionierung. Das ist letztlich weniger gefriemel udn skalierbarer.

Zitat:
Zitat von xKHALIDx
Desweiteren habe ich noch ein 2. Problem...
Wenn ich einen 2. Puffer am linken bildschirmrand laufen habe der (als Hintergrund für mein späteres Navigationsmenü) vertikal verläuft und ich ihn auf heith:100% setze, verläuft er mehr als 100% und geht so nach unten hin über den Bildschirmrand hinaus... Was habe ich da Übersehen ?!?
mit height in % verhält es sich ebenso wie mit width (bezug zum übergeordneten Element). In der Suchfunktion ist das Thema "100% Höhe" (und Lösungen dazu) häufig wiederzufinden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.01.2006, 16:22
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 16.01.2006
Beiträge: 2
xKHALIDx befindet sich auf einem aufstrebenden Ast
Standard
Hmm ... erstmal danke für den Tip ... aber ich verstehe nicht ganz, wie mir marge, padding und float bei meinem Problem helfen sollen?!?
Mit Zitat antworten
  #4 (permalink)  
Alt 18.01.2006, 09:43
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard
mit padding kannst Du innerhalb eines Containers Abstände definieren.

mit margin kannst Du den Abstand zweier Container zueinander definieren.

Mit Float kannst Du Container so anordnen, dass sie nebeneinander erscheinen, ohne sie (absolut) zu positionieren.
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Spezielle Fragen zum Einsatz von Ebenen Mastertac CSS 2 30.04.2011 16:23
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe danoman CSS 5 24.04.2011 18:38
Divv 100% Höhe mit Hintergrundbild Gsicht CSS 0 24.03.2009 08:30
Container passt sich in der Höhe nicht an andere Ebenen an nicoendter CSS 56 24.07.2007 18:30
Tablle mit 100% Höhe in IE Be1er0ph0r CSS 4 03.03.2007 16:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:11 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023