[Crater2150]

hi, ich bin gerade dabei meine Seite von Tabellen auf DIV's umzustellen, Ich habe jetzt aber ein Problem:
Ich hatte vorher eine Tabelle mit 2 Spalten und 3 Zeilen.
Ich habe nun die Zellen in DIV's eingefügt.
Diese DIV's liegen in einem übergeordneten DIV, weil Menü und Inhalt dadurch getrennt sind.
Ich habe bei dem Haupt-Div "height: 100%;" angegeben, trotzdem geht die Hintergrundfarbe des DIV's nicht bis zum unteren Seitenende.

Screenshot-Link
Die roten Kasten auf dem Screenshot sind die untergeordneten DIV's.
Normalerweise sollte die linke Spalte blau (#00C0FF) sein und die rechte türkis (#00FFFF).

<div class="menu">

<!-- Inhalt des Menü-Teils -->

</div>

<div class="main">

<!--Titel-->
<div style="border:3px groove;"><h1>Ausstellung</h1></div>
<!--Titel Ende-->

<p class="klein">Klicken sie auf die Bilder um sie zu vergrößern.</p>

<div class="links">
<p class="center">Ein wichtiger Bestandteil unserer Öffentlichkeitsarbeit sind die Wanderausstellungen. Als gemeinsamer Treffpunkt dienen sie dazu, die Pfadfinderei  mal auf einer anderen Ebene darzustellen und im Eigeninteresse neue Kontakte zu knüpfen.</p>
</div>

<div class="rechts"><a href="../Bilder/Ausstell1.html"><img src="../Bilder/Ausstell1.jpg" width="300" height="230" border="0" alt="50 Jahre DPSG Stamm Lichtenstein" align="center"></a>
<i class="Beschreibung">50&nbsp;Jahre&nbsp;DPSG&nbsp;Stamm &nbsp;Lichtenstein,&nbsp;Haßfurt</i></div>

<div class="links">
<p><a href="../Bilder/Ausstell2.html"><img src="../Bilder/Ausstell2.jpg" width="373" height="230" border="0" alt="50 Jahre DPSG Stamm Westgoten" align="center"></a></p><i class="Beschreibung">50 Jahre DPSG Stamm Westgoten, Bernkasel-Kues</i>
</div>

<div class="rechts"><p class="center">Hauptthemen der Ausstellung sind Pfadfindersachen aus aller Welt, wie z.B. Abzeichen, Gürtelschnallen, Hemden (Kluft) und Banner. Aber auch Briefmarken, sowie Themen über , Jamborees, Baden-Powell, Pfadfinderkunst und Pfadfinder im 3.Reich (Verbotszeit).</p></div>

</div>

Der CSS-Code schaut so aus:

.main             {
                  height: 100%;
                  width: 80%;
                  float:right;
                  padding: 4px;
                  spacing: 4px;
                  font-weight: lighter;
                  font-size: 15pt;
                  background-color: #00FFFF;
                  font-family: comic sans MS;
                  }

.menu             {
                  width: 14%;
                  float:left;
                  padding: 0px;
                  spacing: 0px;
                  font-size: 15pt;
                  background: #00C0FF;
                  font-family: comic sans MS;
                  }

div.links  {float:left; width:40%;}
div.rechts  {float:right; width:40%;}

Wieso wird der türkise Hintergrund nicht bis zum unteren Rand angezeigt?

PS: Link kann ich keinen angeben, da die Seite noch nicht online ist.

MfG Crater2150

[Slayer]

Also als erstes würde ich dir raten, dass du im CSS immer folgende Schreibweise nimmst:
height:100%;

Du solltest das Atrtibut (in diesem Fall die 100%) immer direkt nach dem Doppelpunkt schreiben, weil es bei manchen Borwsern direkt nach dem Doppelpunkt erwartet wird, so kann es zu Problemen kommen. Also benutze immer diese Schreibweise.

Ich schätze, dass das Problem an dem padding und spacing liegen könnte, probier's mal bei beiden mit 0 ob es dann geht...

Dieser Beitrag wurde von Corey bearbeitet: 16. März 2005 - 20:33

[Floele]

Zitat

Du solltest das Atrtibut (in diesem Fall die 100%) immer direkt nach dem Doppelpunkt schreiben, weil es bei manchen Borwsern direkt nach dem Doppelpunkt erwartet wird, so kann es zu Problemen kommen. Also benutze immer diese Schreibweise.

Biste dir da sicher? Wenn ja, dann sag mal ein Beispiel
Aber diese Schreibweise ist trotzdem besser, da man vor allem bei größeren Stylesheets dann einige Bytes gespart hat.

Zitat

padding und spacing

Ich hoffe zu meinst 'margin' und padding

Also bei mir sieht die Seite so aus wie du es haben willst, aber wahrscheinlich hilft es wenn du

body {margin:0;padding:0;}

hinzufügst. Bei div-Elementen ist sowieso beides 0.

[Slayer]

@Floele
Ich gebe EDV-Unterricht und in meinem Kurs habe ich auch so ein Gebiet, bei dem ich HTML und CSS beibringen muss. Auf jeden Fall steht dort in dem Lehrbuch geschrieben, dass manche Browser (Netscape...) das Attribut direkt nach dem Doppelpunkt erwarten und dass die Schreibweise deshalb wesentlich sinnvoller ist... Das Buch ist allerdings von 2000, aber schaden kann es nicht :-)

