Div-Behälter konsequent nebeneinander

  • Hallo,


    ein, zwei erinnern sich vielleicht noch daran, dass ich kürzlich eine Anfrage wegen Tabellen gestellt hatte. Tabellen, die helfen sollen, Inhalte korrekt zu positionieren. Das wird oft als antiquiert abgestempelt, was scher auch nicht falsch ist. Das Problem bei den Div-Behältern ist jedoch, dass sie sich selten so positionieren lassen von mir, wie ich das gern hätte.


    Im aktuellen Beispiel möchte ich links eine lange Textkolumne verwenden und rechts hin und wieder ein Bild zum Text zeigen. Durch ein weiteres schlaues Forum habe ich herausgefunden, dass sich der schöne Hover-Effekt bei Bildern zur größeren Darstellung eines Bildes sehr einfach mit CSS umsetzen lässt, kein Javascript ist dafür nötig. Diese Umsetzung funktioniert allerdings mit Div-Behältern. Und diese Div-Behälter, der Div, der den Text beinhaltet und die Divs, die je ein Bild beinhalten, scheinen sich nicht zu „mögen“.


    Durch die margin-Einstellung meiner Bilder-Divs (sodass die Bilder rechts stehen) habe ich im Bereich des margins nichts anderes als „Luft“. Dort macht der Inhalt meines Text-Divs einen feinen Bogen drum, den er nicht machen soll. Das sieht dann (unerwünschter Weise) so aus:


    [Blockierte Grafik: http://img5.fotos-hochladen.net/thumbnail/jetztdfp0un9gy4_thumb.jpg]



    Eigentlich sollte links der Text fließen und unabhängig davon rechts das Div mit je einem Bild stehen.


    [Blockierte Grafik: http://img5.fotos-hochladen.net/thumbnail/eigentlich0e8qtbgiv1_thumb.jpg]


    Weshalb die zwei Bilder (trotz dass bei beiden der Margin-Abstand derselbe ist (beide 610px), da ja beide Bilder-Divs eine Div-Festlegung im Head haben (div.imageHold div)), sind sie unterschiedlich weit rechts positioniert. Noch so ein Rätsel …



    Der Wust aus HTML und CSS sieht so aus:








    Weiß womöglich jemand, weshalb sich die Div gegenseitig beißen? Es gibt doch genaue Definitionen für jeden. Ich dachte, das schöne an den Div-Behältern ist, dass man sie anordnen kann, wo man sie haben möchte. Wenn sie sich gegenseitig stören und unerwünschter Weise übereinander liegen, halb aus dem Bild ragen oder sich beeinflussen (wie hier am Text zu sehen), dann verstehe ich nicht, was ich mit Divs anfangen soll …:(

  • Zu deinem Quellcode gibts ein schönes Zitat:

    Zitat

    Schickst du Scheisse, kriegst du scheisse!


    OK, dass du ein durcheinander in den aligns hast und mal mit "" und mal ohne schreibst... align="center" vertical-align=top
    Und das es das eine davon gar nicht gibt...
    Das mag ja alles ein Browser noch wegschnuppern, mag aber schon zu undefiniertem Verhalten führen.


    Dass du dann mitten im Code wieder HTML anfängst... das ist dann schon hart.


    Was <BODY LANG="de-DE" DIR="LTR"> dann sein soll weiss ich gar nicht.
    Und warum attribute mit Komma getrennt werden... <font face="arial", color="#FFFFFF", size="3">


    Fazit:
    Räume deinen Code auf!
    Schreibe strukturiertes HTML!


    Dann gehts gaaanz einfach.



    PS: Auf deinen Bildern kann ich zumindest gar nichts erkennen. Pack nen Link rein und jeder kann sehen was du willst.
    Und ganz wichtig bei deinen Fehlern: auf welchem System/ Browsern hast du den Fehler?

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.

  • Zu deinem Quellcode gibts ein schönes Zitat:


    Na solang' es keine Scheiße ist …!




    Dass du dann mitten im Code wieder HTML anfängst... das ist dann schon hart.


    Das ist nicht hart, sondern improvisiert, weil Dreamweaver sich weigert eine ordentliche Schriften-Klasse anzulegen, damit der Text aussieht, wie er soll.


    Was <BODY LANG="de-DE" DIR="LTR"> dann sein soll weiss ich gar nicht.
    Und warum attribute mit Komma getrennt werden... <font face="arial", color="#FFFFFF", size="3">


    Fazit:
    Räume deinen Code auf!
    Schreibe strukturiertes HTML!


    Ich schreibe eigentlich gar kein HTML, das soll der High-Level-Editor machen. Ich ergänze es höchstens oder versuche zu reparieren, was DW nicht gemacht hat/machen wollte. Dazu zählt auch die Bild-Vergrößerungs-Funktion bei Mouse-Over, welche es bei DW nicht von Haus aus gibt.



    So sieht das Ganze am Ende im Firefox 30.0 aus:


    http://wdn.bplaced.net/wdn/wdn_wiki/wiki.html


    Ich verwende Windows 7 Ultimate SP1.

  • Ich bau es dir heute abend mal neu, weil Bugfixing da mehr Aufwand ist.
    Dann zeig ich dir meine Umsetzung und dann kannst du dort Stück übernehmen oder die Unterschiede raussuchen.


    PS: Hast du evtl. http://wdn.bplaced.net/wdn/wdn_wiki/navi.jpg ohne den Text drauf?
    Dieses Map Kram ist viel zu viel Quellcode und es geht viel einfacher, wenn HTML den Text macht.

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.

  • Wao, das sieht ja wirklich klasse aus, was du da hingekommen hast. Ich bin überrascht. :o:)


    Dein Quelltext ist wirklich vollkommen anders aufgebaut als meiner, du scheinst ganz anders zu arbeiten, als ich es damals in meiner Ausbildung gelernt habe. :)''


    Ich hatte versucht die Div-Behälter klassenweise im Head zu definieren. Also deren Breite, deren Platzierung (absolute, fixed oder was auch immer) und deren Index-Tiefe. So hab ich das damals beigebracht bekommen …


    Ist es möglich dem Div-Behälter „main-container“ hier dieselben Eigenschaften zu verpassen, die ich mittels Tabelle zu lösen versucht hatte (gepunktete Außenlinie, zentriert) ? Müsste ich für solche Definitionen nicht erst einmal eine Definition in den Head schreiben? Oder kann ich das unmittelbar beim Anfangs-Div-Tag selbst festlegen?


    Die Navigationsleiste hätte ich hier.
    http://s7.directupload.net/images/140801/rlc8ygew.jpg


    Ich hatte das mit dem DW festgelegt. Dort markiert man Bereiche und gibt die Links ein. Er legt das dann als map fest. Wie das Gleiche mit HTML funktionieren soll, weiß ich leider nicht … erstaunt mich, dass das nur mit HTML gehen soll?


    Auf jeden Fall danke ich dir für deinen Entwurf. Der Code sieht viel übersichtlicher und weniger aus, als es deine Tipps im ersten Beitrag hätten vermuten lassen. caipi

  • Wao, das sieht ja wirklich klasse aus, was du da hingekommen hast. Ich bin überrascht. :o:)


    Dein Quelltext ist wirklich vollkommen anders aufgebaut als meiner, du scheinst ganz anders zu arbeiten, als ich es damals in meiner Ausbildung gelernt habe. :)''


    Ich hatte versucht die Div-Behälter klassenweise im Head zu definieren. Also deren Breite, deren Platzierung (absolute, fixed oder was auch immer) und deren Index-Tiefe. So hab ich das damals beigebracht bekommen …


    Ok, gelernt hab ich das nie. Es scheint mir nur so am logistischen.
    Und class oder ID nutze ich nur, wenn ich Elemente eindeutig haben möchte.
    Index... wie schon vorher (in einem anderen Thread von dir geschrieben) nutze ich nie!


    Zitat


    Ist es möglich dem Div-Behälter „main-container“ hier dieselben Eigenschaften zu verpassen, die ich mittels Tabelle zu lösen versucht hatte (gepunktete Außenlinie, zentriert) ? Müsste ich für solche Definitionen nicht erst einmal eine Definition in den Head schreiben? Oder kann ich das unmittelbar beim Anfangs-Div-Tag selbst festlegen?


    Zentriert habe ich über den wrapper.

    HTML
    1. .wrapper {
    2. width: 1000px;
    3. margin: 0px auto;
    4. }


    Und dein Rahmen hab ich jetzt auf den Body gesetzt. Schau mal.



    Zitat


    Die Navigationsleiste hätte ich hier.
    http://s7.directupload.net/images/140801/rlc8ygew.jpg


    Ne, die hatte ich schon, da die ja auch auf deiner Seite ist. Ich meinte ohne Text! So: http://yourhp.de/demo/1408-112115/img/navi.jpg
    Hab ich jetzt grad mal billig nachgebastelt.


    Zitat


    Ich hatte das mit dem DW festgelegt. Dort markiert man Bereiche und gibt die Links ein. Er legt das dann als map fest. Wie das Gleiche mit HTML funktionieren soll, weiß ich leider nicht … erstaunt mich, dass das nur mit HTML gehen soll?


    Siehst ja, geht. Geht zumindest viel einfacher mit einer Liste, wenn alle Elemente Horizontal oder Vertikal auf der gleichen Ebene liegen. Map ist evtl. gut, wenn du Elemente ganz wild in x und y Achse unterschiedlich hast.


    Zitat


    Auf jeden Fall danke ich dir für deinen Entwurf. Der Code sieht viel übersichtlicher und weniger aus, als es deine Tipps im ersten Beitrag hätten vermuten lassen. caipi


    PS: Hab die beschriebene Navi grad angepasst.

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.

  • Ich hab nicht alles gecentert. Ja, Kopf und Fuss sind nicht in der Mitte.
    Sollte in meinem Beispiel so sein, da ich nur die DIVs im Aufbau, Bild neben Text und Navi als ul gemacht habe.
    Will die Seite ja nicht fertig machen :D

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.

  • Ich hab nicht alles gecentert. Ja, Kopf und Fuss sind nicht in der Mitte.
    Sollte in meinem Beispiel so sein, da ich nur die DIVs im Aufbau, Bild neben Text und Navi als ul gemacht habe.
    Will die Seite ja nicht fertig machen :D



    Nein, fertig sicher nicht. Aber solange ich natürlich nicht sehen kann, was du in die externe CSS-Datei und die JS-Datei eingefügt hast, kann ich natürlich lange rätseln, woher die Div-Behälter ihre Eigenschaften haben. :eek:


    Gewährst du mir Einblick in diese wundersamen Skripte? Dann kann ich auch mehr damit anfangen und sie ausbauen, wie ich mir das vorstelle. ^^

  • Nein, fertig sicher nicht. Aber solange ich natürlich nicht sehen kann, was du in die externe CSS-Datei und die JS-Datei eingefügt hast, kann ich natürlich lange rätseln, woher die Div-Behälter ihre Eigenschaften haben. :eek:


    Gewährst du mir Einblick in diese wundersamen Skripte? Dann kann ich auch mehr damit anfangen und sie ausbauen, wie ich mir das vorstelle. ^^


    caipi Hääää


    Was kannst du denn nicht sehen?

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.

  • 112 115 : es gibt weder eine CSS- noch eine JS-Datei. Es gibt nur den Quellcode. Und den kannst Du sehen ;)


    Nicht korrekt, schau doch noch mal nach.


    Es gibt 2 CSS und 2 JS in meiner Seite.
    1x css mit meinem Code
    1x css Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
    1x js Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
    1x js für eigenen Code (ist hier leer, liegt nur in meinem Template für neue Webprojekte)


    Auch auch diese Dateien sind ja alle nicht verschlüsselt und einfach zu lesen. Also kein Hexenwerk, was ich mache.

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.

    3 Mal editiert, zuletzt von the0bone () aus folgendem Grund: Link http://yourhp.de/demo/1408-112115/


  • Kein Hexenwerk, aber anders, als ich das kenne.
    Du hast in deinem Quelltext stehen

    HTML
    1. <link rel="stylesheet" href="css/main.css">


    … deshalb war ich der Überzeugung, dass da noch eine externe Css-Sytle-Datei sein müsste, denn so bindet man die doch ein, oder etwa nicht?


    Und im Head dieses Quelltextes selbst sehe ich keinerlei Definitionen. Überhaupt sehe ich keine Definitionen, nicht einmal für die Schrift. Wenn ich deinen Quelltext nehme, in meinen DW einfüge und mir dann im Firefox anschaue, erscheint alles im Standard-Gewand: ohne Hintergrundfarbe, Times-New-Roman und ohne Pixelzuweisungen. Wie soll das auch gehen, wenn ich deine Css-Stylesheet-Datei nicht habe …
    Außer man schreibt die Definitionen in den Head selbst rein. Ist etwas mehr dann, etwas unübersichtlicher, aber man hat nur eine Datei die völlig autark ist.


    So kann ich damit doch gar nichts anfangen. :confused:

  • Mit welchem Tool guckst du dir den denn Quellcode meiner Seite an?

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.

  • Mit welchem Tool guckst du dir den denn Quellcode meiner Seite an?


    Ich sehe das mit dem Rechtsklick im Firefox -> Seitenquelltext anzeigen ->neues Fenster mit Quelltext. Den füge ich dann in den DW ein und schaue mir an, was der im Firefox draus macht. ;)




    Zitat von Wildmieze

    112 115 : ... In diesem Fall könntest Du den Pfad zu den CSS einfach anhängen: http://yourhp.de/demo/1408-112115/css/main.css ..


    Ah, danke. Nach genau so etwas habe ich gesucht. ^^'


    Ich muss schließlich die einzelnen Komponenten meiner Seite in ihren Eigenschaften verändern können, sonst nutzt mir das recht wenig …

  • Ich sehe das mit dem Rechtsklick im Firefox -> Seitenquelltext anzeigen ->neues Fenster mit Quelltext. Den füge ich dann in den DW ein und schaue mir an, was der im Firefox draus macht. ;)


    Dann ist in dem Fenster im Firefox alles Verlinkt.
    Du brauchst z.B. nur auf ein Bild drücken und er öffnet das.
    Oder halt auf den Namen der CSS Datei und er öffnet diese... oder halt auf eine js Datei.

    the0bone


    Wissen ist Macht, nichts Wissen macht nichts! Doch auch wenn man es nicht besser weiss, sollte man beim Erstellen einer Webseite auf Tabellen verzichten.