✔ Textbereich der Textmenge anpassen

T

thehasso

Erfahrenes Mitglied
Hallo,

Ich hab zu meinen Skript noch eine Frage offen, mit der ich mich auch schon etwas länger befasse. Und zwar geht es darum. Das ich im Nachrichteneingang bei mir um eine Nachricht zu öffnen ein jquery benutze. Sprich der Nachrichtentext befindet sich innerhalb dieses. Dieses Kann man durch Nachticht lesen öffnen und die Nachricht wird angezeigt.

Ist die Nachricht jedoch größer, als der festangebene Größe sprich height:127px; so wird der Text weiter unten erscheinen. Problem dabei ist, das der hintergrund dann nicht mehr der vom jquery ist halt nicht uebereinstimmen. Dann kam ich auf der Idee eine Tabelle einzufügen innerhalb des div's und den bgcolor="#FF4040" in der selben Farbe zu verpassen. Das ging auch gut, wobei dann das wirkliche Problem auftauchte, und zwar das wenn man Nachricht lesen klickt der Nachrichtentext untere Nachrichten drüber schwimmt. Halt das die Obere Nachrichtentext beim öffnen untere Nachrichtentext überdeckt. Um sich das besser vor zu stellen hier ein Bild:

http://www.bilder-space.de/show.php?file=23.05ZPtDEEcwBBeH2vN.jpg


PHP: 
<!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>Unbenanntes Dokument</title>

<style>
  div{ 
  background: #FF4040; margin:3px; width:600px;  
        height:127px;  display:none; float:left;
		margin:65px;
		margin-top:10px;
	  }
	  
  body {
	background-color: #FFF;
}
body,td,th {
	color: #F00;
}


  </style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  

<script>
$(function() {  //Kurzschreibweise für $(document).ready
  $('a.showMsg').click(function() {       
    var msg=$(this).attr('id')+"_text";
    $('#'+msg).slideToggle();
  });
}); 
</script>
</head>
<body>
 <a class="showMsg" id="msg<? echo $nachricht_id ?>">Nachricht lesen</a>
<div id="msg<? echo $nachricht_id ?>_text">
<table  width="600" border="1">
  <tr>
    <td bgcolor="#FF4040" >HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO 
    HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO 
    HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO 
    HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO 
    HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO 
    HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO 
    HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO HALLO </td>
  </tr>
</table>

</div>
</body>
</html>


lg thehasso
 
Hi,

hier liegt kein Javascript-Problem vor, denn für den betroffenen div-Block muß mit Hilfe der Formatierungssprache CSS eine Mindesthöhe eingerichtet werden, ansonsten interpretieren standardkonforme Browser (FF,Opera,Safari,usw.) die height:127px-Deklaration als absolute Höhe, und vergrößern nicht die Box, wenn der Inhalt die festgelegte Höhe überschreitet. Mit den daraus resultierenden Darstellungsfehlern hast du soeben Bekanntschaft gemacht.

Code: 
  div{
  background: #FF4040; margin:3px; width:600px;
        min-height:127px; height:auto !important; height:127px;  display:none; float:left;
        margin:65px;
        margin-top:10px;
      }

CSS: 
min-height:127px; /* Mindesthöhe in standardkonformen Browsern */
height:auto !important; /* autom. Höhe mit !important-Regel für standardkonforme Browser damit sie die nachfolgende height-Deklaration ignorieren */
height:127px; /* Mindesthöhe in IE <7 */

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück