Moin,

ich habe einen Relaunch meiner Website http://www.medien-schmie.de gestartet. Also alle Inhalte geprüft, Text gekürzt, hinzugefügt, erneuert usw.

Folgende Fragen: Auf der Startseite index.html ragt das Kopfbanner des dritten Bereichs "Links" in die Seitenleiste rechts hinein. Oben und in der Mitte passt es. In der Hauptleiste sind drei divs ineinander geschachtelt. Setze ich aber die drei divs nacheinander untereinander, ragt zwar das Banner nicht mehr nach rechts hinein, aber dann rutscht die Seitenleiste rechts nach unten und beginnt auf der Höhe des Endes der Hauptleiste.

Wie kann ich der Seitenleiste in diesem Fall sagen, dass sie oben beginnen soll? Oder anderes gefragt, wie richte ich es ein, dass das Kopfbanner des dritten Themenbereichs nicht nach rechts hineinragt?

Ich wünsche Euch einen schönen Abend.

Grüße

Thobie

Moin,

hat hier niemand eine Lösung dafür? Ich kann mir nicht vorstellen, dass keiner der Webdesigner, die sich mit HTML und CSS auskennen, hier keine Abhilfe weiß.

Ich wünsche Euch einen schönen Abend.

Grüße

Thobie

Schicke Dein HTML erst mal durch einen HTML-Validierer… (http://validator.w3.org/check)

Bereits nach kurzem Anschauen habe ich z.B. gefunden das die gleich ID mehrfach verwendet wird. Da wird das Ganze schnell unvorhersehbar. Alle 16 Fehler bereinigen, dann ggf. nochmals fragen (falls das Problem dann noch weiter besteht).

Olaf

Ach Thobie,

da die Inhalte Deiner Seite je nach Browser andere
Schriften und Größen verwenden, kommt zu einer
Verschiebung.

Umgehen könntest Du das z.B. wenn Du für den
Bereich unten ein div hast, dass den linken und
rechten Bereich umschließt. Und da drinnen sind
2 divs - einmal für links und einmal für rechts...

Du solltest auch mal Deine Schriftdefinitionen
überprüfen, mal steht bei Dir im CSS:

"Arial Narrow",Tahoma, Geneva, Arial, Helvetica, sans-serif

dann wieder mal:

Tahoma, Geneva, Arial, Helvetica, sans-serif

Das ist natürlich jeweils was anderes....

Und mal ehrlich, wer verwendet denn noch
Webcounter.... ;-)

Moin, Olaf,

ich verstehe Dich und das Prüfergebnis auf der Website validator.w3.org jetzt so, dass ein definiertes div nur einmal auf einer Seite verwendet werden darf?

Ich wünsche Dir noch einen schönen Abend.

Grüße

Thobie

Moin, Dirk,

Antwort auf [ Dirk Levy ]

da die Inhalte Deiner Seite je nach Browser andere Schriften und Größen verwenden, kommt zu einer Verschiebung.

nein, in Safari, Firefox und Chrome auf Mac OS X 10.10 überlappt das Kopfbanner des dritten divs die rechte Seitenleiste.

Ich wünsche Dir einen schönen Abend.

Grüße

Thobie

Hallo Thobie,

hmm - wenn Du in Sachen HTML nicht so gut zu Fuß bist und mit den Fehlermeldungen des Validators nix anfangen kannst, wird es jetzt etwas mühsam… Der Aufbau Deiner Seite strotzt jetzt auch nicht gerade vor Strukturiertheit…. Auf diesem Hintergrund kannst Du glaube ich nicht dass Du erwarten kannst, dass da jemand anderes für Dich aufräumt. Zumindest habe ich nicht genug Energie, mich durch Deinen Code zu wurschteln.

Zitat

Ich verstehe Dich und das Prüfergebnis auf der Website validator.w3.org jetzt so, dass ein definiertes div nur einmal auf einer Seite verwendet werden darf?

nee - div ist nicht das Problem, die mehrfach verwendete ID (="content") ist ein Problem. Das müsste man mal entwirren… (IDs dürfen, wie der Name schon vermuten lässt, nur einmal auf einer Seite vorkommen)

Olaf

Tja und bei mir mit 10.10 eben nicht,
sondern je nach aktuellem Browser
unterschiedlich...

Olaf hat schon Recht - erstmal aufräumen...

Moin, Olaf und Dirk,

– Schriftenproblem behoben im CSS
– div IDs umbenannt, jede ID erscheint jetzt nur einmal auf der Webseite
– einige weitere Probleme laut Validator behoben

Die restlichen acht Fehler kann man im Moment vernachlässigen, sie hängen mit dem Document Type zusammen, dass dieser eventuell nicht korrekt oder aktuell ist. Aber da wage ich mich im Moment nicht ran, denn als ich dies versuchte, zerschießt es mir ganz das Dokument mit über 70 Fehlern.

Aber, div IDs aufgeräumt, und immer noch ragt das Kopfbanner rechts in die Seitenleiste.

Ich wünsche Euch einen schönen Abend.

Grüße

Thobie

Hallo Thobie

entschachtele mal das "links" div (es ist innerhalb des "taetig" div angeordnet, dadurch addiert sich u.a. der linke Rand).

Olaf

Moin, Olaf,

das schrieb ich ja, mir ist schon klar, dass die Verschiebung dadurch zustande kommt, dass drei divs ineinander geschachtelt sind.

Aber setze ich sie untereinander, dann beginnt die rechte Seitenleiste nicht mehr oben, sondern rutscht auf die Höhe des Endes der linken Hauptleiste. Und ich weiß nicht, wie ich dies beheben kann. Muss ich da dem div „motto“ irgend etwas zuweisen?

Ich wünsche Dir ein gutes Neues Jahr!

Grüße

Thobie

Hallo Thobie,

hast Du in so einer Nacht eigentlich nix Besseres zu tun ;-)

Ich würde die drei Inhalts-divs in ein Eltern-div packen, das dann dafür sorgt, dass die drei Inhalts-divs unteeinander stehen, aber der Rest (außerhalb des Eltern-divs) rechts davon stehen bleibt.

Logik in etwa (die Minus-Zeichen dienen hier nur der velrässlcihen Einrückung):
<div id="eltern>
-- <div id="teil1"></div>
-- <div id="teil2"></div>
-- <div id="teil3"></div>
</div>
<div id="rechte-seitenleiste>
</div>

Wenn Du dabei die Breite des Elternteils auf z.B. 70% und die Seitenleiste auf 30% setzt, müsste es klappen.

Bitte bei Gelegenheit mal sicher stellen, dass Du die Organisation von div-Blöcken durchschaust… ;-) [und außerdemn: möglichst immer einen entsprechenden Plan haben, bevor Du loslegst; manchmal hilft einfach Aufmalen der Blockschachtelung auf einem Zettel]

Bemaßungen in px sind übrigens out. Das fliegt einem auf Geräten, die nicht über (früher) übliche Bildschirmgrößen verfügen, um die Ohren oder endet in horizontalen Scroll-Quälereien.

Schönes Restjahr 2015 noch!

Olaf

Moin,

Antwort auf [ olaflist ]

hast Du in so einer Nacht eigentlich nix Besseres zu tun ;-)

nö. Da aber anscheinend auch nicht. :)

Danke, jetzt hast Du viel geschrieben. Ich habe das Problem gelöst, besser gesagt, entfernt. Ich habe nämlich den Counter, also den dritten div in der rechten Seitenleiste entfernt. Aber vielleicht setze ich trotzdem Deinen Vorschlag mit dem Eltern-div um.

Antwort auf:

Bitte bei Gelegenheit mal sicher stellen, dass Du die Organisation von div-Blöcken durchschaust… ;-) [und außerdemn: möglichst immer einen entsprechenden Plan haben, bevor Du loslegst; manchmal hilft einfach Aufmalen der Blockschachtelung auf einem Zettel]

Das ist ein kostenloses Theme, das habe ich übernommen. Ich habe es nicht programmiert/gestaltet. Sondern einfach meine Inhalte hineingepackt. Von daher ist natürlich nichts mit Vorher-sich-einen-Plan-machen usw.

Antwort auf:

Bemaßungen in px sind übrigens out. Das fliegt einem auf Geräten, die nicht über (früher) übliche Bildschirmgrößen verfügen, um die Ohren oder endet in horizontalen Scroll-Quälereien.

Ja, und ein responsibles Webdesign ist es auch nicht, da muss ich mir demnächst einmal Gedanken machen, ob ich auf etwas anderes umsteige. Am einfachsten zu verwalten wäre ein entsprechendes Blog-Design unter WordPress. Aber im Moment lasse ich es erst einmal so.

Antwort auf:

Schönes Restjahr 2015 noch!

Schönes volles Jahr Dir noch!

Grüße

Thobie

Moin, Olaf,

ich habe jetzt den Document Type geändert. Ich bekomme nun mit dem CSS-Validator und mit dem XHTML-Validator keine Fehler mehr, sondern jeweils ein valides Dokument.

Die divs habe ich geschachtelt gelassen. Ich habe versuchsweise ein Eltern-div eingerichtet:

Eltern-div
- div
- /div
- div
- /div
- div
- /div
/div

Die Banner werden jetzt zwar schön auf Breite der Leiste beibehalten und nicht verschoben. Aus mir nicht erklärlichen Gründen funktioniert dies aber nicht. Es wird wieder das erste div "motto" der rechten Seitenleiste diesmal auf die Höhe des verschobenen, letzten divs mit den Validators in der Hauptleiste verschoben.

Ich wünsche Dir noch einen schönen Abend.

Grüße

Thobie