CSS li als Link ohne "style"

DukesGG · 19. März 2016

Hallo

Ich habe eine ul mit Bilder als li. Nun habe ich noch ein a tag hinzugefügt und der Schatten von den li färbt sich Lila. Im Moment habe ich den a Tag um das Bild gesetzt aber ich möchte es um das li setzen aber dann färbt sich der Schatten. Wie kriege ich das weg?

So funktionierts aber möchte komplette li als Link und nicht nur das Bild

Code:

<li><a href="#.html"><img src="#"></a></li>

so nicht färbt sich der Schatten vom li

Code:

<a href="#.html"><li><img src="#"></li></a>

FranzvonAssisi · 19. März 2016

Musst du mit style/CSS arbeiten. Alles andere ist unsauber und veraltet

Da musst du einfach mal nachschauen, was für den Rand sorgt. Evtl. ist es ein normaler shadow, evtl. aber auch noch was anderes...

Lg, Franz

DukesGG · 20. März 2016

Ja klar in CSS. Das ist halt der Schatten vom li der sich färbt müsste ich mit list-style-type: none oder sowas wegbekommen aber genauen Code kenne ich nicht

funkmasterflow · 20. März 2016

Hi,
wenn Du validen HTML-Code schreiben willst, dann müssen die Kind-Elemente einer ul eben li tags sein und nicht ein Link, der ein li enthält.
Poste doch mal bitte Screenshots (Status quo vs. gewolltes Layout) und den entsprechenden Auszug aus deinem CSS.
Dann kann man dir bestimmt besser weiter helfen.

FranzvonAssisi · 20. März 2016

öffne halt den Browser, F12 drücken -> Entwicklerkonsole. Dann suchst du dir das Objekt raus (das <a>) und probierst aus: shadow: None, ... oder suchst rechts bei den CSS-Eigenschaften danach.

Das hilft übrigens nicht nur hier, sondern bei total vielen Problemen

Hier kannst du auch weiter ausprobieren https://jsfiddle.net/6cyot1t6/

Lg, Franz

DukesGG · 20. März 2016

In der css habe ich nur padding für die li

Jesterfox · 20. März 2016

Das padding vom li dürfte schuld dran sein das nur der innere Bereich als Link klickbar ist. Versuch mal den Abstand über ein Margin oder Padding vom Link oder Bild im li zu erreichen.

Für valides HTML muss wie schon erwähnt das li direkt im ul sein. Ein a um das li herum ist nicht erlaubt.

DukesGG · 20. März 2016

Jesterfox schrieb:
Das padding vom li dürfte schuld dran sein das nur der innere Bereich als Link klickbar ist. Versuch mal den Abstand über ein Margin oder Padding vom Link oder Bild im li zu erreichen.

Für valides HTML muss wie schon erwähnt das li direkt im ul sein. Ein a um das li herum ist nicht erlaubt.

Wenn ich es so: <li><a href="#.html"><img src="#"></a></li> habe dann ist ja nur das Bild der Link aber ich möchte, dass das li (mit padding ) der link ist ohne, dass sich der Schatten vom li färbt. Also auch der Bereich um dem Bild herum und nicht NUR das Bild

Jesterfox · 20. März 2016

Wie gesagt: nimm das Padding vom li weg und gib es dem Inhalt des Links. Dann ist auch der Abstand anklickbar. Über die CSS Selektoren ist das ja Problemlos nur für die Elemente im li machbar.

redeye86 · 20. März 2016

Hallo,

wichtig ist vor allem, dass du das a-Tag auf display:block; setzt. Sonst ist es ein Inline-Element und das a(nchor)-Element ist nur so groß wie sein Inhalt. Es füllt in dem Fall also das li-Element nicht vollständig aus.

Von der Struktur her muss du bei der Struktur bleiben:

Code:

<ul>
<li>
<a><img....></a>
</li>
</ul>

