Ergebnis 1 bis 4 von 4

Thema: FAQ's zu HTML und CSS

  1. #1
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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/eigenscha...rung.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:
    Code:
    #center
    {
    background-color: red;
    border:2px solid black;
    width: 700px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -250px;
    }
    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:
    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/wor...cks/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:
    Code:
    <?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>[*]Startseite[*]Seite 1[*]Seite 2[/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:
    Code:
    a:link
    {
    color:#FF00FF;
    text-decoration:none;
    }
    a:visited
    {
    color:#8B2323;
    text-decoration:none;
    }
    a:hover
    {
    color:#FFB90F;
    font-weight:bold;
    font-size:1.1em;
    text-decoration:none;
    }
    Zusatzlink (Definition über die Klasse ".class1" – Bezeichnung beliebig):

    CSS-Code:
    Code:
    a.class1:link 
    { 
    color:#ff0000; 
    text-decoration:none; 
    } 
    a.class1:visited 
    { 
    color:#0000ff; 
    text-decoration:none; 
    } 
    a.class1:hover 
    { 
    color:#ADFF2F; 
    font-weight:bold; 
    font-size:1.1em; 
    text-decoration:none; 
    }
    HTML-Code:

    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
    http://www.forum-hilfe.de/viewtopic....480&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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Ausrufezeichen Gleicher Style in IE6, IE7 und FF

    ein nahezu gleiches aussehen werdet Ihr erhalten, wenn Ihr verschiedene Stylesheets fertig macht!
    Das Stylesheet für den Firefox sollte die Vorlage sein, weil der FF sehr nah an die Konformität des W3C herankommt.

    Am besten Ihr werkelt mit komplett externen Stylesheets und bindet diese in den Head der page ein.

    In diese speziellen Stylesheets schreibt ihr nur die Styleänderungen rein.

    also wenn der FF bei einem Div eine Breite von 200px hat und nen roten Hintergrund und nach rechts ein margin von 20px hat, der IE6 40px margin benötigt, damit alles gleich aussieht und der IE7 30px, dann kann alles bis auf den margin-Wert gleich bleiben und die anderen Werte werden ganze einfach überschrieben.

    FireFox
    Code:
    div{
    width:200px;
    background:#ff0000;
    margin-right:20px;
    }
    IE6
    Code:
    div{
    margin-right:40px;
    }
    IE7
    Code:
    div{
    margin-right:30px;
    }
    Unter das Stylesheet für den FF bindet ihr dann die Stylesheets für IE6 und IE7 unter Verwendung von Conditional Comments ein.
    Die Reihenfolge ist dabei wichtig, sonst bringt das Überschreiben nichts!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Kaiser(in)
    Themenstarter

    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @ Synaptic:
    Ich halte diese Vorgehensweise für recht überflüssig und damit für den Anwender nur verwirrend.
    Wenn der IE einen qualifizierten Doctype unter Angabe der DTD-URL hat,dann stellt er auch das Boxmodell richtig dar und es gibt überhaupt keinen Anlass, margins für den IE abweichend zu definieren.
    Dann gibt es auch noch den "Doubled-Float-Margin-Bug des IE 6, der sich mit einem schlichten "display: inline" beheben lässt: http://www.ohne-css.gehts-gar.net/0032.php
    Wozu also eigene CSS-Dateien oder conditional Comments für den IE?
    Ich halte das für ziemlich überflüssig und unnötig. Es mag ganz spezielle Dinge geben, für die man so etwas benötigt. I.d.R. aber nicht für margin.

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    das mit dem margin war ja auch nur ein beispiel, damit es kurz bleibt.
    ich selber habe oft gfenug erlebt, dass man eine site baut und dann entsprechend viele stylesheets benötigt.
    habe diese technik auch bei allen seiten die sehr gleich aussehen gefunden..
    unter anderem das css framework yaml funzt ebenso.

    verwirrend finde ich daran gar nichts.
    ist alles "modular" aufgebaut...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Per Html und PHP über HTML Form einloggen
    Von PatrickK im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 14.07.2008, 14:45
  2. FAQ's anpinnen
    Von sejuma im Forum Forum-Hilfe.de intern
    Antworten: 10
    Letzter Beitrag: 31.05.2007, 22:25
  3. TExtfeld aus HTML-Seite in einer weiteren HTML-Seite anzeige
    Von rubensrodriges im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 14.11.2006, 22:51
  4. HTML Diashow in bestehendes HTML-Layout einfügen?
    Von Music_Finder im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 1
    Letzter Beitrag: 09.08.2005, 16:53
  5. HTML Code auf einer HTML-Hilfe Website anzeigen
    Von Sternenkrieger im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 16.06.2004, 10:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •