XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   3-spaltiges Layout (http://xhtmlforum.de/showthread.php?t=32157)

Rantanplan 29.12.2003 19:16

3-spaltiges Layout
 
Hallo

Ich will auf einer Seite ein 3 spaltiges Layout machen. (Menü, Inhalt, Menü) Allerdings will ich das ganze dynamisch machen, so dass es sich ans Browserfenster anpasst. Deshalb habe die Menüs jeweils eine Breitenangabe in Prozent. (17%) Wenn ich nun einen <div id="inhalt"></div> erstelle (float:links), gelingt es mir einfach nicht, dass dieser den gleichen Abstand von beiden Menü's hat. Wenn ich mir die theoretischen Maße ausrechne, stimmt es auch nicht.

Kann mir jemand sagen wie ich es schaffe, dass der Inhalt schön zentriert zwischen den Menüblöcken ist?

Im weitesten Sinn ist die Seite wie die hier aufgebaut: 3-spaltig

Aber wie ihr seht ist der div-Container nicht zentriert. Ich hoffe jemand hat eine Lösung.

Grüße,
Rantanplan

ulle 29.12.2003 20:26

Zitat:

Aber wie ihr seht ist der div-Container nicht zentriert.
:roll: Bei mir ist der div-Container zentriert IE6 / Mozilla 1.4

Du meinst wohl die dynamischen Abstände.

Das liegt am BOX-Model, dieses sollte Dir unbedingt klar sein!!

ulle 29.12.2003 20:31

Hier noch ein LINK dazu, da ich ja gerade festellen mußte dass die SUCH-Funktion nicht die alten Einträge berücksichtigt.

:shock: http://www.xhtmlforum.de/forum/viewtopic.php?p=803

Rantanplan 29.12.2003 23:00

Danke dir. Im Link habe ich erfahren,was die reelle Breite (margin + padding + border + width) ist. Ich finde aber schon, dass das unlogisch ist.

Vorallem kann man somit nicht gut rechnen, da bei mir border angaben mit % nicht klappen. Ist es nicht möglich, dass ich einen container zwischen zwei container erstelle, der genau 5px Rand zu diesen hat?

Rantanplan

ulle 30.12.2003 00:09

Zitat:

(margin + padding + border + width) ist. Ich finde aber schon, dass das unlogisch ist.
Wieso, der Innenabstand muß ja bleiben, stell Dir nur ein Bild mit einer festen Breite vor. Kaum machst Du einen Rahmen :arrow: fehlt was vom Bild.



Zitat:

Vorallem kann man somit nicht gut rechnen, da bei mir border angaben mit % nicht klappen.
Stimmt :!:

:lol: Da die relativen Angaben für margin, border und padding sich aus den Schriftgrößen des Containers errechnen.

Na, noch lust...... :roll:


:arrow: Aber es gibt Tricks.

Setze die Container mit width und float entsprechen nebeneinander. (evtl. 20/60/20 % = 100%) :arrow: allerdings ohne weitere Angaben.

Und in diese Container setzt Du einfach nochmal einen DIV-Container (jeweils).
:idea: Diese allerdings ohne width-Angabe, aber dann mit margin, border und padding-Angaben (wie gewünscht).

Da ein DIV-Element ein BLOCK-Element ist, es sei den Du änderst die Eigenschaft auf [display: inline;], wird die gesamte Breite des Eltern-Elements genutzt. :!: Und nicht mehr bzw. weniger.

Viel Erfolg

Rantanplan 30.12.2003 00:48

Der body hat aber "padding:1% 1% 1% 1%;". Außerdem haben der linke und der rechte div-Container (menüs) jeweils einen Rand.

Wenn ich nun logisch denke kann man dann allgemein sagen:

Erzeugt man eine dynamische Website mit zB. 3 Spalten (Containern), muss die Gesamtbreite max. 100% betragen, da es sonst zu schweren Darstellungsfehlern kommt. Da aber nur "width" eine prozentuelle Angabe erlaubt und jeder Container in den meisten Fällen Informationen zu "margin" und "padding" enthält, sollte jeder Container in einem Muttercontainer sein.

^^ richtig?
Also:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
body{
  margin:0px;
  padding:1% 1% 1% 1%;
}
#menulinksmother{
  margin:0px;
  padding:0px;
  width:19%;
  float:left;
}
#menurechtsmother{
  margin:0px;
  padding:0px;
  width:19%;
  float:right;
}
#contentmother{
  margin:0px;
  padding:0px;
  width:60%;
  float:left;
}
#menulinks{
  margin:0px;
  padding:0px;
  border:1px solid black;
  height:300px;
}
#menurechts{
  margin:0px;
  padding:0px;
  border:1px solid black;
  height:300px;
}
#content{
  margin:0px 5px 0px 5px;
  padding:0px;
  border:1px solid black;
  height:300px;
}
</style>
</head>
<body>
<div id="menulinksmother">
  <div id="menulinks"></div>
</div>
<div id="contentmother">
  <div id="content"></div>
</div>
<div id="menurechtsmother">
  <div id="menurechts"></div>
</div>
</body>
</html>

