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

DIV Container verschieben sich bei zoom

M

Marmeladekuchen

Neues Mitglied
Hey Leute ich habe erst vor wenigen Tagen mit html und CSS angefangen.

Ich habe hier ein kleines Layout erstellt, solange ich mich bei 100% zoom im Mozilla Browser befinde (Windows 7, 1920x1080) funktioniert das auch genau so wie ich es mir vorstelle, die Container will ich dann übrigens mit Bildern füllen, die als Navigationslinks fungieren sollen.

Wenn ich jetzt jedoch raus, bzw. heranzoome verschieben sich die Container, bzw. für mich sieht es so aus als würden die border an manchen stellen größer werden. dadurch verzieht sich dann alles.

Wie gesagt ich bin blutiger anfänger, wenn ihr irgendwelche tipps zum grundlegenden aufbau meiner dokumente habt oder ihr fehler entdeckt (z.b. in der semantik) helft mir gerne!

Hier die Codes

HTML: 
<!DOCTYPE HTML>
<html>

<head>
    <title>BJJ</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/style.css" title="Stylesheet">
<head>

<body>
    <div id="wrapper">
        <header id="banner">
        </header>

        <div id="breadcrumb">
        </div>

        <div id="nav_wrapper">
            <div id="about">
            </div>
            <div id="forum">
            </div>
            <div id="shoutbox">
            </div>
            <div id="video_material">
            </div>
            <div id="shop">
            </div>
            <div id="competition">
            </div>
        </div>

        <footer>
        </footer>
    </div>
</body>

</html>
Code: 
*{

}

body{
width: 1000px;
margin: 0 auto;
background-color:#FFF;
}

#wrapper{
height:auto;
min-height: 800px;
width: 1000px;
margin:0 auto;
float:left;
}

#banner{
background-color: grey;
margin-top: 20px;
height: 200px;
width: 1000px;
float:left;
}

#breadcrumb{
background-color: lightblue;
height: 10px;
margin-top: 50px;
margin-bottom: 30px;
width: 1000px;
float:left;
}

#about{
background-color: rgba(200,200,200, 0.5);
border-right: 1px solid white;
width: 349px;
height: 150px;
float: left;
}

#forum{
background-color: rgba(200,200,200, 0.5);
height: 150px;
width: 650px;
float: left;
}

#shoutbox{
border-top: 1px solid white;
border-right: 1px solid white;
background-color: rgba(200,200,200, 0.5);
height: 149px;
width: 99px;
float: left;
}

#video_material{
border-top: 1px solid white;
border-right: 1px solid white;
background-color:rgba(200,200,200, 0.5);
height: 149px;
width: 499px;
float: left;
}

#shop{
border-top: 1px solid white;
background-color: rgba(200,200,200, 0.5);
height: 299px;
width: 400px;
float: right;
}

#competition{
border-top: 1px solid white;
border-right: 1px solid white;
background-color: rgba(200,200,200, 0.5);
height: 149px;
width: 599px;
float: left;
}

footer{
background-color: rgba(200,200,200, 0.5);
height: 40px;
width: 1000px;
margin-top: 20px;
float:left;
}
 
Werbung:
Marmeladekuchen schrieb:
Hey Leute ich habe erst vor wenigen Tagen mit html und CSS angefangen.

Ich habe hier ein kleines Layout erstellt, solange ich mich bei 100% zoom im Mozilla Browser befinde (Windows 7, 1920x1080) funktioniert das auch genau so wie ich es mir vorstelle, die Container will ich dann übrigens mit Bildern füllen, die als Navigationslinks fungieren sollen.

Wenn ich jetzt jedoch raus, bzw. heranzoome verschieben sich die Container, bzw. für mich sieht es so aus als würden die border an manchen stellen größer werden. dadurch verzieht sich dann alles.

Wie gesagt ich bin blutiger anfänger, wenn ihr irgendwelche tipps zum grundlegenden aufbau meiner dokumente habt oder ihr fehler entdeckt (z.b. in der semantik) helft mir gerne!

Hier die Codes

HTML: 
<!DOCTYPE HTML>
<html>

<head>
    <title>BJJ</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/style.css" title="Stylesheet">
<head>

<body>
    <div id="wrapper">
        <header id="banner">
        </header>

        <div id="breadcrumb">
        </div>

        <div id="nav_wrapper">
            <div id="about">
            </div>
            <div id="forum">
            </div>
            <div id="shoutbox">
            </div>
            <div id="video_material">
            </div>
            <div id="shop">
            </div>
            <div id="competition">
            </div>
        </div>

        <footer>
        </footer>
    </div>
</body>

</html>
Code: 
*{

}

body{
width: 1000px;
margin: 0 auto;
background-color:#FFF;
}

#wrapper{
height:auto;
min-height: 800px;
width: 1000px;
margin:0 auto;
float:left;
}

#banner{
background-color: grey;
margin-top: 20px;
height: 200px;
width: 1000px;
float:left;
}

#breadcrumb{
background-color: lightblue;
height: 10px;
margin-top: 50px;
margin-bottom: 30px;
width: 1000px;
float:left;
}

#about{
background-color: rgba(200,200,200, 0.5);
border-right: 1px solid white;
width: 349px;
height: 150px;
float: left;
}

#forum{
background-color: rgba(200,200,200, 0.5);
height: 150px;
width: 650px;
float: left;
}

#shoutbox{
border-top: 1px solid white;
border-right: 1px solid white;
background-color: rgba(200,200,200, 0.5);
height: 149px;
width: 99px;
float: left;
}

#video_material{
border-top: 1px solid white;
border-right: 1px solid white;
background-color:rgba(200,200,200, 0.5);
height: 149px;
width: 499px;
float: left;
}

#shop{
border-top: 1px solid white;
background-color: rgba(200,200,200, 0.5);
height: 299px;
width: 400px;
float: right;
}

#competition{
border-top: 1px solid white;
border-right: 1px solid white;
background-color: rgba(200,200,200, 0.5);
height: 149px;
width: 599px;
float: left;
}

footer{
background-color: rgba(200,200,200, 0.5);
height: 40px;
width: 1000px;
margin-top: 20px;
float:left;
}
Zum Vergrößern anklicken....

Das ist eine Browser Limitierung. Hat mich auch schon schrecklich aufgeregt.
Das Problem ist, die Höhen/Breiten-Angaben werden skaliert, nicht aber die der Borders. Dadurch passt das nicht mehr.
Ich denke nicht dass man da was machen kann - es ist meiner Meinung nach ganz klar ein Fehler bzw. Schwäche des jeweiligen Browsers.
 
Hm, naja irgendwas muss ich ja machen können, dass es passt. :)
Die Border sind ja 1px breit, wie soll der Browser dass eigentlich dann kleiner skalieren? Unter 1px geht ja nicht, da hab ich noch gar nich drüber nachgedacht.

*edit: ich habe die breite des wrappers jetzt mal um 10px erweitert und dem div "shop" der als einziger float:right hat (haben muss?) einen margin-right von 10 px gegeben. Jetzt verzieht es sich nicht mehr ganz so schlimm, weil ja die container ein bischen platz zum ausweichen haben.
 
Zuletzt bearbeitet:
Werbung:
Marmeladekuchen schrieb:
Hm, naja irgendwas muss ich ja machen können, dass es passt. :)
Die Border sind ja 1px breit, wie soll der Browser dass eigentlich dann kleiner skalieren? Unter 1px geht ja nicht, da hab ich noch gar nich drüber nachgedacht.
Zum Vergrößern anklicken....

Mathematisch gesehen ist bei 50% Zoom 1 Pixel 0.5 Pixel breit. Unabhängig davon ob es halbe Pixel überhaupt gibt (Darstellung und Berechnung sind zwei verschiedene Paar Schuhe).
Da Border aber einfach gar nicht skaliert werden, bleibt 1 Pixel 1 Pixel während alle anderen Werte skaliert werden. Und schon geht sich nichts mehr aus.
Auch wenn der Border 2px breit wäre, der Browser skaliert den Wert nicht zu 1px.

Als Workaround könntest du im Div nochmal ein Div platzieren und diesem Child-Div erst den Rahmen zuweisen.
Oder du gibst dem Div ein "box-sizing: border-box". Dann "zählt" der Rahmen nämlich zur Höhen/Breiten-Angabe des Divs.
Oder du beschäftigst dich mal mit Responsive Design, damit sind solche Probleme nicht relevant.
 
Zuletzt bearbeitet:
"Responsive Design"
super, das ist womit ich mich beschäftigen wollte, ich kannte nur das wort nicht, was es mir sehr schwierig gemacht hat gute infos dazu zu finden.
wenn da jemand gutes material zu hat, her damit :p
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben