Text aus einer Seite teilweise in <div> Element anzeigen

Dieses Thema im Forum "Web Page Design" wurde erstellt von Mister Knister, 30.09.2006.

  1. Mister Knister

    Mister Knister Thread Starter MacUser Mitglied

    Beiträge:
    567
    Zustimmungen:
    2
    MacUser seit:
    27.04.2005
    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
     
  2. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    Mit PHP würde sich das zB mit substr lösen lassen.
     
  3. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    MacUser seit:
    01.06.2004
    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.
     
  4. Mister Knister

    Mister Knister Thread Starter MacUser Mitglied

    Beiträge:
    567
    Zustimmungen:
    2
    MacUser seit:
    27.04.2005
    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
     
  5. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    MacUser seit:
    01.06.2004
    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>
    
    
     
  6. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    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

    ThaHammer MacUser Mitglied

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

Diese Seite empfehlen