|
|||
Link auf ein Bild bzw. auf ein gesamtes div setzen
Hallo,
seit ein paar Wochen taste ich mich nun immer weiter an HTML und CSS heran und bin dadurch auf dieses Forum gestoßen. Auf meiner Website Die besten Trinkspiele findest du bei uns - mehr-trinken.org (es geht um Trinkspiele, wobei der Content ja erstmal nebensächlich ist ) probiere ich daher in der Wordpress Umgebung Custom CSS und HTML aus. Nun zu meinem Problem: Für die verschiedenen Spiele möchte ich Kurzbeschreibungen, welche eingerahmt sind. Diese kann man weiter unten auf der Website bereits finden. Das Problem ist dabei jedoch im Moment, dass wenn ich einen Link auf das Bild setzte, es seine Größe stark verändert. Dieses Phänomen kann man unter "Kategorien - Film Trinkspiele" finden. Warum ändert das Bild dort seine Größe? Auch habe ich in diesem Forum von der Möglichkeit gelesen ein gesamtes div zu linken. Gibt es eine Möglichkeit dies ohne Javascript zu erreichen? Vielen Dank im Vorraus Lukas |
Sponsored Links |
|
|||
du hast mittels ".kat-site-container img" dem Bild eine Breite von 40% gegeben.
Was meinst du mit "gesamtes div linken"? Einen link auf einen Bereich? Code:
<a href="ziel"> <div> Da ist ein Inhalt </div> <p> Auch ein Absatz </p> </a> |
Sponsored Links |
|
|||
Das hatte ich völlig vergessen, danke. Der CSS Editor in Wordpress ist eben doch sehr unübersichtlich.
Beide Lösungen funktionieren natürlich, besten Dank für die Antwort Edit: Doch nicht. Nach dem Herausnehmen der "Width: 40%" wurden die Bilder stark nach rechts verzerrt. Dafür hatte ich wohl die Größe festgesetzt. Die Bilder werden außerdem nur kleiner, wenn ich den Link setze. Könnte das an einem vordefinierten CSS Style aus meinem WP Theme liegen? Ein weiteres Problem liegt darin, das ich gerne alle Bilder untereinander (wie auf der Startseite zu sehen) in der gleichen Breite und Höhe hätte. Bisher habe ich noch keinen anderen Weg gefunden als diesen hier: #img2 { background-image: url('http://mehr-trinken.org/wp-content/uploads/2017/10/not-ludo-1745964_1920-300x168.jpg'); height: 80%; width: 100%; background-size: cover; background-position: bottom center; } Wobei mir auch dieser Weg von einem Klassenkameraden auf die schnelle gezeigt wurde. Geändert von Tryhard (29.11.2017 um 22:57 Uhr) |
|
|||
Erstens: Freunde dich mit den Developer-Tools der Browser an (rechtsklick -> Element untersuchen) Dann siehst du alle Regeln, die auf ein Element wirken und kannst auch sofort änderungen machen. Damit kannst du dich selber an eine Lösung heranarbeiten.
Zu deinem CSS und den verzerrten Bildern: Bilder werden standardmäßig niemals verzerrt angezeigt, außer der Ersteller der Website wünscht das. Das wünscht er, indem er zB Höhe UND Breite angibt. Es reicht, nur einen Wert anzugeben, der andere Wert wird dann dementsprechend angepasst. Das ist auch bei deinem CSS zu sehen: height: 80%, width: 100%, wie soll das "korrekt" sein? Auch wird dein img1, img2, etc. nur im CSS verwendet, auf der Seite kommt dies nie vor. Beschäftige dich lieber mit den Grundlagen von CSS, hier verwendest du unnötige ID-Attributselektoren, woebi du dich hier oft wiederholst im CSS. Auch solltest du besser eine CSS Datei verwenden anstatt das CSS in den Wordpress-Editor zu schreiben, das wird dann nämlich auf jeder Seite ausgespielt und nicht gecached. Zusammengefasst: Grundlagen von CSS (+HTML) lernen und verstehen, bzw. wenn das nicht gewünscht ist und wirklich nur mit Wordpress gearbeitet werden soll, dann suche dir ein Theme welches deine Anforderungen an ein Layout unterstützt und verzichte auf eigenes CSS. Dafür ist Wordpress ja auch da |
|
|||
Wenn du noch immer die Links auf deinem Bild haben möchtest, versuche doch das hier https://jsfiddle.net/cfLtnr02/2/
BenjeminStar |
|
|||
Zitat:
Code:
<a href="kategorie"> <p> <img ...> <span> Würfelspiele</span> </p> </a> |
|
|||
Nochmals danke für eure Antworten.
CSS (und HTML) lernen ist definitv erwünscht. Ich mache schließlich seit 4 Monaten eine Ausbildung zum Fachinformatiker Anwendungsentwicklung Werde mich dann mal ransetzen |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 22:12 |
DIV Höhe 100% | Daniel86 | CSS | 12 | 29.07.2011 13:40 |
clearen im 21 Jhr. | Muamicus | CSS | 23 | 14.12.2010 20:50 |
Bild oder div nach oben vergrößern | IceReaper | CSS | 9 | 03.08.2007 14:18 |
CSS Navigationsproblem | thesecretboy | CSS | 0 | 12.04.2007 09:12 |