Elemente zu gross und falsch positioniert

[marjac99]

Hallo zusammen,

ich bin dabei, für meine Frau eine HP zu basteln.
Habe allerdings 2 Probs mit dem css, wo ich hoffe, dass ihr helfen könnt.

Die Seite: Pimar
die css: http://pimar.ch/formatierung-index.css

Der background, von ihr erstellt, ist 800px hoch und wird nicht gekachelt. Zum Weiterführen nach unten habe ich ein Element 'Inhalt' erstellt, wo dann das Design weitergeführt wird bis zum footer. Der Text kommt in das Element 'Schreibfeld'.
Das erste Problem: 'Inhalt' kachelt viel zu lang nach unten.
Es sollte aufhören, wenn das Textfeld zu Ende ist.
Wie bekomme ich das hin?
(Ich hab zum besseren Erkennen im Moment noch die Elemente gerahmt)

Zweites Problem: Der IE stellt das Element 'Navigation' an die falsche Stelle. Während es im FF genau ausgerichtet ist, hat es im IE eine Tendenz nach 'rechts oben'.

Auch hier meine Frage: Was hab ich falsch gemacht? Brauchts etwas bestimmtes für den IE?

Dank im Voraus,

Martin

Edit: Das Problem mit der Darstellung der Navigation im IE hab ich hinbekommen. Bleibt aber immer noch der zu lang gekachelte Inhalt. Ich denke mal, ich hab da nur eine Kleinigkeit übersehen, aber ich seh' den Wald vor lauter Bäumen nicht...

 

[anna55]

Was macht denn das Wort Netscape im CSS? Das kommst mit sämtlichen Eigenschaften und Werten komplett raus.

Wirf mal einen Blick in eine aktuelle Browserstatistik:
Browser Statistics

Geändert habe ich - überprüft nur im Firefox - dann noch hier diese Werte, vergleich einfach mal:

#Inhalt {
margin: 190px auto 67px;
    padding: 0px;
    width: 1017px;
    background-image: url(http://pimar.ch/grafik/bg_mitte.jpg); 
    background-repeat: repeat-y;
border:2px solid lime;
      }


#Schreibfeld {
    position:relative;
    left: 100px;
    bottom: 10px;
    width: 670px;
    padding: 10px;
    background: none;
    font-size: 20px;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    color: #4A4A4A;
  border:2px solid purple;
   }

 

[marjac99]

Danke, Anna, für deine Bemühungen.

Das Ding mit dem Netscape war wohl noch aus einem älteren css drin, kommt davon, wenn man bestehendes einfach immer wieder benutzt und nur halb aufräumt. Danke (auch für den Link)!

Deine Lösung ist aber leider auch nicht das, was ich brauche. Ich hab mich aber wohl auch blöd ausgedrückt.
Die Seite hat im Body eine Grafik (bg_logo.jpg), die auch ein Schriftfeld simuliert. Das Element 'Inhalt' (in lime) soll deshalb erst am unteren Ende dieser Grafik ansetzen und per Kachelung (bg_mitte.jpg) bei Bedarf fortsetzen.
Um aber bereits oben in dem bg_logo schreiben zu können, habe ich das Element 'Schreibfeld' auf top:-520px gesetzt.
Das funzt ja auch.
Allerdings kachelt 'Inhalt' munter eben diese 520px nach unten weiter, obwohl 'Schreibfeld' beendet ist.
Die beiden sollten gleichzeitig aufhören, direkt oberhalb von 'Fusszeile'.
Das bekomme ich eben nicht hin.

Danke

Martin

 

[anna55]

Ich glaube, ich kapiere denn Sinn gar nicht, aber gib mal Deinem #Schreibfeld noch ein

margin-bottom:-520px;

 

[marjac99]

Hallo Anna,

der Sinn ist der, dass die Grafik bg_logo ganz zu sehen ist und erst an dessen unterem Ende bei Bedarf durch #Inhalt weiter gekachelt wird.
Die Grafik bg_logo hat oben rechts einen Lichtschein, der nicht zu kacheln ist.
Habe inzwischen selber etwas weiter gebastelt, das Element 'Inhalt' nach oben verschoben und die Grafik bg_logo in ein neues Element 'Header' verschoben.
Meine Überlegung war, per z-index die Ebenen anzuordnen.
So hab ich folgende Reihenfolge angegeben:
#Inhalt: -1
#Header: 2
#Navigation: 3
#Schreibfeld: 4
#Fusszeile: 5
#Footertext: 6

So müsste, wenn ich mich nicht irre, eigentlich der Inhalt hinter dem Header versteckt sein.
Ist er auch, aber gleichzeitig das Element Schreibfeld, welches doch eigentlich von der Wertigkeit her mit 4 höher ist als der Header mit 2.
Funzt also auch nicht.
Warum?

 

[anna55]

z-index geht nur in Zusammenhang mit einer Angabe zu position:
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

So wie Du's jetzt hast, muss der Div Header position und einen negativen z-index bekommen.