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

Padding verändert die Größe des div-Objektes

Status
Für weitere Antworten geschlossen.
NE555

NE555

Neues Mitglied
Hi,


vorweg: bin noch ziemlich unerfahren...

Der Titel sagt eh schon alles.

Hier mein Code:

Code: 
body {
background-color:#000000;
}


#navi {
position:fixed;
background-color:#000000;
border-bottom:1px solid #FF0000;
color:#FFFFFF;
width:100%;
height:40px;
left:0px;
top:0px;
padding:0px;
font-size:20px;
font-family:helvetica;
padding-top:3px;
}

das ist mein HTML-Code:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/1_black.css">
</head>
<body>
<div id="navi">odnsfj</div>





</body>
</html>

lg NE555
 
Das ist nach dem CSS-Boxmodell völlig korrekt so:
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell

Gesamtbreite = width + padding + border + margin

Wenn du also bereits 100% width hast und es kommt noch was dazu, dann reicht das nicht mher aus und du musst scrollen.
Verzichte am besten auf die 100% oder nimm einen geringeren Wert, mit dem du auf der vermeintlich sicheren Seite liegst.
Vermeintlich deshalb, weil sich für Pixel und Prozent kein gemeinsamer Nenner finden lässt. Das sind eben zwei unterschiedliche einheiten.

Als Doctype solltest du den nehmen, damit der IE das Boxmodell richtig darstellt:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
Siehe auch Boxmodell und Internet Explorer

position: fixed kann der IE < 7 nicht. Solltest du evtl. drauf verzichten.
 
Danke für die schnelle und ausführliche (!) Hilfe!

D.h.: entweder ich nehme statt 100% 95% und riskiere, dass die Seite nicht überall gleich ausschaut, oder ich erstelle ein eigenes div-Element für die Schrift, sehe ich das richtig?

...und wegen dem position:fixed: Wie wird das dann angezeigt? Einfach absolute oder gar nicht (Habe Mac OS X).

lg nico
 
NE555 schrieb:
..entweder ich nehme statt 100% 95% und riskiere, dass die Seite nicht überall gleich ausschaut, oder ich erstelle ein eigenes div-Element für die Schrift, sehe ich das richtig?...
Zum Vergrößern anklicken....
Umschließe #navi mit einem weiteren Element für position und width.
#navi hat jetzt keine position: fixed und nimmt die gesammte Breite von #navi_outer ein.
Code: 
#navi_outer {
width: 100%;
position: fixed;
}

#navi {
margin-right: 100px;
background-color:#000000;
border-bottom:1px solid #FF0000;
color:#FFFFFF;
height:40px;
left:0px;
top:0px;
padding:0px;
font-size:20px;
font-family:helvetica;
padding-top:3px;
}
...und wegen dem position:fixed: Wie wird das dann angezeigt? Einfach absolute oder gar nicht ...
Zum Vergrößern anklicken....
Wird im IE6 wie position: static; angezeigt (default-Wert). top und left werden somit ignoriert.

Auf height:40px; würde ich vermutlich ersatzlos verzichten (stört bei Schriftgrößenveränderung).
 
@NE555:
Überlege dir mal, wie deine Seite aussehen soll.
Es macht m.E. keinen großen Sinn, die Navi isoliert zu betrachten, sondern sie sollte in das Gesamtlayout entsprechend eingebunden werden. Soll es eine horizontale oder vertikale Navi sein, wo soll sie stehen, welche anderen Elemente werden noch benötigt?
Hier mal ein gängiges Dreispaltenlayout, bei dem z.B. die Navi links oder rechts platziert werden könnte. Ebenso aber auch über den Spalten quer:
Dreispaltiges Layout, zentriert mit fixen Breiten
 
NE555 schrieb:
D.h.: entweder ich nehme statt 100% 95% und riskiere, dass die Seite nicht überall gleich ausschaut
Zum Vergrößern anklicken....
Bedenke, dass eine Website nie überall gleich aussieht! Es gibt so viele Dinge, die die Benutzer einstellen können, die eine gute Website auch berücksichtigt, dass es da immer Unterschiede gibt. Beispiele: Andere Fenstergröße, andere Schriftgröße, andere Schriftarten, unterschiedliche Browser, ...

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben