• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

B

Black Sunny

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

<!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>Pasta Pasta</title>
<meta name="author" content="tsuess" />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="slimbox-2.04/js/slimbox2.js"></script>
<link rel="stylesheet" href="slimbox-2.04/css/slimbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="format.css" media="screen"/>
</head>
<body>
<div id="hauptcontainer">
<div id="kopf">
<img src="kopf.png" width="667" height="201" border="0" alt="">

</div>
<div id="navigation">
.
.
.

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:


und zu Hause (mit einer anderen Bildschirmgröße) so:


hab schon versucht mit Prozenten was zu ändern, doch das funktioniert auch nicht wirklich.
 
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
Code: 
margin:0px auto 190px;
Das auto bewirkt hier einen gleichen Abstand links und rechts vom Element.

Gruß
 
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?
 
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:
homepage.jpg

ich hab mal gelesen, dass es an dem doctype liegen soll. weiß aber ni was ich sonst für einen rein machen soll.
 
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
 
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;
}
 
Ich benutz meistens den hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

der lässt auch fixierungen und transparente bzw. teilweise transparente elemente im IE zu!
 
Ist leider immernoch der gleiche Fehler da.

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

Deshalb nenne ich sie dir.

aber geholfen hast du mir damit nicht!
Zum Vergrößern anklicken....

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.
 
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:

<!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>Pasta Pasta</title>
<meta name="author" content="tsuess" />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="slimbox-2.04/js/slimbox2.js"></script>
<link rel="stylesheet" href="slimbox-2.04/css/slimbox2.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="format.css" media="screen"/>
</head>
<body>
<div id="hauptcontainer">
<div id="kopf">
<img src="kopf.png" width="667" height="201" border="0" alt="">

</div>
<div id="navigation">

<div id="home"><a href="home.html"></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"> </td> </tr>
<tr>
<td class="inhalt">
TEXT
</td>
</tr>
</table>
</div>
<div id="bilder">
<img src="tische.jpg" width="196" height="136" border="0" alt="">
<img src="teller.png"width="196" height="144" border="0" alt="">
<img src="bar.jpg"width="196" height="136" border="0" alt="">
</div>
</div>
</div>
</body>
</html>
 
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: 
<!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>Pasta Pasta</title>
        <meta name="author" content="tsuess" />
        <meta name="generator" content="Ulli Meybohms HTML EDITOR" />
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script type="text/javascript" src="slimbox-2.04/js/slimbox2.js"></script>
        <link rel="stylesheet" href="slimbox-2.04/css/slimbox2.css" type="text/css" media="screen" />
        <link rel="stylesheet" type="text/css" href="format.css" media="screen"/>
    </head>
    <body>
        <div id="hauptcontainer">
            
            <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;
}

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

[noparse]
Code: 
…
HTML: 
…
PHP: 
…
[/noparse]
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben