Hi,
ich hab ein Problem…
ich möchte Text, in der Mitte zwischen zwei Bildern anordnen und den Text so formatieren, das er sich automatisch ans Fenster anpasst aber nicht die Bilder links und rechts überschneidet!
könnte mir einer Helfen??
Die beiden Bilder müssen floaten.
und was muss ich dem Text, dann für eine Formatierung geben??
Die Formatierung für den Text ist im moment:
#text
{
float: center;
top: 50px;
left: 30%;
right: 30%;
color: #593312;
z-index: 1;
}
und für die BIlder:
#face_links
{
float: left;
position: fixed;
left: 0px;
z-index: 2;
height: 100%;
width: 20%;
}
#face_rechts
{
float: right;
position: fixed;
right: 0px;
z-index: 1;
height: 100%;
width: 20%;
}
Gar keine.
float:center gibt es nicht.
Der Text wird ja als
ausgezeichnet, oder wenn Du mehrere Absätze hast, hast Du sie sicher mit
gruppiert. Dann hast Du ein Block-Element, das sich auf die volle Breite des Elternelements ausbreitet und der Inhalt (der Text) fließt dann um die beiden Bilder drumrum.
position und float zusammen geht nicht. Das muss also raus bei Deinen Bildern. Dann fliegt auch der z-index raus, weil der ohne position nicht zieht, ebenso right und left.
<div id="Content">
<img src="bild1.jpg" alt="Bild1 Alternativtext" class="spalte1" />
<img src="bild2.jpg" alt="Bild2 Alternativtext" class="spalte2" />
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>img.spalte1 {
float:left;
}
img.spalte2 {
float:right;
}Das sollte vollkommen reichen.
Wenn der Text weniger ist als die Bilder hoch sind, könnte evtl. noch ein Element mit clear nötig werden.
habs geschafft… das problem ist bei mir im moment aber, das der Text, der länger ist wie das Bild nach ganz rechts verschoben wird, und das das Bild bei Text, der gescrollt werden muss, mit nach oben scrollt.
Auf den Bildern liegen links, die fixiert sind und es auch bleiben sollen.
Die Bilder sollen halt unter den links liegen bleiben…
kennst du da einen weg, die bilder zu fixieren und den text trotzdem drumrum laufen zu lassen??
Ja, das ist richtig, das gehört so. Der Text soll bei „float“ ja um das Element herum"fließen".
Aber natürlich kann man das auch abstellen, indem Du dem Text einen Abstand in die entsprechende Richtung gibst, der mindestens so groß ist, wie das Bild.
und das das Bild bei Text, der gescrollt werden muss, mit nach oben scrollt.
Ja logisch. Das hab ich ja gesagt, position und float geht nicht miteinander. Macht ja auch keinen Sinn.
Auf den Bildern liegen links, die fixiert sind und es auch bleiben sollen.
Dann musst Du position:fixed verwenden (was der IE6 übrigens nicht kann) und Deinem Text den gewünschten Abstand geben, denn umfließen kann der Text dann nichts mehr.
Die Bilder sollen halt unter den links liegen bleiben…
Vorstellen kann ichs mir gerade nicht.
kennst du da einen weg, die bilder zu fixieren und den text trotzdem drumrum laufen zu lassen??
Wie gesagt, das geht nicht. Aber den Effekt kann man ja erreichen, indem man für den Text zwischen den Bildern einen entsprechenden Astand wählt. Wird halt schwierig, wenn der Abstand von den Bildern zum Rand in „%“ angegeben ist, die Größe der Bilder aber in „px“, denn die beiden Einheiten lassen sich nicht addieren.
also… das eine bild soll links liegen und fest positioniert sein… das andere soll rechts liegen und fest positioniert sein… dann soll der TExt, wie zwischen zwei frames in der Mitte liegen und sich nicht nach rechts bzw. links unter die BIlder ausbreiten sondern komplett lesbar sein.
Der Scrollbalken soll sich am rechten bildschirmrand befinden und beim herunterscrollen, soll nur der Text gescrollt werden.
Kannst du mir da iwie helfen??
Hab ich doch schon.
Hab Dir doch erklärt, wie das geht.
ich habs aba nich verstanden…
Was davon?
Klingt, als hättest Du es nicht versucht, zu verstehen.
Das mit dem Abstand ist genauso wie beim float.
Was hast Du probiert? Wie sieht Dein Code jetzt aus?
Wenn was unklar ist, kannst Du Dich auch erst einlesen, was Block- und was Inline-Elemente sind, wie die sich verhalten. Du kannst das typische Verhalten dann auch an Deiner eigenen Seite überprüfen, indem Du Deine Elemente mit einem Rahmen versiehst oder einer Hintergrundfarbe. Und wenn Du dann einen Abstand einbaust, siehst Du auch sofort, wie sich das Element dann verändert.
Habs geschafft…
lass jetzt die Bilder über ein position element laufen und dahinter ein anderes Bild (über float element), das genau die gleiche breite und je nach textlänge genau abgepasste höte hat.
Danke für deine hilfe…
Hört sich in jedem Falle an, als wären da Fehler drin.
Zum Beispiel „Die Bilder über ein position Element“, Du hast doch nicht die Bilder erst in ein anderes Element gepackt, nur um sie positionieren zu können?
Bild hinter einem Bild?
Naja…wenn Du meinst, kannst Du ja mal Deinen Code posten (oder wie immer besser Link zur Seite), dann schau ich mir das an.
Wenn Dir ordentlicher Code aber nicht viel bedeutet, dann können wir das hier auch gerne beenden.
Hi,
ich poste mal den css code für die beiden Bilder:
#face-right
{
position: fixed;
height: 100%;
width: 20%;
right: 0px;
}
img.spalte2
{
float: right;
height: 1000px;
width: 20%;
}das hintergrundbild (spalte2) wird immer dem text angepasst!!
ICh hoffe doch das du das als ordentlichen code anerkennst… was ist eigentlich órdentlicher code?? Kann man das überhaupt definieren??
Also erstmal nützt CSS-Code ohne den dazugehörigen HTML-Code rein gar nichts.
Und „ordentlich“ ist fehlerfrei, also valide, und bei HTML zusätzlich semantisch sinnvoll.
Also… hier der html code zu den beiden pics: