link Problem

  • Ich habe ein unerfreuliches Problem mit der Verlinkung der Seite mit einer css Datei.

    Die css liegt im selben Verzeichnis wie die Indexdatei, aber Chrome lädt nicht die CSS, auch nicht Phase5. An sich scheint kein Tippfehler in der CSS zu sein, denn nutze ich die CSS Definitionen im Style-tag zeigen beide Browser gewünschte Änderungen an.


    Das ist mein link-tag

    Code
    <link href="allgemein.css" rel"stylesheet" media="screen" charset="utf-8" />

    Wenn ich F12 in Chrome drücke, zeigt Chrome mir irgendwelche Definitionen für die Seite an, vermutlich die Standardeinstellungen des Browsers.


    Code
    link {
        display: none;
    }

    Die Seite liegt in einem Unterverzeichnis von httpdocs und ist mit einer Subdomain erreichbar.

    Was ist das Problem?

  • Wenn du in den Entwicklertools von Chrome mal auf den Netzwerk-Tag schaltest und die Seite neulädst, siehst du dann, dass er die .css file überhaupt läd?


    Ist das ein Tippfehler im Forenbeitag?

    Code
    rel"stylesheet"
    Code
    rel="stylesheet"

    Meine (Netcup) Produkte: S 1000 G7, VPS 200 G8 Ostern 2019, IPs, Failover..

  • Verstehe nicht ganz, was du eigentlich meinst. Aber die Positionierung deiner Elemente, alle absolut ohne Positionsangabe, ist halt einfach etwas merkwürdig. Und die Box mit dem Text Navigation hat nun mal auch ein margin-top von 150px. Wie hätte es denn aussehen sollen?

  • Verstehe nicht ganz, was du eigentlich meinst. Aber die Positionierung deiner Elemente, alle absolut ohne Positionsangabe, ist halt einfach etwas merkwürdig. Und die Box mit dem Text Navigation hat nun mal auch ein margin-top von 150px. Wie hätte es denn aussehen sollen?

    Mit der absoluten Position möchte ich aus den DIV Containern mein gewünschtes Layout bauen. Ein Konzept habe ich mir mit Photoshop erstellt, das ich mit HTML erreichen möchte. Die absolute Position erschien mir ein simples Mittel zu sein, um dieses zu erreichen.


    Die verwendeten Grafiken sind an sich nur Platzhalter. Der DIV Containern befindet sich im HTML Code im Container links, ebenso der Container mit dem Logo. Dieses sollte auf der Höhe des weißen Containers bleiben und eigentlich nicht den Container navigation irgendwie beeinflussen. weblayout.jpg

  • Der Container mit dem Logo beeinflusst den Container Navigation nicht. Ich nehme jetzt mal an, die Frage ist, warum dier Schriftzug "Navigation" so weit nach unten rutscht. Das hat mit dem Logo-Container nichts zu tun. Da spuckt dir dein Browser in die Suppe, indem er ein eigenes Stylesheet mitbringt, in dem für die meisten Tags, so auch für das p-Tag, Eigenschaften gesetzt werden. In dem Fall hier stört die dort gesetzte Margin. Wenn du also in deinem CSS z.B. dem p#k2 (#k2 ohne das div und p Gedöns reicht auch) einfach die margin auf 0 setzt, dann wird sich die Schrift brav da wiederfinden, wo du sie erwartet hast.


    Zu dem Vorgehen mit der absoluten Positionierung: Kann man natürlich so machen, einige Baukästen machen das auch oder haben es jedenfalls mal gemacht. Dann würde ich da für die Positionierung aber nicht mit Margins arbeiten, sondern die eigentlich dafür vorgesehenen Eigenschaften top, bottom, left und right verwenden. Zu der Zeit, als man einfach eine Gesamtgröße der Seite fest vorgegeben hat, war das mit der absoluten Positionierung aller Elemente auch noch halbwegs praktikabel. Aber mittlerweile ist responsive Webdesign angesagt, da fliegt dir das früher oder später um die Ohren oder verursacht jedenfalls eine Menge Detailarbeit für unterschiedliche Fenstergrößen.

  • SebisMAG Schau dir mal https://css-tricks.com/snippets/css/complete-guide-grid/ an, denke dies würde dir sehr helfen.

    Browserkompatibilität: (https://caniuse.com/#feat=css-grid)

    Super danke, das passt. Eigentlich wollte ich gerade fragen, was ich dem Browser noch sagen muss, damit er die Container bei float in richtiger Reihenfolge anzeigt so wie im Schaubild. Ich versuche es mal mit der Grid Möglichkeit.


    Aber eine Frage habe ich trotzdem. Wieso ist der Container "top" kürzer, als der Container "textbereich" trotz der selben Größeneinheiten? Eigentlich müsste die Container, nach meinem Verständnis, gleich lang sein mit dem Unterschied, dass "textbereich" mit einem 1px Rand hervorstehen müsste zu allen Seiten bzw. 2px, da rechts und links ein Rand steht.

  • So am Rande ist Float nicht grade das Beste in CSS, es kann zwar schon so einiges aber macht auch sehr viel mal schnell kaputt, ist so wie MS Word man bearbeitet das Dokument unten und oben geht alles kaputt.


    Als Vorschlag kann ich dir mit CSS die Flex Boxen ans Herzen legen.


    Hab ich das eigentlich richtig verstanden das es ungefähr so sein soll?

    Unbenannt.PNG


    HTML Datei: ( index.html )

    habe um top und textbereich ein DIV gemacht und es die ID middle gegeben


    CSS Datei: (allgemein.css)

    #Wrapper zu einer Flex Box gemacht mit display:flex;

    Floats entfernt und größen verändert.


    Sollte das Menü mitwachsen sowie die rechte Leiste dann bei div#links und div#rechts die height entfernen bzw auskommentieren, dann sollten die mit dem Code den ich gesendet habe mitwachsen ( habs eben getestet) .

  • @Theenoro: Danke, für deine Idee. Ich möchte mich aber ein wenig mit grid beschäftigen, wenn ich es richtig mache, verstehe ich das dann auch was ich da angestellt habe. :D

    Dein Schaubild würde nicht ganz meiner Vorstellung entsprechend. Der dunkelblaue Bereich sollte im Grunde fix sein, der Textbereich sollte sich beliebig nach unten ausbreiten, je nach Inhalt.


    Benutzergeloescht10 Ich versuche meine aktuelle Quellcodestruktur auf die grid Anzeige umstellen. Bei der Planung habe ich ein kleines Logik oder Logistikproblem. Den WrapperContainer hatte ich eigentlich als feststehendes Element auf der untersten Ebene der Seite angelegt, um ihn später auch als Anker verwenden, für Seitensprünge zum Anfang, zu können. Wenn ich nun den WrapperContainer als grid-Elternelement verwende bräuchte ich dann im Grunde einen neuen Anker für Seitensprünge?