Frage zu den vorgefertigten Layouts auf Selfhtml

[Anton]

Hallo,

ich hab mir das vorgefertigte Layout Nummer 9 von SELFHTML heruntergeladen. Hierzu hätte ich eine Frage:

Wenn ich die Datei index.htm lade, dann sehe ich im oberen Bereich den Eintrag "Titel deiner Homepage". Warum ist dass denn als Grafik und nicht als Text eingefügt. Einen Text könnte man doch viel einfacher verändern.

Wie passe ich das denn nun für meine Zwecke an? Ändere ich die Grafik mit einem Bildbearbeitungsprogramm (z.B. Gimp) entsprechend meinen Wünschen?

[maurice]

Hi!

Wie passe ich das denn nun für meine Zwecke an? Ändere ich die Grafik mit einem Bildbearbeitungsprogramm (z.B. Gimp) entsprechend meinen Wünschen?

Also du hast zwei Möglichkeiten: Einma nimmst du einfach den <img...> tag raus und schreib deinen Wunschtitel rein, oder du erstellst dir zB mit gimp oder anderen Bildbearbeitungsprogrammen ein leeres Bild mit den Maßen 565x50px und gestaltest es nach deinen Vorstellungen und fügst es ein.

Ist dir damit gehoolfen?

[Anton]

Ja, danke für die Hilfe...

Ich hätte schon gleich die nächste Frage zu dem vorgefertigten Layout. Ich habe mir die Datei "index.htm" mit einem Editor (SciTE) geöffnet. Sämtliche Zeilen des HTML-Codes werden untereinander angezeigt. Soll das so sein, oder hab ich beim öffnen irgendwas falsch gemacht? Gibt es eine Möglichkeit den HTML-Code irgendwie automatisiert zu formatieren, so das eine Einrückung hinzugefügt wird. Damit wäre der Code dann wesentlich übersichtlicher. Das alles manuell zu machen wäre recht aufwendig.

[Beat]

Gibt es eine Möglichkeit den HTML-Code irgendwie automatisiert zu formatieren, so das eine Einrückung hinzugefügt wird. Damit wäre der Code dann wesentlich übersichtlicher. Das alles manuell zu machen wäre recht aufwendig.

Etliche Editoren unterstützen ein Code-Beautify. Jedoch sollte man das nicht blind anwenden, sondern z.B. <img> Elemente davon ausnehmen.

<div><img><div>

kann zum richtigen Anzeigeergebnis führen.

<div>
   <img>
<div>

jedoch nicht. Immer wieder beklagen sich Leute über rätselhafte Abstände, weil sie den Whitespace/Umbruch nicht als gültigen teil des HTML erkennen.

mfg Beat

[Anton]

Warum ist der Code denn nicht sofort richtig formatiert. Warum hat der Entwickler keine Einrückungen gemacht?

[Mega]

Warum ist der Code denn nicht sofort richtig formatiert. Warum hat der Entwickler keine Einrückungen gemacht?

1. Wieso fragst du den Entwickler nicht direkt? Da ist doch mit Sicherheit eine Mailadresse dabei
2. Wenns dir nicht gefällt, nimm was anderes.

[JensW]

Hallo Anton,

Warum ist der Code denn nicht sofort richtig formatiert. Warum hat der Entwickler keine Einrückungen gemacht?

Ich habe den Thread jetzt nur mal grob überflogen und folgendes Subjektives Bild von dir erhalten:

Wieso ist das alt, warum ist das hier, wieso ist der Code scheisse, usw.....

Bist du ein Troll?

Es handelt sich um eine Vorlage, kein speziell für Antons entwickeltes hochwertiges Superlayout unter Berücksichtigung aller eventuell auftretenden Wünsche. Es gibt genug kostenlose Templates im Netz wenn dir hier was nicht zusagt.

[maurice]

Gibt es eine Möglichkeit den HTML-Code irgendwie automatisiert zu formatieren, so das eine Einrückung hinzugefügt wird. Damit wäre der Code dann wesentlich übersichtlicher. Das alles manuell zu machen wäre recht aufwendig.

Lade dir mal den Proton Editor runter, der ist ganz gut für den Anfang. Ist auch freeware und macht Syntaxunterstützung und Einrückung etc...

[Mega]

Wenn ich die Datei index.htm lade, dann sehe ich im oberen Bereich den Eintrag "Titel deiner Homepage". Warum ist dass denn als Grafik und nicht als Text eingefügt. Einen Text könnte man doch viel einfacher verändern.

Und wer zwingt dich, diese Grafik zu verwenden? Tausche sie einfach mit einem Text

Wie passe ich das denn nun für meine Zwecke an? Ändere ich die Grafik mit einem Bildbearbeitungsprogramm (z.B. Gimp) entsprechend meinen Wünschen?

Wenn du das so willst, dann tu das. Ich wüsste keinen Grund, wieso dir hier jemand vorschreiben sollte, wie deine Webseite auszusehen hat.
Anpassen kannst du das Ganze, indem du den HTML- und CSS-Code änderst und an deine Wünsche anpasst.

[Beat]

Wenn ich die Datei index.htm lade, dann sehe ich im oberen Bereich den Eintrag "Titel deiner Homepage". Warum ist dass denn als Grafik und nicht als Text eingefügt. Einen Text könnte man doch viel einfacher verändern.

Wie passe ich das denn nun für meine Zwecke an? Ändere ich die Grafik mit einem Bildbearbeitungsprogramm (z.B. Gimp) entsprechend meinen Wünschen?

Die Meinung ist wohl, dass du dein ganz eigenes Logo erstellst, zB. mit Inkscape, das für solche Sachen ganz gut taugt.

Viele verwenden halt einen Logo-Banner für die Webseite, und nicht nur einen Titel.
Ich kenne ja den Code des Beispiellayouts nicht, aber ich finde es gut, immer auch den Schrifttitel zu berücksichtigen.

<h1 id=hplogo><span class=hidden>Webseitentitel</span></h1>

CSS

#hplogo{ width:777px; height:77px; background-image:url(hplogo.png);}  
.hidden {display:none;}  

Damit hat man dann den Vorzug, dass ohne CSS ein Titel lesbar ist (auch Suchmaschinen lesen den Titel).
Mit CSS wird dann das logo als Bild angezeigt.

mfg Beat

[Anton]

Ich hätte schon gleich die nächste Frage zu dem vorgefertigten Layout. Ich habe mir die Datei "index.htm" mit einem Editor (SciTE) geöffnet. Sämtliche Zeilen des HTML-Codes werden untereinander angezeigt. Soll das so sein, oder hab ich beim öffnen irgendwas falsch gemacht? Gibt es eine Möglichkeit den HTML-Code irgendwie automatisiert zu formatieren, so das eine Einrückung hinzugefügt wird. Damit wäre der Code dann wesentlich übersichtlicher. Das alles manuell zu machen wäre recht aufwendig.

[Vinzenz Mai]

Hallo Anton,

ich hab mir das vorgefertigte Layout Nummer 9 von SELFHTML heruntergeladen. Hierzu hätte ich eine Frage:

<http://de.selfhtml.org/layouts/nr09/index.htm@title=dieses Layout> ist alt, sehr alt. Es verwendet Tabellenlayout und veraltete HTML-Attribute statt sinnvollen HTML-Elementen (wie zum Beispiel Überschriften und Listen.

Wie alt es ist, kannst Du an folgendem Satz ablesen:

<zitat>
    Mit den heute am meisten verbreiteten Browsern (Internet Explorer 5.x,
    Netscape 4.x und 6.x, Opera 5.x) ist das Layout Tests zufolge problemlos
    darstellbar.
</zitat>

Meiner Meinung nach taugen weder HTML noch CSS dieses Layouts für eine 2008 neu entwickelte Seite. Statt dessen empfehle ich Dir den Abschnitt http://de.selfhtml.org/css/layouts/index.htm@title=CSS-basierte-Layouts.

Freundliche Grüße

Vinzenz

[Anton]

Finde ich denn im Abschnitt "CSS-basierte-Layouts" auch solch eine Vorlage? Falls nein, kannst du mir vielleicht sagen, wo ich eine Vorlage für  CSS-basierte-Layouts finden kann, an der ich mich orientieren kann?

PS:

Schon doof, wenn auf einer so bekannten Seite wie SELFHTML veraltete Layouts zur Verfügung gestellt werden. Ohne deinen Tip hätte ich mir jetzt also veraltete Dinge beigebracht. Woher weiss ich denn nun als Anfänger was veraltet ist und was nicht?

[Patrick Andrieu]

Hallo Anton!

Finde ich denn im Abschnitt "CSS-basierte-Layouts" auch solch eine Vorlage? Falls nein, kannst du mir vielleicht sagen, wo ich eine Vorlage für  CSS-basierte-Layouts finden kann, an der ich mich orientieren kann?

Da Dir das Layout Nr. 9 gefällt, habe ich mir eben die Freude gemacht. Aber: hier habe ich nur ein starres Tabellenlayout durch ein starres CSS-Pixel-Layout ersetzt. Bei einem Relaunch geht man normalerweise einen ganz neuen Ansatz!

