Beiträge von sejuma

  • Fehler beim Einbinden einer css-Datei

    Warum brauchst du denn eigentlich zwei CSS-Dateien?
    Du kannst auch zwei (und noch mehr) unterschieliche Menues in eine CSS-Datei packen. Dazu musst du lediglich zu den Elementen die jeweiligen div's angeben.
    Z.B. so:

    #navi a:link {Style-Angaben Vertikalmenue}
    #navi1 a:link {Style-Angaben Horizontalmenue}

  • Table durch DIVs ersetzen. Untereinander?

    So?

  • IE vs firefox - layer an verschiedene stellen - again!

    Doch, es gibt eine saubere Lösung, siehe meinen letzten Link.
    Die Buttons fügst du dabei jedoch nicht als img sondern als background-image im a-Tag ein. Verwende doch einfach mal diesen Code, ersetze die Bilddatei mit deiner und ersetze den Linktext mit deinem. Ggf. sind dann noch der width-Wert und die Farben anzupassen.
    Wenn sich der Button dann beim a-Element befindet, kommt auch die Textbeschriftung drauf. Unterschiedliche Layer und Ebenen sind dabei nicht erforderlich.

  • IE vs firefox - layer an verschiedene stellen - again!

    Es macht keinen großen Sinn, für jeden Link einen einzelnen Layer zu verwenden, der zudem noch absolut positioniert ist. Da blickst du irgendwann überhaupt nicht mehr durch und durch die Positionsangaben kann es schnell mal zu Fehlern und damit Überlagerungen kommen.
    Ich empfehle dir deshalb, deine gesamte Navi mit einem Listencode zu ersetzen.
    Zahlreiche Code-Beispiele findest du hier, mit Hintergrundgrafiken z.B. dieses.

  • IE und CSS: Iframe funzt net richtig - ERLEDIGT

    Sorry, da lag ich daneben. Dominikat hat Recht.
    Aber dennoch solltest du auch alle übrigen CSS-Angaben in diese Datei packen.

    Jetzt nochmal zu deiner ursprünglichen Frage: Aus meiner Sicht wird die Seite sowohl im IE 6 und 7 als auch im FF gleich angezeigt. Außer dem farbigen Scrllbalken, den der FF nicht unterstützt.

  • IE und CSS: Iframe funzt net richtig - ERLEDIGT

    Im IE7 sieht's gut aus.
    Aber:

    Code
    </style>
   <link href="style1test.css" rel="stylesheet" type="text/css">
   <style type="text/css">


    Der Verweis auf die CSS-Datei befindet sich außerhalb des style-Tags.
    Muss nicht, aber könnte eine Ursache sein.
    Warum packst du denn nicht konsequent alle CSS-Angaben in diese Datei?

  • FAQ's zu HTML und CSS

    Bitte hier außer FAQ's keine weiteren Beiträge einstellen (wird noch um Themen ergänzt)

    INHALT

    I. Wie erstelle ich eine Homepage? - Tutorials

    II. CSS: Layoutbeispiele, Positionierungen u.v.m.
    1. Das Boxmodell - unendliche Breiten
    2. Layoutbeispiele
    3. Richtig floaten
    4. Seite horizontal zentrieren
    5. Seite horizontal und vetrikal zentrieren
    6. Gleich lange Divs / Faux Columns

    III. Links, Menues und Navigation
    1. Unterstrich bei Links entfernen
    2. Standardmenues mit CSS gestalten
    3. Ausklappmenues, Dropdownmenues
    4. Navigation per PHP includen
    5. Links unterschiedlich gestalten
    6. Den Link der jeweils geöffneten Seite optisch hervorheben
    7. Interne Links, Verweise und Anker setzen

    IV. Bilder und Grafiken auf der Homepage
    1. Bilder und Grafiken werden nicht angezeigt
    2. Unter dem Bild erscheint ein kleiner Rand


    I. Wie erstelle ich eine Homepage? - Tutorials

    Friedel's HTML-Crashkurs
    sejuma's CSS-Einsteigerkurs
    CSS-Fundgrube www.ohne-css.gehts-gar.net
    HTML lernen
    Homepage im Internet veröffentlichen
    http://www.admin-wissen.de/tutorials...g/html-lernen/


    II. CSS:Layoutbeispiele, Positionierungen u.v.m.

    1. Das Boxmodell - unendliche Breiten
    Das CSS-Boxmodell
    Wichtig: Die Gesamtbreite eines Containers (div's) ergibt sich aus seiner eigentlichen Breite, zuzüglich der linken und rechten Breiten für Rahmen und Padding.
    Der Box-Model-Bug des Internetexplorers führt zu einer fehlerhaften Darstellung des Boxmodells. Abhilfe schafft i.d.R. der richtige DOCTYPE.

    2. Layoutbeispiele
    Einige Links für verschiedene Layoutbeispiele mit CSS:
    http://www.dynamicdrive.com/style/layouts/
    http://www.css4you.de/wslayout1/index.html
    http://www.stichpunkt.de/css/bereiche.html
    http://css.fractatulum.net/sample/layout1format.htm
    http://blog.html.it/layoutgala/

    3. Richtig floaten
    http://css-technik.de/css-examples/219_9/
    http://de.selfhtml.org/css/eigenschaf…erung.htm#float

    4. Seite horizontal zentrieren
    Eine Seite lässt sich horizontal zentrieren, indem man ihren Quelltext innerhalb des body-Bereiches in einen zentrierten Container packt. Dieser muss eine fixe Breite haben.
    CSS-Code dieses Containers (Beispiel; Werte können verändert werden; außer margin auto):

    Code
    #horizontalzentriert
{background-color: #ff00ff; width:500px; height:400px; margin: 0 auto;}

    Der height-Wert ist nicht unbedingt erforderlich. Ohne ihn passt sich die Höhe ihrem Inhalt an.
    HTML-Code

    Code
    <body>
<div id="horizontalzentriert">Dieser div ist horizontal zentriert.
 
In ihm kann noch weiterer Quelltext mit weiteren Elementen stehen.</div>
</body>

    Sollte der Internetexplorer <7 die Seite nicht zentriert darstellen, liegt dies meist daran, dass kein oder ein falscher Doctype vorhanden ist.

    5. Seite horizontal und vertikal zentrieren
    Voraussetzung ist, dass die Seite (div) eine bestimmte Breite und Höhe hat. Im Beispiel soll sie 700px breit und 500px hoch sein.

    Um ein einheitliches Browserverhalten zu gewährleisten sollte der body folgende Angaben enthalten:

    Code
    body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}

    Den Container, den es innerhalb des body zu zentrieren gilt, nennen wir #center.

    Daraus folgt der HTML-Code:

    Code
    <body>
<div id="center">
Ich bin ein zentrierter Container
</div>
</body>

    Der #center wird per CSS zunächst so formatiert (Farbangabe und Rahmen nur zur besseren Verdeutlichung):

    Code
    #center
{
background-color: red;
border:2px solid black;
width: 700px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
}

    Zwischenergebnis:
    Die obere linke Ecke des #center ist jetzt genau in der Mitte des Bildschirms. Also 50% von oben und 50% von links positioniert.
    Damit jetzt die Zentrierung erfolgt, muss er nach links und nach oben "zurück" geschoben werden. Und zwar genau um den hälftigen Wert seiner Breite und Höhe. Dies erreicht man mit entsprechenden negativen margin-Werten.
    Somit fügen wir dem #content noch folgende Angaben hinzu:

    Code
    margin-left: -350px;
margin-top: -250px;

    oder insgesamt:

    Damit ist der Container zentriert. In ihn kann man jetzt weitere Elemente wie z.B. Header, Navi und Content packen.


    III. Links, Menues und Navigation

    1. Unterstrich bei einem Link entfernen
    Sofern das Menue mit CSS-Angaben formatiert ist:

    Code
    a:link, a:visited, a:hover {text-decoration:none;}

    oder direkt im HTML-Teil:

    Code
    [URL='http://#']Link ohne Unterstrich[/URL]


    2. Standardmenues mit CSS gestalten
    Für CSS-Menues sollte man das Listenformat verwenden. Es dient zum einen der Übersichtlichkeit im Quelltext und lässt sich zum andern systematischer formatieren.
    Zahlreiche Codebeispiele bieten
    Listamatic
    CSS Library - Horizontal-Menues
    CSS Library - Vertikal-Menues


    3. Ausklappmenues, Dropdownmenues
    Ausklappmenues mit Unternavigation erfordern meist Javascript, da der Internetexplorer bis Version IE6 den Hovereffekt für den li-Tag nicht interpretiert.
    Ein vollkommen barrierefreies Ausklappmenue ohne Javascript gibt es hier: http://barrierefrei.e-workers.de/workshops/tricks/menues.php
    Diese Variante erfordert sehr umfangreiche Sonderdefinitionen für den Internetexplorer.

    Etwas einfacher ist es, den Internetexplorer (bis Version 6) zu "trimmen", indem man eine bestimmte Javascriptdatei hinterlegt. Diese Methode ist sehr ausführlich hier beschrieben: http://www.drweb.de/leseproben/klappmenu.shtml


    4. Navigation per PHP includen
    Im Unterschied zu Frames wird mit der CSS-Methode immer eine Seite komplett geladen. Das bedeutet, dass sich auf jeder Datei auch immer der komplette HTML-Code der sogenannten "Fixbestandteile" wie z.B. Header und Navigation befinden muss.
    Besteht eine Website aus sehr vielen Einzelseiten und soll z.B. ein Link in der Navigation geändert, entfernt oder hinzugefügt werden, so müsste jede Seite einzeln angepasst werden, was sehr umständlich und aufwendig ist.
    Es gibt Editoren wie z.B. den "Phase 5", mit denen man die Anpassung dateiübergreifend nach der Methode "Suche und Ersetze" vornehmen kann.
    Einfacher ist es, Fixbestandteile einer Homepage zentral in einer Datei zu hinterlegen und sie in die jeweilige Seite einzufügen (includen).
    Um diese Methode anzuwenden muss der Webserver php-fähig sein (das Webpaket muss PHP enthalten). Die einzelnen Dateien müssen die Dateiendung "php" statt "html" haben. Dazu z.B. die bisherige "index.html" einfach umbenennen in "index.php".
    Achtung: Eventuell bereits vorhandene Links müssen ebenfalls umbenannt werden.

    Nun schreibt man in den Navi-Container anstelle des HTML-Codes mit den einzelnen Links nur folgendes:

    PHP
    <?php include("menue.php"); ?>

    Den HTML-Code mit den einzelnen Links schreibt man (mit einem einfachen Editor) in eine weitere Datei und speichert diese mit der Bezeichnung "menue.php" ab.
    Inhalt dieser Datei könnte z.B. sein:

    Code
    <ul>
[*][URL='http://index.php']Startseite[/URL]
[*][URL='http://seite1.php']Seite 1[/URL]
[*][URL='http://seite2.php']Seite 2[/URL]
[/list]

    Soll später das Menü einmal geändert oder ergänzt werden, muss man lediglich die Datei "menue.php" anpassen.
    Nach der gleichen Methode könnte auch der Header includet werden.

    Hinweis: Zum Testen müssen die Dateien erst auf den Webspace hochgeladen werden oder auf dem PC muss z.B. XAMPP installiert sein.

    5. Links unterschiedlich gestalten
    Will man neben den Standardlinks im Menue auch noch andere Links einfügen, die davon abweichend gestaltet sein sollen, ist dies durch Definition weiterer Link-Klassen möglich.

    CSS-Standard-Link:

    Zusatzlink (Definition über die Klasse ".class1" – Bezeichnung beliebig):

    CSS-Code:

    HTML-Code:

    Code
    [URL='http://#']Standardlink[/URL] 
 
[URL='http://#']Zusatzlink definiert über class1[/URL]


    6. Den Link der jeweils geöffneten Seite optisch hervorheben
    Hierzu ist im CSS-Teil ein zusätzlicher ID oder eine zusätzliche Klasse zu definieren (siehe hierzu auch 5.)
    Auf der jeweiligen Seite ist beim Link dieser Seite auf diesen Zusatz-ID oder die Zusatzklasse zu verweisen.
    Eine Anleitung hierzu gibt es (in englisch) hier: http://www.alistapart.com/articles/keepingcurrent

    7. Interne Links, Verweise und Anker setzen
    https://www.forum-hilfe.de/viewtopic.php?t=30480&highlight=


    IV. Bilder und Grafiken auf der Homepage

    1. Bilder und Grafiken werden nicht angezeigt
    Als häufige Fehlerursachen kommen in Betracht:

    Die Bilddateien befinden sich nicht auf dem Webspace >>> hochladen

    Der Pfad zu den Bilddateien verweist auf die Festplatte des eigenen PC's, der nicht mit dem web verbunden ist

    Das sieht dann z.B. so aus:

    Code
    [img]file:///C:/Dokumente%20und%20Einstellungen/bilddatei.jpg[/img]

    Dieser Pfald verweist fälschlich auf die Festplatte C.
    Richtig müsste er lauten (sofern sich die Bilder im gleichen Webspace-Ordner wie die html-Dateien befinden):

    Code
    [img]bilddatei.jpg[/img]

    Der Name der Bilddatei beinhaltet unzulässige Zeichen

    Bilddateien sollten durchgängig in Kleinschrift benannt sein. Sie dürfen keine Umlaute (ä,ö,ü) und Sonderzeichen (z.B. ß, /, (, :, !, " usw.) und Leerzeichen enthalten.
    Also nicht

    Code
    schönes Spaßbild.jpg

    sondern:

    Code
    schoenesspassbild.jpg

    Dateiendungen stimmen nicht überein

    Es ist darauf zu achten, dass Pfad und Datei die gleichen Dateiendungen haben.
    Beispiel:
    Dateibezeichnung:

    Code
    meinbild.jpg

    Pfad:

    Code
    [img]meinbild.JPG[/img]

    In diesem Fall ist die Dateiendung "jpg" im Pfad groß geschrieben und weicht somit von der Dateibezeichnung (Kleinschreibung) ab. Richtig wäre deshalb:

    Code
    [img]meinbild.jpg[/img]

    (dieser Tipp stammt von Dark_Dog)


    2. Unter dem Bild erscheint ein kleiner Rand
    Bilder sind Inline-Elemente, die einen natürlichen Abstand zur unteren Textlinie haben.
    Das Problem lässt sich beheben, indem man sie als Blockelemente definiert:

    CSS:

    Code
    img {display: block;}

    oder direkt in HTML:

    Code
    [img]bilddatei.jpg[/img]

    alternativ:

    Code
    <div>[img]bilddatei.jpg[/img]</div>