Το κείμενο φεύγει από το box!

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

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

Απάντηση
Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

Το κείμενο φεύγει από το box!

Δημοσίευση από _Invisible_ » 17 Μαρ 2007 17:51

Γεια σας.

Όπως βλέπετε στην εικόνα έχω γράψει κάτι μέσα σε ένα box και όταν πατήσουμε "more" εφανίζει το κείμενο που βλέπετε στην εικόνα. Το κείμενο αυτό εμφανίζεται χάρη στην javascript (δηλαδή αυτό γίνεται με την Javascript) και λογικά πρέπει να γράψω μία εντολή CSS για να διορθώσω το κείμενο να μένει μέσα στο box.

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

<script language="JavaScript">
function show&#40;id&#41;
&#123;
	el = document.getElementById&#40;id&#41;;
	if &#40;el.style.display == 'none'&#41;
	&#123;
		el.style.display = '';
		el = document.getElementById&#40;'more' + id&#41;;
		el.innerHTML = 'less...';
	&#125; else &#123;
		el.style.display = 'none';
		el = document.getElementById&#40;'more' + id&#41;;
		el.innerHTML = 'more...';
	&#125;
&#125;
</script>

<div class="notes">
	<h4>Login Information</h4>

	<p>Your username and password must both be at least 8 characters long and are case-sensitive. Please do not enter accented characters.</p>
	<p>We recommend that your password is not a word you can find in the dictionary, includes both capital and lower case letters, and contains 
	at least one special character &#40;1-9, !, *, _, etc.&#41;.</p>
	<a id="moreinfo" href="#" onclick="javascript&#58;show&#40;'info'&#41;;return false;">more...</a>
	<div id="info" style="display&#58;none;">
		<p class="last">Your password will be encrypted and stored in our system. Due to the encryption, we <strong>cannot</strong> retrieve your 
		password for you. If you lose or forget your password, we offer the ability to reset it.</p>
	</div>
</div>

Ευχαριστώ πολύ!
Συνημμένα
pic.gif

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

Το κείμενο φεύγει από το box!

Δημοσίευση από sibas » 17 Μαρ 2007 20:06

Μήπως θα έπρεπε να μας πεις και πως προσπαθείς να περάσεις το css,
συνήθως με ένα overflow:hidden λύνονται τέτοια προβλήματα.

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

Το κείμενο φεύγει από το box!

Δημοσίευση από _Invisible_ » 17 Μαρ 2007 22:31

Δεν διορθώθηκε... :cry: Καμιά άλλη ιδέα;

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

Το κείμενο φεύγει από το box!

Δημοσίευση από sibas » 18 Μαρ 2007 00:10

λειτουργεί και έτσι

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

<html>
<head>
  <title></title>
  <script language="JavaScript">
function show&#40;id&#41;
&#123;
   el = document.getElementById&#40;id&#41;;
   if &#40;el.style.display == 'none'&#41;
   &#123;
      el.style.display = '';
      el = document.getElementById&#40;'more' + id&#41;;
      el.innerHTML = 'less...';
   &#125; else &#123;
      el.style.display = 'none';
      el = document.getElementById&#40;'more' + id&#41;;
      el.innerHTML = 'more...';
   &#125;
&#125;
</script> 
<style>
.notes&#123;
border&#58;1px solid black;
background&#58;#FF8000
&#125;

#info&#123;
width&#58;200px;
border&#58;1px solid black;
background&#58;#C0C0C0
&#125;
</style>

</head>
<body>
<div class="notes">
   <h4>Login Information</h4>
   <p>Your username and password must both be at least 8 characters long and are case-sensitive. Please do not enter accented characters.</p>
   <p>We recommend that your password is not a word you can find in the dictionary, includes both capital and lower case letters, and contains
   at least one special character &#40;1-9, !, *, _, etc.&#41;.
   <a id="moreinfo" href="#" onclick="javascript&#58;show&#40;'info'&#41;;return false;">more...</a></p>
   <div id="info" style="display&#58;none;">
      <p class="last">Your password will be encrypted and stored in our system. Due to the encryption, we <strong>cannot</strong> retrieve your
      password for you. If you lose or forget your password, we offer the ability to reset it.</p>
   </div>
</div> 
</body>
</html>

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

Το κείμενο φεύγει από το box!

Δημοσίευση από _Invisible_ » 18 Μαρ 2007 09:15

τελικά το έκανα έτσι:

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

#info &#123;
	width&#58;155px;
	background-color&#58; #ffffe1;
&#125;
Ευχαριστώ πολύ για την βοήθεια!!! :D

Απάντηση

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

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

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