html με link

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

html με link

Δημοσίευση από Swan23 » 20 Αύγ 2015 23:18

Γεια σας

Θα ήθελα τη βοήθεια σας.

Έχω δημιουργήσει μία λίστα με links που οδηγούν σε μία σελίδα με περιγραφές για τα ίδια τα links.

Γίνετε να βάλω τις περιγραφές στην ίδια σελίδα, δηλαδή όταν πατάμε ένα link να ανοίγει ακριβώς από κάτω του η περιγραφή του;

Σας ευχαριστώ.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

html με link

Δημοσίευση από alou » 20 Αύγ 2015 23:38

Σχετικά εύκολα, χωρίς javascript κάπως έτσι

http://codepen.io/alou/pen/ZGdaeb

Κώδικας: Επιλογή όλων

<a href="#">Some link<span class="linkdesc">This is some link description</span></a>

Κώδικας: Επιλογή όλων

a .linkdesc &#123;opacity&#58;0;transition&#58;all 0.3s linear 0s;text-decoration&#58;none;padding&#58;0 10px;&#125;

a&#58;focus .linkdesc &#123;opacity&#58;1;&#125;
Ανάλογα και το browser support που θες ίσως χρειάζεται και κάποια fallback.

Το link όμως δεν κατάλαβα, δεν θα πρέπει οδηγεί κάπου?

Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

html με link

Δημοσίευση από Swan23 » 21 Αύγ 2015 08:43

Βασικά λάθος έθεσα την ερώτηση μου.

Θα το θέσω ως παράδειγμα.

Θέλω όταν πατάω την υπογραμμισμένη λέξη

Ιλαρά

να μου εμφανίζει ακριβώς από κάτω της πληροφορίες για την ιλαρά.

δεν θέλω να οδηγήσει σε άλλη σελίδα αλλά τοπικά ακριβώς από κάτω της.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

html με link

Δημοσίευση από alou » 21 Αύγ 2015 12:49

Τότε αυτό σε καλύπτει μια χαρά

http://codepen.io/alou/pen/OVeEPW

Κώδικας: Επιλογή όλων

.moreinfo a &#123;text-decoration&#58;none;color&#58;black;&#125;
.moreinfo a .theinfo &#123;opacity&#58;0;transition&#58;all 0.3s linear 0s;text-decoration&#58;none;padding&#58;0 10px;display&#58;block;color&#58;grey;&#125;

.moreinfo a&#58;focus .theinfo &#123;opacity&#58;1;&#125;

Κώδικας: Επιλογή όλων

<div class="moreinfo">
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info <span class="theinfo">I am the info even more info for other stuff</span></a>
</div>

Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

html με link

Δημοσίευση από Swan23 » 21 Αύγ 2015 20:02

Δεν μου βγαίνει....

Πρέπει να γράψω και τους 2 κώδικες. Το λέω αυτό επειδή ο 1ος είναι css και εγώ θέλω μόνο html...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

html με link

Δημοσίευση από alou » 21 Αύγ 2015 23:15

Δεν κατάλαβα... δε θες να χρησιμοποιήσεις css? τι θα πει δε σου βγαίνει?

Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

html με link

Δημοσίευση από Swan23 » 22 Αύγ 2015 11:33

Έγραψα το κώδικα τον παρακάτω για να το δοκιμάσω:

Κώδικας: Επιλογή όλων

<html>

<body>

<div class="moreinfo">
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info 
<span class="theinfo">I am the info even more info for other stuff</span></a>
	
</div>
</body>

</html>
Και το αποτέλεσμα ήταν το παρακάτω:
Click for info I am the info even more info for other stuff

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

html με link

Δημοσίευση από alou » 22 Αύγ 2015 14:04

Ε ναι, πρέπει να βάλεις και στο css σου αυτό που σου έγραψα. Τι πρόβλημα ακριβώς υπάρχει?
Μόνο με html δεν γίνεται να κάνεις κάτι, χρειάζεσαι και css ή javascript αν για κάποιο περίεργο λόγο το προτιμάς.

Κώδικας: Επιλογή όλων

<html>
<head>
<style>
.moreinfo a &#123;text-decoration&#58;none;color&#58;black;&#125;
.moreinfo a .theinfo &#123;opacity&#58;0;transition&#58;all 0.3s linear 0s;text-decoration&#58;none;padding&#58;0 10px;display&#58;block;color&#58;grey;&#125;
.moreinfo a&#58;focus .theinfo &#123;opacity&#58;1;&#125;
</style>
</head>
<body>

<div class="moreinfo">
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info
<span class="theinfo">I am the info even more info for other stuff</span></a>
</div>
<div class="moreinfo">
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info
<span class="theinfo">I am the info even more info for other stuff</span></a>
</div>
<div class="moreinfo">
  <i class="fa fa-info-circle"> </i> <a href="#">Click for info
<span class="theinfo">I am the info even more info for other stuff</span></a>
</div>
</body>

</html> 

Άβαταρ μέλους
Swan23
Δημοσιεύσεις: 58
Εγγραφή: 09 Ιούλ 2010 21:18
Τοποθεσία: Δράμα

html με link

Δημοσίευση από Swan23 » 22 Αύγ 2015 17:25

Έχεις δίκιο, ευχαριστώ για τη διόρθωση!

Να είσαι καλά! :)

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης