Rahmen sind unterschiedlich dick

[hb133]

Hallo Leute,

ich bastel zur Zeit an einer Homepage, bei der ich grob gesagt 4 horizontale Div-Container übereinander legen, und mit Titelbalken, Logo, Menü und Inhalt fülle. Nun habe ich das Problem, dass im Inhaltscontainer der Rahmen den ich in einer externen CSS Datei definiert habe nicht auf allen Seiten gleich stark ist.

Hier mal ein Screenshot um das Ganze zu veranschaulichen (habe die Inhalte unkenntlich gemacht, geht ja nur um die Container):

http://www.abload.de/img/ungleichernder4dm4.gif

Man sieht deutlich dass der Rand unten und rechts sich vom Rand links unterscheidet, der Rand wirkt rechts und unten wesentlich massiver.



Die Einträge in der CSS Datei sehen folgendermaßen aus (hier mal nur den Menü und den Inhalt Container, die anderen sind aber genauso mit position:absolute definiert)


/* Position und Formatierung des Menüs*/

div#menu

{

position:absolute;

top:35%; left:10%;
width:80%; height:4%;

background:#595959;
font-family: Trebuchet MS;
font-size: 80%;
color: #FFFFFF;

border-style:solid;

border-width: thin;

border-color: #000000;

}

/* Position, Formatierung und Inhaltssteuerung des zentralen Inhalts*/

div#zentral

{

position:absolute;

top:39%; left:10%;
width:80%; height:55%;

background:#FFFFFF;

border-style:solid;

border-width: thin;

border-color: #000000;

}


Es ist mir echt ein Rätsel, die Ränder sind in allen Div-Containern mit border-width: thin; definiert, außerdem verwende ich ja überall nur solid als border-style.


Hat irgendjemand eine Ahnung woran mein Problem liegen könnte :?:

Danke euch!

 

[DerMitSkill]

Versuch es doch einfach mal damit, dass Du thin durch z.B. 1px ersetzt. Ist der Rahmen dann immernoch unterschiedlich dick?

 

[Efchen]

Man sieht deutlich dass der Rand unten und rechts sich vom Rand links unterscheidet, der Rand wirkt rechts und unten wesentlich massiver.

Nein. Nicht wirklich. Ein Link zur Seite würde wesentlich mehr bringen als ein Screenshot.

die anderen sind aber genauso mit position:absolute definiert)

Gehört zwar nicht zur Frage, aber bei dem, was der Screenshot hergibt, brauchst Du keine absolute Positionierung. Die da zu verwenden, lässt vermuten, dass Du Dich mit absoluter Positionierung nicht richtig auskennst, und das lässt mich Dir empfehlen, darauf zu verzichten.

Zu "thin" finde ich in der W3C-Spezifikation nur:

The interpretation of the first three values depends on the user agent.

Das lässt mich schließen, dass das nicht genau definiert ist, es könnte also tatsächlich sein, dass horizontale borders 1px und vertikale borders 2px dick sind. Zumindest wäre das nach dieser Definition erlaubt. Ich mein..."thin"...damit sagst Du ja aus, dass Dir die Dicke ziemlich egal ist, außer dass sie halt dünn sein soll (und somit dünner als "medium" oder "thick"), aber eine genaue Dicke gibst Du nicht an. Das hat schon waas von einer Empfehlung, nicht von einer genauen Größenangabe.

 

[hb133]

Hallo,

danke euch für die Hilfe.

@ DerMitSkill

Ich hab jetzt mal probiert die Rahmen per Pixel zu definieren, bei 1px ändert sich nix, der Rahmen sieht immer noch ungleichmäßig aus.
Das erstaunliche ist aber, dass bei 2px und darüber hinaus alles gleichmäßig angezeigt wird.
Hab ich jetzt nen Knick in der Optik? Oder stimmt doch irgendwas nicht und nur bei 1px ist das ganze sichtbar bzw. fällt einem auf?

@ Efchen

Du hast Recht, ich kenn mich noch nicht besonders gut aus in der Positionierung und allgemein in CSS.
Ich meinem Fall hab ich vor den Titelbalken, das Logo und das Menü "fixed" zu machen, sodass diese bei längeren Inhalten im Hauptfenster trotz scrollen angezeigt werden.
Also ändere ich meines Wissens nach position: auf "fixed".

Wie kann ich jetzt erreichen dass bei längeren Inhalten der Rahmen des Hauptfensters erhalten bleibt und ich praktisch nur innerhalb des Hauptfensters scrollen kann?
Geht das wieder nur über Frames?

Danke schön!

 

[Efchen]

Hab ich jetzt nen Knick in der Optik? Oder stimmt doch irgendwas nicht und nur bei 1px ist das ganze sichtbar bzw. fällt einem auf?

