zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anfänger braucht Hilfe - Vertikal zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2010, 13:10
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
  #2 (permalink)  
Alt 19.11.2010, 14:33
Benutzer
neuer user
 
Registriert seit: 16.07.2010
Beiträge: 70
micronix befindet sich auf einem aufstrebenden Ast
Standard

#container_visit relativ und die Bilder absolut positionieren
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.11.2010, 14:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2010
Beiträge: 10
purzel80 befindet sich auf einem aufstrebenden Ast
Standard

hab folgendes versucht:

HTML-Code:
#container_visit
{
width:210px;
height:50px;
float:right;
border:1px solid black;
position: relative;
}
und
HTML-Code:
img
{
position: absolute; 
display: table-cell;
vertical-align: middle;
}
bzw.
HTML-Code:
#container_visit
{
display: table-cell;
width:210px;
height:50px;
float:right;
border:1px solid black;
position: relative;
}
Das hat leider nicht zum gewünschten Erfolg geführt. Welchen Fehler hab ich gemacht? Positioniere ich die Bilder absolut, werden Sie übereinander gelagert angzeigt. Leider jedoch nicht vertikal zentriert. Mit display: table-cell; und vertical-align: middle; im img - Tag werden die Bilder in der nächsten Zeile (Zeilenumbruch) dargestellt.
Mit Zitat antworten
  #4 (permalink)  
Alt 19.11.2010, 14:56
Benutzer
neuer user
 
Registriert seit: 16.07.2010
Beiträge: 70
micronix befindet sich auf einem aufstrebenden Ast
Standard

alles was du für img benötigst ist folgendes:

img {
position: absolute;
top: 10px; (nur ein Beispielwert)
}

Du musst wohl mit Klassen arbeiten und den Bildern noch die Eigenschaft "left:" geben sodass jedes Bild den passenden Abstand hat. Wenn du ein Element absolut positioniert, positioniert es sich im Verhältnis zum umliegenden relativ positionieren Element und beginnt direkt oben links, d.h. bei 0 0.

img1 {
left: 10px;
}

img2 {
left: 30px;
}

img3 {
left: 50px;
}

Geändert von micronix (19.11.2010 um 15:02 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 19.11.2010, 15:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2010
Beiträge: 10
purzel80 befindet sich auf einem aufstrebenden Ast
Standard

super!!! Vielen Dank. Das hat schonmal wie folgt funktioniert:
HTML-Code:
img
{
position: absolute;       /*da die andere Grafik keinen Abstand zum oberen Rand haben soll hab ich auf top verzichtet*/
}
HTML-Code:
.img1        /*Bsp.: für Bild1*/
{
left: 70px;
top: 10px;
}
HTML-Code:
<img src="graphics/vc.jpg" border="0" width="40" name="Image1" class="img1"/>


Den Text hab ich in gleicher Weise formatiert:
HTML-Code:
span
{
position: absolute; 
top: 15px;
}
Sollte bei diesem Beispiel funktionieren, da es sich ja um den einzigen Text handelt. Wenn ich den Header später in eine Seite einbinde (include), werde ich wahrscheinlich hier auch eine Klasse verwenden müssen.

Dank dir für deine Hilfe!
Mit Zitat antworten
  #6 (permalink)  
Alt 19.11.2010, 16:09
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Du brauchst dafür keine abs. Positionierung.
Auch brauch #container_visit keine Breite - da bei float shrink-to-fit gilt.

Allgemein solltest Du deinen Code erst einmal auf Fehler überprüfen. Deine img-Tags sind nicht abschließend und du verwendet uA border="0".

Code:
<img  />
Für deine Vistenkarten-Geschichte eignet sich IMHO eine Definitionsliste:
HTML-Code:
<dl id="container_visit">
	<dt>Visitenkarte</dt>
	<dd>
		<a href="http://www.jam-studio.de/test/top/Jam%20Studio%20vCard.vcf" onmouseover="Image1.src='graphics/vc_over.jpg';" onmouseout="Image1.src='graphics/vc.jpg';">
			<img src="top-Dateien/vc.jpg" name="Image1" width="40" />
		</a>
	</dd>
	<dd>
		<a href="http://www.jam-studio.de/test/top/Jam%20Studio%20vCard.msg" onmouseover="Image2.src='graphics/vc_over.jpg';" onmouseout="Image2.src='graphics/vc.jpg';">
			<img src="top-Dateien/vc.jpg" name="Image2" width="40" />
		</a>
	</dd>
	<dd>
		<a href="http://www.jam-studio.de/test/top/Jam%20Studio%20vCard.msg" onmouseover="Image3.src='graphics/vc_over.jpg';" onmouseout="Image3.src='graphics/vc.jpg';">
			<img src="top-Dateien/vc.jpg" name="Image3" width="40" />
		</a>
	</dd>
</dl>
So sparst Du dir erst einmal das div, die einzelnen Image-Klassen und Du hast genug Elemente zum formatieren. Zum Beispiel so:
Code:
#container_visit, #container_visit dt, #container_visit dd {
	padding:0;
	margin:0;
}
#container_visit {
	float:right;
	height:50px;
	padding:15px 0 0 0;
}
#container_visit dt, #container_visit dd {
	float:left;
	padding:0 3px;
}

