css αλυτο προβλημα [SOLVED]

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

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

Απάντηση
pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css αλυτο προβλημα [SOLVED]

Δημοσίευση από pimpogio » 31 Ιαν 2011 01:21

θελω να κανω μια fluid gallery με min-width:960px και max-width:1800px
τα thumbnails εχουνε width:200px;

εχουμε ας πουμε το παρακατω..

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

<ul>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
<li><img src="thumb.jpg" />σχολιο</li>
</ul>
Θελω αναλογα το width του browser να μπαινουνε οσο το δυνατον περισσοτερα thumbs
σε καθε γραμμη και να κεντράρονται ωστε να εχουνε ισες αποστασεις μεταξυ τους και απο τα ακρα οποτε το float:left δεν κανει δουλεια γιατι δεν τα κεντραρει...
επισης αμα την κανω με table κεντραροντε αλλα ειναι προκαθορισμενος ο αριθμος
των thumbs σε καθε γραμμη.
Υπαρχει κανεις που να μπορει να λυσει αυτο το προβλημα με css ?
Ευχαριστω εκ των προτέρων οποιο ριξει ιδεα εστω και με javascript..
Τελευταία επεξεργασία από το μέλος pimpogio την 01 Φεβ 2011 04:52, έχει επεξεργασθεί 1 φορά συνολικά.

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

css αλυτο προβλημα [SOLVED]

Δημοσίευση από Akina » 31 Ιαν 2011 06:36

με css δεν μπορεί να γίνει αυτό γιατί δεν έχεις το width του browser, με javasript μπορείς να το κανεις ...

http://www.howtocreate.co.uk/tutorials/ ... wserwindow

αφού πάρεις το browser width κανεις τις ανάλογες πράξεις μέσα σε μια for που έχει τον αρθμό τον image σου και φορτώνεις το αντίστοιχο table που θες .... με τα tr td που σου χρειάζονται ώστε να έχεις το σωστό αποτέλεσμα.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

css αλυτο προβλημα [SOLVED]

Δημοσίευση από nbc » 31 Ιαν 2011 08:12

Μια χαρά γίνεται:

CSS

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

.centerlis
    &#123;
    overflow    &#58; hidden;
    width       &#58; 100%;     /* IE6 */
    position    &#58; relative; /* IE7 */
    &#125;
.centerlis ul
    &#123;
    float       &#58; left;
    position    &#58; relative;
    left        &#58; 50%;
    text-align  &#58; center;
    &#125;
.centerlis ul li
    &#123;
    float       &#58; left;
    position    &#58; relative;
    right       &#58; 50%;
    text-align  &#58; center;
    margin      &#58; 5px;
    width       &#58; 200px;
    height      &#58; 100px;
    background  &#58; red;
    &#125;
markup

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

<div class="centerlis">
<ul>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
</ul>    
</div>
Μπορείς να αντικαταστήσεις το width:100% με τα min/max που ζητάς ή ότι άλλο θέλεις. Το height των li είναι για το παράδειγμα. Μπορεί να είναι auto.

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

css αλυτο προβλημα [SOLVED]

Δημοσίευση από Akina » 31 Ιαν 2011 12:22

O.o φοβερό :) και δουλεύει άψογα εντέλει όντως γίνετε ^^

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css αλυτο προβλημα [SOLVED]

Δημοσίευση από pimpogio » 31 Ιαν 2011 12:39

nbc έγραψε:Μια χαρά γίνεται:

CSS

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

.centerlis
    &#123;
    overflow    &#58; hidden;
    width       &#58; 100%;     /* IE6 */
    position    &#58; relative; /* IE7 */
    &#125;
.centerlis ul
    &#123;
    float       &#58; left;
    position    &#58; relative;
    left        &#58; 50%;
    text-align  &#58; center;
    &#125;
.centerlis ul li
    &#123;
    float       &#58; left;
    position    &#58; relative;
    right       &#58; 50%;
    text-align  &#58; center;
    margin      &#58; 5px;
    width       &#58; 200px;
    height      &#58; 100px;
    background  &#58; red;
    &#125;
markup

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

<div class="centerlis">
<ul>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li>
</ul>    
</div>
Μπορείς να αντικαταστήσεις το width:100% με τα min/max που ζητάς ή ότι άλλο θέλεις. Το height των li είναι για το παράδειγμα. Μπορεί να είναι auto.
ωραιο το κολπο σου αλλα εμενα δε φαινετε να μου παιζει ...
Δες σε παρακαλω αμα μπορεις το attachment...
Συνημμένα
g.zip
(14.41 KiB) Μεταφορτώθηκε 296 φορές

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css αλυτο προβλημα [SOLVED]

Δημοσίευση από pimpogio » 31 Ιαν 2011 12:58

Akina έγραψε:O.o φοβερό :) και δουλεύει άψογα εντέλει όντως γίνετε ^^
βασικα εμενα δεν μου δουλευει ... κατι κανω λαθος ισως ..
εσενα πως σου επαιξε ? μπορεις να δεις το attachment ?

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

css αλυτο προβλημα [SOLVED]

Δημοσίευση από Akina » 31 Ιαν 2011 13:07

ωραιο το κολπο σου αλλα εμενα δε φαινετε να μου παιζει ...
Δες σε παρακαλω αμα μπορεις το attachment...
εννοείς αυτό εδώ ότι δεν δουλεύει ?
σε καθε γραμμη και να κεντράρονται ωστε να εχουνε ισες αποστασεις μεταξυ

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

css αλυτο προβλημα [SOLVED]

Δημοσίευση από nbc » 31 Ιαν 2011 13:25

pimpogio έγραψε:ωραιο το κολπο σου αλλα εμενα δε φαινετε να μου παιζει ...
Δες σε παρακαλω αμα μπορεις το attachment...
Το είδα, μια χαρά είναι. Αν έχεις HD οθόνη (> 1500), τότε λογικά θα σου φαίνονται έκκεντρα, λόγω του max width περιορισμού που έχεις (σε συνδυασμό με το li width που δεν διαιρείται ακριβώς). Αν αφήσεις το div ελεύθερο (100%), θα δεις ότι κεντράρεται απόλυτα σε οποιαδήποτε ανάλυση.

Μεταξύ μας, δε βρίσκω λόγω για το min/max περιορισμό. Σε πραγματικές συνθήκες, το div θα ανήκει κάπου, σε ένα ευρύτερο container, θα υπάρχουν στήλες, κλπ, και το επιθυμητό είναι η λίστα να καταλάβει όλον τον χώρο που της αναλογεί. Εν πάσει περιπτώσει, αν χρωματίσεις το div θα δεις τα li σου κεντραρισμένα, που είναι το ζητούμενο.

Κι έτσι όμως, το πρόβλημα λύνεται με την προσθήκη ενός "margin: 0 auto" στο div.

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css αλυτο προβλημα [SOLVED]

Δημοσίευση από pimpogio » 31 Ιαν 2011 14:36

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

<style type="text/css">
<!--
body&#123;margin&#58;5px auto;padding&#58;0;width&#58;98%;border&#58; 1px solid #000;&#125;
a&#123;text-decoration&#58;none;&#125;
.centerlis&#123;
    overflow    &#58; hidden;
    width       &#58; 100%;     /* IE6 */
    position    &#58; relative; /* IE7 */
    &#125;
	
.centerlis ul li a img &#123;border&#58;0;&#125;
.centerlis ul&#123;
    float       &#58; left;
    position    &#58; relative;
    left        &#58; 50%;
    text-align  &#58; center;
	list-style&#58;none;
	display&#58;block;

    &#125;
.centerlis ul li&#123;
    float       &#58; left;
    position    &#58; relative;
    right       &#58; 50%;
	padding&#58;5px 0;
    text-align  &#58; center;
    margin      &#58;5px;
    width       &#58; 230px;
    height      &#58; auto;
    background  &#58; grey;
	border&#58;1px solid #333;
	display&#58;block;
    &#125; 
&#125;
-->
</style>

βαλτε αυτο το css στο html που ανεβασα ποιο πριν να δειτε οτι δεν μου παιζει σωστα...
εχω βαλει border στο body για debug... καντε μερικα resize στο browser..
Εσας πως σας παιζει ?

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

css αλυτο προβλημα [SOLVED]

Δημοσίευση από Akina » 31 Ιαν 2011 14:45

σε ποιον browser το δοκιμάζεις ?
μου φαίνεται απίθανο να μην σου δουλεύει γιατί ο τρόπος που σου έδωσε ο nbc είναι ο ίδιος που κατασκευάζουνε τα menu αν μπορείς εξήγησε λίγο τι δεν σου δουλεύει για να μπορέσουμε να σε βοηθήσουμε

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

css αλυτο προβλημα [SOLVED]

Δημοσίευση από Akina » 31 Ιαν 2011 14:57

το μονο που βλέπω εγώ είναι αυτό που σου έχει δοθεί λύση ..
nbc έγραψε: Κι έτσι όμως, το πρόβλημα λύνεται με την προσθήκη ενός "margin: 0 auto" στο div.

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css αλυτο προβλημα [SOLVED]

Δημοσίευση από pimpogio » 31 Ιαν 2011 14:58

σε firefox 3.6 δεν μου παιζει σωστα αλλα σε ie 8 και σε chrome...

δοκιμασε το και εσυ με το παραπανω css και το html
αρχειο και την εικονα που ανεβασα παραπανω.

Παιζει αλλα δεν παιζει σωστα δηλαδη χανει στο κεντραρισμα και αυτο φαινετε αμα κανεις resize το παραθυρο του browser

με margin: 0 auto δεν φτιαχνει ... μολις το δοκιμασα...

σε πολυ καλο δρομο ειναι αλλα κατι λείπει ακομα για να παιξει σωστα
Συνημμένα
Capture_5.jpg
εδω ειναι πως φαινετε σε 1024 width ο browser

billiaswhs
Δημοσιεύσεις: 346
Εγγραφή: 11 Νοέμ 2004 00:29
Επικοινωνία:

css αλυτο προβλημα [SOLVED]

Δημοσίευση από billiaswhs » 01 Φεβ 2011 01:00

στο .centerlis μέσα θέλει το margin:0 auto; μήπως το έβαλες στο body?

pimpogio
Δημοσιεύσεις: 1080
Εγγραφή: 28 Δεκ 2010 14:08

css αλυτο προβλημα [SOLVED]

Δημοσίευση από pimpogio » 01 Φεβ 2011 01:22

billiaswhs έγραψε:στο .centerlis μέσα θέλει το margin:0 auto; μήπως το έβαλες στο body?
το εβαλα και στο .centerlis και δεν τα κεντραρει σωστα...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

css αλυτο προβλημα [SOLVED]

Δημοσίευση από fafos » 01 Φεβ 2011 02:51

inline-block:

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


body
&#123;
	width&#58;98%;
	border&#58;1px solid #000;
	text-align&#58;center;
	margin&#58;5px auto;
	padding&#58;0;
&#125;

a
&#123;
	text-decoration&#58;none;
&#125;

.centerlis ul li a img
&#123;
	border&#58;0;
&#125;

.centerlis ul
&#123;
	list-style-type&#58;none;
	text-align&#58;center;
	position&#58;relative;
	margin&#58;0 auto;
	padding&#58;0;
&#125;

.centerlis ul li
&#123;
	text-align&#58;center;
	width&#58;230px;
	height&#58;auto;
	background&#58;grey;
	display&#58;inline-block;
	margin&#58;5px;
	padding&#58;5px 0;
&#125;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

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

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

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