Antworten auf deine Fragen:
Neues Thema erstellen

Azeigeprobleme im IE

boppel

rumboppeler

AW: Azeigeprobleme im IE

Ah, sehr gut! Da hab ich auch mal was gefunden ;-)

Du scheinst ein System zu haben, wann Du id's und wann Du class einsetzt. Nur verstehe ich noch nicht den tieferen Sinn dahinter. Wenn ich das richtig in Erinnerung habe, lassen sich ja class-Elemente auf mehrere Tags anwenden; da man aber jeden Link in der ungeordneten Liste leider einzeln platzieren muss, kann man auf diesen Vorteil ja nicht zurückgreifen.
 

sokie

Mod | Web

AW: Azeigeprobleme im IE

leider ist das ein ganz schlechtes Beispiel. die listenelement mit IDs zu versehen, wäre in dem Fall genauso möglich gewesen.
der grosse unterschied zwischen IDs und Klassen ist der, dass man Klassen mehrmals im Dokument verwenden kann, IDs sind eindeutig und gehören nur zu einem Element.
Da die Bereiche wrapper, header, left und footer im Dokument nur einmal vorkommen bietet sich hier die id an. (IDs haben noch einen grossen vorteil, das ist die Selektierbarkeit per Javascript).

bei der absoluten Positionierung in einem relativ positionierten Bereich ergeben sich vorteile durch Klassen. mein erster Gedanke war eigentlich vier relative Divs zu benutzen (also Ausstellung,Seminare,Idee und Kontakt) und die klassen für die listenelemente(und deren <a>s) .mitterechts ,.mitteunten und .untenrechts zu positionieren, da hätte man immer nur eine klasse zum positionieren von jeweils 4 elementen benötigt.
 
Zuletzt bearbeitet:

boppel

rumboppeler

AW: Azeigeprobleme im IE

Ah, verstehe. Ist ja eigentlich nicht schlecht gedacht. Und was war dann der Haken, dass Du das dann anders gelöst hast?

Verständnisfrage: die Klassen .mitterechts usw. würden dann unter <li> gesetzt werden, oder? Du schreibst da nämlich gesondert noch was von den <a>'s.
 

boppel

rumboppeler

AW: Azeigeprobleme im IE

So sieht's nun aus:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Willkommen | PER | Popularisierung von Eugenik und Rassenhygiene</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
    <div id="boxleft">
        <div id="left">
            <ul>
                <h2 id="ausstellung"><a href="ausstellung.htm">Die Ausstellung</a></h2>
                <li id="anfahrt"><a href="*********htm">Anfahrt</a></li>
                <li id="oeffnung"><a href="oeffnung.htm">Öffnungs-<br />zeiten</a></li>
                <li id="konzeption"><a href="konzeption.htm">Konzeption</a></li>
            </ul>
            
            <ul>
                <h2 id="seminar"><a href="seminar.htm">Das Seminar</a></h2>
                <li id="dozenten"><a href="dozenten.htm">Dozenten</a></li>
                <li id="inhalte"><a href="inhalte.htm">Inhalte</a></li>
                <li id="exkursion"><a href="exkursionen.htm">Exkursionen</a></li>
            </ul>
            
            <ul>
                <h2 id="kontakt"><a href="kontakt.htm">Kontakt</a></h2>
                <li id="kontaktformular"><a href="kontaktformular.htm">Kontakt-<br />formular</a></li>
                <li id="presse"><a href="presse.htm">Presse</a></li>
                <li id="impressum"><a href="impressum.htm">Impressum</a></li>
            </ul>
            
            <ul>
                <h2 id="idee"><a href="idee.htm">Die Idee</a></h2>
                <li id="lehrreich"><a href="lehrreich.htm">lehrreich</a></li>
                <li id="offen1"><a href="index.htm">offen1</a></li>
                <li id="offen2"><a href="index.htm">offen2</a></li>
            </ul>
        </div>
    </div>
    
    <div id="boxright">
        <div id="right">
            <p>Eine Seminar-Produktion der <br />Fakultät für Geschichtswissenschaften und der Medizinischen Fakultät.<br />Ruhr-Universität-Bochum.</p>
        </div>
    </div>
</div>
</body>
</html>


Code:
@charset "utf-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}

body {
    background-color:#000000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;    
}

#wrapper {
    width:1200px;
    height:600px;
    margin:20px auto 0px auto;
    background-color:#333333;
}

#boxleft {
    width:600px;
    height:600px;
    float:left;
}

#left {
    width:504px;
    height:504px;
    position:relative;
    margin:48px;
    background-image:url(images/quadrate_index_504.jpg);    
}

#left h2 {
    font-size:12px;
    position:absolute;
}

#left li {
    list-style:none;
    font-size:10px;
    position:absolute;
}

#left a {
    text-decoration:none;
    font-weight:normal;
    color:#FFFFFF;
}

#boxright {
    width:600px;
    height:600px;
    float:left;
}

#right {
    width:504px;
    height:504px;
    position:relative;
    background-color:#000000;
    margin:48px;
    background-image:url(images/per504x304.JPG);
    background-repeat:no-repeat;
}

#right p {
    padding:394px 20px 0px 20px;
    text-align:right;
    font-size:12px;
    text-decoration:none;
    font-weight:normal;
    line-height: 20px;
}

/*Eigenschaften h2*/

#ausstellung {
    top:20px;
    left:20px;
    width:150px;
    height:30px;
}

#seminar {
    top:20px;
    left:272px;
    width:150px;
    height:30px;
}

#kontakt {
    top:272px;
    left:20px;
    width:150px;
    height:30px;
}

#idee {
    top:272px;
    left:272px;
    width:150px;
    height:30px;
}

/*Eigenschaften li*/

#anfahrt {
    top:94px;
    left:178px;
}

#oeffnung {
    top:178px;
    left:178px;
}

#konzeption {
    top:178px;
    left:94px;
}

#dozenten {
    top:94px;
    left:430px;
}

#inhalte {
    top:178px;
    left:346px;
}

#exkursion {
    top:178px;
    left:430px;
}

#kontaktformular {
    top:346px;
    left:178px;
}

#presse {
    top:430px;
    left:94px;
}

#impressum {
    top:430px;
    left:178px;
}

#lehrreich {
    top:346px;
    left:430px;
}

#offen1 {
    top:430px;
    left:346px;
}

#offen2 {
    top:430px;
    left:430px;
}

Sorry, hab leider noch keinen Server zum Hochladen.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben