Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

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

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

Απάντηση
kostaspel
Δημοσιεύσεις: 86
Εγγραφή: 04 Μαρ 2008 12:38

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από kostaspel » 20 Φεβ 2009 12:33

Καλησπέρα σε όλους.

Είμαι νέος στο άθλημα που λέγεται CSS και θα ήθελα τα φώτα σας σχετικά με τη στοίχιση μια ιστοσελίδας. Οι διαστάσεις είναι 900 x 540 και θέλω να είναι στοιχισμένη στο κέντρο και στους 2 άξονες και να παραμένει στο κέντρο όταν κάποιος κάνει resize. Στον οριζόντιο ok στον κάθετο…?

Ευχαριστώ για το χρόνο σας!

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από cdhyper » 20 Φεβ 2009 15:40

Σε tables φτιάχνεις ένα table 100% σε width και height, ένα td align center και ένα vertical align middle και είσαι οκ, εκεί μέσα στο td βάζεις το αντικείμενο που θες. Στα divs θα βάλεις 526.32 pixels από πάνω με 24.9 pixels absrightauto middle overflow hidden margin automoto και είναι κομπλέ :)
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

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

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από korgr » 20 Φεβ 2009 20:17

cdhyper έγραψε:Στα divs θα βάλεις 526.32 pixels από πάνω με 24.9 pixels absrightauto middle overflow hidden margin automoto και είναι κομπλέ :)
:lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:

Μου 'φτιαξες το βράδυ μιλάμε! :kaloe:

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

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από chchrist » 03 Μαρ 2009 10:46

Α ρε cdhyper χιουμορίστα!

Εγώ πάντως χρησιμοποιώ αυτή την tableless λύση...

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

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

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από korgr » 04 Μαρ 2009 08:49

και εκεινο το linkακι που εχεις στο footer τι γινεται οταν μικραίνει αρκετά σε υψος το παραθυρο?
Μήπως καβαλάει στο περιεχομενο και γινεται mixed soup? (τουλαχιστον στον ff μου)

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

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από chchrist » 04 Μαρ 2009 10:32

Βλέποντας το source αυτό κατάλαβες;

giwrgos85
Δημοσιεύσεις: 33
Εγγραφή: 12 Οκτ 2007 19:39

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από giwrgos85 » 04 Μαρ 2009 22:40

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">

	* &#123;
		margin&#58;0;
		padding&#58;0;
		&#125;

	html, body &#123;
		height&#58;100%;
		&#125;

	body &#123;
		background-color&#58;#7F7F7F;
		color&#58;#FFFFFF;
		font&#58;100.01%/1.4 sans-serif;
		text-align&#58;center; /* horizontal centering for IE Win quirks */
		&#125;

	#distance &#123; 
		width&#58;1px;
		height&#58;50%;
		background-color&#58;#fc6;
		margin-bottom&#58;-13.75em; /* half of container's height */
		float&#58;left;
		&#125;

	#container &#123;
		margin&#58;0 auto;
		position&#58;relative; /* puts container in front of distance */
		text-align&#58;left;
		height&#58;35em;
		width&#58;67.5em;
		clear&#58;left;
		background-color&#58;#7F7F7F;
		border&#58;1px solid #c50;
		border-top-color&#58;#fff;
		border-left-color&#58;#fff;
		&#125;

	#container div &#123;
		font-size&#58;80%;
		float&#58;right;
		width&#58;17em;
		margin-left&#58;2em;
		&#125;

	#container div h2 &#123;
		font-size&#58;120%;
		font-weight&#58;bold;
		text-transform&#58;uppercase;
		margin&#58;1em 0 0;
		&#125;

	#container div h3 &#123;
		font-size&#58;100%;
		font-weight&#58;bold;
		margin&#58;.5em 0 0 .75em;
		&#125;

	#container ul &#123;
		margin-left&#58;2em;
		&#125;

	#container li span &#123;
		font-size&#58;70%;
		&#125;
		

	#container h1 &#123;
		font-size&#58;120%;
		padding-top&#58;2.4em;
		margin-left&#58;2.4em;
		&#125;

	#container p &#123;
		margin&#58;1.5em 13.6em 1.5em 3em;
		&#125;

	address &#123;
		font-weight&#58;normal;
		font-size&#58;80%;
		font-style&#58;normal;
		text-align&#58;right;
		margin&#58;0 20em 0 3em;
		&#125;

body,td,th &#123;
	font-family&#58; Verdana, Arial, Helvetica, sans-serif;
