|
|||
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> <a href="Jam Studio vCard.vcf"><img src="graphics/vc.jpg" border="0" width="40"/></a> <a href="Jam Studio vCard.msg"><img src="graphics/vc.jpg" border="0" width="40"/></a> <a href="Jam Studio vCard.msg"><img src="graphics/vc.jpg" border="0" width="40"/></a> </div> </div> </body> </html> Folgendes habe ich schon versucht: 1. HTML-Code:
#container_visit { ... display: table-cell; vertical-align: middle; } 2. HTML-Code:
<img src="graphics/vc.jpg"... align="middle" />
3. HTML-Code:
...padding-top:15px; 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) |
Sponsored Links |
|
|||
hab folgendes versucht:
HTML-Code:
#container_visit { width:210px; height:50px; float:right; border:1px solid black; position: relative; } HTML-Code:
img { position: absolute; display: table-cell; vertical-align: middle; } HTML-Code:
#container_visit { display: table-cell; width:210px; height:50px; float:right; border:1px solid black; position: relative; } |
|
|||
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) |
|
|||
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; } Dank dir für deine Hilfe! |
|
||||
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 /> 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> 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; } Des weiteren sollten Bilder immer einen alternativ Text erhalten, falls die Grafik mal nicht angezeigt werden kann. Code:
a img { border:none; }
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
|
|||
Super, dass du mir beim optimieren hilfst (obwohl das Prob. "eigentlich" gelöst war)!
1. HTML-Code:
a img { border:none; } 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 |
|
||||
Zitat:
Ü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:
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 |
|
|||
Zitat:
Zitat:
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> </dd> ... </dl> also: HTML-Code:
.imgV1 { left: 70px; /* top: 10px; nicht mehr nötig*/ } |
Sponsored Links |
|
||||
Zitat:
Zitat:
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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |