3 CSS Container Positionierung

[Adromir]

Ich merke immer mehr, wie wenig ich noch von CSS verstehe..
Ich versuche gerade eine Seite mit 3 div-Containern zu bauen.
Davon ist der erste links oben positioniert und enthält die Navigation.
Der zweite Container befindet sich Rechts daneben und nimmt die meiste Seitenfläche ein.. Hier kommt der Inhalt rein.
Der dritte ist nur ein kleiner, der sich Unterhalb des ersten Containers befindet.

Hier der Code dazu:

#Navigation            { color: #fff; 
                              font-size: 80%; 
                              background-color: #254369; 
                              visibility: visible; 
                              padding: 5px; 
                              position: absolute;  
                              top: 18px; 
                              left: 18px;  
                              border: solid 1px #000 
                           }

#Navigation a:link         { color: #fff; 
                                   visibility: visible; 
                                   padding: 5px;  
                                   border: 1px #000 
                                 }

#Inhalt         { color: #fff; 
                     background-color: #254369; 
                     text-align: center; 
                     visibility: visible; 
                     padding: 5px; 
                     position: absolute;
                     top: 18px; 
                     left: 15%; 
                     width: 83%; 
                     height: 95%; 
                     float: left; 
                     border: solid 1px #000
                  }

#Inhalt a:link1         { color: #fff; 
                               background-color: #254369; 
                               text-align: center;
                               visibility: visible; 
                               padding: 5px; 
                               position: absolute;
                               top: 18px; 
                               left: 15%; 
                               width: 83%; 
                               height: 95%;
                               float: left;
                               border: 1px #000 
                             }
#LogStat     { font-size: 80%; 
                    text-align: center; 
                    visibility: visible;
                    padding: 5px; 
                    position: absolute;
                    top: 17%; 
                    left: 30px;
                    border: solid 1px #254369
                 }

Naja, in meiner Auflösung sieht es ja so aus, wie ich will.. Nur bei anderen Auflösungen verschiebt sich natürlich alles..

Zur Anschauung, wie es aussehen soll, hab ich nen Screenshot angehängt..

[Dittboy]

Was meinst du denn mit "verschieben"?
Kannst du vielleicht einen Screenshot machen, oder noch besser, einen Link?

Ich weiss ja jetzt leider nicht, was genau das Problem ist, bzw. wie es sich verschiebt...

Mfg
Dittboy

[Adromir]

Wenn ich die Fenstergröße Verändere, dann verschieben sich die Container ineinander und überlagern sich...
Hier mal Online: http://www.boronsanger.de/Reker/Admin/

(Nicht über den blöden Rechtschreibfehler ärgern.. Die Tabelle hat mit dem Prob auch nix zu tun..)

wenn du die (etwas umständliche) absolute positionierung beibehalten willst,
dann gib die left-position des div#inhalt in pixeln an. momentan sind es prozent. das liegt ja auf der hand -> 15% von nem kleinem browserfenster sind eindeutig weniger als 15% von nem maximierten fenster

[Adromir]

Also ich muss die absolute Positionierung nicht beibehalten..

dann probiers mal so:
css

body {margin:0;padding:0}
div#navigation {float:left; width:150px; border:1px solid #000;border-right:0}
div#inhalt {margin-left:150px;border:1px solid #000} 
div#clear {clear:left}

html

<div id="navigation">navi</div>
<div id="inhalt">inhalt</div>
<div id="clear"></div>

[unclefu86]

Auch ich merke, dass ich irgendwie keine Ahnung habe, bzw. ich werde gerade recht sauer auf mich selbst, weil ich es nicht ganz verstehe!!
Vielleicht kann mir einer von euch helfen.

Also zuerstmal unten, ich habe das jetzt so gemacht, dass man extern auf eine Eigenschaft zugreift; was du ing.o da beschreibst, ist also der interne Zugriff, richtig?

Was ich noch wissen wollte, beim Einrichten von Container, wieso braucht man da ein # bzw. einen . ? Und wann braucht man das eine, wann das andere?

Mein Problem ist auch, dass ich mehrere Container (bisher erstmal zwei) haben will und mein Code sieht bisher so aus:

<style type="text/css" media="screen,projection">
   menu {
   font-family:Arial, MS Sans Serif, Verdana;
   font-size:12px;
   color:#FFFFFF;
   background-color:#000000;
   }
   content {
   font-family:Arial, MS Sans Serif, Verdana;
   font-size:10px;
   color:#FFFFFF;
   margin-top:100px;
   margin-left: 150px;
   }
     
   <!--
h1 { color:black; font-size:22px; } 
h2 { color:black; font-size:18px; } 
h3 { color:black; font-size:16px; } 
h4 { color:black; font-size:14px; }
p,ul,ol,li,div,td,th,address,blockquote { color:black; font-size:10px; }

a:link { border-bottom: 1px white;
padding-bottom: 2px;
text-decoration:overline underline; }

a:visited { border-bottom: 1px white;
padding-bottom: 2px;
text-decoration:underline; }

a:hover, a:active { 
border-bottom: 1px dashed white;
padding-bottom: 2px;
text-decoration:none; }

div > ul class="menu" { color:violet; }
div * ul class="menu" { color:violet; }
-->
 </style>

Alles nach dem <!-- sollte eigentlich dem "content" Container zugeordnet werden, wobei ich gerne das mit den Links und dem div (auch) für den Container "menu" gelten lassen will. Ist sicher alles grottenfalsch.
Ich blicke da halt nicht durch, was welchem Attribut/Eigenschaft/Container whatever *omg* vorgestellt ist!! Sorry, ja ich habe SELFHTML und CSS4YOU, aber ich verstehe es nicht...habe mir auch schon Befehlssammlungen heruntergeladen, die haben mir aber auch nicht viel geholfen...

...würde mich freuen, wenn mir jemand helfen könnte...*erlöstes Lächeln*

[Dittboy]

Hier wird es sehr gut beschrieben, was es sich mit den "." und "#" aus sich hat. Selfhtml ist eh eine klasse Seite, um was nachzuschlagen. Dass ganze kann man sich auch Herunterladen, zum offline-anschauen.


Bei "." wird dem container eine class zugewiesen, die man dann so aufruft:

<div class="divoben">
   ...

Bei "#" wir dem container eine id zugewiesen, die darfst du aber nur ein mal im gesamten dokument benutzen. Das gaht dann so:

<div id="divoben">
   ...

Ich empfehle, solange du es nicht wir Jscript etc. brauchst, immer "class" zu nehmen.

Mfg
Dittboy

[unclefu86]

Okay, wenigstens das habe ich verstanden...nur irgendwie kommt bei mir dann gerade wieder die ökonomische Galle hoch, weil ich mich frage, was das soll?
Ich meine, zwar kann ich extern in einer Stylesheetdatei definieren, was nützlich ist, wenn ich mehrere Eigenschaften in einem vereinen will und das ganz oft (wann ist das mal nötig, ich meine, soviel drumrum um einen Code habe ich bisher nie gebraucht ), aber ich muss ja immer wieder bei jedem Abschnitt, den ich entsprechend definiert haben will, den exakten (und nur den!) Container inklusive Class davor (und dahinter) setzen! Wenn ich mir jetzt überlege, dass ich das andauernd machen muss *grusel*. Da bin ich auch nicht weiter, als mit HTML. Ich kann mir einfach nicht erklären (tschuldigung ich bin vielleicht nicht so der abstrakte Denker) wieso die Darstellung mit HTML so verschieden ist (weis ich ja, selbst schon erlebt) und mit CSS nicht??! Ich meine, warum nicht gleich so? *zwinker*

Und ich wollte nochmal fragen: In die Containereigenschaften

.menu

und

.content

kann ich hinter dem { auch alle Eigenschaften wie

h1 / hx / hn / p /ul / li /td

o.ä. unterbringen?? (*edit* die dann eben für <h1 /hx / hn / p /ul / li /td class=... neben der HTML Eigenschaft die definierte CSS Eigenschaft haben?)

Mein Problem war ja, dass ich die genannten Verfeinerungen per > und * auch anbringen wollte, wobei ja in CSS4YOU ein * ein Universal"selektor" ist und bei SELFHTML ein Zeichen innerhalb eines Selektors ist! Irgendwie alles sehr verwirrend.

PS: @Dittboy: Also laut SELF HTML kann man ja doch mehrere # und id's nutzen!! (Siehe hier, Unterpunkt "Individualformate")

@ unclefu86:
ich würde dir empfehlen, die seite www.css4you.de noch ein wenig eingehender zu studieren. ich würde fast wetten, dass du alle antworten auf die eben gestellten fragen dort selber findest.