Newsticker mit marquee

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Newsticker mit marquee »

crackyack

Mitglied

Dabei seit: 22.03.2009

Beiträge: 48

Mittwoch, 8. April 2009, 11:10

Hallo,
ich möchte einen Newsticker auf meine Seite machen, bei dem nur interne News sind, also keine aktuellen wie Bombenanschlag in Niemalsland usw...
Da ich auf meiner Seite ein Bild als Header habe, krieg ich es nicht hin, den Fließtext oben rechts in das Header-Bild zu bekommen.
So wie ich es habe, kommt der Fließtext unter mein Bild in die Navigation und das is ja auch nicht das Wahre. Soll ich es mit z-index probieren?

Quellcode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
       <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
       <title>was wei&szlig; ich?!</title>
<style type="text/css" media="screen">
    body
    {
            margin: 0;
            padding: 0;
            font: 85% arial, sans-serif;
            text-align: center;
            background-color: #151515;
    }

    a:link { color: #B52C07; }
a:visited { color: #600; }

a:hover, a:active
{
color: #fff;
background-color: #B52C07;
}
    a img { border: none; }

h2
{
color: #B52C07;
font: 120% georgia, times, "times new roman", serif;
font-weight: bold;
margin: 0 0 2px 0;
}

h2 a { text-decoration: none; }

h3
{
color: #CD2626;
font: 106% georgia, times, "times new roman", serif;
font-weight: bold;
margin-top: 0;
}

    #container
    {
             margin: 1px auto;
             width: 940px;
             text-align: left;
             background-color: #fff;
             border: 1px solid #676767;
    }

    #header
    {
             height: 180px;
 position: relative;
    }

    #mainnav
    {

             background-color: #CD2626;
             color: #8B0000;
             padding: 2px 0;
             margin-bottom: 22px;
    }

    #mainnav ul
    {
             margin: 0 0 0 20px;
    padding: 0;
 list-style-type: none;
 border-left: 1px solid #8B0000;
}

    #mainnav li
{
display: inline;
padding: 0 10px;
border-right: 1px solid #8B0000;
}

    #mainnav li a
{
text-decoration: none;
color: #8B0000;
    }

    #mainnav li a:hover
{
 text-decoration: none;
 color: #fff;
}

    #menu
    {
             float: right;
             width: 350px;
             border-left: 1px solid #8B0000;
             padding-left: 15px;
    }

    #menu ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}


    #contents
    {   margin: 0 400px 40px 20px; }

    #contents p
    {   line-height: 165%; }

    .blogentry
    {   border-bottom: 1px solid #8B0000; }


#footer
{
         clear: both;
         color: #151515;
     background-color: #CD2626;
     text-align: center;
     padding: 5px;
     font-size: 90%;
}
</style>
</head>
<body>

<div id="container">

<div id="header">

<a href="http://detox-gaming.de/news/index.php" target="_blank"><img src="benny.png"></a>
<marquee scrollamount="30" scrolldelay="3">
  <b>Detox-Gaming sucht immer weiter Member
  </b>
</marquee>

</div>

<div id="mainnav">
  <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Biographie</a></li>
<li><a href="#">Projekte</a></li>
<li><a href="#">Impressum</a></li>
  </ul>
</div>

<div id="menu">
  <h3>Menu</h3>
  <ul>
<li>Section1</li>
<li>Section2</li>
<li>Section3</li>
<li>Section4</li>
  </ul>
</div>

<div id="contents">
  <div class="blogentry">
<h2>Herzlich Willkommen auf meiner privaten Homepage</h2>
<p>Test Test Test Test Test Test</p><p>Test Test Test Test Test Test</p>
<p>Test Test Test Test Test Test</p><p>Test Test Test Test Test Test</p>
<p>Test Test Test Test Test Test</p><p>Test Test Test Test Test Test</p>
<p>Test Test Test Test Test Test</p><p>Test Test Test Test Test Test</p>
  </div>
</div>

<div id="footer">
  Copyright &copy; www.detoxmania.info.ms 2009
</div>
</div>
</body>
</html>

Der betreffende Code ist
...
<div id="header">
<a href="http://detox-gaming.de/news/index.php" target="_blank"><img src="benny.png"></a>
<marquee scrollamount="30" scrolldelay="3">
<b>Detox-Gaming sucht immer weiter Member
</b>
</marquee>

</div>
...

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327

Mittwoch, 8. April 2009, 11:20

PHP-Quelltext

<div id="header">
<a href="http://detox-gaming.de/news/index.php" target="_blank"><img src="benny.png"></a>
<marquee scrollamount="30" scrolldelay="3" class="newsticker">
<b>Detox-Gaming sucht immer weiter Member
</b>
</marquee>

</div>

Cascading Style Sheet

.newsticker {
position: absolute;
width: /* die länge muss so lange sein wie #header */;
height: 180x;
z-index: 10; /* muss höher sein als der z-index von #header */
margin-left: /* hier wieder der wert von #header */;
margin-top: /* hier wieder der wert von #header */;
}

So ungefähr, habs nicht getestet.

dermainzer

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

Mittwoch, 8. April 2009, 11:32

Imho wäre das Einfachste:

	HTML
1 2 3 4	<div id="header"> <a href="http://detox-gaming.de/news/index.php" target="_blank"> </a> <marquee>Detox-Gaming sucht immer weiter Member</marquee> </div>

Cascading Style Sheet

#header
    {
      height:180px;
      position: relative;
      background:url(./benny.png);
    }

    #header a {
      position:relative;
      display:block;
      width:100%;
      height:100%;
      z-index:0;
    }

    #header marquee {
      position:absolute;
      top:0;
      right:0;
      z-index:1;
      font-weight:bold;
    }

Btw: marquee ist kein HTML-Standard

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Skittles« (8. April 2009, 11:32)

crackyack

Mitglied

Dabei seit: 22.03.2009

Beiträge: 48

Mittwoch, 8. April 2009, 11:54

krass wie man Probleme lösen kann, danke euch :thumbsup:

jumps

Tripel-As

Dabei seit: 24.02.2009

Beiträge: 221

Mittwoch, 8. April 2009, 19:14

Marquee neigt jedoch sehr zum "Stocken", also dass der Text weniger fließt als vielmehr durch das Bild hüpft. Gibt einige Javascript Schnipsel, die doch um einiges ansehnlicher sind. Kannst auch zum Großteil deine eigenen News einfügen.