zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Link auf ein Bild bzw. auf ein gesamtes div setzen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.11.2017, 23:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2017
Beiträge: 3
Tryhard befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.11.2017, 09:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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>
Dem a-tag ist es egal was drinnen ist, du kannst jeden Inhalt hineingeben den du magst.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.11.2017, 22:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2017
Beiträge: 3
Tryhard befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 30.11.2017, 09:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 02.12.2017, 14:27
Neuer Benutzer
neuer user
 
Registriert seit: 10.12.2016
Beiträge: 4
BenjeminStar befindet sich auf einem aufstrebenden Ast
Lächeln

Wenn du noch immer die Links auf deinem Bild haben möchtest, versuche doch das hier https://jsfiddle.net/cfLtnr02/2/
BenjeminStar
Mit Zitat antworten
  #6 (permalink)  
Alt 04.12.2017, 09:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.700
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von BenjeminStar Beitrag anzeigen
Bessere Lösung wäre, wie schon von mir weiter oben angesprochen, die Links um den gesamten Content zu legen:
Code:
<a href="kategorie"> 
  <p>
    <img ...> 
    <span> Würfelspiele</span>
  </p>
</a>
Mit Zitat antworten
  #7 (permalink)  
Alt 04.12.2017, 20:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2017
Beiträge: 3
Tryhard befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt Heute, 09:56
Neuer Benutzer
neuer user
 
Registriert seit: 14.12.2017
Ort: Berlin
Beiträge: 3
djkahlid befindet sich auf einem aufstrebenden Ast
Standard

Und wie schauen die Fortschritte mittlerweile aus?
__________________
Man sagt ja jeder Tag ist ein Geschenk. Dann würde ich gerne wissen wo man den Montag umtauschen kann!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:59 Uhr.