Πρόβλημα με CSS και image

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

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

Απάντηση
Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Πρόβλημα με CSS και image

Δημοσίευση από Banavas » 24 Σεπ 2007 16:00

Έχω κάνει μια σελίδα βασισμένη σε CSS template.
Όλα δουλεύουν καλά αλλά έχω πρόβλημα με τις φωτογραφίες. Όταν δεν υπάρχει αρκετό κείμενο δίπλα στην φωτογραφία τότε το πλαίσιο μέσα στο οποίο είναι η φωτογραφία, κλείνει πρίν τελειώσει η φωτογραφία.
Πως διορθώνεται αυτό;
Happy coding....
Μάρκος
http://lasernet.gr

NIkoz

Πρόβλημα με CSS και image

Δημοσίευση από NIkoz » 28 Σεπ 2007 20:58

Ρε τρελέ κάνε κανένα πρόχειρο upload κάπου να δούμε τι έχεις γράψει σαν άνθρωποι :P

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Πρόβλημα με CSS και image

Δημοσίευση από Banavas » 29 Σεπ 2007 12:10

Επανέρχομαι με περισότερες λεπτομέρειες.

Εικόνα

Όπως φαίνεται στην εικόνα η φωτογραφία εξέχει από το πλαίσιο. Το πλαίσιο είναι ένα div με border 1px .

Αν προσθέσω αλλαγές γραμμών στο κείμενο το πρόβλημα λύνεται.
Όμως εγώ θέλω τα πλαίσια να δημιουγούνται αυτόματα με PHP οπότε δεν γίνεται να προστίθενται ανάλογες αλλαγές γραμμών.

Αν βάλω την εικόνα μέσα σε table και το table μέσα σε div το πρόβλημα λύνεται αλλά δημιουργούνται άλλες παρενέργειες.

Υπάρχει τρόπος το div να κλίνει μετά την φωτογραφία, όπως θα συνέβαινε αν ήταν μέσα σε ένα table καθαρά με CSS;
Happy coding....
Μάρκος
http://lasernet.gr

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

Πρόβλημα με CSS και image

Δημοσίευση από dik_ » 29 Σεπ 2007 13:28

Αν έχει κάποιο height attribute το css του div, δοκίμασε να το βγάλεις και τότε λογικά το ύψος του θα γίνει όσο χρειάζεται για να χωράει το κείμενο και η φωτό...

Άβαταρ μέλους
RADICAL
Δημοσιεύσεις: 386
Εγγραφή: 14 Ιούλ 2004 01:07
Τοποθεσία: Athens
Επικοινωνία:

Πρόβλημα με CSS και image

Δημοσίευση από RADICAL » 29 Σεπ 2007 16:22

Δοκίμασε να βάλεις αυτό

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

<div class="spacer">&nbsp;</div>
πρίν το </div> που περιέχει την εικόνα και το κείμενο

και στο css σου αυτό:

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

div.spacer &#123;clear&#58; both; height&#58; 0; font-size&#58;0&#125;
Αν και θα βοηθούσε να μας έδειχνες το css που αφορά αυτά τα elements
Εικόνα

Άβαταρ μέλους
Banavas
Script Master
Δημοσιεύσεις: 1367
Εγγραφή: 21 Νοέμ 2004 20:25
Επικοινωνία:

Πρόβλημα με CSS και image

Δημοσίευση από Banavas » 29 Σεπ 2007 22:03

RADIKAL

Έκανα αυτό που είπες αλλά η κατάσταση χειροτέρεψε, δηλαδή το κουτάκι με την φωτογραφία μεγάλωσε και κατέβηκε κάτω από το δεξί πλευρικό κουτί.

Ο κώδικας είναι:


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

body &#123;
	font-family&#58; verdana, tahoma, helvetica, arial, sans-serif;
	font-size&#58; 100%;
	background-color&#58;#FFFFFF;
	margin&#58; 0em;
&#125;





div.search &#123;
	width&#58; 20em;
	float&#58; right;
	clear&#58; right;
	color&#58;#003366;
	font-size&#58; 70%;
	margin&#58; 1.5em 1em 0em 1em;
&#125;

.searchbox &#123;
	color&#58;#666666;
	background-color&#58;#F8F8F8;
	border-style&#58;solid; border-width&#58;1px; border-color&#58;#F0F0F0;
&#125;


/* ----- right Info - News -----*/

div.newsContainer&#123;
	float&#58; left;
	clear&#58; left;
	width&#58; 12em;
	margin&#58; 0.5em 0.5em 0em 0.5em;
&#125;

div.news1&#123;
	width&#58; 12em;
	background-color&#58;#F8F8F8;
	border-style&#58;solid; border-width&#58;1px; border-color&#58;#F0F0F0;
	margin-bottom&#58; 0.5em;
	padding&#58; 0.5em 0.5em 0.5em 0.5em;	
&#125;

div.news2&#123;
	width&#58; 12em;
	background-color&#58;#DFFFBE;
	border-style&#58;solid; border-width&#58;1px; border-color&#58;#F0F0F0;
	margin-bottom&#58; 0.5em;
	padding&#58; 0.5em 0.5em 0.5em 0.5em;
&#125;

/* ----- main Container ----- */
div.mainContainer&#123;
	margin&#58; 0em 0em 0em 14em;
&#125;

div.rightInfo&#123;
	float&#58; right;
	clear&#58; right;
	width&#58; 12em;
	background-color&#58;#FFFFFF;
	border-style&#58;solid; border-width&#58;1px; border-color&#58;#FFF3CE;
	
	margin&#58; 0.5em 0.5em 0.5em 0em;
	padding&#58; 0.5em 0.5em 0.5em 0.5em;
&#125;

div.rightInfo h2&#123;
	color&#58;#FFFFFF;
	background-color&#58;#FF9933;
	border-style&#58;solid; border-width&#58;1px; border-color&#58;#FF9933;
&#125;

div.mainInfo&#123;
	width&#58; auto;
	border-style&#58;solid; border-width&#58;1px; border-color&#58;#000000;
	margin&#58; 0.5em 14.5em 0.5em 0.5em;
	padding&#58; 0.5em 0.5em 0.5em 0.5em;
&#125;

div.mainInfo h3 a&#123;
	color&#58;#003366;
&#125;




/* ----- sub Compainer ----- */
div.subContainer&#123;
	clear&#58;both;
	width&#58; auto;
	font-size&#58;60%;
	background-color&#58;#F8F8F8;
	border-style&#58;solid; border-width&#58;1px; border-color&#58;#E5E5E5;
	margin&#58; 0em 0em 0em 0em;
	padding&#58; 1em 0.5em 1em 0.5em;
&#125;

div.copyright &#123;
	color&#58; #999999;
	text-align&#58;right;
	margin-left&#58;20em;
	margin-right&#58;0.5em;
	font-size&#58;80%;
&#125;

div.copyright a&#123;
	color&#58;#999999;
&#125;

div.subLinks&#123;
	float&#58;left;
	clear&#58;left;
	color&#58;#777777;
	margin-left&#58;2em;
&#125;

div.subLinks a&#123;
	color&#58;#777777;
&#125;



Το κουτάκι στο οποίο βάζω την φωτογραφία είναι το maininfo

To ίδιο πρόβλημα είχα και με άλλο CSS template.
Happy coding....
Μάρκος
http://lasernet.gr

Απάντηση

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

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

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