Hintergrundgrafik verrutscht bei unterschiedlicher Bildschirmgröße/auflösung

[Black_Sunny]

Hallo,
ich habe ein Problem mit dem verrutschen.
Mein kompletter #hauptcontainer verrutscht immer.

Pasta Pasta

. . .

im css:
*{margin: 0px; padding: 0px;}
body{
font-family: „Calibri“,„Times new Roman“, „Galliard BT“, sans-serif;
font-size:15pt;
background-color:#181961;
background-image:url(„hintergrundsuess.png“);
background-repeat: repeat-y;
background-position:top center;
font-style:italic;
height:100%;}
#hauptcontainer {
width:675px;
margin:0px 180px 190px;}

ich zeig mal an einem Bild was ich meine:

so ist es in der Schule:
http://www.html.de/attachment.php?attachmentid=1962&d=1302620716&thumb=1

und zu Hause (mit einer anderen Bildschirmgröße) so:
http://www.html.de/attachment.php?attachmentid=1963&d=1302620750&thumb=1

hab schon versucht mit Prozenten was zu ändern, doch das funktioniert auch nicht wirklich.

[vitus37]

Hallo Black Sunny,

liege ich mit meiner Vermutung richtig, dass dein Heimbildschirm die größere Ausflösung hat?

Dein #hauptcontainer wird nicht wirklich ‚zentriert‘, sondern eher durch eine pixelgenaue Positionierung (mit margin) in die Mitte gesetzt.

Ändere das margin von #hauptcontainer um in

margin:0px auto 190px;

Das auto bewirkt hier einen gleichen Abstand links und rechts vom Element.

Gruß

[Black_Sunny]

ok das macht sinn, aber jetzt ist es alles in die andere Richtung gerutscht:
[ATTACH]1966.vB[/ATTACH]

[Arcsinh]

Vllt. solltest du dem keine Breite geben.

[Black_Sunny]

also ohne width geht es nicht. da rückt es alles an den linken rand. komischer weise war aber dort noch bissel platz bis zum fensterende. ich hab jetzt die breite auf 719px und jetzt scheint es zu gehen. ich habe es mal mit der auflösung 1024x600px und 800x600px versucht. ist alles an ort und stelle.
ist das sinnvoll, dass so zu prüfen?

[Arcsinh]

Wenn alles klappt, war es wohl sinnvoll.

[Black_Sunny]

gut also mittig ist es jetzt überall. danke dafür!

mein anderes problem ist:
im IE funktioniert alles, doch im FF und GC ist die seite total verschoben. also der inhalt:
[ATTACH]1967.vB[/ATTACH]

ich hab mal gelesen, dass es an dem doctype liegen soll. weiß aber ni was ich sonst für einen rein machen soll.

[Elroy]

Hallo.

Hast du den Inhalt mit margin und padding positioniert oder wie hast du das gemacht?
Wir brauchen schon deinen kompletten Code wenn wir dir helfen sollen.

Gruss
Elroy

[threadi]

Oder einen Link zur betreffenden Seite

[Black_Sunny]

das ist meien komplette css:
*{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
body{
font-family: „Calibri“,„Times new Roman“, „Galliard BT“, sans-serif;
font-size:15pt;
background-color:#181961;
background-image:url(„hintergrundsuess.png“);
background-repeat: repeat-y;
background-position:top center;
font-style:italic;
height:100%;}
#hauptcontainer {
width:719px;
margin:0px auto 190px;}
#kopf {
padding:0px 0px 0px 28px;}
#navigation {
margin-top: -7px;
margin-bottom: -1px;
padding:2px 0px 0px 28px;
margin-left: 0px;
width:675px;}
#home a {
background-image: url(Home.png);
width: 110px;
height: 49px;
display: block;
float: left;}
#home a:hover {
background-image: url(Homehover.png);
width: 110px;
height: 49px;
display: block;}
#ueberuns a {
background-image: url(ueberuns.png);
width: 150px;
height: 49px;
display: block;
float: left;}
#ueberuns a:hover {
background-image: url(ueberunshover.png);
width: 150px;
height: 49px;
display: block;
float: left;}
#speisen a {
background-image: url(speisen.png);
width: 252px;
height: 49px;
display: block;
float: left;}
#speisen a:hover {
background-image: url(speisenhover.png);
width: 252px;
height: 49px;
display: block;}
#location a {
background-image: url(location.png);
width: 155px;
height: 49px;
display: block;
float: left;}
#location a:hover {
background-image: url(locationhover.png);
width: 155px;
height: 49px;
display: block;}
#inhalt{
width:675px;
margin:0px 0px 0px 45px;}
#inhaltlinks {
width:447px;
float:left;
text-align:center;
color:#13144d;
}
table {
margin:0px 0px 0px 0px;
float:left;
width:447px;}
.ueberschrift {
padding:10px 0px 0px 0px;
font-size:40px;
line-height:2;}
.inhalt {
padding:10px 0px 0px 0px;}
#bilder {
padding:40px 0px 0px 5px;
width:199px;
background-image:url(„trennlinie.png“);
background-repeat: repeat-y;
}

[mermshaus]

Das sind die BBCode-Tags zur Formatierung von Quellcode:

[noparse]…
[html]…[/html]
[php]…[/php][/noparse]

[Flemli200]

