Benutzerdefinierte Suche

Text aus einer Seite teilweise in <div> Element anzeigen

  1. Mister Knister

    Mister Knister Thread StarterMacUser Mitglied

    Mitglied seit:
    27.04.2005
    Beiträge:
    563
    Zustimmungen:
    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
     
    Mister Knister, 30.09.2006
  2. miss.moxy

    miss.moxyMacUser Mitglied

    Mitglied seit:
    15.05.2004
    Beiträge:
    6.539
    Zustimmungen:
    624
    Mit PHP würde sich das zB mit substr lösen lassen.
     
    miss.moxy, 30.09.2006
  3. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    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.
     
    ThaHammer, 30.09.2006
  4. Mister Knister

    Mister Knister Thread StarterMacUser Mitglied

    Mitglied seit:
    27.04.2005
    Beiträge:
    563
    Zustimmungen:
    2
    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
     
    Mister Knister, 01.10.2006
  5. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    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>
    
    
     
    ThaHammer, 02.10.2006
  6. 2nd

    2ndMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    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
     
  7. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Da man eh für die gewünschte Funktion JS braucht, bietet sich JS auch gleich an das Problem zu lösen! :D
     
    ThaHammer, 02.10.2006
Die Seite wird geladen...