✔ 3D-Rahmen mit individuellen Farben

[King Euro]

Hm, ok, dann wünsche ich dir viel Erfolg!

Wobei ich es so auch schon ziemlich akzeptabel finden würde:

<div style="border:2px outset #D4D0C8; background-color:#DDDDDD">
 Text<br />
 Dies ist nur ein Test!!<br />
 <textarea>BeispielTextfeld</textarea>
</div>

Aber das ist ja nun sowieso nur noch Ansichtssache und da ich mit deinem Projekt nicht vertraut bin.... .

Du machst das schon!

 

[sKATERchen]

So, nachdem ich nun probiert und probiert habe, habe ich doch nur einen einfachen Rahmen genommen - bringt immer noch das optisch beste Ergebnis. Wobei ich gestehen muß, es sieht nicht so aus, wie ich es mir vorgestellt habe und ich bin mir nicht sicher, ob ich es als Vorlage verwende oder nicht. Und trotzdem gibt es ein Problem, das mich wurmt und das ich erst noch beseitigen muß, aber ich komme da nicht weiter.
Unter FF lief die Seite ziemlich schnell so wie sie sollte - beim IE logischer Weise nicht, sonst währe es ja langweilig.
Problem ist, daß die Navigation ÜBER dem content liegen muß um bei der aktiven Karteikarte den Reiter optisch anzufügen. Das habe ich nur mit z-index hinbekommen und um das zum laufen zu bringen, mußte ich position: absolute setzen.
Im FF läuft es immer noch super, im IE verschieben sich jetzt aber die absolute-Divs nach rechts - was ich mir nicht erklären kann.
Ich weiß, es kann nur ein ganz dummer Fehler sein, aber ich finde ihn nicht - bitte helft mir

http://www.angl.de/software
http://www.angl.de/software/css/software.css

 

[Maik]

Wie es scheint erwartet der IE eine Positionsangabe der einzelnen Elemente:

#container{
        margin:0 auto;
        text-align: center;
        width:760px;
        height:560px;
        margin-top:5px;
        border-top: 2px solid white;
        border-right: 2px solid #404040;
        border-bottom: 2px solid #404040;
        border-left: 2px solid white;
        background-color: #D4D0C8;
        position: relative;
}

#navigation{
        z-index: 2;
        position:absolute;
        width:720px;
        height: 25px;
        margin: 0px 0 1px 20px;
        padding: 4px 0 0 0;
        left: 0;
}

#content{
        position:absolute;
        z-index: 1;
        height:390px;
        width: 720px;
        margin:25px 0px 0px 20px;
        border-top: 2px solid red;
        border-right: 2px solid #404040;
        border-bottom: 2px solid #404040;
        border-left: 2px solid white;
        left: 0;
}

div#footer{
        position: absolute;
        clear: both;
        color:black;
        margin: 420px 0 10px 0px;
        width:740px;
        height:40px;
        background: #D4D0C8;
        left: 0;
}

 

[sKATERchen]

Hey danke, das wars!
Ist mir zwar immer noch nen bißchen schleierhaft, warum das nach rechts verrutscht war und nicht nach links, aber auf left:0 währe ich wohl so schnell nicht gekommen. Liegt sicher daran, daß ich die position:... Angaben recht ungerne benutze, daher hatte ich das Problem noch nie.
Danke

 

[Maik]

Im Selektor #navigation ist wohl auch noch eine Positionsangabe von oben erforderlich -> top: 81px;.

 

[sKATERchen]

FF, IE und Opera haben's jetzt zwar korrekt angezeigt, habs aber dennoch eingetragen. Allerdings meintest Du 85px oder?

 

[Maik]

Hm..., bei mir passt es mit 81px.

Hast du auch den Doppelpunkt nach den padding-Angaben durch das Semikolon ersetzt?

 

[sKATERchen]

Stimmt, mein Fehler - naja, so ziemlich. Ich hatte bei padding die 4px von oben schon wieder weg genommen, weil es so nicht gepasst hatte (nachdem ich den : in ein ; geändert hatte )