XHTMLforum - Einzelnen Beitrag anzeigen - bootstrap tooltip-Problem

glupto · #3 (**permalink**) 17.01.2014, 23:17

meine Seite ist zu finden unter: Nachrichtentisch (Nicht vom Titel irritieren lassen, ist nur eine Testseite).

Mein Code:

HTML-Code:

<?php

ini_set("user_agent", "Mozilla/5.0 (compatible; Feedreader/PHP +".$_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"].")");
header("Content-Type: text/html; charset=UTF-8");
error_reporting(E_ALL);
$feedfu = "ff3.php";           

?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
    <title>Nachrichtentisch</title>
   

    <!-- Bootstrap core CSS -->
    <link href="http://veganesberlin.de/dist/css/bootstrap.css" rel="stylesheet">    
    <link href="http://veganesberlin.de/dist/css/bootstrap-theme.css" rel="stylesheet">    
   <link href="http://veganesberlin.de/navires.css" rel="stylesheet">
            

       </head>

  <body>
<div id="alles">
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container"  width="100%">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">NACHRICHTENTISCH</a>
        </div>
                  <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
                        <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ressorts <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Kultur</a></li>
                <li><a href="#">Wirtschaft</a></li>
                <li><a href="#">Wissen</a></li>
                <li><a href="#">Medien</a></li>
                <li><a href="#">Sport</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ressorts <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Kultur</a></li>
                <li><a href="#">Wirtschaft</a></li>
              </ul>
            </li>            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ausland <b class="caret"></b></a>
              <ul class="dropdown-menu">
                        <li><a href="aus.php">&Uuml;BERSICHT</a></li>
        				<li><a href="aususacan.php">USA/CAN</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Regionen <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Norddeutschland</a></li>
              </ul>
            </li>
          <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>

        </div><!--/.nav-collapse -->
  
      </div>
         
    </div>


     
  <!--   <div class="alles" style="margin: 70px 0px 10px 25px";>
     -->      
<?php

if (file_exists($feedfu)) {include_once $feedfu;
} else {echo "Feedfunktionen konnten nicht geladen werden!\n";
}
?>   


  <div class="main"  style="margin: 70px 0px 10px 10px;">
 
  
   <article>          
               <a href="http://www.tagesschau.de" target='_blank'> 
            <img src="../logos/tagesschau.jpg" alt="Tagesschau" class="img-rounded"/></a>          
            <ul>  
                 
          <?php

verarbeiteFeed("http://www.tagesschau.de/newsticker.rdf", "13");

?>   

          </ul>
            
            
</article>

  <article> 
  <a href="http://www.deutschlandfunk.de/nachrichten.353.de.html" target='_blank'> 

                       <img src="logos/dlf.jpg" alt="Deutschlandfunk" class="img-rounded"/></a>
         
          <ul>
          <?php

verarbeiteFeed("http://www.deutschlandfunk.de/nachrichten.353.de.tsrss", "9");

?> 
</ul>
 </article>
  <article>                       <a href="http://www.spiegel.de/" target='_blank'> 
  <img src="logos/spiegel.png" alt="Der Spiegel" class="img-rounded"/></a>

       
               <ul>     
          <?php

verarbeiteFeed("http://www.spiegel.de/index.rss", "13");

?>   
</ul>
 </article>
 


</div>

</div>




 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->

    
                   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://veganesberlin.de/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://veganesberlin.de/js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="http://veganesberlin.de/jquery.eqheight.js"></script>

    <script type="text/javascript" src="http://veganesberlin.de/scripts.js"></script>
  </body>
</html>

Mein bootstrap-css ist zu lang, nach mehrere Kürzungs- Versuchen mit diversen Abstürzen - bitte im Quelletext aufrufen!

mein eigenes css (navires.css:

Code:

body , ul , li {
     margin:0;
     padding:0;
    }

body{
background-color: #D9D9D9;
     background-position:center-top,
     background-repeat:no-repeat;
     font-family: "UnDotum", "Segoe UI", "Trebuchet MS", sans-serif;
     color: #0071b5;
     min-width: 400px;}

    #alles
    {
    margin: 0 auto;
    min-width: 50%;    
      

    }
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

article {
  float: left;
  width: 31%;
  background: #ccc;
  margin: 1% 1%;
  padding: 2%;
}
article ul {
  margin: 2px 2px;
 
}

#main
    {
    margin: 0 auto;
    width: 100%;    
    }
    
    @media only screen and (max-width: 480px)
    
    {
article {
    float: left;
  background: #ccc;
  margin: 5px 1%;
  padding: 2%;
    min-width: 96%;
  }
a {
    color: rgb(66, 139, 202);
    text-decoration: none;
}
#main
    {
    margin: 0 auto;
    width: 100%; 
    min-width:480px ;
    }
}
@media all and (max-width: 900px) {
article {
    float: left;
  background: #ccc;
  margin: 5px 1%;
  padding: 2%;
    width: 48%;
  }
a {
    color: rgb(66, 139, 202);
    text-decoration: none;
}
#main
    {
    margin: 0 auto;
    width: 100%; 
    min-width:400px ;
    }
}

  #header {float:left;
  width: 100%;}

    #main {
          width:100%;
      min-width:95%
     float:left;
    }



ul, li {
    font-size:14px; 
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:left;
}

#menu {
    clear: both;
	list-style:none;
	width:100%;
	margin: 0px auto 0px auto;
	height:43px;
	padding: 0px 0px 0px 0px;

	/* Rounded Corners */
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Background color and gradients */
	
	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
	
	/* Borders */
	
	border: 1px solid #002232;

	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 0px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;
	border:none;
}

#menu li:hover {
	border: 1px solid #777777;
	padding: 4px 9px 4px 9px;
	
	/* Background color and gradients */
	
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	
	/* Rounded corners */
	
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px; 
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
	padding-right:21px;
	background:url("http://xhtmlforum.de/images/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("http://xhtmlforum.de/images/drop.png") no-repeat right 7px;
}

.dropdown_1column, 
.dropdown_1acolumn, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #777777;
	border-top:none;
	
	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_1acolumn {width: 100px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 650px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_1acolumn, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
	left:-1px;
	top:auto;
}

.col_1,
.col_1a,
.col_2,
.col_3,
.col_4,
.col_5 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:130px;}
.col_1a {width:100px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
	float:right;
	margin-right:0px;
}
#menu li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:14px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
	font-size:21px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:14px;
	border-bottom:1px solid #666666;
}
#menu h3 {
	font-size:14px;
	margin:7px 0 14px 0;
	padding-bottom:7px;
	border-bottom:1px solid #888888;
}
#menu p {
	line-height:18px;
	margin:0 0 10px 0;
}

#menu li:hover div a {
	font-size:12px;
	color:#015b86;
}
#menu li:hover div a:hover {
	color:#029feb;
}


.strong {
	font-weight:bold;
}
.italic {
	font-style:italic;
}

.imgshadow { /* Better style on light background */
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777777;
	margin-top:5px;
	-moz-box-shadow:0px 0px 5px #666666;
	-webkit-box-shadow:0px 0px 5px #666666;
	box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
	width:auto;
	float:left;
	margin:5px 15px 5px 5px;
}

#menu li .black_box {
	background-color:#333333;
	color: #eeeeee;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

	/* Shadow */
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:24px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}

#menu li .greybox li {
	background:#F4F4F4;
	border:1px solid #bbbbbb;
	margin:0px 0px 4px 0px;
	padding:4px 6px 4px 6px;
	width:116px;

	/* Rounded Corners */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
	background:#ffffff;
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}
      #col1 {
     clear:both;
    }
    
    #col1 , #col2 {
    float:left;
    width: 50%;
    height: 100%;
    min-height:500px;
    }
  
    #col1 .border {
     margin-right:0;
    }


    a:link
    { font-family: Verdana,Arial;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    text-underline: none; }

    a:hover
    { font-family: Verdana,Arial;
    font-size: 14px;
    color: #000000;
    text-decoration: underline; }

    .border {
     background-color: white;
     margin:0px;
     padding-left:50px;
     padding-right:0px;
     padding-bottom:15px;
     border:15px;
         border-style: ridge;
	   border-color:  #2EC4FF;
            line-height: 14pt;

}

/* Position */
#nach_oben {
  position: fixed;
  bottom: 30px;
  margin-left: -50px; }

/* Aussehen des Buttons */
#nach_oben a {
 width: auto;
 padding: 0px 0px 0px 0px;
 display: block;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #FFFFFF;
 font-size: 11px;
 font-family: arial;
 background-color: #006464;
 
 
 border: 0px solid #c9c9c9;
 -webkit-border-radius: 25px;
 -moz-border-radius: 25px;
 border-radius: 25px;

/* transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s; 
 outline: none;}

/* Hover bei Mauskontakt */
#nach_oben a:hover {
 color: #000;
 background-color: orange; 
 text-decoration: none;}

    #footer {
          clear:both;
    }

Mein feereader ff3.php

PHP-Code:


			
<?php

// Die Hauptfunktion

function verarbeiteFeed($urlfeed, $maxim) {

  /*  $maxim = 10; */
    $link  = false;
    $lesen = false;
    $start = 0;
    $zaehl = 0;
    define("SCHLIESSE", ">");                // Für valides HTML je nach Dokumenttyp-Deklaration bei HTML ">" oder bei XHTML " />"

    if ((@$data = file_get_contents($urlfeed)) == false) 
    {
    echo $urlfeed;
    echo " ist nicht erreichbar. Bitte versuchen Sie, mit F5 zu aktualisieren!";
    }
    
    else {

        $pxml = simplexml_load_string(wandleTags($data), "SimpleXMLElement", LIBXML_NOCDATA);

        if ($pxml->channel->item) $lesen = $pxml->channel->item;
        if ($pxml->entry)         $lesen = $pxml->entry;
        if ($pxml->item)         $lesen = $pxml->item;


if (strlen($lesen[0]->title) > 0 or strlen($lesen[1]->title) > 0) {

    foreach ($lesen as $nachricht) {
 

        if ($nachricht->title != false) {                  /*-- Auswählen, ob Link für RSS $nachricht->link oder Atom $nachricht->link->attributes() --------*/

                if ($nachricht->link) {

                    if ((string)$nachricht->link) {
                        $link = $nachricht->link;
                    }
                    elseif ($nachricht->link->attributes()) {
                        $attr = $nachricht->link->attributes();
                        $link = $attr["href"];
                    }
                }

                /*-- Titel mit Link ------------------------------------------------------------------------------*/
$title = ($nachricht->title);
                    if (($nachricht->title) && ($title!="") && ($title != NULL)){

                    if (($nachricht->summary) != false) {
/*
$summ = ($nachricht->summary);
$summ = str_replace("<br/>", " ", $summ);
$summ = trim($summ);*/

                    echo "<li><a href=\"".htmlspecialchars(filtereLinks($link), ENT_QUOTES)."\" target=\"_blank\" class=\"tip\" data-toggle=\"tooltip\" data-placement=\"auto bottom\" data-delay=\"800\"  title=\"".htmlspecialchars(filtereHTML($nachricht->summary), ENT_QUOTES)."\">".
                    htmlspecialchars(filtereHTML($nachricht->title), ENT_QUOTES)."</a></li>\n";
                }

                    if (($nachricht->description) != false) {

$desc = ($nachricht->description);
$desc = str_replace("&nbsp;", "", $desc);
$desc = str_replace("<br/>", " ", $desc);
$desc = preg_replace("#\s{2,}#", "", $desc); 
$desc = trim($desc);
$trenn = "Mehr zum Thema";
$desc = explode($trenn, $desc);
$desc = $desc[0];
$title = $nachricht->title;



                    echo "<li><a href=\"".htmlspecialchars(filtereLinks($link), ENT_QUOTES)."\" target=\"_blank\"   
                  class=\"tip\" data-toggle=\"tooltip\" data-placement=\"auto bottom\" data-delay=\"800\" title=\"".htmlspecialchars (filtereHTML($desc), ENT_QUOTES)."\">".
                    $title."</a></li>\n";
                    
                }
                    if ((($nachricht->content) != false) && (($nachricht->description) != true) && (($nachricht->summary) != true))
{

$cont = ($nachricht->content);
$cont = trim($cont);




                    echo "<li><a href=\"".htmlspecialchars(filtereLinks($link), ENT_QUOTES)."\" target=\"_blank\" class=\"tip\" data-toggle=\"tooltip\" data-placement=\"auto bottom\" data-delay=\"800\"  title=\"".htmlspecialchars(filtereHTML($cont), ENT_QUOTES)."\">".
                    htmlspecialchars(filtereHTML($nachricht->title), ENT_QUOTES)."</a></li>\n";
                }
}

                                     $start++;
                if ($start == $maxim) 
                
                {
                    break;
                }
            }
        }
    } else { echo "<br".SCHLIESSE."Feed konnte nicht geladen werden!\n";
    }
}
}
// Die Nebenfunktionen

function wandleTags($daten) {

    $daten = str_replace("content:encoded", "content", $daten);
    $daten = preg_replace_callback("/(&[#a-z0-9]+;)/",

        function($enti) {

            return htmlspecialchars(mb_convert_encoding($enti[1], "UTF-8", "HTML-ENTITIES"));
        }, $daten);

    if (strpos($daten, "><item>") !== false) {

        $eing  = array(

            "><item>"        => ">\r\n<item>",
            "><title>"       => ">\r\n<title>",
            "><link>"        => ">\r\n<link>",
            "><description>" => ">\r\n<description>",
            "><content>"     => ">\r\n<content>",
            "><summary>>"    => ">\r\n<summary>>",
            "><enclosure>"   => ">\r\n<enclosure>",
            "><pubDate>"     => ">\r\n<pubDate>",
            "><updated>"     => ">\r\n<updated>",
            "><published>"   => ">\r\n<published",
            "><author>"      => ">\r\n<author>",
            "><creator>"     => ">\r\n<creator>"
        );
        $daten = strtr($daten, $eing);
    }
    return $daten;
}
function filtereHTML($daten) {

    $daten = preg_replace("/<.+?>/is", "", $daten);
   
    return $daten;
}
function filtereLinks($daten) {

   if (($pos = strpos($daten, "#")) !== false) {
        $daten = substr($daten, 0, $pos);
    } 
 
    $daten = preg_replace("/[^a-z0-9_\/=.:;&!?-]/is", "", $daten);
    return $daten;
}  
?>

So, das ist alles, das Problem hatte ich ja schon beschrieben.
Gruß
glupto