HTML positionierungs Problem.

**M3DS-REAL** · 08. 01. 2012, 15:27

Hallo, ich habe mir iene Homepage gebastelt, aber habe ein kleines Problem mit der positionierung von Text unter Bildern, die zusammen mit den Bildern als link fungieren.

http://home.arcor.de/maurice-roever

wie ihr sehen könnt sind bei den unteren beiden Bildern die Texte nich genau drunter bzw habe ich sich selber mit margin-left usw. zu positionieren versucht.

Ich habe die oberen beiden Buttons sozusagen aufgegeben, da bei selfhtml stand, dass man sie nach möglichkeit nicht benutzten sollte, weil javascript von nöten ist.

Wem es zu umständlich ist, sich den Quellcode mit dem Browser rauszusuchen hier bitte:

Spoiler:

HTML-Code:

<html>

<head>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 

<link href="style.css" type="text/css" rel="stylesheet" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<title>!!!!ACHTUNG!!!FANTASTISCH!!!</title>


<style type="text/css">

a {
	color: black;
	text-decoration: none;
}

a:hover {
	text-decoratio: none;
	color: orange;
}

body {
	background: url("background_alt.png") right center fixed no-repeat;
}


#Siteimg {
	margin-right: 50px;
}

#Sitelink {
	margin-right: 50px;
}

.button {
	float: left;
	width: 200px;
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
}

.button p {
	background: #EEE;
	text-align: center;
	padding: 3px 0;
	font-heigth: 14px;
	margin-top: 15px;
	margin-right: 30px;
	margin-bottom: 15px;
	-margin-left: 25px;
}

</style>


</head>

<body>

<h1>
	Hey, wilkommen auf meiner FANTASTISCHEN
		<font size="3">
			(engl."awesome")
		</font>
	Homepage
</h1>


<p style="font-size: 18px; color: black">
	Ich habe FANTASTISCHE Auswahlmöglichkeiten für Sie.

	<br>

	Es sind FANTASTISCHE Seiten mit FANTASTISCHEN Inhalten.

	<br>
	<br>

	Bitte wählen Sie eine FANTASTISCHE Seite aus.
</p>


<button name="MeinPC" type="button" onclick="location='MeinPC.html'; ">
	<img src="NZXT_small.png" atl="MeinPC"> <br>
	FANTASTISCHER PC
</button>

<button name="Gästebuch" type="button" onclick="location='Gaestebuch.html'; ">
	<img src="Gaestebuch.png" alt="Gästebuch"> <br>
	FANTASTISCHES GÄSTEBUCH
</button>
<br>

<div class="button">
	<a href="MeinPC.html">
		<img src="NZXT_small.png" id="Siteimg" width="125px" style="margin-left: 25px; " alt="Mein PC">
		<p>
			FANTASTISCHER<br>PC
		</p>
	</a>
</div>

<div class="button">
	<a href="Gaestebuch.html">
		<img src="Gaestebuch.png" id="Siteimg" widht="210px" "alt="Gästebuch">
		<p>
			FANTASTISCHES<br>Gästebuch
		</p>
	</a>
</div>

<br>










<br>
<br>

Mehr kommt bald <img src="http://www.world-of-smilies.com/wos_computer/computer0.gif"><br>
Und immer schön FANTASTISCH bleiben.



</body>
</html>

**Krutius** · 08. 01. 2012, 16:08

auf die p-tags der texte:

HTML-Code:

margin-left:auto;
margin-right:auto;

**Larius** · 08. 01. 2012, 16:10

*hängt den Thread an seinen Träkker an und zieht ihn in den richtigen Bereich*

**M3DS-REAL** · 08. 01. 2012, 16:12

DANKE!!!
Ihr seid echt die Besten hier!

oh mh.
da wäre ich nicht drauf gekommen das es dahin gehört

**M3DS-REAL** · 08. 01. 2012, 16:18