Das zu beurteilen brauchen wir einen Link.

Ich meinem Fall hab ich vor den Titelbalken, das Logo und das Menü "fixed" zu machen, sodass diese bei längeren Inhalten im Hauptfenster trotz scrollen angezeigt werden.
Also ändere ich meines Wissens nach position: auf "fixed".

Würde ich nicht tun. Abgesehen davon, dass mir diese fixen Bereiche nicht gefallen, weil sie so viel Platz wegnehmen und man dann mehr scrollen muss, würde ich dem Contentbereich lieber eine fixe Größe geben und mit overflow:auto arbeiten. Zumindest mit dem IE6 (und älter) wirst Du Deinen Spaß haben, weil der kein position:fixed kennt.

 

[hb133]

Die Idee ist natürlich gut, genau so wollte ich es haben.

Ich habe jetzt glaub ich übrigens den Fehler entdeckt:

Anscheinend haben sich die Rahmen der übereinandergestapelten Container irgendwie summiert, ich hab jetzt jeweils den oberen und untern Rahmen entfernt, sodass nicht der untere Rahmen eines Containers auf den oberen des nächsten trifft.

Und jetzt sieht die Sache schon besser aus 8)


PS: Da fällt mir noch was ein.

@ Effchen

Du schreibst dass absolute nicht unbedingt notwendig ist für mein Vorhaben (4 horizontale Container übereinander). Und fixed ist auch nicht optimal wie ich selber eingesehen habe, hab keine Lust mir da Händel mit dem IE einzufangen.
Nur welche Positionierungsmethode soll ich dann verwenden? Einfach mit margin?

 

[Efchen]

margin/padding reicht in den meisten Fällen gut aus. Der Browser kann die Elemente auf einer Seite ohnehin viel besser positionieren als Du, weil der Browser weiß, wie groß der Viewport eines jeden Nutzers ist, Du aber nicht. Wenn Du alles absolut positionierst, führt das bei zu kleinen Viewports idR nur zu nervtötenden horizontalen Scrollbalken.

Nur, wenn Du zwei Block-Elemente nebeneinander haben willst (z.B. Menüleiste) dann reicht margin/padding natürlich nicht mehr, aber da ist "float" viel einfacher als absolute Positionierung.

Die komplette Seite kannst dann Du bequem in einen Wrapper packen und den zentrieren.

Gemäß Deinem Bild hast Du dann oben eine Überschrift (<h1>), darunter ein Menü (<ul>) und dann einen Content-Bereich (<div>). Alles in einen Wrapper (<div>) und gut ists. Brauchst wahrscheinlich nichtmal float (außer, um das Menü horizontal zu kriegen, aber das geht evtl. auch mit display:inline).

 

[hb133]

Danke dir für deine Hilfe, ist wirklich einleuchtend :!:

Eine Frage hätte ich aber noch:

Ich weiss dass es nicht gern gesehen wird wenn zuviel mit DIV Containern geschachtelt wird, daher ist natürlich dein Vorschlag mit dem Wrapper der eleganteste.

Aber was spricht generell gegen meine bisherige Lösung mit aufeinandergestapelten DIV Containern, in die ich dann mit PHP include die Inhalte lade?

Danke dir!

 

[Efchen]

Ich weiss dass es nicht gern gesehen wird wenn zuviel mit DIV Containern geschachtelt wird

Das ist so nicht richtig. Es geht bei HTML darum, dem Inhalt eine Bedeutung zu geben. Mit dem Tag <div> werden mehrere Elemente gruppiert. Manchmal ist es sinnvoll oder sogar notwendig, viele <div> zu verschachteln, um damit einen gewissen Effekt in CSS zu erreichen. Nicht gern gesehen ist unsinnvoller Code. Weiter nichts. Verschachtelte <div> sind nicht generell unsinnvoll. Bei einem Rahmen um ein Element, dessen Größe variabel ist, das noch "runde Ecken" bekommen soll, wirst Du viele <div> verschachteln müssen.

Aber was spricht generell gegen meine bisherige Lösung mit aufeinandergestapelten DIV Containern, in die ich dann mit PHP include die Inhalte lade?

Ich kenne Deine Lösung ja nicht, Du hast sie hier nie vorgestellt.

<div> verwendet man zum Gruppieren mehrerer Elemente. Nicht für ein einzelnes Element und nicht im Zusammenhang mit include() (was ja eh eine serverseitige Technik ist und mit HTML gar nichts zu tun hat).
Du musst Dir also nur die Frage stellen, ob das <div> am Ende in der fertigen HTML-Seite, die beim Browser ankommt, sinnvoll ist.