Frage von CrAyneMoLoy, 20

HTML Positionierung und Begrenzung der Boxen?

Hi

Wie schaffe ich es das eine Box neben dem Text steht?

Bsp: Stelle für Wert static:[BOX mit anderem Text]

Bei mir wird die Box nur unter dem Text positioniert :/

und woran liegt es das bei manchen Positionierung die Box,

also genauer der Rahmen über die komplette Seite geht?

Ich hoffe ihr könnt mir helfen :)

Antwort
von winersonne, 14

Wenn du mit Box einen <div> meinst, geht der über die ganze Seitenbreite, weil per default eben "display: block;" eingestellt ist.

Du kannst jetzt 2 Sachen machen: dem <div> oder anderem Blockelement wie z.B. <p> eben den css-Stle "display: inline-block;" geben und dazu noch die genaue Breite oder "float: left;" bzw. "float: right;" anwenden und ebenfalls eine Breite in px, em oder % eingeben, die unterhalb der Seitenbreite liegt.

Allerdings musst du dann noch weitere Vorkehrungen treffen, z.B. bestenfalls die foat-Eigenschaft durch "clear: both;" (oder jeweils: left oder right) wieder aufheben. Das kommt aber alles auf den Rest der Struktur drauf an.

Kommentar von winersonne ,

Hier ein Bild, welches von Text umflossen wird:

<p>
Bla ble bli blo blu
<img src="..." style="float: left; margin-right: 5px;">
</p>

Hier ein schwarz gefüllter DIV, welcher die linke Hälfte einnimmt, und ein mit Text gefüllter, der die rechte einnimmt:

<div style="display: inline-block; width: 50%; background-color: #000000;"></div>
<div style="display: inline-block; width: 50%;">bla ble bli blo blu</div>

Nachteil der 1. Methode: Um ggf. den Float-Modus richtig abzuschließen, wenn der Text nicht länger als das Bild ist, muss clear: left bzw. clear both gesetzt werden.

Nachteil der 2. Methode (auch Float betreffend): die 50% Weite bezieht sich auf den Inneren Teil des Blocks. Wenn also noch Margin, Border oder Padding bestehen (und dies ggf. auch default, also ohne dass man diese explizit schreibt) würde die Seitenweite übertroffen werden und beide untereinander angeordnet werden. Also zur Sicherheit, wenn man nicht weiß wieviel Margin und Padding besteht, diese seitlich explizit auf 0 setzen.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten