Grundlegende Frage zum Seitenaufbau

[struppi]

habs nun so gelöst wie thor mir vorgeschlagen hat. funktioniert.

Mein Vorschlag funktioniert auch - ohne eine Klasse.

Wegen deinem anderen Problem, mach mal folgendes:
div {
border:1px solid black;
}
Du siehst, dass dein Elementaufbau irgendwie vermurkst ist. die Elemente hängen irgendwo in einander rum, kein Wunder das es nicht klappt mit den Abständen.

Zuerst dachte ich es hängt an dem Tippfehler, den du im CSS hast, aber das behebt auch nciht den Fehler, du musst auch den rechten DIV floaten

 

[Hase]

Nach langer Prüfungsvorbereitung und und und...

Nun ist das Thema wieder aktuell.
Hoffe die freundlichen User von html.de können und wollen mir helfen (ja ich weiß schleim schleim... )

Also folgendes Problem: Wenn ich meine Sidebar floate, dann sollten doch alle folgenden Elemente bist zum nächsten Clear auf der linken Seite zu meiner Sidebar angereiht werden. Dieses "Problem" habe ich auch in einer Beispielseite entdeckt: 2-Spalten-Layout | Webdesign mit XHTML und CSS.

Oder war warum sonst sollte im CSS

#content {
margin-left:13em;
}

stehen?

Hoffe nicht, dass ich was nicht verstanden habe, sondern was überlesen/übersehen habe...

Hoffe ihr könnt mir helfen
MFG Hase

Meine Test Site: HMB Schweisstechnik

 

[Elroy]

Hallo.

Bei deinem Beispiel ist die Sidebar nur so lang wie ihr Inhalt.

Das heisst content rutscht unter die Sidebar solbald dort kein Inhalt mehr ist.
Das wird mit

#content {
margin-left:13em;
}

verhindert.

Gruss
Elroy

 

[Hase]

erstmal danke für deine sehr schnelle reaktion.

gut, ich glaube, mein Problem wurde nicht verstanden, oder doch?

hab gerade ein neues Beispiel hochgeladen => HMB Schweisstechnik

jetzt steht ja das element "content" direkt in mein element "sidebar" rein.
müsste sich der content nicht mit dem margin am rechten ende der sidebar anhängen und von dort den abstand nehmen?

Oder orientiert sich das element content mit dem margin am inhalt der sidebar?

MFG Hase

EDIT: OK, also der text hällt sich an das float, und an das element, nur nicht der rahmen, der jedoch auch teil des elements ist, wird nur der text berücksichtigt?

 

[Elroy]

hallo.

Ich glaube du hast die Wirkung von float noch nicht so richtig verstanden.
Bei float wird das floatierte Element aus dem Textfluss heraus genommen.

Ich habe hier einen Link heraus gesucht den du dir mal durchlesen solltest.
Danach sollte dir klar sein warum deine Seite so angezeigt wird.

Gruss
Elroy

 

[Hase]

Ok, ja du hast recht, kann sein, dass ich nicht ganz verstanden habe, wie float und clear arbeiten.

Und ja, jetzt ist mir klar, warum... Danke :)

 

[Hase]

So nächste Version zu meiner Seite. Wenn jemanden fehler auffallen, oder etwas einfach nicht richtig geschrieben ist, bitte melden. Danke

MFG Hase

PS: Wer Fehler findet darf sie nicht behalten!

HMB Schweisstechnik

 

[lowsaxonian]

Moin,

von Version arc200.html (18.05.2010) zu web.html (04.02.2011) hast Du einen gewaltigen Schritt gemacht - leider zurück.

<h2 id="menue-weld"><a href="weld.html" class="menue">Schweissen</a></h2>
<h2 id="menue-cut"><a href="cut.html" class="menue">Schneiden</a></h2>
<h2 id="menue-auto"><a href="auto.html" class="menue">Automatisieren</a></h2>
(...)
<h2>Willkommen auf der Homepage von HMB Schweisstechnik GmbH</h2>

1.) Ein Menü ist eine Liste (hast Du in arc200.html auch so umgesetzt)
2.) h1 bis h6 sind Überschriften und werden nur jeweils einmal vergeben

Dein Header ist eine Grafik. Damit hast Du eine schöne Schrift (liegt im Auge des Betrachters), aber auch eine sehr grosse (Mindest-)Breite. Ich sitze im Moment an einem 15"er und muss gewaltig "hin und herrudern", mit ´nem kleinen Netbook würde ich mich "dumm und dämlich" scrollen und wäre binnen Sekunden wieder runter von der Seite. Das tut sich kaum jemand an. Besser, zumindest im Sinne der Usability, wäre es, die Grafik einem div in den Hintergrund zu setzen (im div kann sie auch skaliert werden) - und ggf. die Texte gesondert per css darauf zu positionieren. Um es nicht zu klein werden zu lassen, kannst Du die Breite mit einem min-width begrenzen.

Als letztes ein Wort zu den Fonts. Serifen-Fonts werden im Allgemeinen für den Print eingesetzt, die klaren, serifenfreien Fonts (z.B. Arial, Sans-Serif, o.ä.) für den Bildschirmeinsatz. Grund ist, dass die Serifenschriften auf dem Monitor nicht gut rüber kommen. Bei deinem Text
Ihrem Fachhändler für Schweissen Schneiden und Automatisieren
verschmieren die Serifen am unteren Ende der Buchstaben/Sätze beinahe zu einer (unterbrochenen) Linie. Du kannst den Unterschied direkt in meinem Post sehen: meine Texte sind (Foren-Vorgabe) in Verdana dargestellt, Dein Text in Times New Roman. Hier ein Link zum Thema.

Grüße
low

 

[Elroy]

1.) Ein Menü ist eine Liste (hast Du in arc200.html auch so umgesetzt)

Richtig.

2.) h1 bis h6 sind Überschriften und werden nur jeweils einmal vergeben

Stimmt so leider nicht.
<h1> sollte nur einmal pro Seite benutzt werden.
<h2> bis <h6> kann man natürlich mehrfach benutzen. Dabei aber immer auf die Semantik achten.

Gruss
Elroy

 

[Hase]

Ok, dann schreibe ich das wieder zurück in eine liste.
Wegen den "h2's" soll ich das in paragraphen schreiben, also <p>? Oder wie :neutral:?

Mein Header hat eine Breite von 1000px. Eigendlich sollte jeder im Web mit einer Auflösung von mindestens 1024px Breite unterwegs sein. Das müsste doch bei jedem anzeigbar sein, oder nicht?

 

[Elroy]

Hallo.

<h2> ist eine Überschrift die kannst du nicht in einen Absatz schreiben, das ist invalide.
Du kannst die <h2> doch auch in einer Liste verwenden. Wo ist da das Problem?

Notebook, iPad, PalmPilot... denkst du wirklich jeder der im Internet unterwegs ist hat eine Breite von 1000px zur Verfügung?

Gruss
Elroy

 

[lowsaxonian]

@elroy
Wieso leider ? Wenn ich was falsches erzähle, stehe ich auch dazu. Danke für den Hinweis !

Ok, dann schreibe ich das wieder zurück in eine list.
Wegen den "h2's2 soll ich das in paragraphen schreiben, also <p>? Oder wie :neutral:?

Hälst Du denn Dein Menü für so wichtig, dass es eine Überschrift zweiten Ranges (h2) ist ?
Ich schreibe meine Menüs einfach nur in eine Liste, wenn Du es für "h2-würdig" hälst, dann mach es halt. Semantisch macht das, zumindest nach meiner Auslegung, keinen Sinn.

Mein Header hat eine Breite von 1000px. Eigendlich sollte jeder im Web mit einer Auflösung von mindestens 1024px Breite unterwegs sein. Das müsste doch bei jedem anzeigbar sein, oder nicht?

1.) Auflösung und Viewport haben nichts gemein.
2.) Was ermächtigt irgendeinen Designer dazu, vorauszusetzen, die Kunden seines Produktes müssten mit bestimmten Mindestanforderungen einverstanden sein. Das wäre, als würde BMW seinen Kunden eine Mindestgröße des Fahrers von 1.90m vorschreiben. Oder Bosch baut den nächsten Kühlschrank in einer Weise, dass nur Rechtshänder ihn bedienen können...

Hier ist ein, wie ich finde, recht gut geschriebener Artikel zum Thema Usability.

Die Aufgabe eines (Web-)Designer sollte es sein, das jeweilige Produkt so zu bauen, dass eine möglichst große Zahl an Kunden (Usern) das Produkt verwenden (aufrufen) können, ohne sich dabei irgendwelchen Verrenkungen zu unterziehen. Das bezieht sich nicht nur auf den Viewport.
Das ist mein Ansatz. Wie bereits geschrieben, will ich ihn niemandem aufdrängen. Ich möchte nur zum Nachdenken anregen.

Grüße
low

 

[Hase]

Ähm ja dass das h2 in meinem menü falsch ist, hab ich jetzt verstanden. Aber ich kann doch mein

<h2 id="menue-weld"><a href="weld.html" class="menue">Schweissen</a></h2>
<h2 id="menue-cut"><a href="cut.html" class="menue">Schneiden</a></h2>
<h2 id="menue-auto"><a href="auto.html" class="menue">Automatisieren</a></h2>

nicht in eine liste schreiben? Oder doch? Das sind doch eigendständige Elemente.
da währe doch ein <p> </p> auch korrekt, oder nicht?

Wegen der Auflösung. Also meine Meinung dazu ist, wer mit einem i-pad und was auch immer auf meine Site geht, ist selber schuld ... Nein Spaß... Niemand, der wegen des Inhalts auf die Site geht, wird mit Irgendeinem "Nichtgeeigneten" Gerät, sei es Handy, oder I-Pad "surfen". Und sogar Net-Books sind für 1024 x 768 Pixel ausgelegt. Ich kanns mir nicht vorstellen, dass z.B. ein Geschäftsmann, der nach soetwas im Internet sucht, sich mit seinem I-Pad in den Garten sitzt... Irgendwie Unrealistisch... Und irgendwo muss ich den schlussstrich ziehen, wo es aufhört... ich könnte ja meine Site auch für 640x400 pixel auslegen... ihr wisst was ich mein.

