zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden "purple" Free-Template

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.07.2007, 00:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.07.2007
Beiträge: 6
ghoum befindet sich auf einem aufstrebenden Ast
Standard "purple" Free-Template

Guten Abend allesamt!

Ich habe mal wieder ein Free-Template erstellt.
Anders als bei den meisten Vorgängern: ich habe mich mehr auf valide "Div-Anpassung" konzentriert.
( sollte eigentlich nur ein Versuch der validen Anpassung werden, allerdings habe ich weiter keine Verwendung für dieses Design, da dachte ich mir, dass ich es doch als FreeTemplate online stellen könnte ;] )

Arbeitsdauer: ca.15min. Design / ca.30min. HTML&CSS
Art: Privatpage
Preview: www.ghoum.de - purple-Template1
Download: http://jannikr.ja.ohost.de/purple-1/...template_1.rar

Würde mich über Kommentare freuen ... !

mfG, Jannik "ghoum" R.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.07.2007, 02:22
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Kommentar zum Code:
Code:
<div id="menu">
<ul>
<li><a href="#" class="menu">link</a></li>
<li><a href="#" class="menu">link</a></li>

<li><a href="#" class="menu">link</a></li>
<li><a href="#" class="menu">link</a></li>
<li><a href="#" class="menu">link</a></li>
<li><a href="#" class="menu">link</a></li>
<li><a href="#" class="menu">link</a></li>
</ul>
</div>
<div id="head"></div>
Brauchst Du das <div/> um <ul/>? <ul/> kannst Du wie ein <div/> formatieren (So wie Du jedes Element frei formatieren kannst). Leere <div/>s sind schlecht, sie sagen nichts aus.

Schau dir mal dein Free Template ohne CSS an. Google mal nach Image-Replacement, ist nicht viel schwerer als ein leeres <div/> und schafft Qualität. Erkundige dich mal nach Semantik.

Das Design dagegen finde ich ganz schön, ich wollte es nicht haben, aber irgendwer freut sich bestimmt darüber.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.07.2007, 12:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.07.2007
Beiträge: 6
ghoum befindet sich auf einem aufstrebenden Ast
Standard

Was meinst du denn mit "Images-Replacement"?
Oder vielmehr: Wieso kann ich die Bilder denn nicht in Divs angeben?
Weil das Div dann mit keinen weiteren Tags gefüllt ist, oder wie?

( Ich muss dazu sagen, dass ich mich erst seit zwei Tagen mit Divs und CSS beschäftige ... )

Geändert von ghoum (04.07.2007 um 13:05 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 04.07.2007, 13:07
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.837
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Du hast nicht gegooglet, oder?

Das erste Ergebnis....
Übersicht: Image-Replacement-Techniken – Artikel von Jens Meiert
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 04.07.2007, 13:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.07.2007
Beiträge: 6
ghoum befindet sich auf einem aufstrebenden Ast
Standard

Doch, genau da bin ich natürlich auch angekommen ... nur ist das für mich erstmal ein riesen "Wirrwar", weil ich mich, wie bereits gesagt, nicht gründlich genug auskenne, um dort alles direkt nachvollziehen zu können...

Wieso sollte ich diese Variante denn der von mir angewandten vorziehen?

mfG, Jannik "ghoum" R.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.07.2007, 13:15
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.837
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Weil dann eine bessere Auszeichnung und die Barrierefreiheit gesichert ist
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #7 (permalink)  
Alt 04.07.2007, 19:22
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von ghoum Beitrag anzeigen
Doch, genau da bin ich natürlich auch angekommen ... nur ist das für mich erstmal ein riesen "Wirrwar", weil ich mich, wie bereits gesagt, nicht gründlich genug auskenne, um dort alles direkt nachvollziehen zu können...

Wieso sollte ich diese Variante denn der von mir angewandten vorziehen?

mfG, Jannik "ghoum" R.
Nun ja, man könnte es auch nach einer Jahrelangen vergewaltigung der HTML Elemente - "Back to the roots" nennen.
Das Grundprinzip von HTML ist, informationen auszuzeichnen. D.h.: Eine Überschrift sollte auch eine Überschrift sein (<h1>, <h2>, ..., <h6>), wichtige Dinge sollten mit <strong> oder <em> hervorgehoben werden, Zitate gehören in <blockquote>, Code in <pre><code>, ein Absatz sollte natürlich <p> sein, usw.
Erst dann gilt es, nachdem das HTML Dokument auch wirklich als Dokumen steht, das ganze mit CSS zu verschönern. Eine Überschrift <h1> ist nicht schön, oder? Da wollen wir doch lieber eine schöne Header Grafik haben:
Code:
<h1><span></span>Meine Seite</h1>
Code:
h1 {
   position:relative;
   width:500px;
   height:80px;
}
h1 span {
   position:absolute;
   width:100%;
   height:100%;
   background:transparent url('img/banner.jpeg') 0 0 no-repeat;
}
Das ist die Gilder-/Levin Image Replacement Technik. Sie verwendet Zusatzmarkup (<span/>). Wie Du am CSS Code sehen kannst, legt sich das <span/> über den Text von h1, nimm die Maße von h1 an und - wir weisen da das Hintergrundbild zu.
Diese Technik ist optimal, weil wenn z.B. Grafiken nicht geladen werden können, wird der Text sichtbar. Auch ohne CSS -> Die information die dein 'Banner' aussagen soll (Meine Seite), ist jetzt in Textform sichtbar.

Aber gut, jede IR Technik hat ihre Nachteile:
- Grafiken die transparent sind - Text scheint durch
- Schriftvergrößerung, Text kommt zum Vorschein (overflow:hidden, aber am besten nur bei großen Bannern)
- Zusatz Markup

Aber wie BlackHawk bereits verlinkt hat, es gibt eine Übersicht der Techniken. Ich habe dir hier nur meine bevorzugte gezeigt.

Etwas über den Begriff 'Semantik' und die Auszeichnungsart die ich obe beschrieben habe, kannst Du hier auch nochmal in Ruhe nachlesen.

Und ja, ein leeres Div ist nicht gut, weil es eben leer ist.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.07.2007, 19:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.07.2007
Beiträge: 6
ghoum befindet sich auf einem aufstrebenden Ast
Standard

Danke dir!
Solche Beiträger lese ich immer sehr gerne ( und wenn ich mich in der jeweiligen Materie gut genug auskenne, verfasse ich solche auch liebend gern ).

Ich werde mich mit den Begriff "Semantik" mal gründlich auseinandersetzen - bin ja Schüler, hab momentan Ferien und somit auch etwas mehr Zeit als sonst.
Auch deine Tips werde ich vorallem in der zukünftigen Version meines Portfolios ( ghoum.de - momentan offline ) berücksichtigen.

Nun noch einen schönen Abend!

mfG, Jannik "ghoum" R.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ein Template - viele Fragen nRabbit CSS 3 24.07.2011 18:46
Joomla 1.5 - Menüstrukur: Template Siteground j15-59 MarcusAntonius CSS 0 05.10.2010 18:54
4 Spalte integrieren marielou CSS 14 14.09.2010 14:53
Joomla Template - Seite zentrieren? Dav1d CSS 15 02.02.2009 14:38
Joomla Template Problem tyrannski CSS 0 15.02.2007 15:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:25 Uhr.