Original
Fälschung

Viele Grüße aus Frankfurt/Main,
Patrick

[Beat]

Da Dir das Layout Nr. 9 gefällt, habe ich mir eben die Freude gemacht. Aber: hier habe ich nur ein starres Tabellenlayout durch ein starres CSS-Pixel-Layout ersetzt. Bei einem Relaunch geht man normalerweise einen ganz neuen Ansatz!

Original
Fälschung

Hallo Patrick.
Der Vogel Kritik-Kritik hat dich erspäht.

Und das zwitschert er:

<ul id="navitop">
     <li>| <a href="http://forum.de.selfhtml.org">impressum</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">feedback</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">guestbook</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">home</a> |</li>
  </ul>

"Zahnstocherei-Zahnstocherei"
Die '|' liessen sich doch mit CSS einbinden.

und da:

<img id="logo" src="logo.gif" width="150" height="110" alt="Dein Logo" title="">

Wo ist mein Klartext Titel?

Gemeint sowas:
    <h1 id="logo"><span class="hide">Webseitentitel</span></h1>
Mit Bild via css als Hintergrund.

mfg Beat

[Mike]

Hi,

Und das zwitschert er:

<ul id="navitop">
     <li>| <a href="http://forum.de.selfhtml.org">impressum</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">feedback</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">guestbook</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">home</a> |</li>
  </ul>

"Zahnstocherei-Zahnstocherei"
Die '|' liessen sich doch mit CSS einbinden.

wie denn einbinden?

Mike

[Beat]

Und das zwitschert er:

<ul id="navitop">
     <li>| <a href="http://forum.de.selfhtml.org">impressum</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">feedback</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">guestbook</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">home</a> |</li>
  </ul>
"Zahnstocherei-Zahnstocherei"
Die '|' liessen sich doch mit CSS einbinden.
wie denn einbinden?

Im folgenden behanlde ich nur die dazwischen liegenden '|'.

Zum Beispiel mit den :before oder :after Pseudoelementen.

#navitop li + li:before{ content: '|'; }

Diese Version wird nicht von allen Browsern unterstützt.

Eine sauberere Version, in dem border-left verwendet wird:

#navitop li { padding: 0 1em; }  
#navitop li + li{ border-left: 1px solid black; }

Ich habe die Werte jetzt nicht mit dem konkreten Layout abgeglichen.

Will man's auch für die äusseren Grenzen verwendet man halt border-left und border-right.

mfg Beat

[Ingo Turski]

Hi,

<img id="logo" src="logo.gif" width="150" height="110" alt="Dein Logo" title="">

Wo ist mein Klartext Titel?

Hier: <h1>Themenübersicht</h1>

Gemeint sowas:
    <h1 id="logo"><span class="hide">Webseitentitel</span></h1>
Mit Bild via css als Hintergrund.

warum willst Du Gefahr laufen, dass der Text auch von ScreenReadern ausgeblendet wird, wenn doch ein alt-Attribut dies vermeidet? Und warum willst Du Besuchern, die lediglich Bilddarstellung deaktivieren und stattdessen den Inhalt des alt-Attributes sehen würden, diesen vorenthalten?

freundliche Grüße
Ingo

[Patrick Andrieu]

Hallo Beat!

Der Vogel Kritik-Kritik hat dich erspäht.

Ich höre ihn oft gerne!

Und das zwitschert er:

<ul id="navitop">
     <li>| <a href="http://forum.de.selfhtml.org">impressum</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">feedback</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">guestbook</a></li>
     <li> | <a href="http://forum.de.selfhtml.org">home</a> |</li>
  </ul>
"Zahnstocherei-Zahnstocherei"

Ich hatte gerade eine Dose zuviel.

Die '|' liessen sich doch mit CSS einbinden.

Klar, könnte man. Für sowas warte ich aber, bis aus Redmond die Unterstützung für :before, :after gegeben ist ;)

Für den Rest sehe ich es eher wie Ingo.

Viele Grüße aus Frankfurt/Main,
Patrick

[Malcolm Beck´s]

hi Onkel P!

Original
Fälschung

Die Fälschung sieht ja besser aus als das Original ;)

Nur bei „navitop“ frag ich mich, warum du nicht einfach border definierst.
Für jeden Listenpunkt ein border-left:***; und den letzten würde ich Nackt lassen ;)

Hoffentlich folgen zu Gunsten von SELFHTML viele Nachahmer ;)

holla holla