Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 19.11.2010, 13:10
purzel80 purzel80 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2010
Beiträge: 10
purzel80 befindet sich auf einem aufstrebenden Ast
Standard Anfänger braucht Hilfe - Vertikal zentrieren

Wahrscheinlich ein lästiges Thema. Ich hab jedoch schon (nach Forumsuche) etwas probiert und nicht hinbekommen.

Ich baue gerade eine Seite um. Ich habe mich der Masse gefügt und will nun die alten Framesets und Tabellen über Board werfen. Dafür lerne ich gerade CSS. Nun bin ich auf mein erstes Problem gestoßen und bräuchte eure Hilfe.

Folgendes:
Jam - Studio Veranstaltungstechnik Flensburg | Head
(Es handelt sich hier lediglich um eine Testseite. Die Container sollen natürlich später keine Rahmen haben).
Nun soll der Inhalt des zweiten (verschachtelten) Containers (oben rechts) horizontal und vertikal zentriert werden.

Vorher habe ich die Seite mit Frames und Tabellen aufgebaut:
siehe hier: Jam - Studio | Veranstaltungstechnik und Tonstudio Flensburg | Norddeutschland | Schleswig-Holstein
----------------------------------------------------------------------------------------------------------------------------------------
Hier erstmal der Quellcode (abgespeckt). Es gibt zudem noch eine ausgelagerte CSS-Seite. Ist für meine Frage aber wahrscheinlich uninteressant, da bisher nur die Schrift "Visitenkarte" damit formatiert wurde (nur Schrift, Größe und Schriftfarbe):

HTML-Code:
<link rel="stylesheet" type="text/css" href="../Style.css" />
<style type="text/css">
<!--
#container_top
{
width:970px; 
height:75px; 
margin: auto; 				/*Top-Container mittig ausrichtent*/
padding-left: 20px;			/*Abstand Links Container*/
padding-right: 20px;			/*Abstand Rechts Container*/
border:1px solid black;
}

#container_visit
{
width:210px;
height:50px;
float:right;
border:1px solid black;
}
-->
</head>

<body>
<div id="container_top">
<img src="graphics/logo.jpg" />
<div id="container_visit">
	<span class="StilTop" >Visitenkarte</span>&nbsp;
	<a href="Jam Studio vCard.vcf"><img src="graphics/vc.jpg" border="0" width="40"/></a>&nbsp;
	<a href="Jam Studio vCard.msg"><img src="graphics/vc.jpg" border="0" width="40"/></a>&nbsp;
	<a href="Jam Studio vCard.msg"><img src="graphics/vc.jpg" border="0" width="40"/></a>&nbsp;
	</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------
Folgendes habe ich schon versucht:
1.
HTML-Code:
#container_visit
{
...
display: table-cell;
vertical-align: middle; 
}
Das funktioniert zwar. Allerdings nur, wenn der Wert "float:right;" nicht gesetzt ist und ich weiß nicht, wie ich sonst das Element oben rechts positionieren könnte.

2.
HTML-Code:
<img src="graphics/vc.jpg"... align="middle" />
Das funktioniert zwar auch, aber erzielt auch nicht das gewünschte Ergebnis, da der IE und der FF den Wert unterschiedlich darstellen. Das gleiche passiert bei align="absmiddle".

3.
HTML-Code:
...padding-top:15px;
Da ich ja eine feste Höhe vergeben habe. Allerdings wird hier die Schrift nicht mittig bezüglich der Grafiken dargestellt.


Mit Tabellen konnte ich das Problem beheben, indem ich die Grafiken (rechts) und die Schrift ("Visitenkarte" links) in unterschiedliche Tabellen gesetzt und diese zentriert habe. Wie kann ich das ganze am besten in CSS umsetzen (ohne das der Quellcode verschachtelter und größer wird, als mit den Tabellen), denn gerade diese Vorteil verspreche ich mir von CSS?

Danke schonmal für eure Hilfe!

Geändert von purzel80 (19.11.2010 um 13:49 Uhr)
Mit Zitat antworten
Sponsored Links