Was das Padding angeht: Normalerweise sollte auf dem li kein Padding sein, aber beim <ul> müsste ein padding-left von 40px gesetzt sein, dass du unter Umständen mit 0 überschreiben musst. Das hat aber nur damit zu tun, dass Listen standardmäßig eingerückt werden sollen.

Siehe zu der ganzen Problematik:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display#inline:_Inline-Box.28en.29

ignator · 20. März 2016

Code:

li a {text-decoration: none; }

geht das nicht?

DukesGG · 20. März 2016

ignator schrieb:
Code:

li a {text-decoration: none; }

geht das nicht?

ich habe ja keinen Text als Link

Jesterfox · 20. März 2016

mach doch einfach mal statt

li {padding}

ein

li img {padding}

funkmasterflow · 20. März 2016

Hi,
letzter Versuch.
Poste doch bitte mal Screenshots von den Zuständen, wie es jetzt ist und wo du hin willst.
Poste dazu noch das CSS, was Du bis jetzt hast.
Dann kann man Dir mMn viel besser weiterhelfen und Du kommst schneller ans Ziel.
In meinen Augen verschenkst Du durch das Weglassen von Informationen hier Zeit, die Du in (wichtigere) Features für Deine Website stecken könntest.
Wenn Du uns mehr Infos gibst, könnte man das viel effektiver lösen.
Überleg mal: Du bastelst über 2,5h an einem Link/Padding-Problem herum.

DukesGG · 20. März 2016

Code:

HTML

<ul class="class">
    
                    <li><img src="#"></li>
                    <li><img src="#"></li>
                    <li><img src="#"></li>
                    <li><img src="#"></li>
                    <li><img src="#"></li>
    
                        </ul>

Code:

CSS

ul.class li{
    padding-top: 90px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    border-radius: 8px;

Und davon ganz viele. Manche Bilder habe ich mit einer class einzelnd bearbeitet. (padding left und padding right)
Ist das denn schlecht wenn man bei li mit padding arbeitet? Ich wollte dem Bild einen Hintergrund geben damit das nicht so leer aussieht, was ich auch gemacht habe. Die li haben alle eine Backgroundcolor und padding wie es hier im Code steht.
Und nun wollte ich noch einen Link hinzufügen, am besten so das nicht nur das kleine Bild der Link ist sondern das ganze li.

Der kleine Rahmen ist das Bild und der große das li. wenn ich <a> vor <li> setze funktionierts aber der Schatten färbt sich Lila. Und das habe ich nicht weg bekommen.

chris2603 · 20. März 2016

Alternativ könnte man auch ein onclick event auf das li legen und per css den Cursor auf pointer stellen, ist dann aber nicht wirklich sauber.

blablub1212 · 20. März 2016

Ich hab dir mal alles was genannt wurde zusammengefasst:

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Image List Item</title>
    <style media="screen">
      ul {
        list-style-type: none;
      }

      li img {
        height: 100px;
        width: 100px;
        padding: 10px;
        border: 1px solid black;
      }

      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#"><img src="http://cdn.grumpycats.com/wp-content/uploads/2016/01/10426136_963527260349678_715068149440486950_n-758x758.jpg" alt="" /></a></li>
      <li><a href="#"><img src="http://cdn.grumpycats.com/wp-content/uploads/2016/01/10426136_963527260349678_715068149440486950_n-758x758.jpg" alt="" /></a></li>
      <li><a href="#"><img src="http://cdn.grumpycats.com/wp-content/uploads/2016/01/10426136_963527260349678_715068149440486950_n-758x758.jpg" alt="" /></a></li>
    </ul>

  </body>
</html>

- Deine Bilder bekommen durch das Padding einen 10px breiten Abstand zum äußeren Rahmen
- Der ganze Bereich ist klickbar
- Durch Text-Decoration: None; verändert sich das aussehen je nach State (active; focus; hover, visited) nicht mehr

Ich denke das sollte alle deine Anforderungen abdecken.

DukesGG · 20. März 2016

blablub1212 schrieb:
Ich hab dir mal alles was genannt wurde zusammengefasst:

Code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Image List Item</title> <style media="screen"> ul { list-style-type: none; } li img { height: 100px; width: 100px; padding: 10px; border: 1px solid black; } a { text-decoration: none; } </style> </head> <body> <ul> <li><a href="#"><img src="http://cdn.grumpycats.com/wp-content/uploads/2016/01/10426136_963527260349678_715068149440486950_n-758x758.jpg" alt="" /></a></li> <li><a href="#"><img src="http://cdn.grumpycats.com/wp-content/uploads/2016/01/10426136_963527260349678_715068149440486950_n-758x758.jpg" alt="" /></a></li> <li><a href="#"><img src="http://cdn.grumpycats.com/wp-content/uploads/2016/01/10426136_963527260349678_715068149440486950_n-758x758.jpg" alt="" /></a></li> </ul> </body> </html>

- Deine Bilder bekommen durch das Padding einen 10px breiten Abstand zum äußeren Rahmen
- Der ganze Bereich ist klickbar
- Durch Text-Decoration: None; verändert sich das aussehen je nach State (active; focus; hover, visited) nicht mehr

Ich denke das sollte alle deine Anforderungen abdecken.

Danke ich werde das nachher mal einbauen

Jesterfox · 20. März 2016

Solutionx schrieb:
Ist das denn schlecht wenn man bei li mit padding arbeitet?

Kommt immer drauf an was man erreichen will. Wenn der Abstand im <li> als Link mit anklickbar sein soll ist Padding am <li> halt der falsche Weg. Dann muss der Abstand an das innere Element mit dran damit er Teil des Links ist.

Mach aus dem ul.class li{ doch mal ein ul.class li img{ (zumindest fürs Padding)

DukesGG · 20. März 2016

Jesterfox schrieb:
Kommt immer drauf an was man erreichen will. Wenn der Abstand im <li> als Link mit anklickbar sein soll ist Padding am <li> halt der falsche Weg. Dann muss der Abstand an das innere Element mit dran damit er Teil des Links ist.

Mach aus dem ul.class li{ doch mal ein ul.class li img{ (zumindest fürs Padding)

Das würde funktionieren aber dann habe ich wieder das problem wie am anfang. Der Schatten färbt sich wieder Lila. Sobald der Link (Bild oder li) einen Schatten hat Färbt er sich. Das ist beim Text doch geauso aber da kriegt man das einfach wieder weg.

Ergänzung (20. März 2016)

Ok das Problem mit der Farbe hätte ich gelöst. Ich hatte box-shadow: 0px 0px 25px 0px; für die <li>, nun habe ich einfach noch die Farbe schwarz hinzugefügt und jetzt bleibt das auch so.
Aber weiter oben wurde gesagt das ist nicht so gut wenn ich ein Link habe der ein <li> beinhaltet. Warum denn nicht? Funktioniert doch alles. Mit <li onclick...> das gleiche Ergebnis.

Das wollte ich jetzt mit den restlichen <li> auch machen, weil so funktionierts.

Code:

                <ul class="klasse">
                    
                    <a href="seite.html"><li><img src="Bild.png"></li></a>
                    <li><img src="Bild.png"></li>
                    <li><img src="Bild.png"></li>
                    <li><img src="Bild.png"></li>
                    <li><img src="Bild.png"></li>
                    <li class="klasse"><img src="Bild.png"></li>
                    <li><img src="Bild.png"></li>
                    
                  </ul>

CSS li als Link ohne "style"

Lieutenant

Admiral

Lieutenant

Ensign

Admiral

Lieutenant

Legende

Lieutenant

Legende

Lt. Junior Grade

Ensign

Lieutenant

Legende

Ensign

Lieutenant

Lieutenant

Rear Admiral

Lieutenant

Legende

Lieutenant

Ähnliche Themen