Regulärer Elementfluss nach CSS-Positionierung

Status
Nicht offen für weitere Antworten.
T

Thomas D

Erfahrenes Mitglied
Hallo!

Ich habe ein Seitenlayout mit CSS formatiert (Positioning durch absolute und relative) und habe nun das Problem, dass ich eine Tabelle habe, die sich durch PHP automatisch aufbaut (d.h. ich weiß zuvor noch nicht, wie viel Platz in der Vertikalen dieses HTML-Objekt benötigen wird). Nun möchte ich, dass der Fluss der kommenden HTML-Elemente automatisch so ist wie ohne CSS-Definition. Sprich:

Code: 
<div id="abc">...</div>
<div>...</div>
<table>
...
</table>
<p>...</p>

CSS:

Code: 
#abc {position: absolute; top: 2cm; height: 4cm; width: 2cm}
table {position: relative; top: 1cm;}

Wie muss ich jetzt also die CSS-Definition wählen, damit das <p>-Elemente direkt unter der Tabelle gesetzt wird - ganz egal wie groß dieses ist? Derzeit ist es nämlich so, dass das <p>-Tag irgendwo nach dem zweiten <div> positioniert wird. Die Angabe von top hilft mir hier ja nicht weiter, da ich ja nicht weiß, wie hoch dieses sein muss, da es ja von der "Höhe" der Tabelle abhängt.

Ich hoffe, ich habe mich klar ausgedrückt und es kann mir hier jemand weiterhelfen. Thx im Voraus :), Thomas D.
 
Hi,

du wirst nicht darum kommen, die absolute Positionierung aufzuheben, wenn die nachfolgenden Elemente wie oben skizziert im normalen Textfluss erscheinen sollen.
 
Und wie kriege ich dann mein Layout zustande? So soll's ausschauen: http://www.thomasd.info/temp/Druckvorlage.pdf

Code: 
<html>
<head
	<style type="text/css">
	#a4
		{
			height: 29.7cm;
			width: 21cm;
			border-style: solid;
		}
		
		#content
		{
			position: relative;
			left: 1.5cm;
			height: 29.7cm;
			width: 18cm;
			border-style: solid;
		}
	
		#logo
		{
			position: absolute;
			top: 0.7cm;
		}
		
		#header
		{
			text-align: right;
			position: absolute;
			right: 0.2cm;
			top: 0.7cm;
		}
		
		#hr1
		{
			position: relative;
			top: 4cm;
		}
		
		p.absender
		{
			position: relative;
			top: 4cm;
			font-size: 80%;
			text-decoration: underline;
		}
		
		#empfaenger
		{
			position: relative;
			top: 4cm;
			height: 2.4cm;
			border-style: solid;
		}
		
		#datum
		{
			position: relative;
			top: 4cm;
			right: 0.2cm;
			font-weight: bold;
			text-align: right;	
		}
		
		h2
		{
			position: relative;
			top: 3.5cm;
		}
		
		#begruessung
		{
			position: relative;
			top: 3.3cm;
		}
		
		#angebot
		{
			position: relative;
			top: 3.5cm;
		}
		
		p
		{
			margin-top: 0cm;
			margin-bottom: 0cm;
		}
	</style>
</head>
<body>
	<div id="a4">
		<div id="content">
			<img src="res/site/logo.gif" id="logo" />
			
			<div id="header">
				<p>City-Print Binder KG</p>
				<p>Muldenstraße 33</p>
				<p>4020 Linz</p>
				<p>Tel.: 0676/843 330 100</p>
				<p>Fax: 0732/994 409</p>
				<p>office@city-print.at</p>
			</div>
			
			<hr id="hr1" />
			<p class="absender">
				Abs.: City-Print Binder KG, Muldenstraße 33, 4020 Linz
			</p>
			<div id="empfaenger"></div>
			<p id="datum">Datum: <?php echo date ("d.m.Y");?></p>
			
			<h2>Angebot </h2>
			<p id="begruessung">
				Herzlichen Dank für Ihr Interesse an unseren Produkten und Dienstleistungen.
				Wir erlauben uns wie folgt anzubieten:
			</p>
			<table id="angebot">
				<thead>
					<th>POS</th>
					<th>Bezeichnung</th>
					<th>Anmerkungen</th>
					<th>Preis in €</th>
				</thead>
				<tbody id="tbody">
				</tbody>
			</table>
			<p>kdkdk</p>
		</div>
	</div>
</body>
</html>
 
Hi,

grundsätzlich würde ich vorschlagen, die rechts positionierten Elemente stattdessen mit der float:right-Eigenschaft rechtsbündig auszurichten, und alle übrigen Elemente im normalen Textfluss anzuordnen.

Zwischenabstände lassen sich dann mit Hilfe der margin- und/oder padding-Eigenschaft einrichten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück