Archiv verlassen und diese Seite im Standarddesign anzeigen : Frage zu CSS und Ebenen
Masterp
2011-04-29, 14:01:43
Moin,
wer kannn mir bei meinem Problem helfen ?
Ich habe mittels DIV drei Ebenen in einem DIV Container erstellt (Beispielbild).
Jetzt möchte ich in der rechten Ebene ein Bild einfügen aber das klappt nicht.
Habe dazu in der HTML Datei folgenden Code eingefügt:
<body>
<div id="container">
<div id="content"></div>
<div id="box1"></div>
<div id="logo">5</div>
<img src="http://www.testseite.de/logo.jpg" alt="" width="200" height="200" border="0" />
</div>
</body>
</html>
Leider wird das Bild ganz unten platziert (wo die 5 steht) und nicht genau in der Ebene DIV ID="logo". Wo ist da der Haken ?
Beim "position: relative;".
Masterp
2011-04-29, 15:05:14
Beim "position: relative;".
Äh, das nötige DIV für die Ebene Logo hat bereits position: relative.
#logo {
/* ------ logo -----*/
position:relative;
left:582px;
top:-44px;
width:367px;
height:112px;
background-color: #F1700A;
z-index:2;
}
Der Bezug des "position: relative;" von #logo ist falsch. Du richtest das an der "Normalposition" aus und verschiebst es dann nach rechts und nach oben. Die "Normalposition" ist aber unterhalb der beiden anderen Container. Mach ein "absolute" draus oder verschachtel die Container anders.
Masterp
2011-04-29, 15:15:05
Der Bezug des "position: relative;" von #logo ist falsch. Du richtest das an der "Normalposition" aus und verschiebst es dann nach rechts und nach oben. Die "Normalposition" ist aber unterhalb der beiden anderen Container. Mach ein "absolute" draus oder verschachtel die Container anders.
Das kann nicht sein denn durch die "position: relative" wird die Box ja korrekt oben rechts auch angezeigt. Durch ein "absolute" hingegen verschwindet die Box. (gerade ausprobiert). Mir gehts aber um ein Bild, was ich genau in der besagten Box anstatt der Hintergrundfarbe reinhaben will.
AintCoolName
2011-04-29, 15:17:54
so siehts bei mir passend aus:
#logo {
/* ------ logo -----*/
position:absolute;
right165px;
top:30px;
width:367px;
height:112px;
background-color: #F1700A;
z-index:2;
}
Die Box verschwindet bei einem "absolute", weil du einen negativen Wert bei "top" eingetragen hast. Somit verschwindet die Box aus dem Anzeigebereich.
AintCoolName
2011-04-29, 15:25:49
Das ist quatsch was ich da gemacht habe. Das Logo div und das box1 div müssen in das content div rein.
<div id="container">
<div id="content">
<div id="box1"></div>
<div id="logo">5</div>
</div>
</div>
#logo {
position: relative;
left: 584px;
top: -50px;
width: 367px;
height: 112px;
background-color: #F1700A;
background-image: url[../bilder/logo.jpg];
z-index: 2;
}
Das ist quatsch was ich da gemacht habe. Das Logo div und das box1 div müssen in das content div rein.
<div id="container">
<div id="content">
<div id="box1"></div>
<div id="logo">5</div>
</div>
</div>
#logo {
position: relative;
left: 584px;
top: -50px;
width: 367px;
height: 112px;
background-color: #F1700A;
background-image: url[../bilder/logo.jpg];
z-index: 2;
}
Und selbst das ist noch Quatsch. Sorry ... aber da liegt noch viel mehr im Argen, was es zu beseitigen gibt.
Masterp
2011-04-29, 15:29:24
Das ist quatsch was ich da gemacht habe. Das Logo div und das box1 div müssen in das content div rein.
<div id="container">
<div id="content">
<div id="box1"></div>
<div id="logo">5</div>
</div>
</div>
#logo {
position: relative;
left: 584px;
top: -50px;
width: 367px;
height: 112px;
background-color: #F1700A;
background-image: url[../bilder/logo.jpg];
z-index: 2;
}
background-image: url[../bilder/logo.jpg];
So hatte ich das auch gedacht. Muss da ein kompletter Pfad rein ?
Und selbst das ist noch Quatsch. Sorry ... aber da liegt noch viel mehr im Argen, was es zu beseitigen gibt.
und das wäre ?
Muss da ein kompletter Pfad rein ?
In erster Linie mal runde Klammern und Anführungszeichen drumrum.
Btw.: Das Ergebnis soll so aussehen, wie auf deinem Bild im letzten Post? Wat?
Masterp
2011-04-29, 15:36:21
In erster Linie mal runde Klammern und Anführungszeichen drumrum.
Kannst Du das mal bitte anhand des Beispiels zeigen ?
Btw.: Das Ergebnis soll so aussehen, wie auf deinem Bild im letzten Post? Wat?
Ich hab es nochmal angehängt. Die schwarze Fläche ist ein Bild und soll in die Box oben links.
Normal würde das ja so gehen:
html:
<body>
<div id="container">
<div id="content"></div>
<div id="box1"></div>
<div id="logo">5</div>
<img src="http://www.testseite.de/logo.jpg" alt="" width="200" height="200" border="0" />
</div>
</body>
</html>
css:
#logo2 {
/* ------ logo -----*/
position:relative;
left:582px;
top:-44px;
width:367px;
height:112px;
background-color: #F1700A;
z-index:2;
}
background: url("bild.png");bild.png eventuell mit dem richtigen Pfad zum Bild austauschen.
Dein Problem liegt in erster Linie in dem "float: right;", dass du dem umgebenden Container mitgegeben hast. Nimm das raus, und du wirst sehen, wie es EIGENTLICH aussehen sollte. Dass der Container nach oben rechts rutscht und der Inhalt unten stehen bleibt ... tja, das ist eine Folge daraus.
Grundsätzlich ist deine Lösung aber eh wirr. Anstatt zu versuchen, mehrere Container per "position:" übereinander zu legen, solltest du die lieber ineinander verschachteln.
Masterp
2011-04-29, 15:58:37
background: url("bild.png");bild.png eventuell mit dem richtigen Pfad zum Bild austauschen.
Ich hab hier Probleme mit der Syntax. Wie muss der Pfad dort angegeben werden ?
background: url("http://www.testseide.de/bild.png");
Dein Problem liegt in erster Linie in dem "float: right;",
Du hast recht. Es lag am Float.
Grundsätzlich ist deine Lösung aber eh wirr. Anstatt zu versuchen, mehrere Container per "position:" übereinander zu legen, solltest du die lieber ineinander verschachteln.
Naja mein Gedankengang als "Anfänger" war, dass ich entsprechende separate Boxen für Navigation + Logo + Text auf der Box "Content" platziere. Diese jeweils in der Html als Div id=" deklariere.
Ausgangspunkt ist die aufrufende Datei.
Beispiel 1: Das Bild liegt in dem Ordner "unterordner", der sich dort befindet, wo sich auch deine css-Datei befindet. Der Aufruf wäre dann
background-image: url("unterordner/bild.png");
Beispiel 2: Das Bild befindet sich in einem Ordner "andererOrdner", der sich eine Ebene über deiner css-Datei befindet. Der Aufruf wäre dann
background-image: url("../andererOrdner/bild.png");
Dein Gedankengang zum Aufbau ist weitgehend korrekt. Allerdings ist es nicht so, dass du die Container bildlich aufeinander legst, sondern ineinander.
Beispiel
<div id="layout">
<div id="nav">Navigationselemente</div>
<div id="content">Text</div>
</div>
Masterp
2011-04-29, 16:26:08
Ausgangspunkt ist die aufrufende Datei.
Beispiel 1: Das Bild liegt in dem Ordner "unterordner", der sich dort befindet, wo sich auch deine css-Datei befindet. Der Aufruf wäre dann
background-image: url("unterordner/bild.png");
Das hab ich soweit verstanden. Funktioniert das auch mit einer absoluten Pfadangabe , die mit "http://www" beginnt ? Letztere hat hier nicht funktioniert.
Dein Gedankengang zum Aufbau ist weitgehend korrekt. Allerdings ist es nicht so, dass du die Container bildlich aufeinander legst, sondern ineinander.
Beispiel
<div id="layout">
<div id="nav">Navigationselemente</div>
<div id="content">Text</div>
</div>
Auf dem ersten Blick seh ich keinen Unterschied zu meinen enzelnen "div id=" Pfaden. Du hast jedoch ein Container Layout vorweg angelegt. Wie verhalten sich die darunter liegenden Ebenen ? Sind die in Abhängigkeit (Vererbung) ?
Funktioniert das auch mit einer absoluten Pfadangabe , die mit "http://www" beginnt ?Ja.
Du hast jedoch ein Container Layout vorweg angelegt.Hast du auch. Nennt sich bei dir nur "Container".
Sind die in Abhängigkeit (Vererbung) ?Grob: Ja.
Masterp
2011-04-29, 16:36:56
Na dann bedanke ich mich für die freundliche Hilfe erstmal.
vBulletin®, Copyright ©2000-2024, Jelsoft Enterprises Ltd.