Βοήθεια με CSS

mixalis8 · 18 Οκτωβρίου 2007

deite ton parakato kodika kai peite mou ti prepei na kano etsi oste otan dimiourgeite nea seira na emfanizetai kato apo tin proigoumeni kai oxi na "mpainei" opou xoraei ena neo proion...

an anoiksete ton kodika me browser tha katalabete ti ennoo...

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#subcategories li {
display: inline;
list-style-type: none;
}
#subcategories ul {
margin: 0px;
padding: 0px;
}
#item {
display: block;
}
#all {
width: 560px;
float: left;
}
#all #subcategories #item {
margin: 5px;
float: left;
width: 168px;
}
-->
</style>
</head>

<body>
<div id="all">
<div id="subcategories">
 
   <ul>
     <div id="item"><li>
       <h2>Σχολικά Βιβλία</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές τιμές        </span>
       hbbjhbkjhb kjb
       uihoiuhergoiuhwer oiugwhergiouehrgio uehrw oweirughriougehrwoig uwher ogiuehrgiouerh wiuerhgoireuhg oeiwhug eiorh
       <div align="center"></div>
     </li>
     </div>
  <div id="item"><li>
       <h2>Λογοτεχνικά</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές</span>
       <div align="center"></div>
     </li>
     </div>
     <div id="item"><li>
       <h2>Βοηθήματα</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές τιμές        </span>
       <div align="center"></div>
     </li>
     </div>
     <div id="item"><li>
       <h2>Φυσικής</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές τιμές        </span>
       <div align="center"><img src="images/tempitem.png" width="138" height="146" />          </div>
     </li>
     </div>
   </ul>
   
 </div>
</div>
</body>
</html>

Maniakos · 18 Οκτωβρίου 2007

Το λάθος σου είναι στο

>
<div id="item"></div>

Το "id" χρησιμοποιείται για να δηλώσεις κάτι μοναδικό μέσα στο document. Από την στιγμή που έχεις πολλά items θα πρέπει να χρησιμοποιήσεις class οπότε θα χρειαστεί να αλλάξεις όλα τα

>
<div id="item"></div>

σε

>
<div class="item"></div>

και στην CSS να αλλάξεις το

>
#item {
display: block;
}

σε

>
.item {
display: block;
}

Ο νέος κώδικας:

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#subcategories li {
display: inline;
list-style-type: none;
}
#subcategories ul {
margin: 0px;
padding: 0px;
}
.item {
display: block;
}
#all {
width: 560px;
float: left;
}
#all #subcategories #item {
margin: 5px;
float: left;
width: 168px;
}
-->
</style>
</head>

<body>
<div id="all">
<div id="subcategories">
 
   <ul>
     <div class="item"><li>
       <h2>Σχολικά Βιβλία</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές τιμές        </span>
       hbbjhbkjhb kjb
       uihoiuhergoiuhwer oiugwhergiouehrgio uehrw oweirughriougehrwoig uwher ogiuehrgiouerh wiuerhgoireuhg oeiwhug eiorh
       <div align="center"></div>
     </li>
     </div>
  <div class="item"><li>
       <h2>Λογοτεχνικά</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές</span>
       <div align="center"></div>
     </li>
     </div>
     <div class="item"><li>
       <h2>Βοηθήματα</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές τιμές        </span>
       <div align="center"></div>
     </li>
     </div>
     <div class="item"><li>
       <h2>Φυσικής</h2>
       <span class="comments">Όλα τα σχολικά βιβλία σε χαμηλές τιμές        </span>
       <div align="center"><img src="images/tempitem.png" width="138" height="146" />          </div>
     </li>
     </div>
   </ul>
   
 </div>
</div>
</body>
</html>

mixalis8 · 18 Οκτωβρίου 2007

exeis dikio gi'auto alla kai pali omos den linei to problima mou....

Maniakos · 18 Οκτωβρίου 2007

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

YΓ: Είσαι σίγουρος ότι βλέπεις τα αποτελέσματα των καινούριων αλλαγών στο CSS και όχι αυτά που είχε κρατήσει η cache του browser; Απλά ρωτάω για να ξέρω ότι βλέπουμε τα ίδια (δηλαδή ακριβώς την συμπεριφορά που έχει μια ordered list από μόνη της).

mixalis8 · 18 Οκτωβρίου 2007

Nai... kano refresh gia tin cache... to zitima einai oti to Φυσική pigainei kato apo tin deuteri stil kai oxi kato apo tin proti stili epeidi to ipsos tous protou dimiourgei problima...

palia ekana kati kai diorthonotan alla tora den mporo na to thimitho...

thelo diladi na dimiourgithi kati san pinakas....

tha eprepe to fisiki na einai kato apo ta sxolika

Maniakos · 18 Οκτωβρίου 2007

Χμ, αυτό δυστυχώς για να το κάνεις δεν γίνεται με τον κώδικα που μας έδωσες. Στο έφτιαξα αυτό που θές με δικό μου παράδειγμα. Μπορείς να το προσαρμόσεις σε αυτό που θες και θα είναι ΟΚ:

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

#wrapper
{
border: 1px solid black;
width:  100px;
}

#items_wrapper ul
{
list-style: none;
padding: 0;
margin: 0;
}

#items_wrapper li
{
float: left;
width: 10px;
}

br
{
  clear: left;
}
 
</style>

</head>

<body>

<div id="wrapper">
<div id="items_wrapper">
	<ul>
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li><a href="#">Item 5</a></li>
	</ul>
</div>
<br />
</div>

</body>
</html>

mixalis8 · 19 Οκτωβρίου 2007

euxaristo file mou pou asxoleise me to thema mou alla mallon akoma den lithike to problima....

des ebala mia fotografia kai to 4o pihe kato apo to 2o kai to 5o kato apo to 3o ano tha eprepe to 4o kato apo to 1o kai to 5o kato apo to 2o....

kati allo simbainei kai den mporo na katalabo ti....

Maniakos · 19 Οκτωβρίου 2007

Ένας από τους τρόπους για να κάνεις αυτό με τα columns είναι αυτός που σου έδειξα πάντως, απλά θα πρέπει να προσαρμόσεις τα widths ανάλογα. Εσύ θα χρειαστεί να τα μεγαλώσεις και αρκετά μάλιστα αν κρίνω από την φωτογραφία που έχεις κάνει attach.

Δοκίμασε να τον τρέξεις αυτούσιο για να δεις ότι η συμπεριφορά είναι αυτή που θές

ClipShare · 19 Οκτωβρίου 2007

Η θα πρεπει να δηλωσεις standard heights στα divs, ή

height: auto

ή να χρησιμοπιησεις pseudo-classes, αλλιως παμε σε CSS3, τα οποια παιζει μονο ο Opera και ο Safari.

Για να βοηθησω ή να σου δωσω ακριβη κωδικα,πρεπει να καταλαβω ΑΚΡΙΒΩΣ τι θελεις να κανεις και με με βαση ποιες παραμετρους θες να ειναι τροποιησιμο. Εννοω οτι μπορει να κανουμε κατι, αλλα ανα θες να προσθεσεις καμια εικονα ή μεγαλο κειμενο, να "σπασει".

Σύνδεση

Βοήθεια με CSS

Προτεινόμενες αναρτήσεις

mixalis8

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Maniakos

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

mixalis8

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Maniakos

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

mixalis8

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Maniakos

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

mixalis8

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Maniakos

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

ClipShare

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Αρχειοθετημένο

Σύνδεση