zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV Container werden bei Zoom verzogen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.03.2014, 11:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.03.2014
Beiträge: 1
Marmeladeuchen befindet sich auf einem aufstrebenden Ast
Frage DIV Container werden bei Zoom verzogen

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-Code:
<!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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.03.2014, 12:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

ich glaube, beim heranzoomen entstehen teilweise weiße abstände, die größer als 1px sind, weil der wrapper dann nicht mehr 1000px breit ist sondern eine Breite hat, die sich nicht so dividieren lässt, dass alle abstände immer noch 1px betragen... es floaten ja nicht alle divs links, sondern zum teil auch rechts, und der abstand links vom rechts floatenden div beträgt dann mehr als 1px.

und meiner meinung nach kannst du daran nichts ändern, aber ich wüsste nicht, wen sowas stört
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.03.2014, 12:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Man kann das umgehen indem man nicht mit festen Pixelwerten sondern mit relativen Größen, wie zB Prozent oder em arbeitet. Gibt man einer Box 20% Breite und einer anderen 80%, dann kann man skalieren soviel man will, die beiden werden sich die 100% der zur verfügung stehenden Breite aufteilen.
Mit Zitat antworten
Antwort

Stichwörter
container, div, verschieben, verzogen, zoom

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
Hintergrundbild via css sprite dynamisch am Div Container anpassen. BallaBalla07 CSS 2 04.06.2013 16:40
Header entfernen tripple CSS 17 15.06.2010 16:41
Linkverhalten im IE6 ChOpSueY! CSS 19 19.05.2008 23:48
div container verschachteln blau CSS 2 05.12.2006 20:44
2 div container, 2. orientiert sich am 1. kemai CSS 9 21.06.2005 15:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:14 Uhr.