HTML-Link verlinkt falsch und das nur manchmal

  • Autor
  • Nachricht

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
1  So Apr 29, 2012 14:02
Ich habe mir diese Musterseite als Vorlage genommen:
http://tympanus.net/codrops/2012/01/17/ ... with-css3/

Um bei diesem Menü auf die entsprechende Unterseite weiterzuleiten habe ich den Code dann wiefolgt verändert:

Code: Alles auswählen
            <div class="cr-titles">
               <h3><span><a href="photographie/index.html"><font color="#FFFFFF">Photographie</font></a></span><span>Selbstfotografiertes</span></h3>
               <h3><span><a href="rezepte/index.html"><font color="#FFFFFF">Kochen Backen</font></a></span><span>Selbstgekochtes</span></h3>
               <h3><span><a href="musik/html/index.html"><font color="#FFFFFF">Musik</font></a></span><span>Selbstkomponiertes</span></h3>
               <h3><span><a href="coding/index.html"><font color="#FFFFFF">Coding</font></a></span><span>Selbstkompiliertes</span></h3>
            </div>


Meist klappt das auch. Das blöde ist jetzt nur, der Text ist nur an manchen Stellen klickbar. Und klickt man den falschen Buchstaben, dann wird nicht an die richtige Seite geleitet, sondern man landet immer bei coding/index.html.
Wie mache ich das denn besser? :?
Zuletzt geändert von polysom am Do Mai 03, 2012 20:45, insgesamt 1-mal geändert.
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

Lichtl



2  So Apr 29, 2012 17:49
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:26, insgesamt 1-mal geändert.

affenschwanz

Offline

Benutzeravatar



  • Wohnort: SoCal
3  So Apr 29, 2012 18:27
Mach das doch so:

Code: Alles auswählen
<div class="cr-titles">
<h3><a href="photographie/index.html" style="color:#FFFFFF">Photographie</a> Selbstfotografiertes</h3>
 <h3><a href="rezepte/index.html" style="color:#FFFFFF">Kochen Backen</a> Selbstgekochtes</h3>
 <h3><a href="musik/html/index.html" style="color:#FFFFFF">Musik</a> Selbstkomponiertes</h3>
 <h3><a href="coding/index.html" style="color:#FFFFFF">Coding</a> Selbstkompiliertes</h3>
</div>


Wofür brauchst du die span-tags?

Gruss

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
4  So Apr 29, 2012 19:30
Lichtl hat geschrieben:„font color“ ist schon lange „deprecated“; im Kontext mit CSS3 – ts ts … :frown:

OK, wusste ich nicht, werd ich in Zukunft lassen. :oops:


affenschwanz hat geschrieben:Mach das doch so:

Code: Alles auswählen
<div class="cr-titles">
<h3><a href="photographie/index.html" style="color:#FFFFFF">Photographie</a> Selbstfotografiertes</h3>
 <h3><a href="rezepte/index.html" style="color:#FFFFFF">Kochen Backen</a> Selbstgekochtes</h3>
 <h3><a href="musik/html/index.html" style="color:#FFFFFF">Musik</a> Selbstkomponiertes</h3>
 <h3><a href="coding/index.html" style="color:#FFFFFF">Coding</a> Selbstkompiliertes</h3>
</div>


Wofür brauchst du die span-tags?

Gruss


Die span-Tags sind wichtig damit die Textelemente da hinkommen wo sie hinsollen. Die sind schon so in der Vorlage drin.

Ich hab das jetzt so geändert:

Code: Alles auswählen
            <div class="cr-titles">
               <h3><a href="photographie/index.html" style="color:#FFFFFF"><span>Photographie</span></a><span>Selbstfotografiertes</span></h3>
               <h3><a href="rezepte/index.html" style="color:#FFFFFF"><span>Kochen Backen</span></a><span>Selbstgekochtes</span></h3>
               <h3><a href="musik/html/index.html" style="color:#FFFFFF"><span>Musik</span></a><span>Selbstkomponiertes</span></h3>
               <h3><a href="coding/index.html" style="color:#FFFFFF"><span>Coding</span></a><span>Selbstkompiliertes</span></h3>
            </div>


Jetzt ist der Text zumindest schonmal überall klickbar. Aber der Klick leitet, egel auf welchen Link man klickt immer auf coding/index.html weiter. Das kann doch nicht sein! Warum??
Was auch komisch ist, in der Vorlage ist der Text weiß. Doch sobald ich den href-Linkcode einfüge wird der Text grau, weswegen ich in dem Link die Farbe nochmal extra festgelegt hatte.
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

alf

Offline

Benutzeravatar


  • Wohnort: Here, there and everywhere…
5  So Apr 29, 2012 20:16
polysom hat geschrieben:… weswegen ich in dem Link die Farbe nochmal extra festgelegt hatte.

Mit solchen Basteleien verschlimmert man nur. Wenn Du die Formatierung nicht durchschaust, dann hilft es nicht, manuell nachzubessern, äh zu verschlimmbessern.
Was steht denn in der Klasse "cr-titles" drin?
Wir werden Euch noch alle totlachen.

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
6  So Apr 29, 2012 20:24
alf hat geschrieben:Was steht denn in der Klasse "cr-titles" drin?

Wie bei meinem Link oben steht da drin:



Code: Alles auswählen
.cr-titles h3{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 10000;
    opacity: 0;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 70px;
    display: block;
    letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
    letter-spacing: 0px;
    display: block;
    background: rgba(104,171,194,0.9);
    font-size: 14px;
    padding: 10px;
    font-style: italic;
    font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
    opacity: 1;
}
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud
7  So Apr 29, 2012 20:35
Die <span> solltest du tunlichst hier nicht setzen. Der ganze Aufbau der Links ist schon grenzwertig an Spaghetti-Code.

Probier eher folgendes:
Code: Alles auswählen
<div class="cr-titles">
<a href="photographie/index.html" id="c1" alt="Photographie">Selbstfotografiertes</a>
<a href="rezepte/index.html" id="c2" alt="Kochen Backen">Selbstgekochtes</a>
<a href="musik/html/index.html" id="c3" alt="Musik">Selbstkomponiertes</a>
<a href="coding/index.html" id="c4" alt="Coding">Selbstkompiliertes</a>
</div>

Bin mir nicht im klaren ob ich das mit den zwei Begriffen da nun richtig interpretiert habe. Ich nehme aber an das eines davon immer nur erscheinen soll, wenn man mit der Maus darüber hält?

Alles andere wie font-color, span Abstände, etc. wird in der CSS definiert.
mit .cr-titles .c1 kannste aber darüber auch die Positionierungen der einzelnen Id Elemente bestimmen.

Lichtl



8  So Apr 29, 2012 21:40
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:26, insgesamt 1-mal geändert.
9  So Apr 29, 2012 21:54
Aber das CSS Beispiel sieht mir doch jetzt eher nach nach CSS3 Sliding Image Panel aus, oder?

Polysom,
lass uns nicht nicht die Glaskugel suchen lassen... gibt es eine Beispielseite dazu?
Etwas wo man mal sehen kann was da nicht funktioniert?

Mir wirkt es im Moment eher, als hättest du Code und CSS irgendwo her kopiert und das nun einfach mal so hingefummelt wie du es bräuchtest. Da ist evtl. der Ansatz etwas falsch.

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
10  So Apr 29, 2012 22:10
Toasti hat geschrieben:Die <span> solltest du tunlichst hier nicht setzen.

Das muss ich hier aber setzen, sonst habe ich nämlich erst gar keinen Text mehr. Wenn ich das so wie von dir vorgeschlagen mache ist der ganze Text weg.

Lichtl hat geschrieben:polysom, auch wenn ich den Sinn der Verlinkung nicht verstehe – so sollte der Link weiß werden. Ohne Extra-Regel übernimmt der Link die Farbe, die zuvor für Links definiert wurde.

Code: Alles auswählen
.cr-titles h3 a {
   background-color: #fff;
}

Leider wird mit deiner Extraregel der Text trotzdem nicht weiß.
Edit: OK, klappts mit dem weiß doch plötzlich. :)


Toasti hat geschrieben:lass uns nicht nicht die Glaskugel suchen lassen... gibt es eine Beispielseite dazu?

Oben bei dem Link auf Demo gehn. Da kommt dann sowas. Und den weißen dicken Text will ich dann klickbar, dass er mich weiterleitet.
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
11  Mo Apr 30, 2012 17:45
Also an Safari liegts schonmal nicht, mit Firefox das gleiche.
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

Lichtl



12  Mo Apr 30, 2012 18:53
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:37, insgesamt 1-mal geändert.

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
13  Mo Apr 30, 2012 20:37
Bisher nur das wie oben. Meinst du mit kompletter Pfad, das mit http://...?
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

Lichtl



14  Mo Apr 30, 2012 21:44
...
Zuletzt geändert von Lichtl am So Sep 22, 2013 14:37, insgesamt 1-mal geändert.

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
15  Mo Apr 30, 2012 22:53
Bis jetzt noch nicht nein, ist ja momentan noch auf keinem Server sondern nur auf meiner Platte. Aber ich kanns ja mal mit dem kompletten Pfad auf der Platte versuchen. Ich hab eben nur festgestellt, wenn ich in Safari den Inspektor aktiviert habe, dann klappen die Links wie gewünscht. :rolleyes:
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

alf

Offline

Benutzeravatar


  • Wohnort: Here, there and everywhere…
16  Di Mai 01, 2012 7:14
Installier Dir doch MAMP, dann hast Du Deinen 'internen' Server und kannst auch gleich noch mit php herumspielen.
Wir werden Euch noch alle totlachen.

Atarimaster

Offline

Benutzeravatar


  • Wohnort: Ruhrgebiet
17  Di Mai 01, 2012 10:42
Aktiviere doch den Apache und PHP, dann hast Du Deinen 'internen' Server und kannst auch gleich noch mit php herumspielen.
The truth is always either terrible or boring. (Sansa Stark)

alf

Offline

Benutzeravatar


  • Wohnort: Here, there and everywhere…
18  Di Mai 01, 2012 11:03
Oder so. ;-) Das hatte ich noch nie probiert und sieht ja noch einfacher aus.
Wir werden Euch noch alle totlachen.

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
19  Di Mai 01, 2012 18:21
Atarimaster hat geschrieben:Aktiviere doch den Apache und PHP, dann hast Du Deinen 'internen' Server und kannst auch gleich noch mit php herumspielen.

Hab ich gemacht, und das klappt.

Ich habs dann mit dem vollen Pfad probiert, aber auch da springts immer zum Letzten in der Liste. Wenn ich die Reihenfolge vertausche wird auch immer das Letzte in der Reihenfolge angewählt. Ich versteh das nicht.

Kann ich anstatt dem Text irgendwie das jeweilige Hintergrundbild klickbar machen? Vielleicht klappt das ja besser. :(
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

alf

Offline

Benutzeravatar


  • Wohnort: Here, there and everywhere…
20  Di Mai 01, 2012 19:03
Ich vermute mal, Du hast Dich noch nicht viel mit dem Aufbau und den Verlinkungen einer Internetseite befasst – also ganz von unten. Deshalb stocherst Du jetzt etwas im Nebel, und es wird auch nicht besser, wenn Du jetzt plötzlich Hintergrundbilder verlinken (?) willst.
Deshalb glaube ich auch, dass es Dir wenig bringt, wenn Du Dir eine doch recht komplexe Seite als Vorbild nimmst, um daraus dann einzelne Elemente abzuändern.
Wir werden Euch noch alle totlachen.

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
21  Di Mai 01, 2012 19:42
Na so leicht werf ich die Flinte jetzt nicht ins Korn, das wird schon noch klappen. :)
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

alf

Offline

Benutzeravatar


  • Wohnort: Here, there and everywhere…
22  Di Mai 01, 2012 20:00
Oh je, ich wollte Dich keinesfalls entmutigen. Vielleicht würde es aber auch einfach helfen, wenn Du Dich nach einem schönen WordPress-Theme umschaust und das an Deine Bedürfnisse anpasst.
Wir werden Euch noch alle totlachen.

polysom

Offline

Benutzeravatar


  • Wohnort: Dresden
23  Do Mai 03, 2012 20:48
Hah, es klaaaappt! :banana:

Mir wurde auf die Sprünge geholfen, dass es mit der opacity von h3 zu tun hatte und ein simples z-index in der CSS-Datei mein Problem behebt. :)
Bild
Solange Kakaobohnen an Bäumen wachsen, ist Schokolade für mich Obst.
Homepage - Securebird - Soundcloud - Mixcloud

Zurück zu Programmierecke

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder