text over image χωρις position

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

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

Απάντηση
charkoul
Δημοσιεύσεις: 30
Εγγραφή: 20 Ιουν 2011 13:47

text over image χωρις position

Δημοσίευση από charkoul » 18 Νοέμ 2012 22:49

γινεται να φτιαξω με css ενα τροπο να παιρνω το παρακατω χωρις να οριζω εγω τη θεση του κειμενου μεσα στην εικονα πειραζοντας το position?

Εικόνα

το μονο που εχω κανει ειναι να φερνω πανω το κειμενο

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

img+p{
	display: inline;
	
}

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

<img src="images/1.jpg" width="466" height="358" alt="img" />
<p><a href="a link">κειμενο</a></p>
 

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

text over image χωρις position

Δημοσίευση από korgr » 19 Νοέμ 2012 09:33

Αν θέλεις το κείμενο να εμφανίζεται πάντα σαν λεζάντα στο ίδιο σημείο της κάθε εικόνας (πχ κεντραρισμένο και στο κάτω μέρος) μπορείς να το πετύχεις με κάτι τέτοιο:

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.image_container&#123;
	display&#58; inline-block;
	text-align&#58; center;
&#125;
.image_container p&#123;
	margin-top&#58; -40px;
&#125;
</style>
</head>
<body>

<div class="image_container">
<img src="myImage.jpg" width="500" height="350">
<p>This is an image description</p>
</div>

</body>
</html>


Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

text over image χωρις position

Δημοσίευση από Khronos » 19 Νοέμ 2012 09:38

Ή η εικόνα να μπει σαν background.

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

text over image χωρις position

Δημοσίευση από korgr » 19 Νοέμ 2012 10:23

Khronos έγραψε:Ή η εικόνα να μπει σαν background.
Δεν θα έχουμε πρόβλημα με τα διάφορα μεγέθη των εικόνων;

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

text over image χωρις position

Δημοσίευση από Khronos » 19 Νοέμ 2012 11:10

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

charkoul
Δημοσιεύσεις: 30
Εγγραφή: 20 Ιουν 2011 13:47

text over image χωρις position

Δημοσίευση από charkoul » 19 Νοέμ 2012 14:33

εγω κανονικα θα ηθελα να φτιαξω τατι σαν αυτο
Εικόνα

οταν η html εχει τη μορφη

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

<ul class="images">
<li>
<img src="green.jpg" />
<p><a href="a lnk">κειμενο</a></p>
</li>

<li>
<img src="pink.jpg" />
<p><a href="a lnk">κειμενο</a></p>
</li>

<li>
<img src="yellow.jpg" />
<p><a href="a lnk">κειμενο</a></p>
</li>

<li>
<img src="blue.jpg" />
<p><a href="a lnk">κειμενο</a></p>
</li>




alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

text over image χωρις position

Δημοσίευση από alou » 19 Νοέμ 2012 16:20

Αν μπορείς να βάλεις ένα wrap στο image:

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

<li>
<span class="fifty"><img src="animage.png" /></span>
<p><a href="a lnk">κειμενο</a></p>
</li>
και

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

span.fifty &#123;display&#58;block;height&#58;50px;&#125;
Θα πάει το p στα 50px από την αρχή του li. Όμως θα πρέπει να ορίσεις ένα σταθερό ύψος για το li αν το κάνεις float για να μην πέσουν και άλλα στοιχεία πάνω του.

Αλλιώς σε κάποιο από όλα πρέπει να ορίσεις position (ακόμα και για το αρνητικό margin, σε IE χωρίς position:relative ίσως έχεις πρόβλημα).

charkoul
Δημοσιεύσεις: 30
Εγγραφή: 20 Ιουν 2011 13:47

text over image χωρις position

Δημοσίευση από charkoul » 20 Νοέμ 2012 13:40

για την υλοποιηση μου με συμφερει καλυτερα να βαλω margin-top αρνητικο

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

text over image χωρις position

Δημοσίευση από alou » 20 Νοέμ 2012 14:09

Απλά έχε υπόψιν αυτό
http://haslayout.net/css/Negative-Margin-Bug
αν σε ενδιαφέρει ο ΙΕ7 δηλαδή, είτε χρησιμοποιείς relative positioning είτε δεν χρησιμοποιείς κανόνες CSS που θα δώσουν layout στο γονικό container.

Απάντηση

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

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

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