|
|||
bootstrap tooltip-Problem
Hallo, ich habe mir ein schon fast funktionierendes bootstrap-Tooltip zerschossen. Jetzt wird der tooltip - wenn ich im css "position: relative" angebe - direkt unter meiner 'li' Zeile (innerhalb von 'ul' ) angezeigt (wenn auch ohne arrow), andererseits aber die nächste 'li'-Zeile nach unten verschoben. Und obwohl ich bei der Ausgabe "data-placement: auto bottom" angebe, steht der tooltip immer unten.
Wenn ich dagegen "position: absolute" angebe, steht der tooltip inklusive arrow links oben in der Browserecke. Ich will hier nicht die ganze "bootstrap.css"-Datei angeben, aber der entscheidende Teil sieht so aus: Code:
.tooltip { position: absolute; z-index: 1030; display: inline; font-size: 12px; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); visibility: visible; } .tooltip.in { opacity: 0.9; filter: alpha(opacity=90); } .tooltip.top { padding: 5px 0; margin-top: -3px; } .tooltip.right { padding: 0 5px; margin-left: 3px; } .tooltip.bottom { padding: 5px 0; margin-top: 3px; } .tooltip.left { padding: 0 5px; margin-left: -3px; } .tooltip-inner { max-width: 300px; padding: 3px 8px; color: #ffffff;; text-align: center; text-decoration: none; background-color: #4c4c4c; border-radius: 4px; } .tooltip-arrow { position: relative; width: 0; height: 0; border-color: transparent; border-style: solid; } .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-color: #4c4c4c; border-width: 5px 5px 0; } .tooltip.top-left .tooltip-arrow { bottom: 0; left: 5px; border-top-color: #000000; border-width: 5px 5px 0; } .tooltip.top-right .tooltip-arrow { right: 5px; bottom: 0; border-top-color: #000000; border-width: 5px 5px 0; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-right-color: #000000; border-width: 5px 5px 5px 0; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-left-color: #000000; border-width: 5px 0 5px 5px; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-bottom-color: #000000; border-width: 0 5px 5px; } .tooltip.bottom-left .tooltip-arrow { top: 0; left: 5px; border-bottom-color: #000000; border-width: 0 5px 5px; } .tooltip.bottom-right .tooltip-arrow { top: 0; right: 5px; border-bottom-color: #000000; border-width: 0 5px 5px; } Code:
$(function() { $(".tip").tooltip(); }); PHP-Code:
Danke Gruß glupto |
Sponsored Links |
|
||||
Es hilft ungemein, den Kram hochzuladen, damit wir es uns anschauen können. Mit fetzen und unfertigem Code kann man nichts anfangen.
P.S. Deine PHP ausgaben kannst du optimieren, indem du es beispielsweise so machen würdest: PHP-Code:
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
|||
also
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">Ü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 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; } PHP-Code:
So, das ist alles, das Problem hatte ich ja schon beschrieben. Gruß glupto |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Template System und HTML5 mit Bootstrap - Problem!? | SourceSkyBoxer | Serveradministration und serverseitige Scripte | 10 | 15.09.2012 20:35 |
Problem mit Text neben Navigationsleiste | andi01 | CSS | 6 | 08.06.2011 17:54 |
IE8 Problem - CSS tooltip verschiebt Menüpunkte | kenobi | CSS | 1 | 17.02.2011 16:34 |
Problem mit Tooltip und Bild | s6-roXx | CSS | 6 | 03.04.2007 15:32 |
Problem mit ToolTip im IE | t2x | CSS | 5 | 13.01.2007 16:46 |