Text aus einer Seite teilweise in <div> Element anzeigen

Mister Knister

Mister Knister

Aktives Mitglied
Thread Starter
Dabei seit
27.04.2005
Beiträge
570
Reaktionspunkte
2
Hi MacUser
Ja ich weiss das Thema hoert sich komisch an, aber es stimmt schon.
Ich arbeite gerade an einem Blog fuer mich. nun habe ich ein Problem. ich moechte jedem Eintrag eine Seite geben, auf der index.html sollen dann aber immer nur die Ueberschrift und 3-4 Zeile in einem <div> Element stehen und dann soll es einen Button "weiterlesen" geben. Gibt es eine Funktion mit der ich beispielsweise die ersten 3 oder 4 Zeilen in das <div> element einbinden kann?
Es soll ungefaehr so sein wie bei den RapidWeaver Seiten bei denen es diese Funktion ja auch gibt.
Ach uebrigens: Ich arbeite mit HTML 4.01 Strict direkt im Quelltext.

Gruss Mister Knister
 
Mit PHP würde sich das zB mit substr lösen lassen.
 
Nein Du kannst einzelne Divs Ein- und Ausblenden. Bei Klick (Oncklick) auf weiterlesen, blendest Du den Div nur ein. Musst nur den Text unterhalb dann weiterschieben. Clearfix sollte das machen.
 
Danke fuer eure Antworten, aber ich habs leider nich si ganz verstanden. :( Koenntet ihr mir jeweils ein beispiel dazu zeigen damit ich mir den Quelltext dort mal anschauen kann?

Der Mister Knister
 
Ungefähr so, das ist allerdings ein code für ein Klappmenu. Das Prinzip ist fast gleich, nur Du machste bei Onclick die Divs sichtbar!
Ohne Gewähr, weil ungetestet! Aber wenn ich es so gespeichert hatte müsste es auch gehen!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>CSS Texte einblenden mit Pseudoformaten</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
<!-- 
body{margin:0;padding:0;font : 14px verdana, geneva, arial, helvetica, sans-serif;text-align:justify;}
a{
color:black;
}
a:hover{
color:#ffffff;
}

#box1{
position: absolute;top:20px;left:20px;
width:250px;
height:100px;
background : #b07041;
padding:10px;
font-size:12px;
color:#ffffff;
border:1px solid black;
cursor:pointer;
}
#box1 .blend1{
display:none;
}
#box1:hover .blend1{
position: absolute;top:-1px;left:271px;z-index:3;display:block;
width:350px;
padding:5px;
margin:0;
background : #f49100;
color:black;
border:1px solid black;
border-left:none;
cursor:default;
}
.blend1 p{
list-style:none;
margin:0px;
padding:10px;
font-weight:bold;
background : #b07041;
border:1px solid black;
}

#box2{
position: absolute;top:200px;left:20px;
width:250px;
height:100px;
background : #f49100;
padding:10px;
font-size:12px;
color:#ffffff;
border:1px solid black;
cursor:pointer;
}
#box2 .blend2{
display:none;
}
#box2:hover .blend2{
position: absolute;top:-1px;left:271px;z-index:3;
display:block;
width:160px;
padding:5px;
margin:0;
background : #b07041;
color:black;
border:1px solid black;
border-left:none;
cursor:default;
}
.blend2 ul{
list-style:none;
margin:0px;
padding:10px;
font-weight:bold;
background : #f49100;
border:1px solid black;
}
.blend2 li{
padding:3px;
}

#text p {
background : #b07041 ;
color:#ffffff;
border:1px solid #9C5A42;
padding:15px;
}

#text{
position:absolute;left:320px;top:0px;
padding-right:30px;
padding-left:30px;
background : #c48351;
margin:0px;
}
 -->
</style>
</head>

<body>

<div id="box1">
<p><strong>Lorem ipsum dolor sit amet</strong></p>
<div class="blend1">
<p><a href="#">Lorem ipsum</a>&nbsp;&nbsp;
<a href="#">Lorem ipsum</a>&nbsp;&nbsp;
<a href="#">Lorem ipsum</a></p>
</div>
</div>

<div id="box2"></div>

<div id="box2">
<p><strong>Lorem ipsum dolor sit amet</strong></p>
<div class="blend2">
<ul>
<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>
</ul>
</div>
</div>

<div id="text">
<h1 style="font-size:20px;text-align:center;color:black;margin-bottom:30px;">Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

</body>
</html>
 
Funktioniert Hammer.

Allerdings bleibt anzumerken, dass der IE6 die Pseudoklasse :hover nur für Links, also die <a>-Tags interpretiert, obwohl es laut Standard konform ist, alle Tags mit :hover zu belegen.

Es gibt zwei Workarounds dafür: Javascript oder einen CSS Hack.

2nd
 
Da man eh für die gewünschte Funktion JS braucht, bietet sich JS auch gleich an das Problem zu lösen! :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten