Warum wird mein HTML Code anders auf der Website angezeigt, obwohl ich ihn kopiert habe?
Ich habe mir ein Template aus dem Internet heruntergeladen und eine seite kopiert. Allerdings wenn ich Ihn dann anzeigen lasse wird er mir anders angezeigt.
Jemand ne Idee wo der Fehler liegt? Könnte mir vorstellen dass im stylesheet was falsch ist.
3 Antworten
Prüfe, ob alle verlinkten Stylesheets, Bilder, Fonts und Skripte verfügbar und richtig verlinkt sind.
Bei der Galerie wirken noch andere Selektoren, die bei Equipment fehlen.
#galerie .owl-nav .owl-next span, #galerie .owl-nav .owl-prev span {
outline: none;
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
line-height: 42px;
background-color: #eee;
color: #232323;
font-size: 42px;
transition: all 0.5s;
}
#galerie .owl-nav .owl-prev span {
margin-right: 10px;
}
Wie du siehst, weil da ein ID-Selektor (#galerie) mit drinhängt. Nimm den ID-Selektor raus, dann dürften die Pfeile bei allen Owl-Slidern gleich aussehen.
Bei der Dot-Navigation gibt es auch noch so einen Style:
#galerie .owl-dots button {
outline: none;
}
Schau am besten generell einmal in der http://tobiwldfoto.de/css/templatemo-style.css nach den Styles für #galerie. Möglicherweise fehlt da noch anderes.
Du könntest auch alle Vorkommen von #galerie in der CSS gegen .galerie austauschen und dann im HTML bei deinen Gallerien jeweils das class-Attribut setzen. Zumindest versuchsweise - ich weiß nicht, ob du zwischen beiden Gallerien große stilistische Differenzen definiert hast.
Ja. Weil du den Selektor so geändert hast, sodass er nicht mehr auf die erste Galerie zeigt. Mache es so, wie ich es geschrieben habe.
Das kannst du gern machen. Danach änderst du die Selektorenköpfe oben zu diesen:
- .owl-nav .owl-next span, .owl-nav .owl-prev span {
- .owl-nav .owl-prev span {
- .owl-dots button {
also ich hab es jetzt geschafft. jetzt sind da nur noch die rahmen, die galerie hat keinen abstand zur sidebar und beim blog schaut das datum komisch aus
Wenn du meine obigen CSS-Snippets genau anschaust und mit meiner Aufzählung im vorletzten Kommentar vergleichst, sollte doch allzu deutlich sein, was ich meine?
Bei mir sehen die Buttons im Browser noch so aus wie zuvor.
Soll die Galerie oben genauso aussehen wie Equipment?
Den Selektor:
#equipment {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 50px;
}
kannst du erweitern:
#galerie,
#equipment {
padding-left: 60px;
padding-right: 60px;
padding-bottom: 50px;
}
Dann gilt er für beide.
Oder du legst einen neuen Selektor an und übernimmst nur die Innenabstände, die du für diese Galerie haben möchtest.
Beispiel:
#galerie {
padding-left: 60px;
}
Zum Datum:
Suche den Selektor:
#blog .item .text-content span
und ändere in ihm den Wert von display auf block.
Wenn dir das etwas kaputtmacht, dann schreibe stattdessen einen neuen Selektor:
#blog .item .text-content .blog-date {
display: block;
}
und ändere das HTML-Element, welches das Datum beinhaltet:
<span class="blog-date">25 July 2018</span>
Die Buttonränder:
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
border: 0;
}
Den Selektor findest du an sich schon, du kannst den bestehenden (Zeile 67) also auch nur um das border-Property erweitern. Dies entfernt den Rahmen für die Prev/Next-Buttons und die Dot-Buttons.
okay, das hat nicht geklappt. aber ist es normal das das doppelt drin ist?
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
border: 0;
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
border: 0;
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
Doppelt brauchst du es nicht. Entferne mal den zweiten (doppelten) Selektor und lade den Stand auf deinen Webspace.
Kann es sein, dass wir ein unterschiedliches Verständnis von Rahmen haben? Ich meine damit die schwarzen 1px-breiten Ränder, die um den Buttons zu sehen sind.
Meinst du vielleicht die blauen Flächen beim Mouseover? Sollen die Buttons beim Mouseover komplett blau werden?
Ergänze unter dem border-Property noch eine Angabe für die Hintergrundfarbe:
background: transparent;
und dann entfernst du noch
background-color: #eee;
aus Zeile 510 (Selektorkopf: .owl-nav .owl-next span, .owl-nav .owl-prev span).
Diese Änderung (Kommentar von 00:20:55 Uhr) ist herausgeflogen. Du bist wohl mit deinen Dateien durcheinandergekommen.
Du hast das id-Attribut von dem HTML-Element entfernt. Das solltest du aber grundsätzlich drin lassen, andernfalls machst du dir deine Navigation kaputt.
Ersteres solltest du auf jeden Fall wieder einfügen. Es muss kein anstatt sein. Ein Element darf sowohl id, als auch class-Attribut besitzen. Beide kommen sich nicht in die Quere. Letzteres brauchst du, falls du irgendwo Klassenselektoren definiert hast (die müsstest du dann ja innerhalb der letzten halben Stunde neu definiert haben).
Nochmals: Das id-Attribut muss auf jeden Fall wieder rein.
So wie es aussieht, benutzt du beide Attribute (class und id).
Ergänze text-align für diesen Selektor (Zeile 467):
.owl-dots {
margin-top: 40px;
text-align: center; /* <<< hinzufügen */
}
Mehr kann ich erst einmal nicht schreiben. Scheinbar hast du dir gerade die Seite putt gehauen.
Zeile 126 (HTML) muss so aussehen:
<section id="galerie" class="galerie content-section">
Klassennamen werden via Leerzeichen getrennt in einem class-Attribut aufgeführt.
Das JavaScript wird momentan dein section-Element deswegen nicht finden.
Vielleicht fehlt CSS?
Alles richtig kopiert?
Was hasst du kopiert? Wie sieht es gerade aus?
Und zwar sind Unterpunkt Galerie und Equipment exakt der selbe Code, nur halt der Inhalt angepasst. allerdings sind bei Equipment die Pfeile darunter und ganz klein. Nicht so wie bei "Galerie"
Das liegt daran, dass für #gallery extra CSS drin ist.
#galerie .owl-nav {
position: absolute;
display: inline-block;
top: -110px;
right: 0;
}
Das fehlt für Equipment.
Einfach dieses Snippet mit #equipment einfügen oder #gallery entfernen, wo du es verwendet hast.
Ja, in deiner CSS Datei.
Einfach #gallery entfernen bei den owl-Sachen, wie es regex9 schon geschrieben hat.
Einfach #gallery komplett entfernen, damit es für alle owl-Buttons/Pfeile zählt
ja irgendwie hab ich jetzt alles durcheinandergebracht. ich probiers aber mal
Eventuell eine Datei nicht richtig kopiert oder so, keine Ahnung, hier fehlen die Anhaltspunkte
warte, ich könnte den link schnell reinschicken:
Und zwar sind Unterpunkt Galerie und Equipment exakt der selbe Code, nur halt der Inhalt angepasst. allerdings sind bei Equipment die Pfeile darunter und ganz klein. Nicht so wie bei "Galerie"
Nein, das oben (Gallerie) sind OWL dots, heißt nur die Punkte. Die sind auch gesetzt, aber das unten, also Equipment sind Pfeile und Punkte. Die punkte sind nicht da, deshalb mini buttons und Pfeile sehen da anders aus, weil die nun mal nicht oben existieren. Lade dir das OWL Theme herunter, dann sollte es besser aussehen
Such mal nach <link ... das ist weiter oben und da sind alle CSS Dateien mit verlinkt, tu die einfach dazu
Das Problem ist nicht der inhalt sondern die pfeile
http://tobiwldfoto.de/
Und zwar sind Unterpunkt Galerie und Equipment exakt der selbe Code, nur halt der Inhalt angepasst. allerdings sind bei Equipment die Pfeile darunter und ganz klein. Nicht so wie bei "Galerie"