&#125;
</style></head>
<body>

	<div id="distance"></div>
	<div id="container">
	  <h1>&nbsp;</h1>
</div>

</body>
</html>

ευχαριστώ εκ των προτέρων

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

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από korgr » 05 Μαρ 2009 13:32

chchrist έγραψε:Βλέποντας το source αυτό κατάλαβες;
Ενα απλο resize στο παραθυρο του browser εκανα και ηταν αρκετο να δω το ΓΝΩΣΤΟ προβλημα με τα ματακια μου. Με το source γιατι να ασχοληθω???
Αν εχεις κατι να πεις επι του θεματος (λυση) πες το αλλιως καλυτερα save it! :x

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

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από korgr » 06 Μαρ 2009 20:26

giwrgos85 έγραψε:καλησπερα και απο μένα. έχω το ίδιο πρόβλημα με το παλικάρι που έκανε το ποστ και είπα να μη δημιουργήσω ξεχωριστό τοπικ.

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

ευχαριστώ εκ των προτέρων

Η λυση σου:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS vertical center using float and clear</title>
<style type="text/css">

   * &#123;
      margin&#58;0;
      padding&#58;0;
      &#125;

   html, body &#123;
      height&#58;100%;
      &#125;

   body &#123;
      background-color&#58;#7F7F7F;
      color&#58;#FFFFFF;
      font&#58;100.01%/1.4 sans-serif;
      text-align&#58;center; /* horizontal centering for IE Win quirks */
      &#125;

   #distance &#123;
      width&#58;1px;
      height&#58;50%;
      background-color&#58;#fc6;
      margin-bottom&#58;-17.5em; /* half of container's height */
      float&#58;left;
      &#125;

   #container &#123;
      margin&#58;0 auto;
      position&#58;relative; /* puts container in front of distance */
      text-align&#58;left;
      height&#58;35em;
      width&#58;67.5em;
      clear&#58;left;
      background-color&#58;#7F7F7F;
      border&#58;1px solid #c50;
      border-top-color&#58;#fff;
      border-left-color&#58;#fff;
      &#125;

   #container div &#123;
      font-size&#58;80%;
      float&#58;right;
      width&#58;17em;
      margin-left&#58;2em;
      &#125;

   #container div h2 &#123;
      font-size&#58;120%;
      font-weight&#58;bold;
      text-transform&#58;uppercase;
      margin&#58;1em 0 0;
      &#125;

   #container div h3 &#123;
      font-size&#58;100%;
      font-weight&#58;bold;
      margin&#58;.5em 0 0 .75em;
      &#125;

   #container ul &#123;
      margin-left&#58;2em;
      &#125;

   #container li span &#123;
      font-size&#58;70%;
      &#125;
      

   #container h1 &#123;
      font-size&#58;120%;
      padding-top&#58;2.4em;
      margin-left&#58;2.4em;
      &#125;

   #container p &#123;
      margin&#58;1.5em 13.6em 1.5em 3em;
      &#125;

   address &#123;
      font-weight&#58;normal;
      font-size&#58;80%;
      font-style&#58;normal;
      text-align&#58;right;
      margin&#58;0 20em 0 3em;
      &#125;

body,td,th &#123;
   font-family&#58; Verdana, Arial, Helvetica, sans-serif;
&#125;
</style></head>
<body>

   <div id="distance"></div>
   <div id="container">
     <h1>&nbsp;</h1>
</div>

</body>
</html>

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από cdhyper » 07 Μαρ 2009 16:35

font:100.01%/1.4 sans-serif; ????

Τι είναι αυτά εδώ ωρέ παλληκάρια; :kaloe:
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

giwrgos85
Δημοσιεύσεις: 33
Εγγραφή: 12 Οκτ 2007 19:39

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από giwrgos85 » 08 Μαρ 2009 22:13

korgr eisai wraios file!!
to epsa3a kai egw kai to xa vrei to lathos mou kai ola ok, alla kai pali se euxaristw ;)

ibizakias
Δημοσιεύσεις: 154
Εγγραφή: 23 Απρ 2008 11:34

Στοίχιση ιστοσελίδας στο απόλυτο κέντρο

Δημοσίευση από ibizakias » 23 Μαρ 2009 11:15

Γίνεται με κάποιο τρόπο το site μου ολόκληρο να κάνει resize ανάλογα την οθόνη και την ανάλυση αυτού που το επισκέπτεται;

Απάντηση

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

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

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