Διαφορετικά links

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

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

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

Διαφορετικά links

Δημοσίευση από manolism » 12 Οκτ 2006 14:01

Έχω βάλει σε ένα css αρχείο το παρακάτω για τα links

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

a:link, a:visited { 
font-family:Verdana, Arial, Helvetica, sans-serif; 
color:#000066; 
font-weight:bold; 
font-size:12px; 
text-decoration: none; 
}
Αυτό που θέλω είναι πως γίνεται σε ένα div να ορίσω διαφορετικές ιδιότητες κειμένου για τα links του συγκεκριμένου div.
Δηλαδή όπως είναι το παραπάνω αλλά με 10px γράμματα.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Διαφορετικά links

Δημοσίευση από ThyClub » 12 Οκτ 2006 15:27

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

div#alloDiv a:link a:visited{
font-family:Verdana, Arial, Helvetica, sans-serif; 
color:#000066; 
font-weight:bold; 
font-size:10px; 
text-decoration: none;
}

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

Διαφορετικά links

Δημοσίευση από manolism » 12 Οκτ 2006 15:40

Ωραία! Και μέσα στην html πως θα το ορίσω;

Α και κάτι άλλο. Μόλις το κάνω αυτό χάνει τις διαστάσεις που του έχω δώσει

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

div#mainplaisio a:link a:visited{
background-image:url(images/mainplaisio.gif);
margin-left:33px;
margin-right:33px;
margin-top:20px;
padding-top:20px;
padding-left:5px;
padding-right:4px;
  float: left;
  width:171px;
 height:80px;
font-family:Verdana, Arial, Helvetica, sans-serif; 
color:#000066; 
font-weight:bold; 
font-size:10px; 
text-decoration: none;
  }

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

Διαφορετικά links

Δημοσίευση από skeftomilos » 13 Οκτ 2006 00:29

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

#container a:link, #container a:visited {
  ...
}
#container a:hover {
  ...
}
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

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

Διαφορετικά links

Δημοσίευση από manolism » 13 Οκτ 2006 10:18

skeftomile το έκανα όπως είπες αλλά συμβαίνουν τα εξής:

Ναι λειτούργησε το link αλλά έγινε link όλο το div και όχι μία συγκεκριμένη λέξη που ήθελα (μικρό το κακό).

Όταν πατάω enter για να γράψω σε μία νέα παράγραφο με πετάει έξω από το div και γράφει λεξψ από αυτό. Αντιθέτως μου επιτρέπει να γράψω από κάτω με shift+Enter

Άβαταρ μέλους
sicadera
Δημοσιεύσεις: 23
Εγγραφή: 09 Σεπ 2005 03:59

Διαφορετικά links

Δημοσίευση από sicadera » 03 Φεβ 2007 13:46

Χωρίς div με απλά cells δεν γίνεται?
Εικόνα

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

Διαφορετικά links

Δημοσίευση από Rapid-eraser » 12 Φεβ 2007 12:03

eimaste sadistes ti va kavoume :P
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

Διαφορετικά links

Δημοσίευση από RADICAL » 12 Φεβ 2007 12:41

lunarmedia έγραψε:Ωραία! Και μέσα στην html πως θα το ορίσω;

Α και κάτι άλλο. Μόλις το κάνω αυτό χάνει τις διαστάσεις που του έχω δώσει

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

div#mainplaisio a:link a:visited{
background-image:url(images/mainplaisio.gif);
margin-left:33px;
margin-right:33px;
margin-top:20px;
padding-top:20px;
padding-left:5px;
padding-right:4px;
  float: left;
  width:171px;
 height:80px;
font-family:Verdana, Arial, Helvetica, sans-serif; 
color:#000066; 
font-weight:bold; 
font-size:10px; 
text-decoration: none;
  }
Με τον παραπάνω κώδικα δηλώνεις τις ιδιότητες του link και όχι του div που το περιβάλει,
γιαύτο φαντάζομαι χάνει τις διαστάσεις του και γίνεται όλο το div link.

Υποθέτω πως αυτό που θές θα γίνει κάπως έτσι:

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

#container {
   float: left;
   width:171px;
   height:80px;
   background-image:url(images/mainplaisio.gif);
   margin:20px 33px 0 33px;
   padding:20px 4px 0 5px
}

#container a:link, #container a:visited {
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#000066; 
    font-weight:bold; 
    font-size:10px; 
    text-decoration: none;
}

#container a:hover {
   text-decoration: underline;
}
Δλδ δηλώνεις ξεχωριστά τα properties του div σου που το περιβάλει και μετά του link.
Bάζωντας τώρα το #container μπροστά απο το a:link απλά δηλώνεις
πως μόνο τα a που βρίσκεται μέσα στο <div id="container"> θα έχει αυτές τις ιδιότητες.
Οπότε με το #container a:link δεν επηρεάζοντε σε καμία περίπτωση τα properties του #container αλλα του link μέσα σε αυτό.

Οπότε η html θα είναι κάπως έτσι

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

<div id="container">
  <a href="#">foobar</a>
</div>
Εικόνα

Απάντηση

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

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

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