zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tooltip-Breite dem Inhalt anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 02.02.2012, 19:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
@Corina: S. 166
Ich hatte schon nachgelesen -- und kann es trotzdem nicht einordnen.
Abs. pos. ohne width -> shrink-to-fit
display:table -> shrink-to-fit
abs. pos. + display:table -> anderes shrink-to-fit?

Wenn ich deinen Code in IE9 und Opera 11.dings anschaue sehe ich das gleiche wie in Fx9 -- einen Tooltip, der nicht breiter als "min-content" wird.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 02.02.2012, 20:01
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

width: -moz-max-content habe ich für mich als "nimm die bevorzugte Breite bzw. die maximale Zellbreite an" übersetzt ("preferred width / maximum cell width"), daher sollte die Tabelle auf ihren Inhalt gut achten und sich nicht zusammenschnurren lassen.

Ich wundere mich auch, warum das Chrome so ohne Weiteres macht, also die Tabelle so belässt, wie sie ist: Chrome scheint hier der Tabelle die Möglichkeit zu geben, sich trotz position:absolute frei zu entfalten.

IE9 und Opera sind vollkommen außer Acht gelassen. Um es deutlich zu sagen: das Vorhaben klappt wahrscheinlich nicht in allen Browsern, die so unterwegs sind.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 02.02.2012, 20:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
Ich wundere mich auch, warum das Chrome so ohne Weiteres macht, also die Tabelle so belässt, wie sie ist: Chrome scheint hier der Tabelle die Möglichkeit zu geben, sich trotz position:absolute frei zu entfalten.
Mir fällt auch keine Begründung dafür ein.

Und da das alles jetzt wirklich verwirrend war: Folgendes meinte ich oben mit dem zusätzlichen Verschachtelung.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tooltip</title>
<style type="text/css">
#page {
    margin: 0 auto;
    padding: 300px;
    width: 500px;
}
.tooltip-wrapper:link, 
.tooltip-wrapper:visited {
    position: relative;
}

.tooltip-wrapper .tooltip {
    display: none;
}
.tooltip-wrapper:hover .tooltip {
    bottom: 2em;
    display: block;
    left: 30%;
    position: absolute;
    z-index: 1;
    width:350px; /* Vorgabebreite */
}
.tooltip-inner {
    background-color: #fff;
    border: 1px solid #000;
    bottom: 0;
    padding: 10px;
    position: absolute;
}
.tooltip-wrapper span,
.tooltip-wrapper em,
.tooltip-wrapper strong {
    display: block;
}


</style>
</head>

<body>
<div id="page">
    <a href="#" class="tooltip-wrapper">
        Link 1
        <span class="tooltip">
            <span class="tooltip-inner">
                <strong>Tooltip Überschrift 1</strong>
                <em>Subline</em>
                <span>
                    Info 1<br />
                    Hier folgt ein Detailtext.
                </span>
            </span>
        </span>
    </a>
    <br>
    <a href="#" class="tooltip-wrapper">
        Link 2
        <span class="tooltip">
            <span class="tooltip-inner">
                <strong>Längerer Tooltip Überschrift 2</strong>
                <em>längere Subline</em>
                <span>
                    längere Info 2<br>
                    Hier folgt ein langer Detailtext, der mehr Zeichen behinhaltet, als der erste Tooltip.
                </span>
            </span>
        </span>
    </a>
    <br>
</div>
</body>
</html>
.tooltip wird zum Containing Block für .tooltip-inner und gibt die gewünschte Breite vor -- und tooltip-inner kann rumshrinken, wie's ihm gefällt.
Nicht elegant, aber zumindest einem Schnelltest hat es standgehalten. IE6-tauglich wird's wohl nicht sein.
Mit Zitat antworten
  #14 (permalink)  
Alt 02.02.2012, 22:07
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

das ist cool, ein eingepferchter Ballon.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #15 (permalink)  
Alt 03.02.2012, 09:57
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

Guten Morgen zusammen,

wow, hier hat sich über Nacht ja Einiges getan . Auf geht’s, ich arbeite mich erstmal durch alle Antworten .

Viele Grüße
__________________
Über mich gibs nix zu sagen.
Mit Zitat antworten
  #16 (permalink)  
Alt 06.02.2012, 18:01
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

@Corina: Dein Lösungsansatz ist genial. Darauf hätte ich eigentlich auch selbst kommen müssen, aber ich habe wohl die ganze Zeit nach einer möglichst komplizierten Lösung gesucht .

Vielen Dank dafür!

Viele Grüße
__________________
Über mich gibs nix zu sagen.
Mit Zitat antworten
Antwort

Stichwörter
breite, flexibel, inhalt, max-width, min-width, tooltip

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div höhe - 2 scrollbalken vermeiden grubentaucher CSS 4 07.04.2010 11:16
Probleme mit dem Layout: divanordnung Muckel CSS 8 29.06.2008 11:28
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 18:57
CSS Layout: Höhe dem Inhalt anpassen - mit Mindesthöhe trequ CSS 3 05.09.2004 11:29
Breite von DIVs Daniel CSS 8 23.06.2003 18:01


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:04 Uhr.