Κεντράρισμα foto

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

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

Απάντηση
s-hs

Κεντράρισμα foto

Δημοσίευση από s-hs » 16 Ιουν 2006 13:34

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

lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

Κεντράρισμα foto

Δημοσίευση από lakritidis » 16 Ιουν 2006 15:33

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

<p align="center">
<img src="...." width=".." height=".." />
</p>

s-hs

Κεντράρισμα foto

Δημοσίευση από s-hs » 16 Ιουν 2006 16:11

μάλλον το διατύπωσα λάθος.την θέλω στο κέντρο και στην μέση της οθόνης.

Άβαταρ μέλους
milianos
Δημοσιεύσεις: 269
Εγγραφή: 11 Νοέμ 2004 01:39
Τοποθεσία: schwabenland
Επικοινωνία:

Κεντράρισμα foto

Δημοσίευση από milianos » 16 Ιουν 2006 19:26

s-hs έγραψε:...την θέλω στο κέντρο και στην μέση της οθόνης.
Αυτό είναι σχετικό !

Μπορείς ακόμα με Margin να κεντράρεις μια φωτογραφία. Εδω ενα παράδειγμα(1280χ1024) όπου φαίνονται και μερικά άλλα "κόλπα" , διπλό πλαίσιο (borders), ενα ebene με text πάνω στην φωτογραφία κλπ.

http://www.interema.de/aktuell/berge.htm

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

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<title>Κεντράρισμα φωτογραφίας</title>
<style type="text/css"> 
      body &#123; 
        background&#58; #006666; 
      &#125; 

      p.imgcenter &#123; 
        background-color&#58; #006666; 
        margin&#58; 230px 0 0 0; 
        text-align&#58; center; 
      &#125; 

      img &#123; 
        padding&#58; 0px; 
        background&#58; #fff; 
        border&#58; 5px; 
        border-style&#58; double; 
        border-color&#58; red; 
       &#125; 
    </style>
</head>

<body>

<div style="position&#58;absolute; left&#58;426px; top&#58;303px; color&#58;white; font-size&#58;1.2em; font-family&#58;Georgia; z-index&#58; 1">
	Κεντράρισμα <br>
	μιάς φωτογραφίας</div>
<p class="imgcenter">
<img src="http&#58;//www.interema.de/aktuell/berge.jpg" alt="berge" width="450" height="337">
</p>

</body>

</html>

lakritidis
Δημοσιεύσεις: 401
Εγγραφή: 04 Αύγ 2005 14:35
Τοποθεσία: Katerini
Επικοινωνία:

Κεντράρισμα foto

Δημοσίευση από lakritidis » 17 Ιουν 2006 13:54

Δες αυτό

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

<table width=100% height=100%>
<tr>
<td align="center" valign="middle"><img src=".." width=".." height=".." /></td>
</tr>
</table>

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Κεντράρισμα foto

Δημοσίευση από skeftomilos » 18 Ιουν 2006 00:06

Ο κώδικας του Lakritidis ελαφρά αλλαγμένος, με CSS αντί για HTML attributes (δεν είναι δοκιμασμένος).

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

<table style="width&#58;100%;height&#58;100%">
  <tr>
    <td style="text-align&#58;center;vertical-align&#58;middle">
      <img src="your-picture.gif">
    </td>
  </tr>
</table>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Κεντράρισμα foto

Δημοσίευση από skeftomilos » 18 Ιουν 2006 01:42

Έκανα μερικά πειράματα. Το παρακάτω δούλεψε αλλά δε μου φαίνεται και πολύ σωστό να μπει η εικόνα σαν background (δε μπορεί να γίνει scrolling και save):

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

<html>
  <head>
    <style type="text/css">
      body &#123;
        background-image&#58;url&#40;picture.png&#41;;
        background-repeat&#58; no-repeat;
        background-position&#58; center center;
        height&#58;100%;
      &#125;
    </style>
  </head>
  <body>
  </body>
</html>
Μετά στήριξα τις ελπίδες μου στην ιδέα display:table, αλλά δυστυχώς ο IE δε συνεργάστηκε.

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

<html>
  <head>
    <style type="text/css">
      html &#123;
        display&#58;table;
        width&#58;100%;
        height&#58;100%;
      &#125;
      body &#123;
        display&#58;table-cell;
        height&#58;100%;
        width&#58;100%;
        text-align&#58;center;
        vertical-align&#58;middle;
      &#125;
    </style>
  </head>
  <body>
    <img src="picture.png">
  </body>
</html>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
softius
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

Κεντράρισμα foto

Δημοσίευση από softius » 18 Ιουν 2006 22:38

Είχα γράψει κάτι σχετικό πριν καιρό, δεν είμαι σίγουρος όμως αν όντως αυτό ζητάς :)

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Κεντράρισμα foto

Δημοσίευση από skeftomilos » 19 Ιουν 2006 04:46

Ναι, αυτό είναι το ζητούμενο. Η λύση με table είναι εύκολη, σύντομη, ασφαλής και ευανάγνωστη, αλλά θα ήθελα να ήξερα και μια λύση με css. Προϋπόθεση να μην είναι προκαθορισμένες οι διαστάσεις τις εικόνας/κειμένου (και να μην έχει πολλά hacks το css).
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Megistos
Δημοσιεύσεις: 149
Εγγραφή: 14 Ιουν 2005 15:38

Κεντράρισμα foto

Δημοσίευση από Megistos » 27 Ιουν 2006 15:10

όταν λες css, καθαρό css ή με table & css αντί για το ολίγον εύθραυστον "height=100%";
The Flame Still Burns

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Κεντράρισμα foto

Δημοσίευση από skeftomilos » 28 Ιουν 2006 03:53

Καθαρό CSS βέβαια. Και το ανάμικτο καλό είναι αλλά δύσκολα δίνει πόντους. :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Megistos
Δημοσιεύσεις: 149
Εγγραφή: 14 Ιουν 2005 15:38

Κεντράρισμα foto

Δημοσίευση από Megistos » 28 Ιουν 2006 12:09

Με "ακάθαρτο" πάντως αυτό που δουλεύει άψογα είναι ένας μικρός συνδυασμός των 2 λύσεων που πρότεινες.

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

<table style="width&#58;100%;height&#58;100%"> 
  <tr> 
    <td style="text-align&#58;center;vertical-align&#58;middle"> 
      <img src="your-picture.gif"> 
    </td> 
  </tr> 
</table>
με πακέτο:

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

<style type="text/css"> 
 html &#123; height&#58;100%; &#125; 
 body &#123; height&#58;100%; &#125; 
</style> 
The Flame Still Burns


Άβαταρ μέλους
dapadoupas
Δημοσιεύσεις: 34
Εγγραφή: 29 Ιούλ 2009 16:43
Τοποθεσία: athina

Κεντράρισμα foto

Δημοσίευση από dapadoupas » 27 Ιαν 2010 19:45

αν θέλουμε να είναι και link? Βασικά το πρόβλημα είναι οτι δεν μου φορτώνει σωστα με απλή html σε flash htmlText και ψάχνω κάποια παράπλευρη λύση.

Απάντηση

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

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

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