|
|||
background-problem finde fehler nicht
hallo zusammen,
ich habe ein kleines Problem mit verschachtelten Container für einen Backgroundrahmen um ein Image. ''überarbeitet !'' im ie sieht richtig aus im opera und FF gibt es zwischen den oberen Containern und den mittleren Containern einen Abstand. FF.jpg Bilder siehe Anlage. Was mache ich falsch?? Ich hoffe, es hat jemand Lust, sich das mal anzuschauen. Vielen Dank schon mal im Voraus. Prinzip: <div eckelinksoben></div><div mitteoben></div><div eckerechtsoben> <div rahmenlinks><div mitte><img src></div><div rahmenrechts> <div eckelinksunten></div><div mitteunten></div><div eckerechtsunten></div> die abmessungen der backgriundimages: ecke links oben: 13 x 15 balken oben mitte : 86 x 11 ecke rechts oben : 13 x 15 balken links: 11 x 81 img : 77 x 300 balken rechts: 11 x 81 ecke links unten: 14 x 17 balken unten: 91 x 10 ecke rechts unten: 14 x 16 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" xml:lang="de" lang="de"> <head> <title>Rahmen Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- *{ margin:0; padding:0; } img{ border:none; } body{ text-align:center; } .main{ margin:0 auto; width:60%; } .detailimg{ float:left; margin-right:2em; } .detailimg img{ float:left; } .detailimg a{ float:left; } .raelo{ width:13px; height:15px; background-image:URL(images/bg/ecke_l_o.jpg); background-repeat:no-repeat; background-position:bottom; float:left; } .ramo{ background-image:URL(images/bg/balken_hor.jpg); background-repeat:repeat-x; background-position:bottom; float:left; height:15px; } .raero{ width:13px; height:15px; background-image:URL(images/bg/ecke_r_o.jpg); background-repeat:no-repeat; background-position:bottom; float:left; } .rali{ background-image:URL(images/bg/balken_ver.jpg); background-repeat:repeat-y; background-position:right; float:left; width:14px; } .rami{ float:left; } .rare{ background-image:URL(images/bg/balken_ver_r.jpg); background-repeat:repeat-y; background-position:left; float:left; width:14px; } .raelu{ width:14px; height:17px; background-image:URL(images/bg/ecke_l_u.jpg); background-repeat:no-repeat; background-position:top; float:left; } .ramu{ background-image:URL(images/bg/balken_hor_u.jpg); background-repeat:repeat-x; background-position:top; float:left; height:11px; } .raeru{ width:14px; height:16px; background-image:URL(images/bg/ecke_r_u.jpg); background-repeat:no-repeat; background-position:top; float:left; } .cl{ clear:both; } //--> </style> </head> <body> <div class='main'> <div class='detailimg'> <div class='raelo'></div> <div class='ramo' style='width:77px;'></div> <div class='raero'></div> <br class='cl'/> <div class='rali' style='height:300px;'></div> <div class='rami' style='height:300px; width:77px;'> <a href='http://www.....jpg' title='nnn' > <img src='http://www.....jpg' alt='nnn' style='width:77px;height:300px;' /> </a> </div> <div class='rare' style='height:300px;'></div> <br class='cl' /> <div class='raelu'></div> <div class='ramu' style='width:77px;'></div> <div class='raeru'></div> <br class='cl' /> </div> </div> </body> </html> Geändert von Holger (HMR) (30.05.2008 um 14:31 Uhr) |
Sponsored Links |
|
|||
Hallo cgdesign,
vielen dank erstmal für den Hinweis. Ich habe mir die FAQs also noch mal durchgesehen. Allerdings finde ich da keinen Beitrag, den ich auf mein Problem anwenden kann. Das einzige, was der Sache nahe kommt, ist 'unvollständiges clearen'. Das müsste aber bei mir OK sein. <br class='cl'/> -- .cl{clear:both;} ODAAHH??? UPS! vergessen, im CSS steht voran *{margin:0;padding:0;} Habe eine komplette, überarbeitet version oben eingestellt. Geändert von Holger (HMR) (30.05.2008 um 14:32 Uhr) |
|
|||
Problem gelöst
Problem gelöst,
den Fehler habe ich allerdings nicht verstanden. habe den Rahmencontainern alle die gleichen Größen verpasst, mit Ausnahme der Werte, die image-abhängig sind. Und die Position-angaben für die background-images geändert: background-posititon: left bottom; usw. nun funktioniert es. Bis auf einen Pix, der container mitte oben muß einen pix kleiner sein, als die breite der Container mitte-mitte und mitte-unten warum ?? -> Keine Ahnung... Vielen Dank allen für das Lesen und weiterhin viel Spaß--- Gruß Holger Lösung: 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" xml:lang="de" lang="de"> <head> <title>Rahmen Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ text-align:center; } .main{ margin:0 auto; width:60%; } .detailimg{ float:left; } .lo{ float:left; width:20px; height:20px; background-image:URL(images/bg/ecke_l_o.jpg); background-repeat:no-repeat; background-position:bottom right; } .mo{ float:left; height:20px; background-image:URL(images/bg/balken_hor.jpg); background-repeat:repeat-x; background-position:bottom; } .ro{ float:left; width:20px; height:20px; background-image:URL(images/bg/ecke_r_o.jpg); background-repeat:no-repeat; background-position:bottom left; } .rali{ float:left; width:20px; background-image:URL(images/bg/balken_ver.jpg); background-repeat:repeat-y; background-position:right; } .rami{ float:left; } .rare{ float:left; width:20px; background-image:URL(images/bg/balken_ver_r.jpg); background-repeat:repeat-y; background-position:left; } .lu{ float:left; width:20px; height:20px; background-image:URL(images/bg/ecke_l_u.jpg); background-repeat:no-repeat; background-position:top right; } .mu{ float:left; height:20px; background-image:URL(images/bg/balken_hor_u.jpg); background-repeat:repeat-x; background-position:top; } .ru{ float:left; width:20px; height:20px; background-image:URL(images/bg/ecke_r_u.jpg); background-repeat:no-repeat; background-position:top left; } .cl{ clear:both; } //--> </style> </head> <body> <div class='main'> <div class='detailimg'> <div class='lo'></div> <div class='mo' style='width:76px;'></div> <div class='ro'></div> <br class='cl' /> <div class='rali' style='height:300px;' ></div> <div class='rami' style='height:300px;width:77px;'> </div> <div class='rare' style='height:300px;'></div> <br class='cl' /> <div class='lu'></div> <div class='mu' style='width:77px;'></div> <div class='ru'></div> <br class='cl' /> </div> <br class='cl' /> </div> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Inline Listenelement wird nicht richtig im background befüllt | SteveB | CSS | 3 | 28.04.2011 21:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
Grafik in ein Template als Hintergrund einbinden. | monsun | CSS | 0 | 30.06.2008 13:58 |
Probleme mit dem Border im IE6 | bullseye | CSS | 9 | 30.10.2007 17:21 |
position:fixed löscht background-color des Container | alivecc | CSS | 9 | 25.10.2007 14:25 |