#container_visit dt {
	font-family: Arial;
	font-size: 12px;
	color: #999999;
	line-height:25px;
}
/**
 * Easy Clearing
 * http://www.positioniseverything.net/easyclearing.html
 */
#container_visit:after {
	content:".";
	height:0;
	clear:both;
	visibility:hidden;
	display:block;
}
Dein eigentliches Problem löst hier die Eigenschaft line-height:25px;.
Des weiteren sollten Bilder immer einen alternativ Text erhalten, falls die Grafik mal nicht angezeigt werden kann.

Code:
a img {
            border:none;
}
Und das erspart dir das Attribut border="0".
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #7 (permalink)  
Alt 19.11.2010, 16:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2010
Beiträge: 10
purzel80 befindet sich auf einem aufstrebenden Ast
Standard

Super, dass du mir beim optimieren hilfst (obwohl das Prob. "eigentlich" gelöst war)!
1.
HTML-Code:
a img {
            border:none;
}
So einfach und doch so genial! .
2.
Der img - Tag ist eigentlich geschlossen?... d.h. <img ... />! Vielleicht hab ich was übersehen.
3.
Da ich ja gerade mit CSS anfange, waren mir Definitionslisten noch nicht bekannt. Danke für den guten Tipp, den mein 1. Ziel ist ja Quelltext zu sparen. Ich werde das gleich mal ausprobieren und mich in das Thema einlesen.

Danke dir
Mit Zitat antworten
  #8 (permalink)  
Alt 19.11.2010, 17:34
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von purzel80 Beitrag anzeigen
Super, dass du mir beim optimieren hilfst (obwohl das Prob. "eigentlich" gelöst war)!
Nur, auf welche Art?
Überleg mal, was für einen Aufwand Du gehabt hättest, wenn der Text auf mal kürzer wird? Also dir "Visitenkarte" nicht mehr zusagt und Du da lieber "vCard" stehen haben willst?
Was ist, wenn noch eine weitere vCard hinzukommt oder gar eine verschwindet?

Du müsstest in der CSS immer alles nachregeln (wegen der abs. pos.).

Zitat:
Zitat von purzel80 Beitrag anzeigen
Der img - Tag ist eigentlich geschlossen?... d.h. <img ... />! Vielleicht hab ich was übersehen.
Hm, kann auch sein, dass der Fehler bei mir lag (hatte die Webseite nur kurz abgespeichert).
Zitat:
Zitat von purzel80 Beitrag anzeigen
Da ich ja gerade mit CSS anfange, waren mir Definitionslisten noch nicht bekannt. Danke für den guten Tipp, den mein 1. Ziel ist ja Quelltext zu sparen. Ich werde das gleich mal ausprobieren und mich in das Thema einlesen.
Die Definitionsliste hat ja erst einmal nichts mit CSS zu tun.
Hier wäre eine Elementenliste.

Einige davon sollte man aber nicht nutzen, hier findest Du den Grund.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #9 (permalink)  
Alt 19.11.2010, 18:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2010
Beiträge: 10
purzel80 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ArcVieh Beitrag anzeigen
Nur, auf welche Art?
Überleg mal, was für einen Aufwand Du gehabt hättest, wenn der Text auf mal kürzer wird? Also dir "Visitenkarte" nicht mehr zusagt und Du da lieber "vCard" stehen haben willst?
Was ist, wenn noch eine weitere vCard hinzukommt oder gar eine verschwindet?
Wohl wahr. Auch wenn das in diesem Beispiel "wahrscheinlich" nicht vorkommen wird, aber für weitere Arbeiten sehr interessant ist.

Zitat:
Zitat von ArcVieh Beitrag anzeigen
Die Definitionsliste hat ja erst einmal nichts mit CSS zu tun.
Hier wäre eine Elementenliste.
Einige davon sollte man aber nicht nutzen, hier findest Du den Grund.
Ok. (Mit Definitionslisten habe ich schon lange nicht mehr bewußt gearbeitet, auch wenn sie wohl häufig verwendet werden). Hatte mich gerade nochmal belesen (mit aha Effekt). Wäre aber nicht auf die Idee gekommen, diese mit CSS zu formatieren.

Noch eine letzte Frage:
wohin mit dem Abstand der Bilder (left: ) der ja bei jedem Bild unterschiedlich ist?

Aktuelle Code:
Code:
#container_visit
{
float:right;
width:210px;
height:50px;
position: relative;
}

#container_visit dd 
{
position: absolute; 
top: 10px;
}

#container_visit dt 
{
position: absolute; 
top: 15px;
}
....
Code:
<dl id="container_visit">
<dt>Visitenkarte</dt>
<dd>
<a href="Jam Studio vCard.vcf">
<img src="graphics/vc.jpg" width="40" name="Image1" /></a>&nbsp;
</dd>
...
</dl>
Heißt das, dass ich für den linken Abstand der Bilder die einzelnen img - Tag stehen lassen muss?

also:
HTML-Code:
.imgV1 
{
left: 70px;                           /* top: 10px; nicht mehr nötig*/
}
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.11.2010, 18:23
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von purzel80 Beitrag anzeigen
(Mit Definitionslisten habe ich schon lange nicht mehr bewußt gearbeitet, auch wenn sie wohl häufig verwendet werden).
Wenn sie sinnvoll sind, benutzt man sie auch.

Zitat:
Zitat von purzel80 Beitrag anzeigen
Noch eine letzte Frage:
wohin mit dem Abstand der Bilder (left: ) der ja bei jedem Bild unterschiedlich ist?
Den brauchst Du nicht mehr.
Kopiere meinen Code mal in eine eigenständige HTML Datei und teste es aus.

Die dd-Elemente sind so groß, wie Ihr Inhalt und legen sich durch float nebeneinander. Damit es nicht so gequetscht ausschaut, habe ich in meinem Beispiel noch einen right/left Innenabstand von 3px hinzugefügt.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS-Seite horizontal und vertikal zentrieren! Boof CSS 20 05.02.2010 13:23
Vertikal zentrieren rusty CSS 13 08.04.2009 23:54
Hintergrundbild vertikal UND horizontal zentrieren? yggdrasil CSS 3 06.07.2008 11:19
H1 vertikal zentrieren in Blockelement vertex CSS 4 09.08.2006 13:34
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE AndreasB CSS 11 13.03.2006 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:53 Uhr.