Oft ist es auch entscheidend in welcher Reihenfolge die CSS-Dateien geladen werden.
Beiträge von Lupus_III
-
-
Ich habe früher auch den Editor Scriptly verwendet und bin nun auf VS Code - https://code.visualstudio.com/ -, wegen der besseren Unterstützung, umgestiegen. Schau dir mal das youtube Video an. Vielleicht regt es dich auch zum Umstieg an.
Externer Inhalt youtu.beInhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt. -
Kann man statt einer ID auch eine Klasse benutzen, oder muss es hier zwingend eine ID sein?
-
Wildecker Herzbuben!
-
Ich stelle Dir mal ein Muster zur Verfügung!
HTML
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Drop down Menu responsive</title> <link rel="stylesheet" href="style.css"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <body> <header> <nav id="normal"> <ul> <li><a href="">Startseite</a></li> <li><a href="">Lifestyle</a></li> <li><a href="">Youtube <i class="fas fa-sort-down"></i></a> <ul> <li><a href="">Java</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">Web</a></li> <li><a href="">Kontakt</a></li> <li><a href="">Doku</a></li> </ul> </nav> <nav id="mobile"> <div id=menu>Menü</div> <ul> <li><a href="">Startseite</a></li> <li><a href="">Lifestyle</a></li> <li><a href="">Youtube <i class="fas fa-sort-down"></i></a> <ul> <li><a href="">Java</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">Web</a></li> <li><a href="">Kontakt</a></li> <li><a href="">Doku</a></li> </ul> </nav> </header> </body> </html>
CSS
body, html { background: #1c1c22; margin: 0; padding: 0; font-size: 62.5%; } @media screen and (max-width: 600px) { html { font-size: 48%; } } @media screen and (min-width: 600px) { html { font-size: 53%; } } @media screen and (min-width: 800px) { html { font-size: 57%; } } @media screen and (min-width: 1200px) { html { font-size: 70%; } } header { background: #2a2a35; width: 100%; height: 70px; height: 7rem; top: 0; text-align: left; transition: all 200ms; } header nav#normal { color: red; display: inline-block; } @media screen and (max-width: 950px){ header nav#normal{ display: none; } } header nav#normal ul{ margin: 0; padding: 0; transition: all 300ms; display: inline-block; } header nav#normal ul li{ margin: 0; padding: 0; float: left; list-style: none; position: relative; transition: all 300ms; } header nav#normal ul li a { display: inline-block; padding: 2.17rem; float: left; min-width: 12rem; text-align: center; font-size: 2rem; color: #fff; margin: 0 3px 0 0; text-decoration: none; background: #c8354e; font-weight: 300; transition: all 300ms; font-family: 'Roboto', sans-serif; } header nav#normal ul li:hover > a { background: #8c1e31; } header nav#normal ul li ul { overflow: hidden; position: absolute; top: 100%; left: 0; width: 100%; transition: all 300ms; max-height: 0; } header nav#normal ul li:hover > ul { max-height: 700px; } header nav#normal ul li ul li { border-bottom: 1px solid #8c1e31; } header nav#mobile { color: #c8345e; display: none; } @media screen and (max-width: 950px){ header nav#mobile { display: block; } } header nav #menu { padding: 2.17rem 5% 2.17rem 5%; float: left; width: 90%; text-align: center; font-size: 2rem; color: #fff; cursor: pointer; font-weight: 300; transition: 500ms all; font-family: 'Roboto', sans-serif; } header nav#mobile ul { width: 100%; margin: 0; padding: 0; max-height: 0; transition: all 500ms; overflow: hidden; float: left; } header nav#mobile:hover > ul { max-height: 800px; } header nav#mobile ul li { margin: 0; padding: 0; float: left; width: 100%; list-style: none; position: relative; transition: all 500ms; } header nav#mobile ul li a { display: inline-block; padding: 2.17rem 5% 2.17rem 5%; float: left; min-width: 12rem; width: 90%; text-align: center; font-size: 2rem; color: #fff; text-decoration: none; background: #c8354e; font-weight: 300; transition: all 500ms; font-family: 'Roboto', sans-serif; } header nav#mobile ul li:hover > a { background: #8c1e31; } header nav#mobile ul li ul { width: 100%; transition: all 500ms; max-height: 0; overflow: hidden; float: left; } header nav#mobile ul li ul li { display: block; float: left; background: #8c1e31; transition: all 500ms; } header nav#mobile ul li ul li a { background: #8c1e31; } header nav#mobile ul li:hover ul { max-height: 500px; }
-
Ich habe die Einstellung "auf ursprüngliche Standardwerte zurücksetzen" benutzt.
-
Danke basti1012, das war es!
-
In der appContent.js, Zeile 54 wird versucht, auf eine Eigenschaft eines Objektes zuzugreifen, das nicht existiert.
Vermutlich ist das Objekt fehlerhaft oder nicht instantiiert.
Beispiel:
JavaScriptvar _oObject; // _oObject is undefined console.log(_oObject.query ); // cannot read property 'query' of undefined var _oObject = { query : 'i am the query property value' } console.log(_oObject.query ); // i am the query property valueEs wird keine Datei appContent.js verwendet. Kann das an den Eigenschaften von VS Code liegen?
-
das sieht mir ehr so aus das es von einer Erweiterung kommt. Schalte mal alle erweiterungen aus und kucke mal ob es dann weg ist
Wie schalte ich die Erweiterungen aus?
-
Hallo zusammen,
kann mir jemand die Consolenhinweise erklären, die der folgende Code auslöst?
<!DOCTYPE html>
<html lang="de">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title>
</head>
<body> </body>
</html> -
Also ich habe das mal ausprobiert und bei mir funktioniert es mit folgendem Code (script ausgelagert in main.js).
HTML:
<!DOCTYPE html>
<html lang="de">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="einundausgabe.css" rel="stylesheet"> <title>Patricia's Umrechner</title>
</head> <body><h1> Rechne ganz easy Kilometer in Meilen um!</h1>
<input type="text" id="eingabe">
<button id="eingabebutton">klick!</button>
<div id="ausgabe"></div>
<footer> Viel Spass mit deinem Ergebnis!</footer>
<script src="main.js"></script>
</body>
</html>
Javascript-Datei (main.js):
window.onload = function(){
var button = document.getElementById("eingabebutton");
var ausg=document.getElementById("ausgabe");
button.addEventListener("click", function()
{ var betrag = document.getElementById("eingabe").value; if(isNaN(betrag))
{ ausg.innerHTML ="Bitte gebe eine Zahl ein"; return } var ergebnis = 0.621371*betrag; ausg.innerHTML = ergebnis.toFixed(2) + " miles"; })
} -
Auch wenn Lupus sie als "Cards" bezeichnet, werbe ich immer dafür, für diesen Zweck, ein Bild mit einer Beschreibung dazu, das figure-Tag zu verwenden.
Danke Sempervivum, das werde ich künftig tun. Ist bestimmt wegen der Semantik und Google?
-
ich glaube das liegt daran das er ein new projekt gemacht hat und kein pen.? Kann das sein ? Ist irgendwie ungewohnt ,
Aber Lupus_III meinst du das so ? https://codepen.io/basti1012/pen/NVgjrw?editors=1100
Weil ich schecke deine beschreibung gerade nicht so richtig
Hallo basti1012, ja so habe ich das gemeint. Danke! Es ist ja nur eine Arbeitsdatei, um Flex zu üben. Mit codepen muss ich mich noch ein Wenig auseinandersetzen, siehe #5. Hast du eine paar Tipps für mich?
-
Merkwürdig, da liegt so ein Popup über dem Codepen: "Email needs verification"?
Ich habe Codepen gestern eingerichtet und bin da noch ganz am Anfang. Anscheinend könnt ihr meinen Code nicht sehen. Was mache ich falsch? die Verification habe ich ausgeführt.
-
Hallo zusammen,
ich bräuchte mal ein Bisschen Hilfe. Ich habe eine Imagebox (imgBX) gebaut, in der nebeneinander 3 Karten (card) angeordnet sein sollen und dann ein Umbruch in die nächste Zeile erfolgen soll. Dort wieder 3 Karten usw. Bei voller Bildschirmbreite sollen box1 und details nebeneinander angeordnet sein.
Bei Bildschirmbreite 600px und kleiner sind die Karten vertikal angeordnet und die box1 steht über details.
Meinen bisheriger Versuch habe ich auf Codepen gestellt. Kann mir jemand weiter helfen? Danke!
-
Meine Frage #3 an m.scatello ist noch offen!
-
Hänge dein Handy in dein Homenetz und schon kannst du mit dem Handy auf deinen Rechner zugreifen, wenn der Port 80 ist geblockt ist.
Wie macht man das ?
-
Du solltes dich hier mal einlesen => https://wiki.selfhtml.org/wiki/CSS/Tutor…/Grid-Container
-
Keine Ahnung, aber vielleicht gibt es hier jemand, der weiß wie das geht. Ich frage mich allerdings wozu das gut sein soll.
-
Ja!
<a href="https://www.google.de">Link zu Google</a>
