zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden background-problem finde fehler nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.05.2008, 01:17
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 343
Holger (HMR) befindet sich auf einem aufstrebenden Ast
Standard 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>
Angehängte Grafiken
Dateityp: jpg IE.jpg (8,0 KB, 7x aufgerufen)
Dateityp: jpg OP.jpg (8,0 KB, 6x aufgerufen)
Dateityp: jpg FF.jpg (8,6 KB, 6x aufgerufen)

Geändert von Holger (HMR) (30.05.2008 um 14:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.05.2008, 13:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

CSS-Prolog aus der FAQ mal ausprobiert?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.05.2008, 13:32
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 343
Holger (HMR) befindet sich auf einem aufstrebenden Ast
Standard

Hallo cgdesign,

Zitat:
Zitat von cgdesign Beitrag anzeigen
CSS-Prolog aus der FAQ mal ausprobiert?
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)
Mit Zitat antworten
  #4 (permalink)  
Alt 30.05.2008, 15:36
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.11.2004
Beiträge: 343
Holger (HMR) befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:17 Uhr.