Προς το περιεχόμενο

Πρόβλημα στο text-align:justify


NiKoS WSN

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

Δημοσ.

 

>
<body>
 <div id="main">
   <div id="header">
     <div id="logo">
 <div id="logo_text">
        <img src="style/logo2.gif" height="168px" align="left" />	 
         <h1><a href="index.html">blablabla</a></h1>
         
       </div>
     </div>
   
   <div id="site_content">
     <div class="sidebar">
       <!-- sidebar-->
      <div id="menu">
   <ul>
   <li><a href="#" alt="#">Αρχική</li></a>
   <li><a href="#" alt="#">Αρχική</li></a>
   <li><a href="#" alt="#">Αρχική</li></a>
   <li><a href="#" alt="#">Αρχική</li></a>
   <li><a href="#" alt="#">Αρχική</li></a>
   </ul>
   </div>
   
   <img src="style/sales.jpg" alt="sales"/>
     </div>
  <!-- /sidebar -->
  
  
     <div id="content">
       <!-- content -->
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

</div>
   </div>
<!--/content-->
<!--footer-->
   <div id="content_footer"></div>
   <div id="footer">
 blablablabla
  </div>
 </div>
 <!--/footer-->
 </div>
</body>

 

 

 

>
#main, #logo,  #site_content, #footer
{ margin-left: auto; 
 margin-right: auto;}



#site_content 
{ width: 837px;
 overflow: hidden;

 padding: 20px 24px 0px 37px;
 background: #FFF url(content.jpg);
 background-repeat:repeat-y} 

.sidebar
{ float: left;
 width: 190px;
 padding: 0 15px 20px 15px;}

#content
{

margin: 250px;
margin-top: 10px;
text-align: justify;
width: 200px;

}


#footer
{ width: 900px; 
 font: normal 100% 'lucida sans unicode', arial, sans-serif;
 height: 15px;
 padding: 5px 0 5px 0;
 text-align: center; 
 background: #fded31;
 color: #000000;
 text-transform: none;
}

 

 

Το πρώτο είναι ο html και το δεύτερο ο css (και από τους δύο κώδικες έχω αφαιρέσει κομμάτια καθώς δεν ενδιαφέρουν... ).

 

Τι θέλω:

 

προσπαθώ στο id="content" να βάλω ένα width: x; στο οποίο να περιορίζεται το κείμενο και να είναι text-align: justify;. Έχω κουραστεί πολύ με αυτό και έχω χάσει πάρα πολύ χρόνο χωρίς κανένα αποτέλεσμα, σας παρακαλώ βοηθήστε με!

Δημοσ.

Δεν είμαι και ιδικός αλλά

site_content width: 837px;

#content = 200px + (2x margin: 250px;) = 700 (και το πάνω κάτω αλλά είναι άλλη ιστορία)

+

sidebar width: 190px;

890px σε σύνολο 837px ε δεν μπορεί να βγει σε καλό κάτι τέτοιο

 

Βασικά πρέπει να είναι έστω 891px φάρδος για να βγάλει 1px κείμενο αυτό το margin:250πχ άλλαξε το.

Δημοσ.

>
#content
{
margin: 250px;
margin-top: 10px;
text-align: justify;
width: 200px;
word-wrap: break-word;
}

 

παράδειγμα

 

Είσαι μεγάλος... τι να λέμε τώρα...

 

ΥΓ. Ούτε καν ήξερα ότι υπήρχε στην css word-wrap: break-word

 

ΥΓ2. Άμα αντί για ένα συνεχόμενο γράμμα είχα λέξεις θα είχα πάλι πρόβλημα; Γιατί από ότι κατάλαβα αυτό ήταν όλο το θέμα

Δημοσ.

Άμα είχες λέξεις (με κενά ενδιάμεσα) δεν θα είχες αυτό το πρόβλημα.

 

Επειδή αυτό ήταν δοκιμαστικό και όταν θα το λειτουργήσω θα έχει λέξεις υπάρχει περίπτωση να μου κόβει την λέξη στην μέση για να αλλάξει σειρά ;

Δημοσ.

Όχι. Τα κενά μεταξύ των λέξεων θα αυξομειώνοντε ώστε να γίνει justify το κείμενο.

 

Σε περίπτωση βεβαια που έχεις μια λέξη σιδηρόδρομο, τότε αλλάζει το θέμα και η απάντηση είναι ναι.

Δημοσ.

ΥΓ2. Άμα αντί για ένα συνεχόμενο γράμμα είχα λέξεις θα είχα πάλι πρόβλημα; Γιατί από ότι κατάλαβα αυτό ήταν όλο το θέμα

Αυτό ήταν, όντως. Για δοκιμές, να βάζεις dummy text. Δες π.χ. αυτόν εδώ τον πολύ γνωστό generator: http://www.lipsum.com/

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

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

  • Δημιουργία νέου...