Weis jemand, wie dieser Zeilenumbruch entsteht?

[Paul]

Hiho alle zusammen! Vielleicht kann mir jemand helfen, dieses Mysterium (naja, für mich ein Mysterium) aufzuklären. Ich hab also folgende Divs:

<div id='edit-control'>
<div id='edit-save-btn' onClick='if(confirmBeforeSubmit()) document.forms.i.submit()' title='Save file'></div>
<div id='edit-close2-btn' onClick='' title='Close file'></div>
</div>

Die ich mit folgenden Styles zu formatieren versuche:

#edit-control { position:absolute; left:5px; right:5px; top:23px; height:32px; margin:0px; padding:5px; border:0px; background:#D6D3CE; }

#edit-save-btn { width:22px; height:22px; border:0px; margin:0px; padding:0px; background:url(edit-save.gif); }
#edit-save-btn:hover { background:url(edit-save-hover.gif); }
#edit-save-btn:active { background:url(edit-save-active.gif); }

#edit-close2-btn { width:22px; height:22px; border:0px; margin:0px; padding:0px; background:url(edit-close2.gif); }
#edit-close2-btn:hover { background:url(edit-close2-hover.gif); }
#edit-close2-btn:active { background:url(edit-close2-active.gif);

Das funktioniert auch ganz wunderbar, bis auf eine Kleinigkeit. Ich würde diese Divs (die ja jeder ein Bild anzeigen) gerne in einer Reihe haben. Nur leider scheint nach dem 1. Div ein Zeilenumbruch statt zu finden, und das 2. Div erscheint darunter (und ist folglich kaum noch sichtbar, da das umschließende #edit-control ja nur 32px hoch ist.

Frage:

Wie kann ich die beiden (und später weitere) Divs dazu bewegen, sich in einer Reihe von links nach rechts anzuordnen? Es gibt doch mit sicherheit irgenteine Formatierung, oder?

Danke im Vorraus für jede Hilfe! :)

Tschö
Paul

[brizly]

Hiho alle zusammen! Vielleicht kann mir jemand helfen, dieses Mysterium (naja, für mich ein Mysterium) aufzuklären. Ich hab also folgende Divs:

Wie kann ich [snip] Divs dazu bewegen, sich in einer Reihe von links nach rechts anzuordnen? Es gibt doch mit sicherheit irgenteine Formatierung, oder?

Divs sind Blocklevel-Elemente. Sie beanspruchen eine eigene Zeile für sich. Entweder du springst von 'div' auf 'span' um, weil 'span' ist Inline-Element, oder du beschäftigst dich mal mit den Style-Sheet-Angaben 'float', bzw. 'display', hab' grad nicht parat welches von beiden. Jedenfalls lässt sich mit einem der Beiden der anschließende Zeilenumbruch verhindern, so dass die nachfolgenden elemente in der gleichen Zeile angezeigt werden.

Danke im Vorraus für jede Hilfe! :)

Tschö
Paul

_______________________
Mit freundlichen Grüßen
Sebastian

[Paul]

Divs sind Blocklevel-Elemente. Sie beanspruchen eine eigene Zeile für sich. Entweder du springst von 'div' auf 'span' um, weil 'span' ist Inline-Element, oder du beschäftigst dich mal mit den Style-Sheet-Angaben 'float', bzw. 'display', hab' grad nicht parat welches von beiden. Jedenfalls lässt sich mit einem der Beiden der anschließende Zeilenumbruch verhindern, so dass die nachfolgenden elemente in der gleichen Zeile angezeigt werden.

Hi! Danke für die Antwort, aber das wars wohl nicht. Klar hab ich schon versucht, die divs mit display:inline und so weiter dazu zu bewegen. War aber nix. Wenn ich span-elemente nehme, wird übrigens gar nix mehr angezeigt. Vielleicht können die keine Hintergrundbilder aufnehmen? Wer weis. Der MSIE zeigt merkwürdiger Weise nur ein absolutes Durcheinander an. :(

Tschö
Paul

[rainer groth]

Hallo Paul,

'div'-Tags werden von Haus aus (nach HTML-Regeln) mit je einen Zeilenumbruch davor und dahinter dargestellt - es sei denn, Du definierst mit CSS eine andere Darstellung ;-)

Schau mal hier: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float

gruesse
rainer groth

[Paul]

Hi Rainer!

'div'-Tags werden von Haus aus (nach HTML-Regeln) mit je einen Zeilenumbruch davor und dahinter dargestellt - es sei denn, Du definierst mit CSS eine andere Darstellung ;-)

Tatsache! *staun* Das wußte ich nicht. Danke Dir, daß du dieses Mysterium aufgeklärt hast *freu*

Gruß
Paul