[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: 3862

30. Dez 2014, 18:40
Beitrag # 1 von 14
Bewertung:
(6527 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/

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

div-Einbindung

Thobie
Beiträge gesamt: 3862

31. Dez 2014, 18:00
Beitrag # 2 von 14
Beitrag ID: #535553
Bewertung:
(6448 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/


als Antwort auf: [#535541]

div-Einbindung

olaflist
Beiträge gesamt: 1392

31. Dez 2014, 18:24
Beitrag # 3 von 14
Beitrag ID: #535555
Bewertung:
(6435 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
--
Olaf Druemmer | Geschäftsführer
callas software gmbh | www.callassoftware.com
axaio software GmbH | www.axaio.com


als Antwort auf: [#535553]

div-Einbindung

Dirk Levy
  
Beiträge gesamt: 9379

31. Dez 2014, 18:32
Beitrag # 4 von 14
Beitrag ID: #535556
Bewertung:
(6431 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.... ;-)

Gruß
Dirk

[levy-media.de MCP]
http://www.levy-media.de


als Antwort auf: [#535553]

div-Einbindung

Thobie
Beiträge gesamt: 3862

31. Dez 2014, 19:16
Beitrag # 5 von 14
Beitrag ID: #535557
Bewertung:
(6402 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/


als Antwort auf: [#535555]

div-Einbindung

Thobie
Beiträge gesamt: 3862

31. Dez 2014, 19:18
Beitrag # 6 von 14
Beitrag ID: #535558
Bewertung:
(6398 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/


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

div-Einbindung

olaflist
Beiträge gesamt: 1392

31. Dez 2014, 19:59
Beitrag # 7 von 14
Beitrag ID: #535559
Bewertung:
(6373 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
--
Olaf Druemmer | Geschäftsführer
callas software gmbh | www.callassoftware.com
axaio software GmbH | www.axaio.com


als Antwort auf: [#535557]

div-Einbindung

Dirk Levy
  
Beiträge gesamt: 9379

31. Dez 2014, 21:39
Beitrag # 8 von 14
Beitrag ID: #535561
Bewertung:
(6332 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...

Gruß
Dirk

[levy-media.de MCP]
http://www.levy-media.de


als Antwort auf: [#535558]

div-Einbindung

Thobie
Beiträge gesamt: 3862

31. Dez 2014, 22:14
Beitrag # 9 von 14
Beitrag ID: #535562
Bewertung:
(6317 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/


als Antwort auf: [#535561]

div-Einbindung

olaflist
Beiträge gesamt: 1392

31. Dez 2014, 23:01
Beitrag # 10 von 14
Beitrag ID: #535563
Bewertung:
(6291 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
--
Olaf Druemmer | Geschäftsführer
callas software gmbh | www.callassoftware.com
axaio software GmbH | www.axaio.com


als Antwort auf: [#535562]

div-Einbindung

Thobie
Beiträge gesamt: 3862

1. Jan 2015, 00:50
Beitrag # 11 von 14
Beitrag ID: #535564
Bewertung:
(6268 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/


als Antwort auf: [#535563]

div-Einbindung

olaflist
Beiträge gesamt: 1392

1. Jan 2015, 01:05
Beitrag # 12 von 14
Beitrag ID: #535565
Bewertung:
(6256 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
--
Olaf Druemmer | Geschäftsführer
callas software gmbh | www.callassoftware.com
axaio software GmbH | www.axaio.com


als Antwort auf: [#535564]

div-Einbindung

Thobie
Beiträge gesamt: 3862

1. Jan 2015, 01:21
Beitrag # 13 von 14
Beitrag ID: #535567
Bewertung:
(6250 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/


als Antwort auf: [#535565]

div-Einbindung

Thobie
Beiträge gesamt: 3862

1. Jan 2015, 02:58
Beitrag # 14 von 14
Beitrag ID: #535568
Bewertung:
(6193 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
--
Helfen Sie, dass HilfDirSelbst helfen kann: http://www.hilfdirselbst.ch/info/

Kontakt: https://www.kreativ-schmie.de/


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
25.01.2021 - 26.01.2021

Digicomp Academy AG, Bern oder Zürich
Montag, 25. Jan. 2021, 08.30 Uhr - Dienstag, 26. Jan. 2021, 17.00 Uhr

Kurs

In diesem Basic-Kurs lernen Sie das Wichtigste über den Aufbau und die Funktionsweise von Photoshop. Zusammen mit den notwendigen Grundlagen von Farbenlehre bis Bildauflösung lernen Sie zudem die kreativen Möglichkeiten von Photoshop kennen.

Dauer: 2 Tage
Preis: CHF 1'400.–

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/PHOTM1

Veranstaltungen
25.01.2021 - 26.01.2021

Digicomp Academy AG, Zürich oder virtuell
Montag, 25. Jan. 2021, 08.30 Uhr - Dienstag, 26. Jan. 2021, 17.00 Uhr

Kurs

Im Kurs lernen Sie die Schritte vom Import des Rohmaterials bis zum fertig exportierten Clip kennen. Dazu zählen die Materialverwaltung, das Trimmen für Roh- und Feinschnitt, Blenden, Titel und Effekte und eine Übersicht über die wichtigsten Formate.

Preis: CHF 1'700.-
Dauer: 2 Tage

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/AP6

Neuste Foreneinträge


PSD CS6 (!) Mac: Dialog "Dateiinformationen" Fenster leer und Sackgasse

Inhalt Textrahmen verbinden

iPhone Farbprofil

Exel ohne leeres Tabellenblatt starten

Text- oder Grafikrahmen nach Position und Größe suchen und ändern

Illustrator Skript Übersatztext - Hilfe benötigt

[GREP] beliebige Zeichen finden und durch selbe Anzahl an Leerzeichen oder Anzahl Zeichen "x" ersetzen

InDesign 2021 – Suchen/Ersetzen: Farbe

Langsamer MacMini

Netzwerklaufwerke verbinden -> Bei nicht verfügbar Fehlermeldung unterdrücken
medienjobs