[XHTML/CSS] div in form wird falsch dargestellt

[strolch00]

Hi @all,

Also ich hab wieder mal ein Problem mit css und kann es mir einfach nicht erklären warum zu teufel sich ein div in einem Formular, über das gesammte Formular zieht.

Der html ist der hier:

	<div id="menu">
			<img src="/images/design/r_login_head.png" alt="" height="17" width="168" style="border-bottom: 1px solid #827F7F;" />
			<form action="" method="post">
				<p class="left">Name:</p>
				<p class="right">
					<input type="text" name="Username" value="[USERNAME]" size="15" />
				</p>
				<p class="left">Passwort:</p>
				<p class="right">
					<input type="password" name="PW" value="" size="15" />
				</p>
				<div id="menu_inline">
					<p class="left">
						<input type="image" src="/images/design/r_b_login.png" alt="login" style="width: 69px; height: 15px;" />
					</p>
					<p class="right">
						<a href="#"><img src="/images/design/r_b_pw.png" alt="PW Lost" width="95" height="15" /></a>
					</p>
				</div>
			</form>
			<div id="news">
				.......

Der css Abschnitt ist dieser:

#menu {
	width: 168px;
	float: left;
	font-size: 0.8em;
}
#menu #menu_inline {
	width: 168px;
	height: 17px;
	margin-top: 10px;
	display: block;
}

Jetzt ist es so mit dem div will ich erreichen das das input und das img auf einer Höhe sind und sich nicht verschieben. Ich will aber gleichzeitig auf float: verzichten. Somit habe ich das div um das Input und das img gelegt, aber der div erweitert sich trotz height: und width: über das gesammte form.

Warum ist das so?
Wie kann man es noch machen?
Andere ideen?

 

[Graccem]

Wenn deine Klassen left und right den float-Befehl enthalten, dann musst du deinem div mit der Id menu_inline noch am Ende ein <br style="clear:both;line-height:0;" /> mit geben.

Wieso verwendest du eigentlich für eine tabellarische Darstellung keine Tabelle?

 

[strolch00]

graz @ graccem ich werd es mir merken fürs nächste mal. ich probir das nachher noch obs erfolg hat. Aber ich habe es nochmal komplett neu umgesetzt und bin jetzt mit left headline und header soweit das es im ie und ff genau gleich aussieht OHNE CSS Hack. Ich bin grad von so einer Erfolgswelle erfasst die Umsetzung muss nu auch beenden^^. Um einen Hack werde ich aber rum kommen.

ps weil xhtml 1.1 deswegen keine Tabelle aber mal sehen ob ich mir margin und padding sowei display: inline; nicht weiter komme als mit dem ganzen gefloate.

Danke dir

 

[strolch00]

Aber ich hab noch eine Frage allgemein CSS und link:hover

Ich habe ja ne Quicknavi drin mit mehreren Icons als link in einer <li> Liste.

Kann ich jetzt mit einem hover in den css das irgengwie global definieren, das die Bilder wechseln oder muss ich jedem Link ne id geben?

Ich frage das deshalb weil es verschiedene Icons sind
Tür geschlossen offen
Order geschlossen offen

geschlossen jeweils normal und offen bei hover und aktive.

und ginge das irgendwie in der art Tür1 und bei hover Tür2 warscheinlich nicht richtig. Ich hab wieder wünsche man o man.

 

[Graccem]

ps weil xhtml 1.1 deswegen keine Tabelle aber mal sehen ob ich mir margin und padding sowei display: inline; nicht weiter komme als mit dem ganzen gefloate.

Danke dir

In XHTML sind Tabellen immer noch vorhanden *g* Und vor allem, du darfst sie auch noch verwenden. Man soll sie nur nicht fürs Layout mißbrauchen.

Kann ich jetzt mit einem hover in den css das irgengwie global definieren, das die Bilder wechseln oder muss ich jedem Link ne id geben?

Wegen dem IE musst du wohl eine Id oder Klasse nehmen. Klasse empfiehlt sich dann, wenn das ein oder andere Symbol doppelt vorkommt.

Mit für den Mozilla geht es eventuell sogar mit CSS2.0. Ich habe es aber noch nicht versucht.
https://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte

 

[strolch00]

Achso stimmt ^^ war so fixiert auf div das hatte ich nicht bedacht.

Danke für den Link aber die Attributbedingte Css ist zwar gut und schon aber wird nicht vom IE unterstützt wie immer.