|
|||
Bild horizontal und vertikal zentrieren
Hallo,
Ich möchte auch meine Homepage ohne Tabellen realisieren, nur hab ich noch ein Problem mit meiner vorgeschalteten Startseite: Dort habe ich ein Logo (alles mit Tabellen) horizontal und vertikal zentiert, welches ein Link zur eigentlichen Seite ist. Über dem Logo, also am oberen Bildschirmrand steht ein DAtum mit der letzten Aktualisierung und ganz unten ein Counter. Wie kann ich das ohne Tabellen schaffen? Ich hoffe, man kann sich das irgendwie vorstellen.. Hier nochmal kurz: oben: Aktualisierung, horizontal zentriert mitte: Logo, horizontal zentriert unten: Counter, horízontal zentriert |
Sponsored Links |
|
|||
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body { background-color: #FF9933; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.9em; overflow: auto; margin: 0px; padding: 0px; height: 100%; } #oben{ height: 10%; text-align: center; background-color: #FF0000; } #unten { height: 9.9%; /*IE BUG deshalb nicht auf 100% addiert, sonnst gibt es Scroll-leisten*/ text-align: center; background-color: #FF9999; } #mitte { height: 80%; /*width: 100%;*/ background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg); background-position: center center; background-repeat: no-repeat; } </style> </head> <body> <div id="oben">Aktualisierung</div> <div id="mitte">&</div> <div id="unten">Counter</div> </body></html> Die Prozentwerte mußt Du Dir natürlich anpassen. Der Trick ist das Du das Logo als Hintergrundbild nimmst.
__________________
</ulle> |
Sponsored Links |
|
|||
Code:
<div id="mitte" style="cursor: hand;" onclick="parent.location.href='http://www.w3c.org'">&</div> Ein wenig JavaScript
__________________
</ulle> |
|
|||
Das funktioniert zumindest im IE6.0
Den Code von Ulle leicht abgeändert (div-Mitte) in Anker-Tags gesetzt:
Das von Ulle beschriebene Leerzeichen brauche ich nicht. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body { background-color: #FF9933; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.9em; overflow: auto; margin: 0px; padding: 0px; height: 100%; } #oben{ height: 10%; text-align: center; background-color: #FF0000; } #unten { height: 9.9%; /*IE BUG deshalb nicht auf 100% addiert, sonnst gibt es Scroll-leisten*/ text-align: center; background-color: #FF9999; } #mitte { height: 80%; /*width: 100%;*/ background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg); background-position: center center; background-repeat: no-repeat; cursor: hand; } </style> </head> <body> <div id="oben">Aktualisierung</div> <div id="mitte"></div> <div id="unten">Counter</div> </body></html>
__________________
Kaum macht man\'s mal richtig, schon läuft\'s. |
|
|||
Ist das wirklich alles OK ?
Ich wollte meinen Beitrag gerade löschen, weil's bei mir mit einer sehr kleinen Hintergrundgrafik doch nicht läuft.
Das muß wohl an der Grafik gelegen haben, mit einer anderen kleinen Grafik läuft's.
__________________
Kaum macht man\'s mal richtig, schon läuft\'s. |
Sponsored Links |
|
|||
Was bringt es mir eigentlich für Vorteile, wenn ich zusätzlich zu den drei Div-Containern auch im Body-Bereich height:100% einstelle? Sehe da keine Vorteile!
Ach übrigens: bei mir erscheinen auch Scroll-Leisten, wenn ich nicht die Div-Container auf 100% addiere, habe das aber mit overflow:hidden gelöst. Gruß und Danke qwertz182 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 11:23 |
CSS-Seite horizontal und vertikal zentrieren! | Boof | CSS | 20 | 05.02.2010 13:23 |
Hintergrundbild vertikal UND horizontal zentrieren? | yggdrasil | CSS | 3 | 06.07.2008 11:19 |
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE | AndreasB | CSS | 11 | 13.03.2006 18:05 |
Bild horizontal und vertikal zentrieren | krassonkel | (X)HTML | 1 | 13.06.2004 22:45 |