Anfänger und IE

Status
Nicht offen für weitere Antworten.

JB4You

Mitglied
Hallo,

also ich bin blutiger Anfänger. Ich versuche mit css meine Homepage in bestimmte bereiche, die ihre größe variabel verändern, jenachdem wie groß das fesnter des browsers ist, einzuteilen. Da habe ich es mal mit css versucht.
Hier erst mal ein Schema meiner Bereiche:

bereiche.JPG

SO.
Meinen ersten Versuch kann man unter http://wwwsenior.fh-frankfurt.de/~bassl/Html/augenexperte.htm sehen.

Ich habe mich jetzt lange genug durchs Internet gewälzt, denke ich. Nun habe ich ein paar Fragen und hoffe, dass sie mir jemand beantworten kann:

Zunächst ein mal die Frage, bin ich überhaupt auf dem richtigen Weg, oder mache ich hier völligen mist?
Die Seite wird bei mir in Opera einwandfrei dargestellt, aber in IE sehe ich rein garnichts. Wie kommt das?
(Ich habe auch schon ausprobiert die prozentualen Angaben in absolute Werte zu ändern, auch kein Erfolg!)
Vielleicht könnte mir jemand zeigen, wie man sowas richtig macht, anhand eines simplen Beispiels, das wäre echt der hammer!
Soweit so gut, ich bin mal gespannt auf das Feedback
Bis denn dann ciao ciao
jonas
 
Hi,

entferne mal im HTML-Code die rotmarkierte Zeile:

Code:
<link rel="stylesheet" type="text/css" href="./augenexperte.css">
<style type="text/css">
</head>
<body>
dann sollte auch der IE was anzeigen.

Zudem wird in einer CSS-Datei das style-Element nicht notiert:

Code:
<style type="text/css">

...

</style>
 
Danke erst mal,
also das was ich erreichen wollte habe ich erreicht. nun wollte ich ne Stufe höher gehen und langsam zu meinem Endlayout kommen.
An http://wwwsenior.fh-frankfurt.de/~bassl/Html/Html/augenexperte.htm sieht man glaube ich schon recht gut, was ich zum Schluss haben will!
Zumindest in einem Browser wie Opera
Problem Nummer 1:
Naja, so ganz bekomme ich es trotzdem noch nicht hin.
Wer kann mir sagen, was ich noch falsch mache, da ich noch nicht ganz verstehe, auf was sich die prozentualen Angaben manchmal beziehen! Ich dachte, die beziehen sich immer auf den body in meinem Beispiel!
Problem Nummer 2:
Im IE is das ganze halt absolut unmöglich!
Ich weis noch nicht mal wo ich anfangen soll um das wieder hinzubiegen für den IE.

Danke im Voraus

jonas
 
Hi,

das lila-farbene Kreuz liesse sich auch durch eine geschickte Anordnung der border-Eigenschaft nachbilden:


  • HTML-Markup:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout - Struktur</title>
<link rel="stylesheet" type="text/css" href="./augenexperte.css">
</head>
<body>

<div id="ledgea">
        Hallo ich bin oben links
</div>

<div id="redgea">
        Hallo ich bin oben rechts
</div>

<div id="ledged">
        Hallo ich bin unten links
</div>

<div id="redged">
        Hallo ich bin unten rechts
</div>

</body>
</html>
  • CSS:
Code:
html,body {
        margin: 0;
        padding: 0;
        height: 100%;
}

div#ledgea {
        background: #ff0000;
        float: left;
        height: 19%;
        width: 20%;
        margin-right: 0 !important; /* Für moderne Browser */
        margin-right: -3px; /* Für IE */
        padding: 0;
        border-right: 0.5em solid #8000ff;
        border-bottom: 0.5em solid #8000ff;
}

div#redgea {
        background: #0000ff;
        height: 19%;
        padding: 0;
        border-bottom: 0.5em solid #8000ff;
}

div#ledged {
        background: #ffff00;
        float: left;
        height: 80%;
        width: 20%;
        margin-right: 0 !important; /* Für moderne Browser */
        margin-right: -3px; /* Für IE*/
        padding: 0;
        border-right: 0.5em solid #8000ff;
}

div#redged {
        background: #00cc33;
        height: 80%;
        padding: 0;
}
Vielleicht hilft dir das weiter.
 
Status
Nicht offen für weitere Antworten.
Zurück