ερώτηση σχετικά με article

Joomla! forum. Joomla! Questions and Answers.

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

Απάντηση
nada
Δημοσιεύσεις: 39
Εγγραφή: 14 Αύγ 2008 14:56

ερώτηση σχετικά με article

Δημοσίευση από nada » 14 Νοέμ 2011 20:56

Θέλω το περιεχόμενο ενός άρθρου να εμφανίζεται μέσα σε ένα πλαίσιο, έχοντας ένα συγκεκριμένο backround για το πλαίσιο αυτό, το οποίο θα έχει ένα scrollbar δεξιά, ενώ το οριζόντιο scrollbar δεν θέλω να φαίνεται, έτσι ώστε ο χρήστης να μην ανεβοκατεβάζει ολόκληρη την σελίδα για να διαβάσει ένα article. Γενικά δεν θέλω να υπάρχει οριζόντια κίνηση στο περιεχόμενο του άρθρου μου αλλά μόνο κάθετη. Όταν λοιπόν δημιουργώ ένα καινούργιο article, πάω στο html από τον editor και γράφω τον εξής κώδικα:

<div style="overflow: scroll; word-wrap: break-word; overflow-x: hidden; width: 820px; height: 400px;">
<div class="floatbox" style="background: url('images/content-backround.png') repeat scroll 0% 50% transparent; width: 900px; height: 600px;">
<p>μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα </p>
<div align="left"> </div>
<div style="margin: 0px;"> </div>
</div>
</div>

Έχω λοιπόν τα εξής προβλήματα:
1. Δεν λειτουργεί το word-wrap με αποτέλεσμα να μου κόβονται οι λέξεις δεξιά
2. Ενώ στον firefox το κείμενο είναι στατικό (δεν υπάρχει οριζόντια κίνηση αλλά μόνο κάθετη), στον explorer με την ροδέλα του mouse (εφόσον έχω θέσει overflow-x:hidden;) έχω οριζόντια κίνηση κάτι που δεν θέλω και επίσης μου κόβονται οι λέξεις δεξιά.

Υπάρχει κάποιος τρόπος να λυθεί αυτό?

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

ερώτηση σχετικά με article

Δημοσίευση από apsuh0s » 14 Νοέμ 2011 21:30

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

CSS

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

#container&#123;width&#58;960px;margin&#58;0 auto;&#125;
#article&#123;height&#58;200px;overflow&#58;auto;background&#58;url&#40;.../images/content-bg.jpg&#41;;&#125;
HTML

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

<div id="container">
<div id="article">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div><!-- #article -->
</div><!-- #container -->
Αντιλαμβάνομαι πως έχεις τις γνώσεις να καταλάβεις τι έκανα παραπάνω. Μπορείς να τα προσαρμόσεις στο δικό σου περιεχόμενο.

Αυτό είναι το δικό σου διορθωμένο. Απλώς έσβησα κάποια πράματα και άλλαξα το overflow:scroll σε auto. Πρόσθεσε μερικά "μπλα" ακόμα ώστε το περιεχόμενο σου να ξεπερνάει τα 400px.

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

<div style="overflow&#58; auto; width&#58; 820px; height&#58; 400px;">
<div class="floatbox" style="background&#58; url&#40;'images/content-backround.png'&#41; repeat scroll 0% 50% transparent;">
<p>μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα μπλα μπλα μπλαμπλαμπλα </p>
<div align="left"> </div>
<div style="margin&#58; 0px;"> </div>
.ninja { color: black; visibility: hidden !important; }

nada
Δημοσιεύσεις: 39
Εγγραφή: 14 Αύγ 2008 14:56

ερώτηση σχετικά με article

Δημοσίευση από nada » 14 Νοέμ 2011 22:23

Καταρχήν ευχαριστώ.. Το δοκίμασα και δουλεύει στον firefox αλλά όχι στον explorer. Βέβαια στον firefox για να μην εμφανίζεται η οριζόντια μπάρα πρέπει να αφαιρέσω από το κείμενο το tag <p>

nada
Δημοσιεύσεις: 39
Εγγραφή: 14 Αύγ 2008 14:56

ερώτηση σχετικά με article

Δημοσίευση από nada » 14 Νοέμ 2011 22:36

Ok, νομίζω ότι το έφτιαξα, και εμφανίζεται και στον explorer η μπάρα μου. Ευχαριστώ φίλε μου..

Απάντηση

Επιστροφή στο “Joomla! γενικά”

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

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