mh ist es auch möglich nur den rechten kasten vom Gästebuch ein wenig nach unten zu bewegen? hätte gerne, dass er auf gleicher höhe mit dem anderen ist.

**Kugelfisch23** · 08. 01. 2012, 18:22

Das heisst, du möchtest die Inhalte deiner .button-div-Elemente an ihrer unteren Kante ausrichten? Das wäre z.B. durch eine fixe Höhenangabe für die .button-div-Elemente, eine position-Eigenschaft ungleich static (sinnvoll wäre relative) für dieselben und absolut positionierte Inhalte (position-Eigenschaft mit Wert absolute, bottom:0, left:0, right:0 - die Angaben beziehen sich auf das nächste übergeordnete Element, welches einen Containing Block etabliert, insbesondere auf ein Element mit einer position-Eigenschaft ungleich static) möglich.

Allerdings ist dein aktuelles Dokument in sofern unschön, als dass es aufgrund der fehlenden DOCTYPE-Deklaration sowohl im Quirks-Mode dargestellt wird - siehe http://board.gulli.com/thread/22294...-quirks-mode-/ - als auch nicht valide ist. Ausserdem setzt du br-Elemente wenig sinnvoll ein. Es würde sich sehr empfehlen, die Fehler mittels eines Validators wie z.B. Validome zu beheben. Insbesondere solltest du dich entscheiden, ob zu HTML oder XHTML nutzen möchtest - in HTML 4.01 ist die Kurznotation selbst-schliessender Tags (wie z.B. <link ... />) unzulässig (das End-Tag ist für link-Elemente jedoch verboten, d.h. <link ...> wäre korrekt), während das in XHTML zwingend vorgeschriebene xmlns-Attribut für das html-Element fehlt.

**M3DS-REAL** · 08. 01. 2012, 18:27

ok jetzt bin ich definitiv überfordert ich verstehe nunoch bahnhof.

**Kugelfisch23** · 08. 01. 2012, 18:50

Um ein Beispiel zur Lösung deines konkreten Problems zu nennen:

Code:

.button {
   position: relative;
   height: 220px;
}

.button a {
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}

Erklärungen dazu:
.button-Elemente werden mit einer fixen Höhe versehen, damit die Höhen aller .button-Elemente gleich gross ist (und die Inhalte in Folge am unteren Rand der Elemente platziert und damit ausgerichtet werden können). Ausserdem wird die position-Eigenschaft auf den Wert relative gesetzt, damit jedes .button-Element gemäss http://www.w3.org/TR/CSS21/visudet.h...-block-details einen Containing Block für untergeordnete Elemente etabliert.
Daraufhin werden die den .button-Elementen untergeordneten a-Elemente absolut (=relativ zum Containing Block, d.h. zu den übergeordneten .button-Elementen, vgl. http://www.w3.org/TR/CSS21/visuren.h...ely-positioned) positioniert. Dabei sorgt die Festlegung der left- und right-Eigenschaften dazu, dass die Breite festgelegt ist (sie entspricht der Breite des .button-Elements), die bottom-Eigenschaft dafür, dass die a-Elemente am unteren Rand der Button-Elemente platziert werden (d.h. die unteren Ränder des a- und des übergeordneten .button-Elements fallen zusammen).

Die Bedeutung des Quirks-Mode, weshalb deine Seite derart dargestellt wird und weshalb das wenig wünschenswert ist, ist in http://board.gulli.com/thread/22294...-quirks-mode-/ ausführlich erklärt. Ich kann dir sehr zur Lektüre dieses Threads (und zum Setzen einer passenden DOCTYPE-Deklaration) raten.

Ausserdem wäre eine Einführung in (X)HTML und CSS wohl sinnvoll, damit du solche und ähnliche Probleme zukünftig selbst lösen kannst. Ich kann dazu http://jendryschik.de/wsdev/einfuehrung/ empfehlen.