Zu viel Hintergrund

[Timo]

Hallo,

ich habe erst neulich angefangen HTML zu lernen, hab nur ein kleines Problem:

ich hab auf meiner Website eine <form> mit Hintergrundfarbe erstellt. Nun geht der Hintergrund jedoch über die gesamte Breite des Browserfensters. Wie kriege ich das hin, dass der Hintergrund nur hinter dem tatsächlichen Inhalt ist?

[Gunnar Bittersmann]

@@Timo:

nuqneH

ich hab auf meiner Website eine <form> mit Hintergrundfarbe erstellt. Nun geht der Hintergrund jedoch über die gesamte Breite des Browserfensters. Wie kriege ich das hin, dass der Hintergrund nur hinter dem tatsächlichen Inhalt ist?

Wie hast du es hingekriegt, dass der Hintergrund über die gesamte Breite des Browserfensters geht?

Qapla'

[Timo]

@@Timo:

nuqneH

ich hab auf meiner Website eine <form> mit Hintergrundfarbe erstellt. Nun geht der Hintergrund jedoch über die gesamte Breite des Browserfensters. Wie kriege ich das hin, dass der Hintergrund nur hinter dem tatsächlichen Inhalt ist?

Wie hast du es hingekriegt, dass der Hintergrund über die gesamte Breite des Browserfensters geht?

Qapla'

öh mein Quelltext sieht so aus(gekürzt):~~~html

<style type="..">
form {
margin: 0px;
padding: 0px;
}

.frm {
background-color: #efefef;
color: #000000;
height:18px;
font-size:10px;
}
</style>
...
<h1>Auswahl der Daten</h1>
<p> Wähle die Daten aus: </p>
<form class="frm" action"..">
     .....input.....
</form>

[Gunnar Bittersmann]

@@Timo:

nuqneH

Nun geht der Hintergrund jedoch über die gesamte Breite des Browserfensters.

Weil 'form' per Default (Browserstylesheet) ein Blockelement ist.

Wie kriege ich das hin, dass der Hintergrund nur hinter dem tatsächlichen Inhalt ist?

.frm { float: left }
Nebenwirkung: 'clear' für nachfolgendes Element erforderlich, sonst sind nachfolgende Elemente neben der Form-Box

.frm { position: absolute }
Nebenwirkung: Element aus dem Fluss, nachfolgende Elemente werden so plaziert, als ob die Form-Box nicht da wäre

.frm {
height:18px;

Die Angabe halte ich nicht für besonders geschickt. Verwende besser padding(-bottom).

Qapla'

[Timo]

Gunnar:

Danke! :)

[Gunnar Bittersmann]

@@Timo:

nuqneH

Wie kriege ich das hin, dass der Hintergrund nur hinter dem tatsächlichen Inhalt ist?

.frm { display: inline-block }  
* html .frm { display: inline }  
*:first-child+html .frm { display: inline }

Nebenwirkungen: keine, wenn danach ein Blockelement folgt

Qapla'

[Detlef G.]

Hallo Gunnar

Nebenwirkungen: keine, wenn danach ein Blockelement folgt

und auch keine Wirkung im zweier Firefox.

Übrigens, bei deinem Artikel inline-block – eine Alternative zu float solltest du noch darauf hinweisen, dass für FF2 ein auf Block gesetzter Link nichts nützt, der wird dann nicht als Link erkannt.
Hast du mal mit display: -moz-inline-box; getestet?
Das nicht Erkennen von Links gäbe es damit wohl nicht, dafür andere?

Auf Wiederlesen
Detlef

[ComFreek]

Hallo,

ich habe erst neulich angefangen HTML zu lernen, hab nur ein kleines Problem:

ich hab auf meiner Website eine <form> mit Hintergrundfarbe erstellt. Nun geht der Hintergrund jedoch über die gesamte Breite des Browserfensters. Wie kriege ich das hin, dass der Hintergrund nur hinter dem tatsächlichen Inhalt ist?

Hallo Timo,

zeige doch mal deinen Quelltext. Wenn du das Layout mit einer Tabelle gemacht hast, musst du die Breite der Tabelle setzen.

mfg
ComFreek

[Cheatah]

Hi Timo,

zeige doch mal deinen Quelltext. Wenn du das Layout mit einer Tabelle gemacht hast, musst du die Breite der Tabelle setzen.

was ComFreek Dir eigentlich sagen wollte: Wenn Du das Layout mit einer Tabelle gemacht hast, musst Du den HTML-Code wegschmeißen und durch etwas Sinnvolles ersetzen.

Cheatah