Styling σε αντικείμενο το οποίο καλείτε μέσω PHP.

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

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

Απάντηση
dimitris_s
Δημοσιεύσεις: 10
Εγγραφή: 10 Ιουν 2007 19:41

Styling σε αντικείμενο το οποίο καλείτε μέσω PHP.

Δημοσίευση από dimitris_s » 04 Ιουν 2009 03:57

Χαιρετώ την κοινότητα,

Έχουμε ένα contact form σε PHP. Δουλεύουν όλα μια χαρά. Με το submit της φόρμας, καλείτε το παρακάτω μέσω PHP:

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

echo "<p class=\"success\">Your email was sent successfully. We will review your request, and reply as soon as possible. Thank you!</p>";
το οποίο απλά εμφανίζει το παραπάνω κείμενο. Ο κώδικας CSS για το συγκεκριμένο object είναι ο εξής:

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

.success &#123;
 font-family&#58; "Trebuchet MS", sans-serif;
 font-size&#58; 12px;
 font-style&#58; normal;
 font-weight&#58; bold;
 letter-spacing&#58; -1px;
 line-height&#58; 1.2em;
 width&#58; 250px;
 color&#58; #008100;
 border&#58; 2px solid #008100;
 background&#58; #abd5ab;
 padding&#58; 5px;
 margin-left&#58; 800px;
 position&#58; relative;
 clear&#58; both;
 display&#58; block;
 float&#58; right;
&#125;
Έχω δοκιμάσει ακόμη και τα πιο ανορθόξα όσον αφορά τo float και τα υπόλοιπα. Αυτό που θέλω είναι να εμφανίζεται αυτό το συγκεκριμένο κείμενο, σε ένα συγκεκριμένο σημείο της σελίδας (εντός του container), χωρίς να επηρεάζει τη θέση των υπολοίπων αντικειμένων.

Αναμένω συμβουλές, ευχαριστώ προκαταβολικά.

Άβαταρ μέλους
chchrist
Δημοσιεύσεις: 924
Εγγραφή: 28 Ιουν 2003 20:25
Επικοινωνία:

Styling σε αντικείμενο το οποίο καλείτε μέσω PHP.

Δημοσίευση από chchrist » 02 Ιούλ 2009 01:34

Μήπως να το βάλεις position:absolute (δεδομένου ότι το parent container σου είναι σε position:relative) και να παίξεις με top,left,right,bottom και z-index

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

Styling σε αντικείμενο το οποίο καλείτε μέσω PHP.

Δημοσίευση από patriot » 02 Ιούλ 2009 05:58

Αυτά που έχουν σχέση με το πρόβλημα είναι αυτά:

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

position&#58;relative; 
display&#58;block; 
clear&#58;both;
float&#58;right;
Με όλα αυτά που έχεις βάλει είναι λογικό να γίνεται conflict. Να π.χ γιατί: (μερικές γενικές γνώσεις)
1) Τα block elements είναι αυτό που λέει το όνομα τους. Ένα ολόκληρο block!! Δηλ καταλαμβάνουν όλο το τετράγωνο!!
2) Αυτό σημαίνει ότι δεν μπορεί να μπει τίποτα δίπλα τους. Είτε δεξιά είτε αριστερά. Γιατί λοιπόν βάζεις το "clear:both;" για κάτι που εννοείται;
3) Για να μπει κάτι π.χ αριστερά θα πρέπει να βάλεις το float:left.
4) Από την στιγμή που μόνο τα block level elements μπορούν να γίνουν float εννοείται ότι το "display:block;" είναι άχρηστο!

Συμπέρασμα. Έχεις γεμίσει την βαλίτσα σου με άχρηστα ρούχα και τώρα δεν κλείνει. Βγάλε μερικά και θα δεις ότι το φερμουάρ της θα κλείσει κανονικά.

Έχτρα συμβουλές:
1) Δεν θεωρείται σωστή δόμηση να αφήνεις κενά σε τέτοια μέρη: display:ΚΕΝΟblock; γιατί μερικοί browsers θεωρούν το κενό ως τέλος εντολής και αρχή μιας άλλης. Και βέβαια γίνεται μπέρδεμα αφού δεν καταλαβαίνουν τι λέει η "άλλη" εντολή (αφού είναι ελλειπής)
2) Μπορείς όμως να αφήνεις εδώ: position:relative; ΚΕΝΟ display:block;


Με δυο λόγια.... Αν πάλι δεν γινει τίποτα, δώσε μας και τον html κώδικα να δούμε....
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Απάντηση

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

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

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