Das zu meiner Meinung... Aber ich muss es mir ja gar nicht vorstellen können, wie meinst du das mit skallieren? macht dass das Gerät automatisch? Oder muss ich da was machen?

 

[lowsaxonian]

Ich kanns mir nicht vorstellen, dass z.B. ein Geschäftsmann, der nach soetwas im Internet sucht, sich mit seinem I-Pad in den Garten sitzt...

Vll ist er im Aussendienst und surft im Hotel auf seinem IPad ??

Edit: Für verschiedene Geräte legt man verschiedene Stylesheets an.
selfhtml.org: abweichende Formatierungen
Dieses Beispiel behandelt nur ein Print-Stylesheet, aber Du kannst ebensogut alternative Styles für Handhelds, IPads, Brailledrucker und was auch immer erstellen.
Für kleinere Bildschirmformate und die bekannt seltsamen Gewohnheiten der (Flatrate-)Mobile-Anbieter wäre es ggf ratsam, auf aufwändige Grafiklösungen zu verzichten, da diese DL-Zeit kosten. Auf Dauer wird es entweder teuer oder, bei Flatrate, langsamer.

Die Vor- und Nachteile abzuwägen liegt alleine bei Dir und/oder Deinem Auftraggeber (Stichwort: Absprungrate).

Grüße
low

 

[lowsaxonian]

Ähm ja dass das h2 in meinem menü falsch ist, hab ich jetzt verstanden.

Aber ich kann doch mein

<h2 id="menue-weld"><a href="weld.html" class="menue">Schweissen</a></h2>
<h2 id="menue-cut"><a href="cut.html" class="menue">Schneiden</a></h2>
<h2 id="menue-auto"><a href="auto.html" class="menue">Automatisieren</a></h2>

nicht in eine liste schreiben? Oder doch? Das sind doch eigendständige Elemente.
da währe doch ein <p> </p> auch korrekt, oder nicht?

Nach Lektüre dieser Links hast Du die Antworten auf Deine Fragen:
selfhtml.org: Referenz für li
selfhtml.org: Referenz für h1-6
Beachte, dass jedes Element in html Abhängigkeiten hat. In den jeweiligen Referenzen ist das eindeutig geregelt.

Grüße
low

 

[Hase]

@elroy
Oder Bosch baut den nächsten Kühlschrank in einer Weise, dass nur Rechtshänder ihn bedienen können...

Um nochmal darauf zurück zu kommen... (Fand den Vergleich nur sehr lustig ) Ich sage ja nicht dass sie eine bestimmte größe zur Verfügung haben müssen, sondern mindestens so und so viel...

Bosch setzt ja auch voraus dass man eine Hand besitzt um den Kühlschrank zu bedienen...

Back to Topic...

Habe jetzt ein paar Dinge geändert... Ist es jetzt besser? Bitte verbessert mich, ich bin kein Profi, aber will es gleich richtig machen, und wenn ich nicht darauf hingewiesen werde... Ihr wisst eh...

Danke für eure Bemühungen!

MFG Hase

PS: Das mit der Größe, und dem Viewport muss ich nochmal nachlesen... hab da nicht allzu viel verstanden, wie ich dass nun genau machen muss...

http://www.hmb-schweisstechnik.de/web.html

 

[Elroy]

Hallo.

Sieht soweit ganz gut aus.
Du hast noch einige Flüchtigkeitsfehler drin.
Zum Beispiel hier:

<p>Ihrem Fachhändler für Schweissen Schneiden und Automatisieren<p/>

Ausserdem hast du einen HTML Doctype aber benutzt eine XHTML Syntax, aber ansonsten nicht schlecht.

Gruss
Elroy

 

[lowsaxonian]

<h2>Willkommen auf der Homepage von HMB Schweisstechnik GmbH</h2>
<p>Ihrem Fachhändler für Schweissen Schneiden und Automatisieren<p/>

Moin,
die zweite Zeile (der Paragraph) wäre mir sicherlich eine h3-Überschrift wert, um die Wertigkeit des Inhalts zu erhöhen.
Grüße
low

 

[Hase]

@ Elroy: Meinen fehler mit dem <p> </p> hab ich beseitigt. Jedoch finde ich die XHTML Syntax nicht, gib mir einen Tipp was falsch ist.

@ lowsaxonian: Habe es jetzt in <h3> </h3> geändert, obs nun soviel besser ist sei dahingestellt, aber gut.

MFG Hase

 

[Elroy]

Hallo.

Zum Beispiel das hier:

<br />

ist XHTML Syntax und somit falsch.

Richtig ist es so:

<br>

Lass die Seite mal durch den W3C Validator laufen, dort werden dir solche Fehler sofort angezeigt.

Gruss
Elroy