Mal sehen ob das klappt... klappt nicht. :(

Rantanplan

ulle 30.12.2003 12:02

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">  <!--
        html,body {
                margin: 0px;
                padding: 0px 1px 0 1px;
                background-color: #FF9933;
                color: #000000;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 101%;
        }
       
        #spalte-a, #spalte-b, #spalte-c {
                float: left;
                width: 20%;
        }
       
        #spalte-b {
                width: 60%;
        }

        div.look {
                margin: 0 1px 0 1px;
                border: 1px solid #000000;
                padding: 5px;
                background-color: #EECC99;       
                font-size: 0.7em;       
        }
       
       
-->
</style>

</head>
<body>

<div id="spalte-a">
        <div class="look">spalte-a</div>
</div>
<div id="spalte-b">
        <div class="look">spalte-b</div>
</div>
<div id="spalte-c">
        <div class="look">spalte-c</div>
</div>

</body></html>

THINK ABOUT :idea:

Rantanplan 30.12.2003 16:18

Zitat:

Zitat von ulle
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//DE" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">  <!--
        html,body {
                margin: 0px;
                padding: 0px 1px 0 1px;
                background-color: #FF9933;
                color: #000000;
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 101%;
        }
       
        #spalte-a, #spalte-b, #spalte-c {
                float: left;
                width: 20%;
        }
       
        #spalte-b {
                width: 60%;
        }

        div.look {
                margin: 0 1px 0 1px;
                border: 1px solid #000000;
                padding: 5px;
                background-color: #EECC99;       
                font-size: 0.7em;       
        }
       
       
-->
</style>

</head>
<body>

<div id="spalte-a">
        <div class="look">spalte-a</div>
</div>
<div id="spalte-b">
        <div class="look">spalte-b</div>
</div>
<div id="spalte-c">
        <div class="look">spalte-c</div>
</div>

</body></html>

THINK ABOUT :idea:

Interessant, interessant... Mit Mozilla klappt es wunderbar. :) Beim Konqueror muss ich immer aktualisieren, damit es klappt. Vielleicht sollte ich den mal updaten. :D

Ich habe aber trotzdem Fragen:

Warum Schriftformatierung? (haben die geheime Auswirkungen, die ich nicht kenne?)
Warum schreibst du den Style in einem HTML kommentar? hat das was mit xhtml zu tun?
Wird mit width:60; das width:20; überschrieben?
Warum wird es falsch dargestellt, wenn ich beim body padding:0; setze?
Auf was bezieht sich die %-Zahl der spaltenangaben? Auf die body-width?

Ich wäre sehr dankbar, wenn du auf die Fragen genau eingehst, denn ich finde das "Wesen der Container" zu verstehen gehört zum wichtigsten in morderner html/css-programmierung.

Guten Rutsch wünscht ...
... Rantanplan

Alex 30.12.2003 17:00

body { font-size: 101% } beseitigt einen rundungs-bug in opera6, der dafuer sorgt, dass die schrift bei 100% zu klein dargestellt wird. die restlichen schriftformatierungen sind nur drin, weil ulle schwarze verdana mag ;)

ja, das width:60% ueberschreibt das width:20%. du kannst grundsaetzlich jede eigenschaft beliebig oft ueberschreiben. es gibt feste regeln, welche eigenschaft wann zaehlt. sofern sich alle auf klassen oder alle auf ids beziehen zaehlt die letzte.

warum es bei body { padding:0; } falsch dargestellt wird kann ich dir nicht sagen, koennte aber evtl. ein rundungsproblem oder so sein. ich wuerde sowieso prinzipiell die summe der breiten auf 98% oder 99% beschraenken, da man bei 100% oft durch rundungsfehler horizontale scrollbalken kriegt.

prozentuales padding will glaub ich der mozilla nicht richtig, ich meine mich zumindest zu erinnern, dass sich irgendwer auf ner mailing liste mal fuerchterlich drueber aufgeregt hat, dass es nicht so funktioniert, wie er es gern haette.

die prozentanzahl der spalten bezieht sich auf die dem inhalt zur verfuegung stehende breite (width) des uebergeordneten containers. in diesem fall also body, was wiederum heisst: fensterbreite minus 2px (wegen des paddings).

ulle 30.12.2003 18:12

Alex hat es ja schon eingehend beantwortet :!:

nun in Kurzform :arrow:

Warum schreibst du den Style in einem HTML kommentar? hat das was mit xhtml zu tun?
Nein, gewohnheit bzw. kopiert, seit 100 Jahren, kann mich gar nicht erinnern es mal geschrieben zu haben.

Wird mit width:60; das width:20; überschrieben?
Ja, es gibt auch eine priorität, es wird nicht immer überschrieben, kommt auf die Wertigkeit des Selektors an, aber hier ist die Reihenfolge maßgebend.

Warum wird es falsch dargestellt, wenn ich beim body padding:0; setze?
Kommt auf die Breite des Eltern-Elements an, wenn die ungerade (zB. 773) in Pixeln ist gibt es Rundungsfehler und in unserem Fall ist das Eltern-Element der BODY bzw. das Browserfenster.

Auf was bezieht sich die %-Zahl der spaltenangaben? Auf die body-width?
Auf den verbleibenden Innenabstand des BODY, setze doch mal den BODY auf width: 100%, dann siehst Du wie BLOCK-Elemente ohne/mit width-Angabe arbeiten. Den der BODY ist auch ein BLOCK-Element.


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:27 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023