Τι κανει ένα "position:relative;" μόνο του ????

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Τι κανει ένα "position:relative;" μόνο του ????

Δημοσίευση από kosmas » 20 Ιαν 2008 19:33

Γεια σας !

Προσπαθώ να μάθω πως φτιάχνεται ένα css menu και έχω κολήσει στο σημείο εκείνο του κώδικα που λέει position:relative. Απ' ότι ξέρω το position:relative χρησιμοποιείται για να μετακινείται το στοιχείο απο τη θέση που θα έπρεπε να είχε βάση της html και συνοδεύεται μάλιστα και από τις top, left κλπ... Η απορρία μου λοιπόν είναι τι κάνει ένα position relative μόνο του (χωρις τα top και left) και ποιός ο ρόλος του στο συγκεκριμένο menu ??????

<html>

<head>

<style type="text/css">

#menu {
width:8em;
padding:0.5em;
background:#ccc;
margin:0 auto;
}

#menu a, #menu a:visited {
display:block;
width:7em;
padding:0.25em 0;
color:#000;
text-indent:0.2em;
background-color:#fff;
text-decoration:none;
margin:0.5em 0;
border-left:0.5em solid #9ab;
}

#menu a:visited span {
display:block;
position:absolute;
top:0em;
left:10em;
width:1.2em;
font-size:0.9em;
color:#c00;
border:1px solid #c00;
}

#menu a span {
display:none;
}

#menu a:hover {
color:#f00;
border-left:0.5em solid #000;
}

.box {
position:relative;
}

</style>

</head>

<body>

<div id="menu">
<div class="box">
<a href="http://www.freewebs.com/ymittos">
menu one
<span>
V
</span>
</a>
</div>
<div class="box">
<a href="http://www.freestuff.gr">
menu two
<span>
V
</span>
</a>
</div>
<div class="box">
<a href="http://www.artofwise.gr">
menu three
<span>
V
</span>
</a>
</div>
<div class="box">
<a href="http://www.google.gr">
menu four
<span>
V
</span>
</a>
</div>
<div class="box">
<a href="http://www.michanikos.gr">
menu five
<span>
V
</span>
</a>
</div>
</div>

</body>

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Τι κανει ένα "position:relative;" μόνο του ????

Δημοσίευση από skeftomilos » 21 Ιαν 2008 01:00

Βάζοντας position:relative σε ένα element το ορίζουμε ως σημείο αναφοράς για τα elements που περιέχει.

Σε ένα element που είναι τοποθετημένο absolutely, τα left και top αφορούν αποστάσεις από την πάνω αριστερή γωνία της σελίδας. Αν αυτό δεν είναι επιθυμητό τότε μπορούμε να ορίσουμε διαφορετικό σημείο αναφοράς, θέτοντας position:relative στο κατάλληλο parent element.

kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Τι κανει ένα "position:relative;" μόνο του ????

Δημοσίευση από kosmas » 21 Ιαν 2008 15:47

Δηλαδή λίγο πιο συγκεκριμένα ? Αν δεν βάλω position:relative γιατί το V δεν εμφανόιζεται δίπλα από κάθε στοιχείο του menu ????

sibas
Honorary Member
Δημοσιεύσεις: 1851
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Τι κανει ένα "position:relative;" μόνο του ????

Δημοσίευση από sibas » 23 Ιαν 2008 01:41

Γιατί έχεις
#menu a span {
display:none;
}
βγάλε το none και θα θα εμφανισθεί.

kosmas
Δημοσιεύσεις: 75
Εγγραφή: 16 Ιουν 2007 17:01

Τι κανει ένα "position:relative;" μόνο του ????

Δημοσίευση από kosmas » 24 Ιαν 2008 19:29

display:none έχω βάλει έτσι ώστε όταν ο χρήστης δεν έχει πατήσει το link το "V" (το οποίο δηλώνει visited) να μην εμφανίζεται. Η ερώτηση μου ωστόσο αναφέρεται στη χρήση του position:relative και με ποία λογική επιλέγω να το βάλω στο κώδικα ώστε να εμφανίζεται το V (όταν ο χρήστης πατήσει το link) δίπλα στο λινκ.

Καμιά βοήθεια ?????

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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