[GastForen Web allgemein HTML und CSS / Stylesheets div-Einbindung

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

div-Einbindung

Thobie
Beiträge gesamt: 4040

30. Dez 2014, 18:40
Beitrag # 1 von 14
Bewertung:
(7052 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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

(Dieser Beitrag wurde von Thobie am 30. Dez 2014, 18:42 geändert)
X

div-Einbindung

Thobie
Beiträge gesamt: 4040

31. Dez 2014, 18:00
Beitrag # 2 von 14
Beitrag ID: #535553
Bewertung:
(6973 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535541]

div-Einbindung

olaflist
Beiträge gesamt: 1400

31. Dez 2014, 18:24
Beitrag # 3 von 14
Beitrag ID: #535555
Bewertung:
(6960 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535553]

div-Einbindung

Dirk Levy
  
Beiträge gesamt: 9464

31. Dez 2014, 18:32
Beitrag # 4 von 14
Beitrag ID: #535556
Bewertung:
(6956 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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.... ;-)


als Antwort auf: [#535553]

div-Einbindung

Thobie
Beiträge gesamt: 4040

31. Dez 2014, 19:16
Beitrag # 5 von 14
Beitrag ID: #535557
Bewertung:
(6927 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535555]

div-Einbindung

Thobie
Beiträge gesamt: 4040

31. Dez 2014, 19:18
Beitrag # 6 von 14
Beitrag ID: #535558
Bewertung:
(6923 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535556]
(Dieser Beitrag wurde von Thobie am 31. Dez 2014, 19:19 geändert)

div-Einbindung

olaflist
Beiträge gesamt: 1400

31. Dez 2014, 19:59
Beitrag # 7 von 14
Beitrag ID: #535559
Bewertung:
(6898 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535557]

div-Einbindung

Dirk Levy
  
Beiträge gesamt: 9464

31. Dez 2014, 21:39
Beitrag # 8 von 14
Beitrag ID: #535561
Bewertung:
(6857 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Tja und bei mir mit 10.10 eben nicht,
sondern je nach aktuellem Browser
unterschiedlich...

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


als Antwort auf: [#535558]

div-Einbindung

Thobie
Beiträge gesamt: 4040

31. Dez 2014, 22:14
Beitrag # 9 von 14
Beitrag ID: #535562
Bewertung:
(6842 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535561]

div-Einbindung

olaflist
Beiträge gesamt: 1400

31. Dez 2014, 23:01
Beitrag # 10 von 14
Beitrag ID: #535563
Bewertung:
(6816 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Thobie

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

Olaf


als Antwort auf: [#535562]

div-Einbindung

Thobie
Beiträge gesamt: 4040

1. Jan 2015, 00:50
Beitrag # 11 von 14
Beitrag ID: #535564
Bewertung:
(6793 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535563]

div-Einbindung

olaflist
Beiträge gesamt: 1400

1. Jan 2015, 01:05
Beitrag # 12 von 14
Beitrag ID: #535565
Bewertung:
(6781 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535564]

div-Einbindung

Thobie
Beiträge gesamt: 4040

1. Jan 2015, 01:21
Beitrag # 13 von 14
Beitrag ID: #535567
Bewertung:
(6775 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535565]

div-Einbindung

Thobie
Beiträge gesamt: 4040

1. Jan 2015, 02:58
Beitrag # 14 von 14
Beitrag ID: #535568
Bewertung:
(6718 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
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


als Antwort auf: [#535567]
(Dieser Beitrag wurde von Thobie am 1. Jan 2015, 02:59 geändert)
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
14.05.2024

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Ja

Organisator: Impressed / Horizon

https://www.impressed.de/schulung.php?c=sDetail&sid=327

Einsparpotenziale in der Weiterverarbeitung
Veranstaltungen
16.05.2024

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!