Padding zeichnet wild herum

Status
Nicht offen für weitere Antworten.
Igäl

Igäl

Erfahrenes Mitglied
Hey Leute

Ich mach grad mein erstes Layout, welches vollständig ohne Tabellen auskommen soll. Dafür hab ich jetzt meine Seite unterteilt und zwar in einen Navi und einen Contentbereich.

Jetzt möchte ich im Contentbereich Inhalt haben. Das klappt auch wunderbar. Ich kann das Wort "test" anzeigen lassen. Wenn ich jetzt aber eine Box um das Wort haben möchte und dem Padding zufüge, streckt sich die Box weit über den Contentbereich hinaus. Kann ich irgendwie definieren, dass die Box im Contentbereich ausgerichtet wird, egal wie gross das Padding ist, sprich, beispielsweise die linke obere Ecke des Rahmens massgebend für die Positionierung ist und nicht der Text darin?

Gruss und Danke
De Igäl
 
Hi,

normalerweise sollte sich die eingebundene Box an der Breite des Elternelements orientieren.

Wenn du aber für die Box dieselbe Breite und zusätzlich einen Innenabstand definierst, dehnt sich die Box breiter aus, da diese Angaben gemäß dem Boxmodell zusammenaddiert werden, und so die tatsächliche Boxenbreite ergeben.

Für weitere Hinweise solltest du aber besser mal den bisherigen Quellcode (HTML + CSS) zeigen.
 
Ich versuch mal mit meinem bescheidenen Wissen die Relevanz der einzelnen Teile zu erfassen und die relevanten Teile hier abzubilden:

HTML: 
#topBar	{
	margin-left:10px;
	margin-top:10px;
	float:left;
	width:800px;
	height:120px; /*Temporär bis Bild da ist*/
	border:1px solid #000;
	border-bottom:none;
	text-align:right;
}
#contentPane	{
	margin-left:10px;
	padding:3px;
	width:794px;
	border:1px solid #000;
	border-top:none;
	border-bottom:none;
	float:left;
	clear:left;
}
#contentPane div.center	{
	width:624px;
	padding:10px;
	text-align:left;
	float:left;
}
#contentPane div.center div.centerBox	{
	text-align:center;
}

#contentPane div.center span.outerBrightBox	{
	border:1px solid #000;
	background-color:#B9D3EE;
	padding:10px;
}

Dazu das HTML (stark gekürzt):

HTML: 
<body>
<div id="topBar">
	Meisterschaft
</div>
<div id="borderBar">
	Sie befinden sich auf: Startseite
</div>
<div id="contentPane">
	<div class="left">
		Navigation
	</div>
	<div class="center">
		{include file="$include_file"}
	</div>
</div>
<div id="borderBar">&nbsp;</div>
<div id="footer">
	Footer
</div>

</body>

Zu guter Letzt noch der HTML-Teil aus dem inkludierten File:

HTML: 
<div class="centerBox">
	<span class="outerBrightBox">
		asdfs
	</span>
</div>

Hast du vielleicht ein gutes Positionierungstutorial? Damit komm ich nämlich überhaupt noch nicht zurecht. Ich scheitere immer wieder daran, mit CSS das selbe machen zu können wie mit Tables.

Gruss
 
Zuletzt bearbeitet:
Ich werde das jetzt wohl über display:block; und eine Element-Längenangabe lösen.

Ich habe jetzt aber schon eine nächste Frage:
Wie schaffe ich es, dass bei einem Formular die Eingabefelder alle untereinander sind? Ich kann mir nicht vorstellen, wie ich mit CSS die Ausrichtung von Elementen hinkriegen soll. Ich würde eigentlich gerne absolutes positionieren umgehen.
 
Ich kann anhand des gezeigten CSS-Codes kein "wildes herumzeichnen" der padding-Eigenschaft feststellen, was immer du darunter verstehst, und ebenso wenig streckt sich da eine Box über den "Contentbereich" hinaus :confused:

Die Formular-Eingabefelder kannst du jeweils in ein Blockelement einbetten, damit sie untereinander angeordnet werden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück