|
|||
Bild zentrieren
Hallo allerseits
Ich habe eine Klasse, welche ich dem img-Tag zuweise: Code:
[img]../../images/gallery/fz_ch001.jpg[/img] Code:
.img_gall {border:10px double #666666;} Ich habe auch dran gedacht, einen zentrierten div-Container zu definieren und das Bild da rein zu tun . Aber das klappt irgendwie auch nicht, oder meine CSS-Kentnisse reichen noch nicht aus. Ach ja: Ich möchte - wenn möglich - keine Tabelle benützen. Mann soll ja sowieso langsam nur noch CSS für Positionierungen verwenden. Richtig? Vielen Dank! Roland Portmann |
Sponsored Links |
|
|||
Zitat:
Tabellen nur da wo Tabellen sind. Sonst würde die Teile ja auch Rasterschiebespalten und nicht Tabellen heißen. Leider gibt es im CSS noch Probleme mit vertical-align, da geht nicht so viel wie gedacht. Aber das Thema wurde ja schon ausgiebig diskutiert [such-funktion]. Um innerhalb eines Elementes ein Cild-Element horizental zu zentrieren bietet sich [text-align: center;] an.
__________________
</ulle> |
Sponsored Links |
|
|||
Hallo
Zitat:
Zitat:
Werde es weiterhin so lösen (andere Vorschläge jederzeit willkommen!): Code:
<body> <center> <table border="0" height="100%"> <tr> <td valign="middle" align="center"> [img]image.jpg[/img] </td> </tr> </table> </center> </body> Roland |
|
|||
Halt...stop....warte
Es gibt noch eine sehr gute Möglichkeit. Wenn man ein Bild innerhalb eines Containers (auch ein BODY ist ja ein Container) ein Bild zentriert setzen möchte: Einfach das Image in den Hintergrund, und mit background-position arbeiten. Ich habe mal einen Workaround dazu gemacht. 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 { /*background-color: #AAAAAA;*/ font-size: 0.8em; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; } body { background-color: #6600EE; background-attachment: fixed; background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg); background-position: right; background-repeat: no-repeat; margin: 0px; padding: 5px 5px 5px 5px; } b { color: #FFFF00; background-color: #666666; font-weight: bold; padding-left: 3px; padding-right: 3px; } div { float: left; width: 250px; height: 200px; margin: 5px; padding: 5px; background-color: #0099EE; background-image: url(file:///C|/WINDOWS/Help/Tours/htmlTour/best_road.jpg); } .top { background-position: top; background-repeat: no-repeat; } .bottom { background-position: bottom; background-repeat: no-repeat; } .left { background-position: left; background-repeat: no-repeat; } .right { background-position: right; background-repeat: no-repeat; } .center { background-position: center; background-repeat: no-repeat; } .righttop{ background-position: right top; background-repeat: no-repeat; } .lefttopy{ background-position: left top; background-repeat: repeat-y; } .lefttopx{ background-position: left top; background-repeat: repeat-x; } .centerx{ background-position: center; background-repeat: repeat-x; } .centery{ background-position: center; background-repeat: repeat-y; } .position{ background-position: 90% 95%; background-repeat: no-repeat; } .positiony{ background-position: 9% 0%; background-repeat: repeat-y; } .positionx{ background-position: 0px 12px; background-repeat: repeat-x; } --> </style> </head> <body> background-attachment: fixed; nur m&glich wenn HTML keine background-DEFINITIONEN</p> <div>background-image: url();</div> <div class="top">background-position: top; background-repeat: no-repeat;</div> <div class="bottom">background-position: bottom; background-repeat: no-repeat;</div> <div class="left">background-position: left; background-repeat: no-repeat;</div> <div class="right">background-position: right; background-repeat: no-repeat;</div> <div class="center">background-position: center; background-repeat: no-repeat;</div> <div class="righttop">background-position: right top; background-repeat: no-repeat;</div> <div class="lefttopy">background-position: left top; background-repeat: repeat-y;</div> <div class="lefttopx">background-position: left top; background-repeat: repeat-x;</div> <div class="centerx">background-position: center; background-repeat: repeat-x;</div> <div class="centery">background-position: center; background-repeat: repeat-y;</div> <div class="position">background-position: 90% 95%; background-repeat: no-repeat;</div> <div class="positiony">background-position: 9% 0%; background-repeat: repeat-y;</div> <div class="positionx">background-position: 0px 12px; background-repeat: repeat-x;</div> </body> </html> url(images/xy.gif) oder was auch immer.........
__________________
</ulle> |
|
|||
Hi Ulle
Hmmm... werde Dein Vorschlag einmal versuchen umzusetzen. Habe den Code nur schnell überflogen und habe da nicht alles auf Anhieb verstanden. Melde mich wieder bei Dir. Als Hintergrundbild tönt aber schon mal recht interessant. Danke, Roland |
|
|||
Nimm einfach den gesamten CODE und kopiere ihn mal in eine eigene Datei, falls Du XP hast siehst Du auch gleich wie es funktioniert.
XP -> nur wegen dem URL für das Bild [da diese URL absolute angegeben ist]
__________________
</ulle> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
css - Bild im <div> zentrieren ... | gerabel | CSS | 7 | 19.09.2018 10:29 |
zu breites Bild zentrieren ohne Scrollbalken | deelite | CSS | 1 | 25.04.2013 21:41 |
Bild in div vertikal zentrieren. | serum | CSS | 2 | 01.02.2013 12:11 |
Bild in der Navigationsleiste zentrieren | sumica | CSS | 8 | 19.06.2009 12:53 |
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE | AndreasB | CSS | 11 | 13.03.2006 18:05 |