Danke, funktioniert beides top 
Beiträge von sammy
-
-
Hallo,
ich habe folgendes Grid Layout erstellt:
HTML
Alles anzeigen<html> <head> <style> html, body { background-color: grey; width: 100%; height: 100%; margin: 0; } .grid { width: 90%; height:99%; margin: 1% auto 0; display: grid; grid-template-columns: 50% 50%; grid-template-rows: 10% auto 5%; grid-template-areas: "logo menue" "inhalt inhalt" "footer footer" } .logo { background-color:blue; grid-area: logo; } .menue { background-color:green; grid-area: menue; } .inhalt { background-color:white; grid-area: inhalt; } .footer { background-color:yellow; grid-area: footer; } </style> </head> <body> <div class="grid"> <div class="logo">Logo</div> <div class="menue">Menue</div> <div class="inhalt">Inhalt</div> <div class="footer">Footer</div> </div> </body> </html>Ich hätte gerne, dass die Website nicht ganz oben am Browserfenster klebt. Wenn ich die Website wie im Beispiel etwas nach unten schiebe geht das Layout leider über den Bildschirm hinaus und ein Scrollbalken erscheint. Wie fügt man korrekt oben einen Abstand ein? Gleichzeitig soll das Layout auch bei viel Inhalt (mit einem Scrollbalken) korrekt funktionieren. Danke!
-
Das scheint die relevante Anweisung für mich zu sein:
Codenav > ul > li:hover > a{ color:white; }Nochmals vielen Dank!
-
Danke, jetzt passt es! Ich studiere die CSS Anweisungen dann morgen. Schöne Grüße und gute Nacht!
-
Dann machst du was falsch
Wenn sich der Mauszeiger über "Produkte" befindet, sollen "Obst" und "Gemüse" rot dargestellt werden! Derzeit besitzen beide Einträge eine weiße Schrift. Wenn sich der Mauszeiger dann über "Obst" oder "Gemüse" befindet, soll "Obst" bzw. "Gemüse" eine weiße Schrift und einen roten Hintergrund erhalten. Gleichzeitig soll "Produkte" mit weißer Schrift und rotem Hintergrund dargestellt werden, wenn sich der Mauszeiger über "Obst" oder "Gemüse" befindet.
-
Sorry, das war missverständlich formuliert. Mit rot habe ich eigentlich dunkelrot gemeint. Das wirkt im Beispiel etwas angenehmer für das Auge. Mit der Ergänzung hat es jetzt noch nicht ganz geklappt. Die Links im Untermenü sollen auch rot (bzw. dunkelrot) dargestellt werden und erst bei "Hover" auf weiß (mit dunkelrotem Hintergrund) umspringen. Momentan ist es ja so, dass Links im Untermenü auch weiß sind.
-
Hallo, ich habe mir von nachfolgender Seite ein kleines Aufklappmenü nachgebaut:
http://www.olivergast.de/blog/…-dropdown-menue-reloaded/
Mein CSS/HTML sieht beispielhaft so aus:
HTML
Alles anzeigen<html> <head> <style> nav { box-sizing: border-box; font-size: 1em; width: 100%; } nav ul { float: left; margin: 0; padding: 0; } nav a { color: darkred; text-decoration:none; display: block; } nav ul li { position: relative; float: left; list-style: none; } nav ul li:hover { background: darkred; } nav ul li:hover a { color:white; } nav ul li:hover a:hover { color:white; } nav ul li a { padding: 4px 8px; } nav ul ul { position: absolute; top: -9999px; left: -9999px; background: black; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); } nav ul ul li { float: none; width: 150px; border-bottom: 0.1em solid #555; } nav ul li:hover > ul { top: 100%; left: 0; } </style> </head> <body> <nav> <ul> <li><a href="#">Punkt 1</a> <ul> <li><a href="#">Unterpunkt 1a</a></li> <li><a href="#">Unterpunkt 1b</a></li> </ul> </li> <li><a href="#">Punkt 2</a> <ul> <li><a href="#">Unterpunkt 2a</a></li> <li><a href="#">Unterpunkt 2b</a></li> </ul> </li> <li><a href="#">Punkt 3</a> <ul> <li><a href="#">Unterpunkt 3a</a></li> <li><a href="#">Unterpunkt 3b</a></li> </ul> </li> </ul> </nav> </body> </html>
Ich hätte nun gerne alle Links (Menü und Untermenü) rot dargestellt. Bei "Hover" sollen der Hintergrund rot und die Links weiß dargestellt werden. Leider verstehe ich nicht wie das funktioniert
Wenn ich die Links auf rot stelle, habe ich im Menü eine rote Schrift vor rotem Hintergrund sobald der Mauszeiger über dem Untermenü ist. Weiß u.U. jemand weiter?Vielen Dank!
