Αντίστοιχο μενού

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

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

Απάντηση
Άβαταρ μέλους
blackhumor
Honorary Member
Δημοσιεύσεις: 1374
Εγγραφή: 22 Ιούλ 2003 02:48
Τοποθεσία: Ελλάδα
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από blackhumor » 14 Δεκ 2007 01:30

Θέλω να ρωτήσω πως μπορώ να κάνω ένα μενού σαν το http://www.techcrunch.com/ ?

Πως γίνεται;
To LinkZ.gr ανανεώθηκε. Καταχωρήστε την ιστοσελίδα σας δωρεάν.
Διαφημιστικά δώρα για επαγγελματίες.
Διαφημιστικά στυλό.

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από manolism » 14 Δεκ 2007 10:59

Ποιο μενού εννοείς;

Το οριζόντιο πάνω;

Άβαταρ μέλους
blackhumor
Honorary Member
Δημοσιεύσεις: 1374
Εγγραφή: 22 Ιούλ 2003 02:48
Τοποθεσία: Ελλάδα
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από blackhumor » 15 Δεκ 2007 13:15

Ναι...
To LinkZ.gr ανανεώθηκε. Καταχωρήστε την ιστοσελίδα σας δωρεάν.
Διαφημιστικά δώρα για επαγγελματίες.
Διαφημιστικά στυλό.

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από vassilism » 15 Δεκ 2007 20:23

Πιστεύω ο καλύτερος τρόπος για να κάνεις κάτι τέτοιο είναι με css.
Λίγο πρόχειρα κάπως έτσι:

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

<HTML>
<HEAD>
<TITLE></TITLE>
<style>
A.menulink &#123;
width&#58; 170px; /*platos keliou*/
text-align&#58; center; /*stoixish gramaton*/
text-decoration&#58; none;
font-family&#58;arial;
font-size&#58;12px;
color&#58; white; /*xroma gramatoseiras*/
BORDER&#58; none;
border&#58; solid 5px green; /*xroma gramis keliou*/
background-color&#58;green; /*xroma keliou*/
&#125;
A.menulink&#58;hover &#123;
border&#58; solid 5px green; /*to xroma pou pernei h grami tou keliou otan pernaei epano tou o deiktis*/
color&#58; green; /*xroma gramatoseiras otan pernaei epano tis o deiktis*/
background-color&#58;white; /*to xroma pou pernei to keli otan pernaei epano tou o deiktis*/
&#125;
</style>
</HEAD>
<BODY>

<a href="http&#58;//www.freestuff.gr" class="menulink">freestuff</a>
<a href="http&#58;//www.freestuff.gr" class="menulink">freestuff</a>
<a href="http&#58;//www.freestuff.gr" class="menulink">freestuff</a>

</BODY>
</HTML>

Άβαταρ μέλους
blackhumor
Honorary Member
Δημοσιεύσεις: 1374
Εγγραφή: 22 Ιούλ 2003 02:48
Τοποθεσία: Ελλάδα
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από blackhumor » 15 Δεκ 2007 21:16

Πολύ καλό...

Μόνο μπορείς να μου πεις τι πρέπει να αλλάξω ώστε να ΜΗΝ έχει κενό ανάμεσα στα buttons?
To LinkZ.gr ανανεώθηκε. Καταχωρήστε την ιστοσελίδα σας δωρεάν.
Διαφημιστικά δώρα για επαγγελματίες.
Διαφημιστικά στυλό.

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από vassilism » 15 Δεκ 2007 21:57

Βάλε τα link μέσα σε πίνακα.
Ο lunarmedia είναι expert σαυτά τα css.
Ας πει και αυτός την άποψή του, ίσως να υπάρχει καλύτερος τρόπος.

Άβαταρ μέλους
blackhumor
Honorary Member
Δημοσιεύσεις: 1374
Εγγραφή: 22 Ιούλ 2003 02:48
Τοποθεσία: Ελλάδα
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από blackhumor » 15 Δεκ 2007 22:28

Ο πίνακας δεν είναι πρακτικός αν έχω πολλά link... Θα προτιμούσα χωρίς πίνακα αν γίνεται... Για να δούμε τι θα πει και ο lunarmedia :-)
To LinkZ.gr ανανεώθηκε. Καταχωρήστε την ιστοσελίδα σας δωρεάν.
Διαφημιστικά δώρα για επαγγελματίες.
Διαφημιστικά στυλό.

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από vassilism » 16 Δεκ 2007 00:00

Γιατί αφού μπορείς να ορίσεις και χαρακτηριστικά πίνακα με css.
Κοίτα αυτό, σε αυτό το παράδειγμα ο πίνακας παίρνει της παραμέτρους από τα css.
Συνημμένα
sample.zip
(1.24 KiB) Μεταφορτώθηκε 368 φορές

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

Αντίστοιχο μενού

Δημοσίευση από patriot » 16 Δεκ 2007 10:48

Σε τι χρησιμεύει το διπλό border; Από την στιγμή που το "border: solid 5px green;" μπαίνει αποκάτω από το προηγούμενο, το αποπάνω σταματάει να ισχύει αυτομάτως.

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

BORDER&#58; none;
border&#58; solid 5px green;


Για να μην υπάρχει κενό ανάμεσα στα links βάλε τον κώδικα έτσι:

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

A.menulink &#123;
margin&#58;0px; padding&#58;0px;
.........................................
..... υπόλοιπος κώδικας .....
.........................................
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από manolism » 17 Δεκ 2007 10:45

Css code

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

#mainmenu &#123; clear&#58; both; margin&#58; 5px 0 5px 0; background-color&#58;#339933; padding&#58; 10px; font-size&#58; 12px; font-family&#58;Verdana, Arial, Helvetica, sans-serif; &#125;
#mainmenu li &#123; list-style-type&#58; none; display&#58; inline; padding&#58; 0;&#125;
#mainmenu li a&#58;link &#123; color&#58; #FFF; padding&#58; 5px 1px 7px 6px; text-decoration&#58;none; &#125;
#mainmenu li a&#58;visited &#123; color&#58; #FFF; padding&#58; 5px 1px 7px 6px; text-decoration&#58;none; &#125;
#mainmenu li a&#58;hover &#123; color&#58; #00A700; background-color&#58; #fff; padding&#58; 5px 1px 7px 6px; text-decoration&#58; none; &#125;
#mainmenu li a&#58;active &#123; color&#58; #00A700; background-color&#58; #fff; padding&#58; 5px 1px 7px 6px; text-decoration&#58; none; &#125;
HTML code

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

<ul id="mainmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
</ul>
Σε περίπτωση που θέλεις να βάλεις κάποιο image στην μπάρα μπορείς να χρησιμοποιήσεις μέσα στην πρώτη γραμμή του mainmenu το

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

background&#58; #color url&#40;image.gif&#41; repeat-x top left;
To image σου θα πρέπει να έχει για το συγκεκριμένο παράδειγμα ύψος 38px και πλάτος από 1px και πάνω.

Άβαταρ μέλους
blackhumor
Honorary Member
Δημοσιεύσεις: 1374
Εγγραφή: 22 Ιούλ 2003 02:48
Τοποθεσία: Ελλάδα
Επικοινωνία:

Αντίστοιχο μενού

Δημοσίευση από blackhumor » 21 Δεκ 2007 00:57

Ευχαριστώ πολύ παίδες...

Θα κάνω μερικές δοκιμές... :-)
To LinkZ.gr ανανεώθηκε. Καταχωρήστε την ιστοσελίδα σας δωρεάν.
Διαφημιστικά δώρα για επαγγελματίες.
Διαφημιστικά στυλό.

Απάντηση

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

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

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