Beiträge von stupsi01
-
-
Ich habe ein Skel Skript, über welches ich den Wrapperbereich festlegen muss, je nach Grösse:
<script>setTimeout(function ajust_size(){ $("#skel-layers-wrapper").height($(document).height()); }, 100);</script>
Wie baue ich das jetzt mit "onresize" ein? Wenn ich folgendes probiere ändert sich nichts:
-
Hallo zusammen
Gibt es eine Möglichkeit Javascript (im HTML eingebettet mit <script>Code</script>) erneut auszuführen, sobald sich die Seitengrösse ändert?
Ich habe ein Skript, welches den Footer korrekt platziert. Beim Ändern der Seitengrösse soll jetzt dieses Script automatisch erneut ausgeführt werden (ohne dass die Seite neugeladen werden muss).
Gibt es so eine Möglichkeit? Ich bin Anfänger und habe bei Google leider nichts hilfreiches gefunden...
Vielen Dank und Liebe Grüsse
stupsi01
-
Kenne mich mit js nicht aus, wie funktioniert das dort?
-
Okay. Vielen Dank für eure Antworten. Wäre es denn als Alternative möglich, den style im HTML fix zu vergeben, sodass kein CSS und Script nötig ist?
-
Wie kann ich die Klasse denn auch der mobilen Version zuweisen? Der Html-Code ist doch derselbe - egal welche Ansicht?
-
Das verstehe ich. Aber weshalb bleiben die Links denn nicht rot? Die Klasse wurde ihnen ja unabhängig vom CSS zugewiesen mit <li class="active" ..und sollten doch auch so bleiben?
Sorry, bin Anfänger
-
-
Leider verstehe ich auch nicht weshalb. Vielleicht verstehst es du, wenn du den Code ansiehst (ich verstehe es nicht )
-
Entschuldige, ich habe den Code jetzt nochmals angepasst: Link. Das Menü "Home" soll rot sein, wenn man auf der Seite "index.html" ist.
Das Menü "Untermenü" soll rot sein, wenn man auf der Seite "untermenü.html" ist.
Dies funktioniert im Desktoplayout (siehe Anhang).
Im Mobilelayout will ich jetzt das selbe erreichen.
Vielen Dank!
-
Das klappt schon, allerdings möchte ich die Menüpunkte mit der Klasse "active" rot haben, nicht der Erste.
Bin ich auf Home ist Home rot, bin ich auf dem ersten Untermenü ist dieses rot, usw.
-
Genau. Ich meine das Mobile-Menü (welches sich über Hamburgermenü öffnen lässt). Das Desktopmenü funktioniert ohne Probleme.
Die Seite ist jetzt auf meinem Server online geschalten: Link
Das meiste unnötige ist rausgelöscht, sodass nur noch das Menü übrig bleibt..
Vielen Dank
-
Achso, sorry^^
HTML:
HTML
Alles anzeigen<!DOCTYPE HTML> <html> <head> <title>Solarize by TEMPLATED</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]--> <script src="js/jquery.min.js"></script> <script src="js/jquery.dropotron.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel.css" /> <link rel="stylesheet" href="css/style.css" /> </noscript> <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--> </head> <body class="homepage"> <!-- Header Wrapper --> <div class="wrapper style1"> <!-- Header --> <div id="header"> <div class="container"> <!-- Logo --> <h1><a href="#" id="logo">Solarize</a></h1> <!-- Nav --> <nav id="nav"> <ul> <li class="active"><a href="index.html">Home</a></li> <li> <a href="">Dropdown</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Magna phasellus</a></li> <li><a href="#">Etiam dolore nisl</a></li> <li> <a href="">Phasellus consequat</a> <ul> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Phasellus consequat</a></li> <li><a href="#">Magna phasellus</a></li> <li><a href="#">Etiam dolore nisl</a></li> <li><a href="#">Veroeros feugiat</a></li> </ul> </li> <li><a href="#">Veroeros feugiat</a></li> </ul> </li> <li><a href="left-sidebar.html">Left Sidebar</a></li> <li><a href="right-sidebar.html">Right Sidebar</a></li> <li><a href="no-sidebar.html">No Sidebar</a></li> </ul> </nav> </div> </div> </body> </html>
style.css
CSS
Alles anzeigen@import url("font-awesome.min.css"); @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"); /* Basic */ body { background: #222222; } body.loading * { -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important; -moz-animation: none !important; -webkit-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } body, input, select, textarea { color: #555555; font-family: 'Open Sans', sans-serif; font-size: 12pt; font-weight: 300; line-height: 1.65em; } a { color: #82b440; text-decoration: underline; } strong, b { font-weight: 700; } em, i { font-style: italic; } p, ul, ol, dl, table, blockquote { margin: 0 0 2em 0; } p { line-height: 1.8em; } p.medium { font-size: 1.4em; } h1, h2, h3, h4, h5, h6 { color: inherit; font-weight: 700; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } sub { font-size: 0.8em; position: relative; top: 0.5em; } sup { font-size: 0.8em; position: relative; top: -0.5em; } hr { border-top: solid 1px #82b440; border: 0; margin-bottom: 1.5em; } blockquote { border-left: solid 0.5em #82b440; font-style: italic; padding: 1em 0 1em 2em; } section.special, article.special { text-align: center; } /* Header */ #header { color: white; height: 4em; background: rgba(0, 0, 0, 0.5); } #header .container { position: relative; } .homepage #logo { display: none; } .homepage #nav { position: static; right: none; text-align: center; } #logo { line-height: 2em; letter-spacing: 2px; text-transform: uppercase; font-size: 2em; font-weight: 400; } #logo h1 { display: inline-block; margin: 0; padding: 0; } #logo a { color: inherit; } #nav { position: absolute; top: 0; right: 0; } #nav > ul { margin: 0; } #nav > ul > li { border-radius: 4px; display: inline-block; margin-left: 0.5em; padding: 0 0.5em; } #nav > ul > li a { color: inherit; line-height: 4em; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; font-weight: 400; font-size: 1em; } #nav > ul > li:first-child { margin-left: 0; } #nav > ul > li.active a { color: white; } #nav > ul > li > ul { display: none; } /* Dropotron */ .dropotron { top: 2em; background: rgba(32, 32, 32, 0.75); border-radius: 4px; color: inherit; min-width: 12em; padding: 1em 0; color: white; } .dropotron > li { line-height: 2em; padding: 0 1em; } .dropotron > li > a { color: inherit; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; } .dropotron > li.active > a, .dropotron > li:hover > a { color: inherit; } .dropotron.level-0 { border-radius: 0 0 4px 4px; font-size: 1em; margin-left: -0.5em; }
style-narrower.css
CSS
Alles anzeigen/* Basic */ #skel-layers-wrapper { padding-top: 44px; } p { line-height: 1.8em; } header.major h2 { font-size: 1.8em; } header.major .byline { font-size: 1.1em; } /* Layers */ #navPanel { background: #000; } #navPanel .link { border-top: solid 1px rgba(0, 0, 0, 0.15); color: #888; display: block; height: 44px; line-height: 44px; padding: 0 1em 0 1em; text-decoration: none; } #navPanel .link:first-child { border-top: 0; } #navPanel .link.depth-0 { color: #fff; } #navPanel .link .indent-1 { display: inline-block; width: 1em; } /*Diese Zeile wurde von mir eingefügt!*/ /*Der Link bleibt aber nur während dem Klicken rot und bleibt leider nicht so..*/ #navPanel .link:active { color:red !important; }
Musste wegen Zeichenlimit unnötige Zeilen löschen. Mein Wunsch: Auf der Seite Home soll Home rot sein:
html-seminar.de/woltlab/attachment/1632/
Danke für die Hilfe - Falls irgendwer das schaffen sollte gibt's ne Belohnung von mir
-
Das problem ist das es sich keiner runterladen wird um dir zu helfen.
Du sagst das es in der Mobilen Ansicht ist. Kuck mal in der Css Datei nach ob da irgendwo was von @media queries steht. Da wirst du die Daten wahrscheinlich ändern müssen.
Kannst du dein Html und Css mal posten wenn es nicht zu groß ist ?
Klar. Ich habe mittlerweile etwas Fortschritt gemacht :). Wenn ich im "style-narrower.css" die Zeile "#navPanel .link:active { color: red; }" einfüge sind die Linke beim anklicken rot. Allerdings bleibt dies leider nicht so sondern das rot bleibt nur während dem Klick
Sorry, aber wie geht das mit den Anhängen? Bei mir erscheint immer ein "unbekannter Fehler".
Kannst die Files von meinem Server herunterladen: Download dann auf "Ordner herunterladen" (Einzige Änderung von mir ist Zeile 192-196 im style-narrower.css)
Vielen Dank für deine Hilfe. Ich glaube langsam aber sicher verzweifle ich