Ich benutz meistens den hier:

der lässt auch fixierungen und transparente bzw. teilweise transparente elemente im IE zu!

[Black_Sunny]

Ist leider immernoch der gleiche Fehler da.

@ mermshaus:
Ich kenne die ganzen Schreibweisen in den Foren nicht.
In dem Fall wäre es wahrscheinlich , aber geholfen hast du mir damit nicht!

[mermshaus]

Ich kenne die ganzen Schreibweisen in den Foren nicht.

Deshalb nenne ich sie dir.

aber geholfen hast du mir damit nicht!

Ich weiß. Aber du hast auch noch immer nichts gepostet, das es mir/uns wirklich gestattet hätte, dir zu helfen.

Vermutlich kann man sich aus den CSS-Regeln irgendwie aus den Fingern saugen, wie die passende HTML-Struktur dazu aussehen könnte und weshalb es unter manchen Umständen einen Darstellungsfehler gibt. (Die Vorgehensweise scheint ja zu Beginn dieses Threads mit Biegen und Brechen geklappt zu haben.)

Aber einfacher wäre es, wenn du den vollständigen HTML-Code und CSS-Code posten würdest oder eben einen Link zur Seite.

Dass das mit dem Upload aus Gründen des Copyrights schwierig sein kann, verstehe ich. Du könntest natürlich die betroffenen Bilder für die Demoseite durch andere mit gleichen Abmessungen austauschen, aber sowas verlange ich gar nicht.

Es ist immer gut, den Aufwand für die Antwortenden möglichst zu minimieren. Das braucht natürlich auch etwas Erfahrung, um zu wissen, was relevant ist.

[Black_Sunny]

na gut, dann werde ich hier mal noch mein ganzes html rein machen. ich dachte das css is ausreichend, weil es ja anscheinend weder ein fehler in der breite oder ein anderer ist.
aber hier ist der andere teil:

Pasta Pasta

Herzlich willkommen bei:

TEXT

[mermshaus]

Ich kann im Grunde auch nur raten, wie es gemeint ist/aussehen soll, da man ohne die Grafiken praktisch gar nichts auf dem Bildschirm sieht.

Habe mal versucht, dir die einzelnen Blöcke etwas hinzubiegen.

[html]

Pasta Pasta

        <div id="kopf">
            <img src="kopf.png" width="667" height="201" alt="" />
        </div>

        <div id="navigation">
            <div id="home"><a href="home.html"></a></div>
            <div id="ueberuns"><a href="ueberuns.html"></a></div>
            <div id="speisen"><a href="speisen.html"></a></div>
            <div id="location"><a href="location.html"></a></div>
        </div>

        <div id="inhalt">
            <div id="inhaltlinks">
                <table>
                    <tr>
                        <td class="ueberschrift">
                            Herzlich willkommen bei:
                            <img src="logo.png" alt="" />
                        </td>
                    </tr>
                    <tr>
                        <td class="inhalt">
                            TEXT
                        </td>
                    </tr>
                </table>
            </div>
            <div id="bilder">
                <img src="tische.jpg" width="196" height="136" alt="" />
                <img src="teller.png" width="196" height="144" alt="" />
                <img src="bar.jpg" width="196" height="136" alt="" />
            </div>
            <div style="clear: both;"></div>
        </div>

    </div>
</body>

[/html]

[code]* {
margin: 0;
padding: 0;
}

a {
background: red;
}

body{
font-family: „Calibri“,„Times new Roman“, „Galliard BT“, sans-serif;
font-size:15pt;
background-color:#181961;
background-image:url(„hintergrundsuess.png“);
background-repeat: repeat-y;
background-position:top center;
font-style:italic;
height:100%;
}

/* Wrapper */

#hauptcontainer {
width: 720px;
margin: 0px auto 190px;
background: peru;
}

/* Header */

#kopf {
background: pink;
height: 30px;
}

/* Navigation */

#navigation div {
float: left;
}

#navigation div a {
display: block;
width: 180px;
height: 49px;
}

#home a {
background-image: url(Home.png);
}
#home a:hover {
background-image: url(Homehover.png);
}
#ueberuns a {
background-image: url(ueberuns.png);
}
#ueberuns a:hover {
background-image: url(ueberunshover.png);
}
#speisen a {
background-image: url(speisen.png);
}
#speisen a:hover {
background-image: url(speisenhover.png);
}
#location a {
background-image: url(location.png);
}
#location a:hover {
background-image: url(locationhover.png);
}

/* Content */

#inhalt{
width:675px;
margin:0px 0px 0px 45px;
background: white;
}
#inhaltlinks {
width:447px;
float:left;
text-align:center;
color:#13144d;
}
table {
margin:0px 0px 0px 0px;
background: blue;
float:left;
width:447px;
}
.ueberschrift {
padding:10px 0px 0px 0px;
font-size:40px;
line-height:2;
}
.inhalt {
padding:10px 0px 0px 0px;
}
#bilder {
padding:40px 0px 0px 5px;
width:199px;
background-image:url(„trennlinie.png“);
background-repeat: repeat-y;
background-color: green;
float: right;
min-height: 1000px;
}[/code]

Quellcode im Forum kannst du übrigens mit diesen BBCode-Tags formatieren:

[noparse]…
[html]…[/html]
[php]…[/php][/noparse]