Projekt: Tutorial Website - Fragen und Antworten

[x3Ro]

Moin,

wie manche schon mit bekommen haben, bin ich zur Zeit in einem Projekt tätig, dass eine Tutorialwebsite aufbaut.
In diesem Thread möchte ich alle meine Fragen und hoffentlich auch die Antworten sammeln.

Die Website

Frage #1:Zwei relative Div-Container neben einander positionieren.
Antwort:

#div outer
float:left

#div left
float:left

#div right
float:right

Frage #2: Wie kann ich einem Element die Eigenschaft strong mittels CSS zuweisen?
Antwort: Gar nicht. Strong ist ein Element das eine Logik verkörpert, kein Aussehn. Strong kann nur in der HTML Datei angegeben werden.(Inline)

Frage#3: Der Top-Anker verweist mich nicht auf den 100% Anfang der Seite.
Antwort: Manche Browser/Nutzer haben gewisse Grundeinstellungen für den Body. Diese kann man mit

Code: Alles auswählen

body {margin: 0px
padding: 0px

reseten. Anstatt des "body" kann man auch mit * alle Elemente auf Null setzten.

Frage#4: Im Footer hat der Text einen Hover-effekt, den ich nicht wissentlich eingebaut habe. Nur Links sollen einen Hover haben.
Antwort: Der Anker (Frage#3), war nicht geschlossen, dadurch hat Firefox die gesamte Seite als Ankerreferenz angesehen. Und somit hatte sie den a:hover Effekt.

Frage#5: Ich möchte in einen einzeiligen Footer einen Teil vom Text linksbünidg machen, einen Teil rechtsbündig.
Antwort:

Code: Alles auswählen

<div id="footer">
  <div id="footerleft" style="float:left;">Copyright</div>
  <div id="footerright" style="float:right;">Impressum ...</div>
  <div style="clear:both;"></div>
</div>

Frage#6: Was gibt es für Insider Tipps für die Suchmaschinen Optimierung?

• Soll ich lieber h1 statt h2 nutzen?
• Wird strong gegenüber den Überschriften h1-6 bevorzugt?

Frage#7: Wie änder ich den Text Einzug vor <p>?
Antwort: Mit margin: Xpx;


Vielen Dank an alle die mir helfen!

[schnuppel]

Hallo,

die Lösung Deines Problems nennt sich float.

Damit kannst Du DIV Container nebeneinander positionieren

Gruß

Schnuppel

[x3Ro]

Danke für den Tipp, aber:

Mit Float:right habe ich schon mal ausprobiert, aber trotzdem wird der Div unterhalb der anderen positioniert.

Float:right

Was mache ich denn da falsch?

[schnuppel]

Hallo,

#div outer
float:left

#div left
float:left

#div right
float:right

[Neopha]

Und wenn du eine Art Main Container hast, der in der Breite beschränkt ist,
dann kann es sein, dass die drei Container zusammen breiter sind als die Breite die
ihnen zusteht, dann lagert sich eins nach unten.

[x3Ro]

Danke für die Tipps. Es klappt!

Ich habe einfach einfach right und left durch einander bekommen. Ich dachte, dass der linke Container float:right haben muss. Aber es gehört genau andersrum.

Ich sammel' die Antworten im ersten Post, damit andere Hilfslose, alles auf einem Blick haben, wenn niemand was dagegen hat.

Nächste Frage.

Ich habe gelesen, dass man anstatt Bold, Strong verwenden soll. Allerdings weiß ich nicht, wie ich das über CSS einem Text zuweisen kann.
Text-weight: strong gibst ja nicht.

[Ingo]

Hi.
Die Schrifteigenschaften stellt man mit font-xyz ein, in diesem Falle font-weight:bold.
Die text-Eigenschaften beziehen sich auf Textportionen und bestimmen über Ausrichtung,
Umbruch, Zeilenabstand etc. Näheres siehe zum Beispiel auch css4you.
Zu "strong eher als bold" fällt mir gerade nur ein, dass bold eine "physische" Auszeichnung ist, also
direkt die Gestalt des Abschnitts bestimmt (nämlich Fettdruck), während "strong" eine logische
Auszeichnung ist, deren genaue physische Erscheinung (Größe, Gewicht, Farbe, ...) dann anderswo
festgelegt wird. - Dem Sinn von HTML entspricht ein "strong" mehr, weil HTML eigentlich nur die
logische Struktur eines Dokuments widerspiegeln soll, während die konkrete Formatierung dann
Sache von CSS ist.

Gruß, Ingo

[x3Ro]

Das heißt, wenn ich ein Element mit strong auszeichnen will, muss ich das in der HTML Datei machen, anstatt in der CSS Datei ok.

Was ich zu dem Thema noch gefunden habe.

Die Verwendung der Elemente I, B und TT erübrigt sich in den weitaus meisten Einsatzfällen nicht erst, seit Stylesheets zur Verfügung stehen. Das eigentliche Anliegen, das Autoren zum Beispiel dann verfolgen, wenn sie B einsetzen, ist bei näherer Betrachtung nicht, eine Textpassage »fett« darzustellen, sondern sie deutlich zu betonen. Fettschrift ist lediglich das Mittel, mit dem die Betonung erreicht werden soll. Dafür bietet HTML jedoch das für den genannten Zweck deutlich besser geeignete Element STRONG an. STRONG gibt im Gegensatz zu B eine Information über die Bedeutung der so ausgezeichneten Passage (starke Betonung), nicht nur über ihre visuelle Darstellung. Bedeutungsinformation kann auch von nicht visuellen Benutzerprogrammen dazu genutzt werden, eine passende Präsentation zu finden, während »fett« auf die visuelle Darstellung beschränkt bleibt.
Quelle: http://www.edition-w3.de/TR/1999/REC-ht ... tml#h-15.2

Jetzt macht es auch Sinn, dass ich einem Element strong nicht über CSS zu weisen kann.

PS: Schickes Avatar!

Und da kommt schon die nächste Frage;
Ich habe einen einzeiligen Footer. Dort soll linksbündig das Copyright stehen, und rechtsbündig "impressum | kontakt | sitemap | top|" stehen. Eigentlich müsste das ja über Span gehen. Aber damit kann ich kein Text-Align vornehmen. Die einzige Lösung, die ich bisher gefunden hab ist mit dem Geschützten Leerzeichen &nbsp;. Gibt es da noch eine ander Möglichkeit, um eine Art Tapstop zu machen?

Außerdem:
Ich habe direkt neben dem beginnenden Body-Tag ein Top-Anker gesetzt. Klicke ich jetzt den Verweis an, lande ich nicht ganz oben sondern ein kleines Stück tiefer. Wie kann das angehen? Wie kann man das umgehen? (im Opera habe ich nicht das Problem, im Firefox allerdings schon) [Lösung: ohne Anker gehts perfekt, href="#"]

Ich habe einen interessanten Bug im Firefox gefunden. Wie der funktioniert weiß ich alledings nicht.
Öffnet mal mit Firefox diese Seite und fahrt mit der Maus über den Footer. Der Text auf der linken Seite hat einen :hover Effekt, den ich (meines Wissens) nicht definiert habe.

[Ingo]

(Thx, mein Avatar ging aus ner Spielerei mit LaTeX2e und PostScript hervor. )

Noch zur Ergänzung:

In den Anfangszeiten des WWW hatten die am Netz hängenden Rechner ganz unterschiedliche Voraussetzungen:
manche Rechner/Monitore konnten nur 1 Farbe oder Graustufen darstellen und das auch nur im Textmodus (mit
z.B. 25 Zeilen zu 80 Zeichen), andere Systeme waren farb- und graphikfähig, konnten also insbesondere Bilder
und Tabellenrahmen darstellen.

Ein Autor musste also znächst einmal darauf auchten, die logische Struktur seines Dokuments 'rüberzubringen.
Details zur Formatierung waren allenfalls eine Ergänzung, weil ja nie klar war, ob der Client diese Details auch
umsetzen kann. Aus dieser Situation heraus verstehen sich Elemente wie strong: es soll nur die Bedeutung
("wichtig - hervorheben!") markiert werden, und der Client/Browser entscheidet dann im Rahmen seiner
Möglichkeiten, wie genau er diese Hervorhebung realisiert. Im einfachsten Fall (Textdisplay) durch Sperrung
der Buchstaben, das klappt überall, auch da wo nicht einmal Fettdruck möglich ist.

Aus diesen Zeiten stammt m.E. übrigens auch die Idee mit dem alt-Attribut bei Bildern: Nicht graphikfähige
Displays sollten dann wenigstens einen alternativen Text anzeigen.

Im Laufe der Zeit verfügten immer mehr Rechner über immer feinere Darstellungsmöglichkeiten, so dass auch
direkte physische Auszeichnungen wie bold (fettgedruckt) von den meisten Browsern direkt umgesetzt werden
konnten. Dazu kamen dann allerdings auch etliche Attribute wie height, width oder auch das inzwischen als
deprecated eingestufte font-Tag, mit dem man die Schriftart/eigenschaften genau vorgeben konnte - eine in
den Anfangstagen des WWW unsinnige Angabe, kaum jemand hätte es umsetzen können.

Das an sich auf die logische Struktur gemünzte HTML wurde nun so sehr mit physischen Auszeichnungen "zugemüllt",
dass irgendwann ein Umdenken einsetzte: Zurück zu den Wurzeln - zurück zur Trennung von Struktur(HTML) und
Formatierung, und für letzteres ist nun CSS das Mittel der Wahl.

Demnach: ein "strong" sagt nur "stark betont" und läßt dem Browser die Wahl, wie er das anzeigt (vllt. fett und
etwas gesperrt). Will man die Details gleich ganz selbst festlegen, kann man das auch mit CSS, vllt. indem man
sich eine class definiert.

Zur footer-Frage:
Mit Leerzeichen ist das so'ne Sache: es hängt dann von Div-Breite und Font ab, ob das wirklich passt. - Auch hier
geht's wohl besser mit float (clear-Div sollte sein, weil sonst der footer-Div vertikal in sich zusammenfällt):

Code: Alles auswählen

<div id="footer">
  <div id="footerleft" style="float:left;">Copyright</div>
  <div id="footerright" style="float:right;">Impressum ...</div>
  <div style="clear:both;"></div>
</div>


Zum Top-Anker: Die Quelltext-Ansicht meines FF meint, das <a> neben body ist nicht geschlossen.
Hab's nicht ausprobiert, vllt. ändert das ja was.

Zum hover-Effekt: Doch, den hast du eingebaut: a:hover { color:#FFFFFF; }. Der IE6 scheint das aber nur auf
<a> mit href zu beziehen und reagiert deswegen nicht darauf.

Bis hierhin - gut' Nacht. Ingo

[x3Ro]

(...)[color=#404040][i]
In den Anfangszeiten des WWW hatten (...)

Danke, danke, ach und danke! Kannst du mir die Quelle noch schicken? Das klingt sehr interessant. Ich habe die Anfang des WWW (leider) nicht mit erlebt. Das ist aber sehr interessant. Würde gerne mehr davon lesen.

Zur footer-Frage:
Mit Leerzeichen ist das so'ne Sache: (...)

Ja, mit Float und Clear, habe ich mich bisher noch nicht so ausführlich befasst. Ich werds aber mal ausprobiern - morgen

Zum Top-Anker: Die (...)

Muss gestehen, dass ich den Anker über Dreamweaver eingefügt habe. Aber das stimmt, da fehlt was.

Zum hover-Effekt: (...)

Ja, das stimmt,ich habe einen Hover Effekt eingebaut. Aber doch nur für Links und nicht für normalen Fließtext. Das hover bezieht sich sich doch nur auf "a".

Code: Alles auswählen

a:hover {
   color: #FFFFFF;   
}

Gute nacht

[Ingo]

Ich nochmal.
Ich sehe gerade: wenn man den top-<a> schließt, ist der hover-Effekt im Footer verschwunden.
Hm, zu der Quelle: Den Text hab ich gerade spontan runtergeschrieben - die Quelle (müsste ein
älteres Buch über's Internet/WWW sein, wohl auch SelfHTML) müsste ich mal nachsehen.
Jetzt aber.

[x3Ro]

Ich nochmal.
Ich sehe gerade: wenn man den top-<a> schließt, ist der hover-Effekt im Footer verschwunden.
Hm, zu der Quelle: Den Text hab ich gerade spontan runtergeschrieben - die Quelle (müsste ein
älteres Buch über's Internet/WWW sein, wohl auch SelfHTML) müsste ich mal nachsehen.
Jetzt aber.

Stimmt, macht ja auch sinn. Der Anker ist ja über die gesamte Site geöffnet. So wird alles als a ausgezeichnet, dass sonst nichts hat. Der Text im Footer hat ja kein p oder sowas. Header und Menu haben den selben Effekt.
Danke!
Aber das Problem des Ankers hat sich damit noch nicht gelöst. In FF/Opera springt er immer nocht nicht ganz nach oben. Lasse ich den Anker raus, dann klappts bei Opera, Firefox hat aber noch Probleme.

Den Text hast du mal eben so frei formuliert? Dann schreib mal alles auf, da wird sich sicherlich ein Verlag für finden

Frage:
Ich wollte gerade mal die Seite validieren, da kam folgender Fehler:
Schwerer Fehler
Die Umwandlung der Zeichenkodierung von "iso-8895-1" nach "UTF-8" kann zur Zeit nicht durchgeführt werden, da diese nicht unterstützt wird!
http://www.validome.org/validate/?uri=h ... m.de/beta/

Ich habe aber nirgendswo die iso Zeichenkodierung angegeben.

Code: Alles auswählen

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Wie kann das den zu stande kommen?

Ich habe mich drum herum gemogelt, nun kam folgender Fehler:
p ist an dieser Stelle nicht erlaubt. Es fehlt ein `object`, `applet`, `map`, `iframe`, `button`, `ins`, `del` Tag.
Fehlerstelle: <p class="align_right"><a href="#" title="Den gesamten Artikel lesen">weiter

Man darf Paragraph keine Klasse zu weisen?

[Ingo]

Hm.
Der top-Anker sitzt nicht ganz am client-Rand, weil der body noch einen Außenabstand hat, also einfach
body { margin:0px; } versuchen, sollte klappen.

Das <p> vor dem <p class="align_right"> ist nicht geschlossen, d.h. es fehlt ein </p>. Ich denke,
darüber stolpert der Validator, in XHTML müssen alle Elemente geschlossen werden, auch <p>s.

Zum Zeichensatz fällt mir so im Moment nix ein. Vllt. später ...

Gruß, Ingo

[Neopha]

Also ich habe gehört, es soll ganz sinnvoll sein
immer am Anfang der Main-CSS Datei zu schreiben

Code: Alles auswählen

* {
margin: 0;
padding: 0;
}


um eben browserseitige Abstände zu entfernen.

[Manuel]

Das kommt natürlich auf das Projekt an Neopha, aber viele tun das, das ist richtig. Ich würde mir nur auf jeden Fall angewöhnen, auch dort Maßeinheiten zu verwenden, denn ohne kann es schnell mal zu Problemen kommen, auch wenns bei der 0 natürlich egal ist.

Lg,
Manuel