Προβλημα με CSS

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

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

Απάντηση
Άβαταρ μέλους
michalis1984
Δημοσιεύσεις: 384
Εγγραφή: 05 Ιουν 2001 03:00

Προβλημα με CSS

Δημοσίευση από michalis1984 » 24 Απρ 2006 19:32

Γεια σας,

Ειμαι αρχαριος με αυτη τη τεχνολογια αλλα προσπαθησα να φτιαξω ενα κομματι της ιστοσελιδας μου με αυτη. Στο αποτελεσμα βρήκα καποιο προβλημα. Ενω στον IE μου εμφανιζετε μια χαρα, στον Firefοχ μου βγαζει κατι λαθος.
Παρακαλω οσου εχετε τους 2 browsers να επισκευθειτε τη ιστοσελιδα μου http://gelastoxilaki.freegr.net και δειτε, πανω πανω το μενου στην αλεπου εμφανιζετε λιγο πιο κατω απο οπου πρεπει. Ασυμβατοτητα στους browsers? Υπαρχει καποια λύση που μπορω να δοκιμασω;

:D :D

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

Προβλημα με CSS

Δημοσίευση από patriot » 25 Απρ 2006 00:07

Για δοκίμασε να βάλεις ένα display:block στο μενού με τα links πάνω από το banner.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
michalis1984
Δημοσιεύσεις: 384
Εγγραφή: 05 Ιουν 2001 03:00

Προβλημα με CSS

Δημοσίευση από michalis1984 » 25 Απρ 2006 01:37

Δυστοιχως δεν καταφερα με τα display:block .. να σας δωσω ενα αντιγραφο του κωδικα μπας και βγει κατι. Οτιδηποτε προτασεις εκπροσδεκτες.

Το panw ειναι το γκριζο div. Το diamisisis ειναι το div με τις διαφιμησεις και το text ειναι το div με τα links. Τα υπολοιπα δεν κρινω σκοπιμο να τα παραθεσω καθως δεν νομιζω να εχει νοημα.

#panw{
background: #BBC9D7;
position: static;
height: 160px;
border-top-style: ridge;
border-left-style: ridge;
border-right-style: ridge;
margin-top: 0px;
top: 20px;
border-bottom-style: solid;
border-bottom-width: 1px;
width: 743px;
}

#diafimisis{
width:483px;
background: #CC0000;
margin-left:255px;
margin-top: 40px;
border: double;
z-index: 100;
top: 0px;
position: absolute;
}

}
#text{
z-index: 110;
top: 0px;
margin-top: 18px;
position: absolute;
margin-left:250px;
}

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

Προβλημα με CSS

Δημοσίευση από patriot » 26 Απρ 2006 07:34

Πρώτα από όλα ο κώδικας σου έχει μερικά λαθάκια.
Στο "panw" έχεις βάλει position static και top:20px. Από την στιγμή που το position είναι static το top δεν λαμβάνεται υπόψην άσχετα βέβαια με το πόσα px είναι.

Στο diafimisis*
Έχεις βάλει border:double. Αλλά τι double; Τα shortcuts τα έχουμε για να μην γράφουμε το ίδιο πράγμα πολλές φορές όχι για να γράφουμε τα μισά γιατί τότε ο κώδικας είναι λάθος. Μην σκεφτείς ότι επειδή έγραψες ένα "double" έγινε η δουλειά. Έπρεπε π.χ να γράψεις:

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

border-style:double; border-color:#000; (μαύρο) border-width:10px; 
Και εδώ ταιριάζει αυτό που είπα πριν. Δεν χρειάζεται να γράφουμε το ιδιο πράγμα 10 φορές. Γι' αυτό και εν συντομία θα γράφαμε:

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

border:#000 1px double;
Ενώ εσύ έγραψες υπερσυντομία :P

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

border:double;
* = Το "diafimisis" το έγραψες λάθος. Ο πληθυντικός είναι με "ει" (δια της φήμης + ει για τον πληθυντικό = διαφημήσεις) . Και άσχετα με το μάθημα ορθογραφίας αυτό το λάθος μπορεί αύριο να το βρεις εμπόδιο αν θες να βάλεις ΜΙΑ διαφήμηση και το class το έχεις ήδη κατοχυρώσει με πολλές. Γράψτο κανονικά.

Και σε ότι αφορά το αρχικό σου πρόβλημα.
Βάλε display:block και στα δύο divs ή συγχρόνος ή χώρια να βλέπεις τα αποτελέσματα. Και πειραματίσουμε με το clear. (clear:left, clear:right, clear:both, clear:none;) επίσης όταν έχεις γράψει display:block και χωρίς.

Τέλος ορίστε 2 urls για τα Css για να μην μπερδεύεσαι:
DevGuru
w3schools.com
Εκεί θα βρεις περισσότερες πληροφορίες και γενικότερα αλλά και για τα display:block και clear.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

Προβλημα με CSS

Δημοσίευση από fotisevangelou » 26 Απρ 2006 11:34

Τα clear δεν προκειται να κάνουν τίποτε όταν έχει σχετικό positioning (δηλαδή position:absolute κλπ.)

Αν το καλοσκεφτείς, μπορείς να φτιάξεις πολύ πιο απλά τον κώδικά σου.

το html:

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

 <div id="panw">
   <div id="logo">
   <a href="index.php"><img src="0.gif" border="0"></a>
   </div>
   <div id="panwright">
         <div id="text">to menu sou edo</div>
         <div id="diafimisis">to banner sou edo</div>
   </div>
   <div style="clear&#58;both;"></div>
   <div id="slogan">to slogan edo</div>
   <div id="fast">to keimeno tou fast edo</div>
</div>
και το css:

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


#panw &#123;
  clear&#58;both;
&#125;

#logo &#123;
  float&#58;left;
&#125;

#panwright &#123;
  float&#58;right;
&#125;

#text &#123;
margin&#58;2px 4px 2px 4px /*βάλε όσο εσύ θες*/
&#125;

#diafimisis &#123;
margin&#58;2px 4px 2px 4px /*βάλε όσο εσύ θες*/
&#125;

#slogan&#123;
text-align&#58;center;
margin&#58;2px 4px 2px 4px /*βάλε όσο εσύ θες*/
&#125;

#fast&#123;
text-align&#58;center;
margin&#58;2px 4px 2px 4px /*βάλε όσο εσύ θες*/
&#125;

Επίσης άλλαξε doctype σε xhtml transitional για να είσαι βέβαιος ότι το layout σου θα δουλεύει απροβλημάτιστα με πιο σύγχρονες τεχνικές CSS.

Το

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

<div style="clear&#58;both;"></div>
μπαίνει για να διορθώσει το μοναδικό bug που υπάρχει στον firefox για το rendering των floats, ο ΙΕ το αγνοεί ουσιαστικά.

Παίξε λίγο με το margin για να τοποθετήσεις στο πλέγμα του div με id panw τα εσωτερικά divs. Αν χρειαστεί να έχεις διαφορετικό margin μεταξύ IE και όλων των άλλων browsers χρησιμοποίησε την εντολή !important.

Δηλαδή αν θες να έχεις margin:2px σε firefox και όλους τους άλλους σωστούς browsers και margin:3px στον ΙΕ, τότε θα γράψεις στο css σου και στο αντίστοιχο div-άκι ή οποιοδήποτε άλλο element:

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

div &#123;
margin&#58;2px !important;
margin&#58;3px;
&#125;
To !important λέει στον IE να διαβάσει το δεύτερο margin ενώ όλοι οι υπόλοιποι browsers διαβάζουν το πρώτο.

Ελπίζω να βοήθησα.

Φώτης[/quote]

Άβαταρ μέλους
fotisevangelou
Δημοσιεύσεις: 125
Εγγραφή: 24 Οκτ 2005 10:49
Επικοινωνία:

Προβλημα με CSS

Δημοσίευση από fotisevangelou » 26 Απρ 2006 11:50

patriot,

γράφεις στον άνθρωπο για το diafimisis
* = Το "diafimisis" το έγραψες λάθος. Ο πληθυντικός είναι με "ει" (δια της φήμης + ει για τον πληθυντικό = διαφημήσεις) . Και άσχετα με το μάθημα ορθογραφίας αυτό το λάθος μπορεί αύριο να το βρεις εμπόδιο αν θες να βάλεις ΜΙΑ διαφήμηση και το class το έχεις ήδη κατοχυρώσει με πολλές. Γράψτο κανονικά.
Δεν τσεκάρεις και το μήνυμα καλύτερα στην υπογραφή σου που γράφει "συντήριση". Ήμαρτον, η ορθογραφία μας μάρανε τώρα; Μπορεί να έγραφε εξάλλου το diafimisis στην καθαρεύουσα, δηλαδή "διαφήμισις", που είναι σωστό και αναφέρεται στην μία διαφήμιση, banner ελληνιστί, που βρίσκεται εις το χέδερ της ιστοσελίδας του.

