Στοίχιση στο κέντρο καθέτως και οριζοντίως

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

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

Απάντηση
mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

Στοίχιση στο κέντρο καθέτως και οριζοντίως

Δημοσίευση από mat_ » 17 Νοέμ 2008 04:59

Έχω φτιάξει το εξής intro.htm με το οποίο το #top βρίσκεται πάνω-πάνω, το #bottom κάτω-κάτω και το #intro να βρίσκεται στο κέντρο καθέτως ανεξαρτήτου ανάλυσης (Έχω βάλει και το #page για στοίχιση στο κέντρο οριζοντίως):

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Intro</title>
<style type="text/css">
body &#123; background&#58;white; padding&#58;0; margin&#58;0; &#125;
#page &#123; margin&#58;0 auto; width&#58;500px; &#125;
#top &#123; background&#58;url&#40;images/top.jpg&#41; no-repeat; width&#58;500px; height&#58;100px; &#125;
#intro div &#123;position&#58;relative;min-height&#58;50px !important;&#125;
#intro img &#123;position&#58;absolute;top&#58;50%;margin-top&#58;-25px;&#125;
#bottom &#123; background&#58;url&#40;images/bottom.jpg&#41; no-repeat; width&#58;500px; height&#58;100px; position&#58;fixed; bottom&#58;0px; &#125;
</style></head>
<body>
<div id="page">
<div id="top"></div>
<div id="intro"><img src="images/pic.jpg" /></div>
<div id="bottom"></div>
</div>
</body>
</html>
Παντού λειτουργεί σωστά εκτός από IE 6. O IE 6 δείχνει το #intro στο κέντρο μόνο αν αφαιρέσω το #bottom. Υπάρχει κάποιος τρόπος :question:

Ευχαριστώ

Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

Στοίχιση στο κέντρο καθέτως και οριζοντίως

Δημοσίευση από fusion » 17 Νοέμ 2008 12:12

Ίσως αυτό το screencast μπορεί να σε βοηθήσει.
http://nettuts.com/videos/screencasts/l ... ry-plugin/


προτείνεται βασική γνώση της jQuery

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Στοίχιση στο κέντρο καθέτως και οριζοντίως

Δημοσίευση από korgr » 17 Νοέμ 2008 16:30

Τι έγιναν ξαφνικά όλοι οι tableless lovers και οι web standards soldiers?
Μια απλή ερώτηση έκανε ο άνθρωπος!
Δεν υπάρχει μια απάντηση cross-browsing χωρίς javascript?
Έτσι να μαθαίνουμε και εμείς οι αδαείς σιγά σιγά :P

Και μια απλή ερώτηση:
Χάθηκε ο κόσμος να υπήρχε εκτός από οριζόντια στοίχιση στο κέντρο, και μία για ανάλογη κάθετη στοίχιση;
Έλεος δλδ!
Αυτή είναι η ουσία για την οποία ξελαρυγγιάζομαι ώρες ώρες...

mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

Στοίχιση στο κέντρο καθέτως και οριζοντίως

Δημοσίευση από mat_ » 22 Νοέμ 2008 02:55

Φίλε fusion πολύ καλό αυτό που μου έδωσες, δεν το ήξερα. Δουλεύει άψογα παντού, κεντάρει την εικόνα ακριβώς στο κέντρο, αλλά για κάποιο λόγο, μόνο στον IE6, δεν "εκτελεί" την εντολή του bottom που έχει position: fixed και bottom: 0px. Δηλαδή συμβαίνει το ίδιο πράγμα με τον κώδικα που παράθεσα παραπάνω.

Μου φαίνεται πως θα φτιάξω δυο σελίδες, μια για IE 6 και μία για τους υπόλοιπους...

s-hs

Στοίχιση στο κέντρο καθέτως και οριζοντίως

Δημοσίευση από s-hs » 22 Νοέμ 2008 18:55

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><div align="center">to periexomeno sou </div></td>
</tr>
</table>
</body>
</html>

χρησιμοποίησε αυτό. αλλά αυτός ο κώδικας δεν γίνεται validate

Απάντηση

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

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

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