Webnapping - CSS Aufbau der Newsmeldungen:

Hier könnt ihr euch einmal den HTML Aufbau der Newsmeldungen anschauen, damit ihr auch in der Lage seit die Styles in eurem eigenen CSS Stylesheet entsprechend anzupassen:

  

<div class="news">
  <div class="newscategory">
    <p class="h2">Die aktuellen dartn.de Dart Newsmeldungen</p>
    <p class="newscatdesc">Immer möglichst Aktuell findet Ihr
    hier die News aus der Welt des (Profi-) Dartsports, sowie
    alles was es Rund um das Thema Dart ansonsten noch zu
    berichten gibt. Ältere Newsmeldungen findet Ihr im News-Archiv.</p>

    <div class="newsblock">
      <div class="newselement">
        <p class="newstitle">
          <span class="newsdate">NEW DATUM</span>
          <a href="">NEWS TITEL</a>
        </p>
        <a class="newsthumb" href=""><img class="newsthumb"
        src="" border="0" /></a>
        <p class="newsdesc">[KURZBESCHREIBUNG]
          <a href="">mehr</a>
        </p>
      </div>
    </div>

    <p class="newsarchive">Die aktuellen dartn.de Dart Newsmeldungen:
    <a href="">weitere Nachrichten</a> |
    <a href=""><img src="" alt="RSS" align="absmiddle" border="0" /></a>
    <a href="">RSS Feed</a> |
    <a href="">Archiv</a></p>
  </div>
</div>

 

Als Beispiel für ein "normales" CSS Stylesheet für unsere Newsmeldungen könnt ihr einfach mal den folgenden Quelltext direkt über dem Javascript einbinden und dann eurem eigenen Webseitendesign entsprechend anpassen (Mehr Informationen über CSS und die erlaubten Angaben findet ihr z.B. hier):

  

<style type="text/css">
<!--
div.news { font-family:Arial; width:450px; background:#ffdd78 }
div.news div.newscategory { margin-left:5px; margin-right:5px; }
div.news p.h2 { font-weight:bold; font-size:15px; margin-bottom:0px;}
div.news p.newscatdesc { display:none; }
div.newsblock div.newselement p.newstitle {
color:white; margin-top:0.5em; margin-bottom:0.2em; font-size:12px; }
div.newsblock div.newselement p.newstitle a {
color:black; text-decoration:none; font-weight:bold;  }
div.newsblock div.newselement p.newstitle a:hover {
color:black; text-decoration:underline; font-weight:bold;
background:none; }
div.newsblock div.newselement p.newstitle span.newsdate {
color:#cc0000; font-weight:bold; }
div.newsblock div.newselement p.newsdesc { font-size: 11px;
text-align:justify; margin-top:0em; }
div.newselement p.newsdate { font-weight:bold; }
img.newsthumb { border:1px solid black; float:left;
margin:1px 5px 3px 0; }
div.news p.newsarchive { font-size: 10px; }
-->
</style>

 

[ Zurück zur Webnapping Startseite ]