Μια μικρή βοήθεια με CSS

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

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

Απάντηση
Άβαταρ μέλους
electrofunny
Δημοσιεύσεις: 115
Εγγραφή: 27 Ιαν 2009 23:28

Μια μικρή βοήθεια με CSS

Δημοσίευση από electrofunny » 27 Ιούλ 2010 16:03

Ο παρακάτω κώδικα εμφανίζει το πόστ το ένα κάτω από το άλλο ...

.thumbnail a:link, .thumbnail a:visited {display:block; width:100px; height:100px; padding:5px 5px 0px 0px;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

έτσι
Εικόνα



εγώ όμως το θέλω , το ένα δίπλα στο άλλο ..



βαζω και float:left; , τα εμφανίζει το ένα δίπλα στο άλλο αλλά

Εικόνα

και βάζει λευκό background και χαλάει το ένα είναι πιο κάτω από το άλλο

πω τι μπέρδεμααα

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

Μια μικρή βοήθεια με CSS

Δημοσίευση από alou » 27 Ιούλ 2010 17:58

H περιγραφή κάτω από το thumb είναι σε <p> tag; Αν ναι, δοκίμασε αυτό

.thumbnail p {float:left;}

Άβαταρ μέλους
electrofunny
Δημοσιεύσεις: 115
Εγγραφή: 27 Ιαν 2009 23:28

Μια μικρή βοήθεια με CSS

Δημοσίευση από electrofunny » 27 Ιούλ 2010 22:01

μπα καμια αλλαγή .. βασικά τι φταίει που γίνεται λευκό το background όταν βάζω {float:left;}

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Μια μικρή βοήθεια με CSS

Δημοσίευση από sibas » 27 Ιούλ 2010 22:05

για δείξε μας πως είναι το div του background για να δουμε το τι φταίει, καλύτερα δείξε όλη την html αυτού του div μαζί με το css του

Άβαταρ μέλους
electrofunny
Δημοσιεύσεις: 115
Εγγραφή: 27 Ιαν 2009 23:28

Μια μικρή βοήθεια με CSS

Δημοσίευση από electrofunny » 27 Ιούλ 2010 22:14

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

#sidebar  #tab-slide &#123;
	border&#58;none;
&#125;

#tab-slide .tabnav &#123;
	background&#58;transparent url&#40;'../images/widget-bg.gif'&#41; repeat-y 0 0;
	margin&#58;0;
	padding&#58;0 5px;
	height&#58;21px;
&#125;

#sidebar ul ul.tabnav  li &#123;
	height&#58;21px;
	float&#58;left;
	font&#58;normal 10px Arial, Verdana;
	border&#58;none;
	margin-right&#58;5px;
	text-transform&#58;uppercase;
&#125;

#sidebar ul ul.tabnav  li.last &#123; margin&#58;0; &#125;

#tab-slide .tabnav  li a &#123;
&#125;

.tabdiv &#123;
	clear&#58;left;
&#125;

.tabdiv li &#123;
&#125;

.ui-tabs-hide &#123;
	display&#58; none;
&#125;

.tabnav-button &#123;
	display&#58;block;
	cursor&#58;pointer;
	height&#58;21px;
	background-color&#58;#9A1C1D;
	background-repeat&#58;no-repeat;
	background-position&#58;0 0;
&#125;

#re-button &#123;
	width&#58;101px;
	background-image&#58;url&#40;'../images/tab-recent-entries-bg.jpg'&#41;;
&#125;
#rc-button &#123;
	width&#58;121px;
	background-image&#58;url&#40;'../images/tab-recent-comments-bg.jpg'&#41;;
&#125;
#ac-button &#123;
	width&#58;70px;
	background-image&#58;url&#40;'../images/tab-archieves.jpg'&#41;;
&#125;

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Μια μικρή βοήθεια με CSS

Δημοσίευση από sibas » 27 Ιούλ 2010 22:33

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

<li id="tab-slide" class="widget">
	<div class="widget-top"></div>
	<ul class="tabnav ui-tabs-nav">
		<li class="ui-tabs-selected"><a href="#recent-entries" id="re-button" class="tabnav-button"><span></span></a></li>
		<li class=""><a href="#recent-comments" id="rc-button" class="tabnav-button"><span></span></a></li>
		<li class="last"><a href="#archieves" id="ac-button" class="tabnav-button"><span></span></a></li>
	</ul>
	
	<div style="display&#58; block;" id="recent-entries" class="tabdiv ui-tabs-panel">
		<div class="widget-content">

			<ul>
					     
 <div class="thumbnail">
      <a href="http&#58;//pswnio.gr/archives/1474" title="Οι καλύτερες cheerleaders στο Beach Volley">  <img src="http&#58;//pswnio.gr/wp-content/themes/ClassicMag/ClassicMagPurple/timthumb.php?src=http&#58;//pswnio.gr/wp-content/uploads/2009/07/beach_volleyball_cheerleaders_20-640x298.jpg&amp;w=50&amp;h=50&amp;zc=1">   Οι καλύτερες cheerleaders στο Beach Volley   
        </a>
      <div class="thumbnail">
      <a href="http&#58;//pswnio.gr/archives/6071" title="Σχεδίασε τατουάζ , παίξε .. Tattoo Artist">  <img src="http&#58;//pswnio.gr/wp-content/themes/ClassicMag/ClassicMagPurple/timthumb.php?src=http&#58;//pswnio.gr/wp-content/uploads/2010/05/tattoo-artist-flash-game-640x305.jpg&amp;w=50&amp;h=50&amp;zc=1">   Σχεδίασε τατουάζ , παίξε .. Tattoo Artist   
        </a>
      </div>

			</div></ul>
		</div>
	</div><!--/recent-entries-->

	<div id="recent-comments" class="tabdiv ui-tabs-panel ui-tabs-hide">
		<div class="widget-content">
			<ul>
				
	<li><span>CanDy!!!&#58;</span> <a href="http&#58;//pswnio.gr/archives/6047#comment-2002" title="on Πόσες φούσκες μπορείς να σκάσεις σε 1 λεπτό ?">787......enta3ei kl t piga.......</a></li>

	<li><span>CanDy!!!&#58;</span> <a href="http&#58;//pswnio.gr/archives/985#comment-2001" title="on Πόσο καλά ξέρεις τα τραγούδια του Χατζηγιάννη ?">5/10....enta3ei kalos einai alla dn...</a></li>
	<li><span>CanDy!!!&#58;</span> <a href="http&#58;//pswnio.gr/archives/6040#comment-2000" title="on Αν αγαπάς κάποιον...">egw 3erw ena allo...."an agapas kap...</a></li>
	<li><span>CanDy!!!&#58;</span> <a href="http&#58;//pswnio.gr/archives/1402#comment-1999" title="on Κορίτσια και καθρέφτες &#8230; Pswnio Vol.2">dld poso 4wnia mporei na einai...?....</a></li>
	<li><span>CanDy!!!&#58;</span> <a href="http&#58;//pswnio.gr/archives/6234#comment-1998" title="on Τι υποδηλώνει το όνομα σας ?">nai ontos dn t exei.....xaxxaxaxaxa...</a></li>

	<li><span>Bad Boy&#58;</span> <a href="http&#58;//pswnio.gr/archives/5760#comment-1997" title="on H Marina εξομολογείται ... #2">&#58;'&#40;&#58;'&#40;.....tin eidia periptosi exw ...</a></li>
	<li><span>Bad Boy&#58;</span> <a href="http&#58;//pswnio.gr/archives/5761#comment-1996" title="on Ο γορίλας.. ανέκδοτο">oi gunaikes dn len olo stous antres...</a></li>
	<li><span>Bad Boy&#58;</span> <a href="http&#58;//pswnio.gr/archives/5930#comment-1995" title="on Όλες οι συμμετοχές της Eurovision 2010 σε ένα video!">dn 3erw gia esas....pantws pisteuw ...</a></li>			</ul>
		</div>

	</div><!--/recent-comments-->

	<div id="archieves" class="tabdiv ui-tabs-panel ui-tabs-hide">
		<div class="widget-content">
			<ul>
					<li><a href="http&#58;//pswnio.gr/archives/date/2010/07" title="Ιουλίου 2010">Ιουλίου 2010</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2010/06" title="Ιουνίου 2010">Ιουνίου 2010</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2010/05" title="Μαΐου 2010">Μαΐου 2010</a></li>

	<li><a href="http&#58;//pswnio.gr/archives/date/2010/04" title="Απριλίου 2010">Απριλίου 2010</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2010/03" title="Μαρτίου 2010">Μαρτίου 2010</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2010/02" title="Φεβρουαρίου 2010">Φεβρουαρίου 2010</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2010/01" title="Ιανουαρίου 2010">Ιανουαρίου 2010</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2009/12" title="Δεκεμβρίου 2009">Δεκεμβρίου 2009</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2009/11" title="Νοεμβρίου 2009">Νοεμβρίου 2009</a></li>

	<li><a href="http&#58;//pswnio.gr/archives/date/2009/10" title="Οκτωβρίου 2009">Οκτωβρίου 2009</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2009/09" title="Σεπτεμβρίου 2009">Σεπτεμβρίου 2009</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2009/08" title="Αυγούστου 2009">Αυγούστου 2009</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2009/07" title="Ιουλίου 2009">Ιουλίου 2009</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2009/06" title="Ιουνίου 2009">Ιουνίου 2009</a></li>
	<li><a href="http&#58;//pswnio.gr/archives/date/2009/05" title="Μαΐου 2009">Μαΐου 2009</a></li>

			</ul>
		</div>
	</div><!-- /archieves -->
	<div class="clear"></div>
</li>
εξήγησε μου το παρακάτω, στο #tab-slide και .tabnav έχεις το widget-bg.gif και σπάει,
δεν βλέπω όμως πουθενά το .tabnav μέσα στο box, ουσιαστικά είναι λάθος το στήσιμο της html και για αυτό έχεις αυτό το πρόβλημα.

Εκτός αν δεν το κατάλαβα εγώ σωστά :)

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Μια μικρή βοήθεια με CSS

Δημοσίευση από Sermac » 27 Ιούλ 2010 23:25

Ίσως δεν κλείνουν σωστά κάποια div, γιατί βλέπω το αποτέλεσμα είναι κάπως έτσι:

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

<div class="thumbnail">
    <a><img>text</a>
    <div class="thumbnail">
        <a><img>text</a>
    </div>
</div>
Οπότε πρέπει να διορθωθεί αρχικά η php που παράγει τα tags.

Γενικά, με τον κώδικα που έχεις τώρα, θα δυσκολευτείς να φτιάξεις αυτό που θες. Πρέπει να φροντίσεις ώστε να το αποτέλεσμα να είναι σωστό για οσαδήποτε άρθρα. Είτε 2, είτε 102. Εγώ θα καθάριζα την css, θα ξανά σχεδίαζα τα elements, θα τα ομαδοποιούσα σε containers και τέλος θα ξανά έγραφα το ccs.
Εικόνα

Άβαταρ μέλους
electrofunny
Δημοσιεύσεις: 115
Εγγραφή: 27 Ιαν 2009 23:28

Μια μικρή βοήθεια με CSS

Δημοσίευση από electrofunny » 28 Ιούλ 2010 03:33

μεγαλη διαδικασία .. άντε αμα ήταν καμιά παρένθεση .. θα το έκανα αλλά εδώ θέλει πολύ δουλειά ..

σας ευχαριστώ πολύ πάντος!

Άβαταρ μέλους
electrofunny
Δημοσιεύσεις: 115
Εγγραφή: 27 Ιαν 2009 23:28

Μια μικρή βοήθεια με CSS

Δημοσίευση από electrofunny » 28 Ιούλ 2010 03:38

α και κάτι άλλο .. πως μπορώ το τίτλο του άρθρου να το φέρω στη μέση του thumbnail

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Μια μικρή βοήθεια με CSS

Δημοσίευση από Sermac » 28 Ιούλ 2010 04:29

electrofunny έγραψε:α και κάτι άλλο .. πως μπορώ το τίτλο του άρθρου να το φέρω στη μέση του thumbnail
Η γρήγορη λύση:

Πρώτα διόρθωσε την php ώστε αντί για:

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

<div class="thumbnail">
    <a><img>text</a>
    <div class="thumbnail">
        <a><img>text</a>
    </div>
</div>
...να παράγει:

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

<div class="thumbnail">
    <a><img>text</a>
</div>
<div class="thumbnail">
    <a><img>text</a>
</div>
Μετά, βάλε τον τίτλο μέσα σε <span>.

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

<a><img><span>text</span></a>
Τέλος, δώσε στο <img>:

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

float&#58;left;
...και στο <span>:

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

display&#58;block;
padding&#58;15px 0 0 55px;
Συνημμένα
pswnio.png
Τελευταία επεξεργασία από το μέλος Sermac την 29 Ιούλ 2010 16:05, έχει επεξεργασθεί 1 φορά συνολικά.
Εικόνα

Άβαταρ μέλους
electrofunny
Δημοσιεύσεις: 115
Εγγραφή: 27 Ιαν 2009 23:28

Μια μικρή βοήθεια με CSS

Δημοσίευση από electrofunny » 28 Ιούλ 2010 05:20

πολύ ωραία .. ευχαριστώ! στην εικονα που ανέβασες από ότι βλέπω .. θα δείχνει κάπως καλύτερα από ότι τώρα

Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

Μια μικρή βοήθεια με CSS

Δημοσίευση από fusion » 02 Αύγ 2010 02:52

electrofunny έγραψε:μπα καμια αλλαγή .. βασικά τι φταίει που γίνεται λευκό το background όταν βάζω {float:left;}
Δεν καθαρίζεις το float στο parent element, βάλε overflow: hidden; ή float: left; στο div.widget-content

Άβαταρ μέλους
electrofunny
Δημοσιεύσεις: 115
Εγγραφή: 27 Ιαν 2009 23:28

Μια μικρή βοήθεια με CSS

Δημοσίευση από electrofunny » 02 Αύγ 2010 14:36

fusion έγραψε:
electrofunny έγραψε:μπα καμια αλλαγή .. βασικά τι φταίει που γίνεται λευκό το background όταν βάζω {float:left;}
Δεν καθαρίζεις το float στο parent element, βάλε overflow: hidden; ή float: left; στο div.widget-content
οκ .. θα το δοκιμάσω

Άβαταρ μέλους
sovokai
Δημοσιεύσεις: 293
Εγγραφή: 30 Οκτ 2008 01:33

Μια μικρή βοήθεια με CSS

Δημοσίευση από sovokai » 23 Αύγ 2010 03:26

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

πρεπει να μεγαλωσω εναν αριθμο στο style.css αλλα ποιον? :D :D


Απάντηση

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

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

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