Have a nice day!

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

Προβλημα με CSS

Δημοσίευση από patriot » 26 Απρ 2006 13:35

fotisevangelou έγραψε:τα clear δεν προκειται να κάνουν τίποτε όταν έχει σχετικό positioning (δηλαδή position:absolute κλπ.)
Μα αυτό εννοείται, δεν χρειαζόταν να το γράψω. Όμως ομολογώ ότι δεν το σκέφτηκα κιόλας.
Δεν τσεκάρεις και το μήνυμα καλύτερα στην υπογραφή σου που γράφει "συντήριση". Ήμαρτον, η ορθογραφία μας μάρανε τώρα;
Εντάξει ένα λαθάκι έκανα και εγώ (αν είναι πράγματι λάθος, γιατί νομίζω ότι δεν είναι, θα σου πω αφού κοιτάξω την ετυμολογία της λέξης). Αλλά και δέκα να έκανα εγώ του το είπα για να το διορθώσει όχι για να του την σπάσω όπως εσύ προσπαθείς να κάνεις με μένα.
Μπορεί να έγραφε εξάλλου το diafimisis στην καθαρεύουσα, δηλαδή "διαφήμισις", που είναι σωστό και αναφέρεται στην μία διαφήμιση, banner ελληνιστί, που βρίσκεται εις το χέδερ της ιστοσελίδας του.
Όσο για το άλλο που λες ότι μπορεί να είναι το αρχαίο, αν και δεν πιστεύω ότι αυτό σκέφτηκε κατά τα άλλα αυτός ήταν ο κύριος λόγος που με έκανε να του διορθώσω την ορθογραφία ακριβώς επειδή το σκέφτηκα!!! Όπως είπε είναι αρχάριος με την γλώσσα και μπορεί να μην ήξερε ότι ένα όνομα div μπορείς να το χρησιμοποιήσεις μόνο μία φορά σε αντίθεση με τα class. Τι θα γινόταν αν ήθελε αργότερα να φτιάξει ένα ίδιο όνομα αλλά δεν μπορούσε; Αλλά εντάξει άλλη φορά θα τον αφήσω στην τύχη του αφού το θες.
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
michalis1984
Δημοσιεύσεις: 384
Εγγραφή: 05 Ιουν 2001 03:00

Προβλημα με CSS

Δημοσίευση από michalis1984 » 26 Απρ 2006 16:16

Γεια σας,

Σας ευχαριστω, patriot,foti για τον χρονο που αφιερώσατε για μενα. :)

Όπως είπε είναι αρχάριος με την γλώσσα και μπορεί να μην ήξερε ότι ένα όνομα div μπορείς να το χρησιμοποιήσεις μόνο μία φορά σε αντίθεση με τα class. Τι θα γινόταν αν ήθελε αργότερα να φτιάξει ένα ίδιο όνομα αλλά δεν μπορούσε;
Όντως, αν καταλαβα καλά, εχωντας ενα div με ονομασία diafimisis δεν μπορει να υπαρξει αλλο με το ιδιο ακριβός όνομα. Αλλα diafimisi μπορει έτσι;

Ειμαι αρχαριος αφου αυτή ήταν η πρώτη μου προσπαθεια να ενταξω CSS κωδικα σε σελιδα μου. Τωρα απλα διορθωσα το προβλημα με το !important αλλα προσπαθω να ετοιμασω ενα νεο template ολοκληρωτικα με CSS. Όλα όσα μου ειπατε ειναι πολυ ενδιαφεροντα, ασχετα αν δεν τα καταλαβαινω όλα :P Εξάλλου, έτσι μαθαινει καποιος :D

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

Προβλημα με CSS

Δημοσίευση από patriot » 26 Απρ 2006 17:33

michalis1984 έγραψε:Όντως, αν καταλαβα καλά, εχωντας ενα div με ονομασία diafimisis δεν μπορει να υπαρξει αλλο με το ιδιο ακριβός όνομα. Αλλα diafimisi μπορει έτσι;
Ναι μπορείς. Αρκεί να είναι άλλο όνομα. Έστω και ένα γράμμα και το όνομα αλλάζει. Μην βάλεις αριθμούς. Ή τουλάχιστον όχι αριθμούς ως πρώτο γραμμα της λέξης.
ασχετα αν δεν τα καταλαβαινω όλα
Υπερβολές! Τα css είναι πολύ εύκολα. Είναι θέμα χρόνου να τα μάθει κανείς. :wink:
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Απάντηση

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

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

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