image caption

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

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

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

image caption

Δημοσίευση από pimpogio » 22 Μαρ 2011 21:23

εχω αυτο το html

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

<div>
<p>
<img style="float&#58;right" src="..." />
keimeno keimeno ktlp....
</p>
</div>
το οποιο εμφανιζει την εικονα δεξια και αριστερα της το κειμενο...

πως θα βαλω λεζαντα πανω στην εικονα ή
ακριβως απο κάτω της ?

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

image caption

Δημοσίευση από fafos » 22 Μαρ 2011 22:07

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


KATO&#58;

<p>

<img style="position&#58;relative;float&#58;right" src="preview.jpg">
<div style="clear&#58;right;"></div>
<div style="position&#58;relative;float&#58;right;top&#58;-30px;z-index&#58;1;">keimeno keimeno ktlp....</div>
<div style="clear&#58;right;"></div>

</p>


EPANO&#58;

<p>

<div style="position&#58;relative;float&#58;right;top&#58;30px;z-index&#58;1;">keimeno keimeno ktlp....</div>
<div style="clear&#58;right;"></div>
<img style="position&#58;relative;float&#58;right" src="preview.jpg">
<div style="clear&#58;right;"></div>

</p>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

image caption

Δημοσίευση από pimpogio » 22 Μαρ 2011 22:38

ευχαριστω πολυ ...

και το κειμενο συνεχιζω να το εχω μεσα στα <p> </p> ?
Εικόνα

αυτο ακριβως θελω αλλα η εικονα να εχει και λεζαντα στο κατω μερος της εικονας εντος
η εκτος εικονας

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

image caption

Δημοσίευση από fafos » 22 Μαρ 2011 22:54

to pio sosto kateme einai na exeis to image kai thn lezanta mesa se ena div opou ekei tha dineis ta floats klp kai oxi sto image.. to keimeno to vazeis meta to image kai to clear kato apo to keimeno:

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

<div style="position&#58;relative;float&#58;right;margin 0 auto;text-align&#58;center;" >
<img src="preview.jpg" border="1" width="100">
<div style="position&#58;relative;top&#58;-30px;z-index&#58;1;margin 0 auto;text-align&#58;center;width&#58;100%;">keimeno</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacus quam, ullamcorper at interdum at, semper non tortor. Ut semper lectus ut est pulvinar eget malesuada est bibendum. Integer sodales aliquet dolor in rhoncus. Vestibulum rutrum euismod tortor sed porttitor. Vivamus metus sem, convallis a mattis eu, ultricies sit amet turpis. 
Nullam vulputate odio vitae urna sollicitudin aliquet scelerisque tellus commodo. Proin lacus lorem, laoreet quis scelerisque vitae, vulputate sed lectus. Integer leo metus, vehicula ut accumsan sed, consectetur eget augue. Nulla interdum elit non magna consequat eget lacinia diam cursus. Etiam sit amet nisl nulla. Maecenas non metus sed libero dapibus porta ut eu urna. Ut fringilla magna eu lacus lobortis laoreet. Sed porta enim eu libero aliquet facilisis in volutpat tortor. Mauris consectetur ultricies dapibus. Sed in sollicitudin leo. Proin in tortor hendrerit lorem interdum convallis id nec lorem. Aliquam hendrerit varius tempus. Nulla feugiat ultricies iaculis. Suspendisse at ligula tortor. Sed pretium mi blandit lectus fringilla mattis. 

<div style="clear&#58;both;"></div>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Απάντηση

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

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

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