center image

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

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

Απάντηση
hydrogen_factory
Δημοσιεύσεις: 119
Εγγραφή: 20 Μάιος 2005 03:19

center image

Δημοσίευση από hydrogen_factory » 09 Δεκ 2009 02:51

Το div που εμφανιζει τη φωτογραφια μου καλει το εξεις class

.image{position:relative;left:0;top:0;height:180px;z-index:1;overflow:hidden;display:block;}

ετσι μου την εμφανιζει τερμα αριστερα, υπαρχει τροπος να την βαλω στο κεντρο αυτοματα.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

center image

Δημοσίευση από Basilakis » 09 Δεκ 2009 09:36

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

 margin: 0 auto;
μέσα στο css του Image

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

center image

Δημοσίευση από korgr » 09 Δεκ 2009 12:00

Basilakis έγραψε:

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

 margin: 0 auto;
μέσα στο css του Image
Βασιλη?
Ντροπη!
Μα να σε διορθωνει ενας tableας? :P (πλάκα κάνω)

Για να δουλεψει αυτο θα πρεπει να ορισεις το img ως display:block διαφορετικα το margin: 0 auto; δεν θα εχει καμια επιδραση :)

Δηλαδη ενω κανει δουλεια το

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

<img src="image.jpg" style="display&#58;block; margin&#58; 0 auto" />
δεν θα δουλέψει σωστα το

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

<img src="image.jpg" style="margin&#58; 0 auto" />

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

center image

Δημοσίευση από Basilakis » 09 Δεκ 2009 12:13

Σωστός μου διέφυγε!!!! :lol: :lol:

Η αλήθεια είναι πως και εγώ tablelover είμαι :P

hydrogen_factory
Δημοσιεύσεις: 119
Εγγραφή: 20 Μάιος 2005 03:19

center image

Δημοσίευση από hydrogen_factory » 09 Δεκ 2009 13:08

Κανω αυτο που ειπατε.
Προς στιγμη τη βαζει στο κεντρο, αλλα μολις ολοκληρωθει το φορτωμα της σελιδας την πηγαινει παλι αριστερα.
Προκειται για το ενθεμα roknewsrotator της rocket theme.
Καμια ιδεα περι του τη πηγαινει στραβα.

Να και ο κωδιακας

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

        <div class="image">
            <?php if &#40;$item->mainimage&#41; &#123; ?>
                <?php if &#40;$params->get&#40;'linkimage'&#41;==1&#41; &#123; ?>
                    <a href="<?php echo $item->link; ?>" title="<?php echo $item->title; ?>"><img src="<?php echo $item->mainimage ?>" style="display&#58;block; margin&#58; 0 auto" alt="<?php echo $item->title; ?>" /></a>
                <?php &#125; else &#123; ?>
                    <img src="<?php echo $item->mainimage ?>" alt="<?php echo $item->title; ?>" />
                <?php &#125; ?>
            <?php &#125; ?>
        </div>

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

center image

Δημοσίευση από korgr » 09 Δεκ 2009 14:36

Αυτη τη στιγμη βρισκεσαι μεσα στο div class="image"
Πρεπει να τσεκαρεις τι ιδιοτητες εχει αυτο το class γιατι ο κωδικας που σου δωσαμε ισχυει για img που το ριχνεις στο <body> και οχι μεσα σε κατι αλλο. Διαφορετικα το κεντραρει οχι στη σελιδα αλλα μεσα στο "κατι αλλο".
Βρες στο css την γραμμη που αρχιζει με .image και παιξε εκει μεσα με τις ιδιοτητες

hydrogen_factory
Δημοσιεύσεις: 119
Εγγραφή: 20 Μάιος 2005 03:19

center image

Δημοσίευση από hydrogen_factory » 09 Δεκ 2009 17:23

