Skip to content

[Anastasis 48]

 

Σε αυτό το μάθημα θα δώσουμε την επιλογή στον χρήστη πατώντας ένα link που θα βρίσκεται στο header μας να πηγαίνει αυτομάτως στο περιεχόμενο της σελίδας μας αγνοώντας το header και το menu.

Θα χρειαστείτε την παρακάτω εικόνα:
Εικόνα 1

Στο css αρχείο μας γράφουμε τα παρακάτω:

κώδικας:

div.skip a{ width:110px; height:17px; background-image:url(skip.gif); float:right; margin:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#ffffff; text-align:right; padding:3px 1px 1px 1px; margin-top:2px; margin-right:100px; text-decoration:none; } div.skip a:hover{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#0099FF; text-decoration:none; }

Τι σημαίνουν οι επιλογές αυτές τις έχουμε εξηγήσει σε προηγούμενα μαθήματα

Στο html αρχείο μας και μέσα στο div header γράφουμε:

κώδικας:

<div class="skip"><a href="#main_content">Skip to content</a> </div>

ώστε να μας οδηγήσει κατ' ευθείαν στο div main_content.

Live demo