Xrwmatista koumpia se forma

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

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

Απάντηση
prokopios
Δημοσιεύσεις: 155
Εγγραφή: 17 Φεβ 2006 15:47

Xrwmatista koumpia se forma

Δημοσίευση από prokopios » 14 Νοέμ 2007 12:24

Γεια σας,
θα ήθελα να ρωτήσω σχετικά με ένα πρόβλημα που έχω σε μια φόρμα.

Έχω φτιάξει το παρακάτω css αρχείο

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

.buttons { text-align: right; padding: 4px 3px 0 0;}
.left_articles .buttons { float: right; height: 20px; }
.bluebtn { background: #488EB2 url(images/bluebtn.gif) no-repeat; width: 100px; padding: 1px 16px 5px 16px; color: #fff; text-decoration: none; }
.greenbtn { background: #488EB2 url(images/greenbtn.gif) no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: #488EB2 url(images/hoverbtn.gif) no-repeat; color: #fff; }
Και έχω μια φόρμα μέσα σε έναν πίνακα έτσι ώστε να είναι στοιχισμένη.

Αυτο που θέλω ειναι να κάνω το submit να ανηκει στην .bluebtn και το reset στην .greenbtn.

Ο κώδικας που χρησιμοποιώ είναι

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

 
<tr>
<td colspan="2" align="right">		
		  <div class="buttons"> 
<input type="submit" name="Submit" value="Καταχώρηση" class="bluebtn"/>
<input type="reset" name="Reset" value="Ακύρο" class="greenbtn"/> 
                   </div>
</td>
</tr>
Κάνοντας αυτο όμως σχηματίζεται μια μπλε επιφάνεια που περιέχει στο ένα μέρος της κουμπί και μια πράσινη επιφάνεια πάλι με κουμπί.

Ξέρει κανείς τι φταίει ??

Ευχαριστώ πολύ
Συνημμένα
problem.bmp
Εικόνα
ΑΥΤΑ!!!

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

Xrwmatista koumpia se forma

Δημοσίευση από manolism » 14 Νοέμ 2007 12:54

Πρέπει να δώσεις τις διαστάσεις του γραφικού σου και να ορίσεις σε κάθε κλάση button το border:none;

Κάτι που έκανα με δικά μου γραφικά είναι:

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

.bluebtn &#123; background&#58;url&#40;images/bluebtn.gif&#41; no-repeat; width&#58;140px; height&#58;30px; padding-left&#58;10px; color&#58; #fff; text-decoration&#58; none; border&#58;none; text-align&#58;left; &#125; 
.greenbtn &#123; background&#58;url&#40;images/greenbtn.gif&#41; no-repeat; width&#58;140px; height&#58;30px; padding-left&#58;10px; color&#58; #fff; text-decoration&#58; none; border&#58;none; text-align&#58;left; &#125; 

Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

Xrwmatista koumpia se forma

Δημοσίευση από ALKIVIADES » 14 Νοέμ 2007 13:16

γεια χαρά νταν φίλε,

ρίχνοντας μια ματιά, το μόνο λάθος που εντόπισα είναι πως έχει το ίδιο μπλέ χρώμα (#488EB2) τόσο για την bluebtn όσο και για την greenbtn ή οποία μάλλον θα έπρεπε να παίρνει για background χρώμα, μια πράσινη τιμή ..π.χ green δηλ :

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

.bluebtn 
&#123;
 background&#58; #488EB2 url&#40;images/bluebtn.gif&#41; no-repeat;
 width&#58; 100px;
  padding&#58; 1px 16px 5px 16px; 
  color&#58; #fff;
   text-decoration&#58; none;
&#125;

.greenbtn 
&#123; 
background&#58; green url&#40;images/greenbtn.gif&#41; no-repeat;
padding&#58; 1px 17px 5px 16px;
color&#58; #fff;
text-decoration&#58; none;
&#125;


Γ
ιατί αλλιώτικα, δίδεις το ίδιο μπλέ χρώμα τύπου #488EB2 και στα δυο κουμπιά :P
Βέβαια, διακρίνω και πως στα δύο, προσθέτεις δύο εικόνες ως background, τις images/bluebtn.gif και greenbtn.gif οι οποίες αν εφαρμόζονταν και εμφανίζονταν θα κάλυπταν αυτήνε την ατέλειαν .

Με δεδομένο, ότι, δοκίμασα όλονε τον κώδικα σου και δεν παρατήρησα αυτό που περιγράφεις εσύ άνωθεν, παρά διέκρινα δύο πλέ κουμπιά..δίχως πρόβλημα κανένανε..εδοκίμασα και εφάρμοσα στο path των εικονών που αναφέρεις δύο δικές μου εικόνες με ίδια ονόματα όπως εσένανε .

Τελικά, εκείνο που είδα με την εφαρμογή αυτών, στα κουμπιά, είναι πως ίσως αυτό που αναφέρεις και βλέπομε στο screenshoot που εδημοσίευσες άνωθεν, να είναι απλά πρόβλημα λόγω των διαστάσεων των εικόνων που εφαρμόζεις .


Για παράδειγμα κάτι σαν κι αυτό ,
Συνημμένα
d0LL.PNG
lunarmedia ..με πρόλαβε ο άτιμος ! :p
d0LL.PNG (1.16 KiB) Προβλήθηκε 1872 φορές
Εικόνα

prokopios
Δημοσιεύσεις: 155
Εγγραφή: 17 Φεβ 2006 15:47

Xrwmatista koumpia se forma

Δημοσίευση από prokopios » 14 Νοέμ 2007 13:28

@lunarmedia
Δοκιμάζοντας αυτο που μου είπες έβγαλε το ένα κουπί κάτω από τ'άλλο χωρίς να αναγράφεται στα κουμπιά το πλήρες όνομα και όταν εστίαζα στο κουμπί έβγαινε το φόντο από πίσω.

@ALKIVIADES
Δοικιμασα να αλλάξω το χρώμα σε πράσινο αλλά συνεχίζεται το ίδιο πρόβλημα , με τη μόνη διαφορά ότι πίσω από το κουμπί άκυρο υπάρχει τώρα πράσινο χρώμα.

Ο κώδικάς μου δεν πρέπει να έχει τέτοιο πρόβλημα γιατί το έχω δοκιμάσει και σε κανονικά κουμπιά και δουλεύει μια χαρα. όμως δεν ξέρω κατά πόσο μπορώ να πειράξω τα κουμπιά επειδή βρίσκονται σε φόρμα . . .



Μάλλον θα είναι πρόβλημα διαστάσεων.



Ευχαριστώ πολύ και τους δυο σας !!!
ΑΥΤΑ!!!

Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

Xrwmatista koumpia se forma

Δημοσίευση από ALKIVIADES » 14 Νοέμ 2007 13:32

..να σαι καλά Προκόπη,

είναι θέμα διαστάσεων, οπότες και άραγες είτε αυξομειώνεις τας εικόνας, είτε αλλάζεις τας διαστάσεις των κουμπιών, του style σου :wink:

* ..βέβαια καλό θα ήτονε ώστε να το ελύναμε πάραυτα, να ανέβαζες αρχής εξ αρχής τις επίμαχες εικόνες gif επίσης .
Εικόνα

prokopios
Δημοσιεύσεις: 155
Εγγραφή: 17 Φεβ 2006 15:47

Xrwmatista koumpia se forma

Δημοσίευση από prokopios » 14 Νοέμ 2007 13:40

ALKIVIADES έγραψε:..να σαι καλά Προκόπη,

είναι θέμα διαστάσεων, οπότες και άραγες είτε αυξομειώνεις τας εικόνας, είτε αλλάζεις τας διαστάσεις των κουμπιών, του style σου :wink:

* ..βέβαια καλό θα ήτονε ώστε να το ελύναμε πάραυτα, να ανέβαζες αρχής εξ αρχής τις επίμαχες εικόνες gif επίσης .
Ορίστε και οι εικονίτσες
Συνημμένα
bluebtn.gif
bluebtn
bluebtn.gif (502 Ψηφιολέξεις) Προβλήθηκε 1850 φορές
greenbtn.gif
greenbtn
greenbtn.gif (507 Ψηφιολέξεις) Προβλήθηκε 1850 φορές
ΑΥΤΑ!!!

Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

Xrwmatista koumpia se forma

Δημοσίευση από ALKIVIADES » 14 Νοέμ 2007 13:53

Λοιπόν ,

δοκίμασε ως :

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

.bluebtn 
&#123;
 background&#58; #488EB2 url&#40;images/blue.gif&#41; repeat;
 width&#58; 100px;
  padding&#58; 0px; 
  color&#58; #fff;
   text-decoration&#58; none;
&#125;

.greenbtn 
&#123; 
background&#58; green url&#40;images/green.gif&#41; repeat;
padding&#58; 0px;
color&#58; #fff;
text-decoration&#58; none;
&#125;
και με τις ακόλουθες επι το μηκος αυξομειωμένες εικόνες :[/b]
Συνημμένα
green.gif
green.gif (1.45 KiB) Προβλήθηκε 1843 φορές
blue.gif
blue.gif (686 Ψηφιολέξεις) Προβλήθηκε 1845 φορές
Εικόνα

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

Xrwmatista koumpia se forma

Δημοσίευση από manolism » 14 Νοέμ 2007 13:58

Και που θα χωρέσουν τα γράμματα σε τόσο μικρές εικόνες;

prokopios
Δημοσιεύσεις: 155
Εγγραφή: 17 Φεβ 2006 15:47

Xrwmatista koumpia se forma

Δημοσίευση από prokopios » 14 Νοέμ 2007 14:01

ALKIVIADES έγραψε:Λοιπόν ,

δοκίμασε ως :

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

.bluebtn 
&#123;
 background&#58; #488EB2 url&#40;images/blue.gif&#41; repeat;
 width&#58; 100px;
  padding&#58; 0px; 
  color&#58; #fff;
   text-decoration&#58; none;
&#125;

.greenbtn 
&#123; 
background&#58; green url&#40;images/green.gif&#41; repeat;
padding&#58; 0px;
color&#58; #fff;
text-decoration&#58; none;
&#125;
και με τις ακόλουθες επι το μηκος αυξομειωμένες εικόνες :[/b]
Είσαι αρχηγός!!!! :D :D
Δουλεύει μια χαρά.
Τα γράμματα χωρέσανε μια χαρα.

Ευχαριστώ πολύ!!!
ΑΥΤΑ!!!

Άβαταρ μέλους
ALKIVIADES
Honorary Member
Δημοσιεύσεις: 1322
Εγγραφή: 07 Απρ 2005 03:39

Xrwmatista koumpia se forma

Δημοσίευση από ALKIVIADES » 14 Νοέμ 2007 14:07

..Εικόνα merci Προκόπιε :D
Εικόνα

Απάντηση

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

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

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