korgr έγραψε:Αυτη τη στιγμη βρισκεσαι μεσα στο div class="image"
Πρεπει να τσεκαρεις τι ιδιοτητες εχει αυτο το class γιατι ο κωδικας που σου δωσαμε ισχυει για img που το ριχνεις στο <body> και οχι μεσα σε κατι αλλο. Διαφορετικα το κεντραρει οχι στη σελιδα αλλα μεσα στο "κατι αλλο".
Βρες στο css την γραμμη που αρχιζει με .image και παιξε εκει μεσα με τις ιδιοτητες
Στο πρωτο post αυτο εγραψα. Οτι και να δοκιμασα ομως δεν μου πετυχε αυτο που ηθελα.
Εχεται καμια ιδεα.

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

.image&#123;position&#58;relative;left&#58;0;top&#58;0;height&#58;180px;z-index&#58;1;overflow&#58;hidden;display&#58;block;&#125;

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

center image

Δημοσίευση από korgr » 09 Δεκ 2009 18:44

Στον κωδικα σου εχει και image με link, και σκετο image.
Εσυ μονο για το link-image ενδιαφερεσαι και εβαλες μονο εκει τον κωδικα που σου δωσαμε?
Επισης δοκιμασε και αυτο:

<div class="image" style="margin: 0 auto">

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

center image

Δημοσίευση από Basilakis » 09 Δεκ 2009 18:53

γύρισες στο δικό μου ο korgr :P

βγάλε το position:relative; απο τον κώδικα σου :)

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

center image

Δημοσίευση από korgr » 09 Δεκ 2009 18:55

Basilakis έγραψε:γύρισες στο δικό μου ο korgr :P

βγάλε το position:relative; απο τον κώδικα σου :)
Το display:block υπαρχει ηδη στην κλαση .image γι' αυτο δεν το εβαλα :P
Πλακα εχουμε :lol:

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

center image

Δημοσίευση από Basilakis » 09 Δεκ 2009 19:07

Πολύ! :D:D

λοιπόν ο κώδικας full

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

IMG.image &#123;
    display&#58; block;
    margin-left&#58; auto;
    margin-right&#58; auto &#125;
και το html tag

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

<IMG class="image" src="..." alt="...">

hydrogen_factory
Δημοσιεύσεις: 119
Εγγραφή: 20 Μάιος 2005 03:19

center image

Δημοσίευση από hydrogen_factory » 09 Δεκ 2009 19:25

Παλι δεν μου καθησε, για ριξτε μια ματια σε ολο τον κωδικα του ενθεματος.

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

<div id="news-rotator">
<?php foreach &#40;$list as $item&#41; &#58;  ?>
    <div class="story-block">
		<div class="divider">
        <div class="image">
            <?php if &#40;$item->mainimage&#41; &#123; ?>
                <?php if &#40;$params->get&#40;'linkimage'&#41;==1&#41; &#123; ?>
                    <a href="<?php echo $item->link; ?>" title="<?php echo $item->title; ?>"><img class="image" src="<?php echo $item->mainimage ?>" alt="<?php echo $item->title; ?>" /></a>
                <?php &#125; else &#123; ?>
                    <img class="image" src="<?php echo $item->mainimage ?>" alt="<?php echo $item->title; ?>" />
                <?php &#125; ?>
            <?php &#125; ?>
        </div>
        <div class="story">
            <div class="padding">
                <?php if &#40;$params->get&#40;'linktitle'&#41;==1&#41; &#123; ?>
                <h1><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h1>
                <?php &#125; else &#123; ?>
                <h1><?php echo $item->title; ?></h1>
                <?php &#125; ?>
                <p>
                   <?php echo $item->introtext; ?> 
                   <?php if &#40;$params->get&#40;'linktitle'&#41;!=1&#41; &#123; ?>
                   <a href="<?php echo $item->link; ?>" class="readon"><?php echo $params->get&#40;'readmore'&#41;; ?></a>    
                   <?php &#125; ?>
                </p>
            </div>
        </div>
    </div>
    </div>
<?php endforeach; ?>
</div>
Και το css , οπως το εκανα

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

#news-rotator .image&#123;display&#58;block;margin-left&#58;auto;margin-right&#58;auto&#125;

Απάντηση

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

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

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