XHTMLforum - Anfänger braucht Hilfe

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Anfänger braucht Hilfe - Vertikal zentrieren (http://xhtmlforum.de/showthread.php?t=63019)

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. :happy: 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!

#container_visit relativ und die Bilder absolut positionieren

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. :(

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;
}

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"/>

:D

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! :thumbsup:

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". ;)

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 :D

Zitat:

Zitat von purzel80 (Beitrag 480362)

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 480362)

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 480362)

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.

Zitat:

Zitat von ArcVieh (Beitrag 480363)

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 480363)

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*/

}

Zitat:

Zitat von purzel80 (Beitrag 480372)

(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 480372)

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.

Ok.
1. Probiert! :arrowr: Funktioniert! :check:
2. Genau gelesen :coffee:! :arrowr: und verstanden (warum es funktioniert)!

Danke Dir für Deine gute Hilfe. (:thumbsup:)