Textbegrenzung
- Ersteller Flemli200
- Erstellt am
E
Efchen
Guest
Die beiden Bilder müssen floaten.
Flemli200
Mitglied
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%;
}
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%;
}
Zuletzt bearbeitet:
E
Efchen
Guest
Gar keine.
float:center gibt es nicht.
Der Text wird ja als <p> ausgezeichnet, oder wenn Du mehrere Absätze hast, hast Du sie sicher mit <div> 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.
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.
float:center gibt es nicht.
Der Text wird ja als <p> ausgezeichnet, oder wenn Du mehrere Absätze hast, hast Du sie sicher mit <div> 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.
Code:
<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>
Code:
img.spalte1 {
float:left;
}
img.spalte2 {
float:right;
}Wenn der Text weniger ist als die Bilder hoch sind, könnte evtl. noch ein Element mit clear nötig werden.
Flemli200
Mitglied
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??
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??
Zuletzt bearbeitet:
E
Efchen
Guest
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.
Ja logisch. Das hab ich ja gesagt, position und float geht nicht miteinander. Macht ja auch keinen Sinn.
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.
Vorstellen kann ichs mir gerade nicht.
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.
Flemli200
Mitglied
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??
Der Scrollbalken soll sich am rechten bildschirmrand befinden und beim herunterscrollen, soll nur der Text gescrollt werden.
Kannst du mir da iwie helfen??
E
Efchen
Guest
Hab ich doch schon.
Hab Dir doch erklärt, wie das geht.
Hab Dir doch erklärt, wie das geht.
E
Efchen
Guest
Was davon?
Klingt, als hättest Du es nicht versucht, zu verstehen.
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.
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.
E
Efchen
Guest
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.
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.
Flemli200
Mitglied
Hi,
ich poste mal den css code für die beiden Bilder:
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??
ich poste mal den css code für die beiden Bilder:
Code:
#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??
E
Efchen
Guest
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.
Und "ordentlich" ist fehlerfrei, also valide, und bei HTML zusätzlich semantisch sinnvoll.