[Floele]

Sagen wir mal so: Die Browser, die sowas nicht auf die Reihe bekommen, werden die Seite sowieso nicht wie gewünscht anzeigen. Ich denke mal das Buch redet von Netscape 4 und bei dem Browser ist es sowieso hoffnungslos ein funktionierendes Stylesheet zu entwerfen.

Dieser Beitrag wurde von Floele bearbeitet: 16. März 2005 - 20:58

[Slayer]

Zitat (Floele: 16.03.2005, 20:57)

Sagen wir mal so: Die Browser, die sowas nicht auf die Reihe bekommen, werden die Seite sowieso nicht wie gewünscht anzeigen. Ich denke mal das Buch redet von Netscape 4 und bei dem Browser ist es sowieso hoffnungslos ein funktionierendes Stylesheet zu entwerfen.
<{POST_SNAPBACK}>

Da hast du allerdings Recht^^

Ich freue mich schon drauf, wenn dann endlich der IE7 mit CSS2 Unterstützung raus kommt, dann kann man CSS auch dort richtig anwenden. Obwohl ich nix mehr anderes als meinen Firefox verwenden werde

@Floele ich komme bald wieder auf dich zu wegen DIVs habe da auch noch n paar kleine Fragen

[Floele]

Zitat

Ich freue mich schon drauf, wenn dann endlich der IE7 mit CSS2 Unterstützung raus kommt, dann kann man CSS auch dort richtig anwenden.

Naja, ich bin da noch skeptisch. Mit voller Unterstützung wird der eh nicht kommen (Firefox hat übrigens auch keine volle Unterstützung).

Zitat

Obwohl ich nix mehr anderes als meinen Firefox verwenden werde

Hab grade heute wieder ne tolle Erweiterung gefunden, und zwar eine, die die gesendeten und empfangenen HTTP Header anzeigt. Kann manchmal sehr hilfreich sein

Zitat

@Floele ich komme bald wieder auf dich zu wegen DIVs habe da auch noch n paar kleine Fragen

Kann's kaum erwarten

[Crater2150]

Ich habe gemacht was ihr gesagt habt, aber das Problem ist immer noch da.

Ich habe aber gemerkt, dass die Seite nur im Firefox nicht richtig angezeigt wird.
Im IE gehts...

Ich habe das Problem jetzt gelöst, indem ich den Unter-DIV's auch die Hintergrundfarbe zugewiesen habe und sie auf die gleiche größe gebracht habe.
Ist aber nur eine Notlösung, ob das so gut ist weiß ich nicht...

Dieser Beitrag wurde von Crater2150 bearbeitet: 17. März 2005 - 18:59

[Floele]

Nun, da ich im Firefox kein Problem mit dem Code da oben feststellen konnte, würde ich sagen, dass du das einfach mal irgendwo online stellst damit ich mir das angucken kann.

[Crater2150]

http://crater2150.cr...ellung-alt.html

Bilder fehlen jetzt zwar bei dem Link, aber das Problem kann man trotzdem erkennen.


Hier habe ich den untergeordneten DIV's die Hintergrundfarbe zugewiesen.

http://crater2150.cr...ellung-neu.html

div.links  {float:left;width:50%;height:250px;}
div.rechts  {float:right;width:50%;height:250px;}

Kann man das so lassen ?

Dieser Beitrag wurde von Crater2150 bearbeitet: 18. März 2005 - 14:55

[flo]

Zitat

.main            {
                height: 100%;
                width: 80%;
                float:right;
                padding: 4px;
                spacing: 4px;
                font-weight: lighter;
                font-size: 15pt;
                background-color: #00FFFF;
                font-family: comic sans MS;
                }

versuchg es mal ohne

height: 100%;

[Floele]

Zitat

Kann man das so lassen ?

Theoretisch schon, aber ob das sinnvoll ist ergibt sich dann aus dem Zusammenhang

Zitat

versuchg es mal ohne

height: 100%;

Das kann man sich nämlich sparen, weil der Inhalt den Bereich in diesem Fall automatisch vergrößert.

[Crater2150]

Auf www.css4you.de war das bei den Tutorials so dringestanden, drum hatte ich das Height reingeschrieben.

Danke nochmal für die Hilfe, jetzt ist alles so wie's sein soll.