Nein, sie floaten nicht. Weder im aktuellen Firefox noch in Microsoft Edge unter Win10 noch auf meinem Smartphone!
Beiträge von nordi0
-
-
Nachdem float-Elemente ohnehin automatisch die Block-Eigenschaft annimmt, hilft es auch nicht, den span-Elementen display: block hinzuzufügen. Warum floaten also meine span-Elemente nicht, wenn sie ein div umgibt? Was muss ich ändern?
-
Folgende (verkürzte) HTML-Datei ermöglicht ein Floaten der Elemente (hier nur Überschriften), sofern keine Wrapper-Klasse mit div drüber ist. Warum? Kann das nicht nachvollziehen. Auch Firefox lässt dies das in den Entwicklertools bei CSS nicht nachvollziehen.
ZitatAlles anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<style>
body, body.normal { max-width:900px; margin-left:auto; margin-right:auto; padding-left:5px; padding-right:2px;
background-color:white; }
.wrapper { margin:0; padding:0; width: 900px; }
span.t-Art { width: 30px; background-color: #EBF4F1; float: left; white-space: normal;}
span.t-Var { width: 60px; background-color: #CFE4DD; float: left; white-space: normal;}
span.t-Zeit { width: 70px; background-color: #EBF4F1; float: left; white-space: normal;}
span.t-Aus { width: 120px; background-color: #CFE4DD;float: left; white-space: normal;}
span.t-Taetig { width: 100px; background-color: #EBF4F1;float: left; white-space: normal;}
span.t-Beschr { width: 440px; background-color:#FFFBCB; float: left; white-space: normal;}
</style>
</head>
<body class='normal'>
<div name='inhalt' class='wrapper'>
<span class='t-Art'>Art</span>
<span class='t-Var'>Variante</span>
<span class='t-Zeit'>Zeitraum</span>
<span class='t-Zeit'>Zeitraum2</span>
<span class='t-Aus'>Auslöser</span>
<span class='t-Taetig'>Tätigkeit</span>
<span class='t-Beschr'>Beschreibung</span>
</div>
</body>
</html>Bitte nur konkret auf die Frage antworten. Danke.
-
Danke, das Beispiel hat mir geholfen. Habe jetzt folgende CSS-Definitionen:
Zitata.info { color:#4E6363; text-decoration-style: dotted; text-decoration-line: underline; font-weight: normal; }
a span {display: hidden; position: absolute; color:#ccffff; background:#008800; padding: 5px; z-Index: 1; }
a {position: relative; color:ivory4; }
a:hover span {display: block; text-align: center; font-family:Arial,sans-serif; visibility: visible; }Bei 'a span' kam 'z-Index: 1' hinzu, bei 'a:hover span' visibility: visible'
-
Danke für die ausführliche Antwort. Ein paar Kommentare zunächst:
- Das Beispiel mit dem LinkTag habe ich so auf einer Webseite gefunden.
- Das mit dem !important außerhalb der Klammer beschreibe ich ja, dass das ein Fehler ist. Nur mit dem Fehler funktioniert es sowohl in Firefox als auch im Edge wie ich mir das auch wünsche. Das ist ja das komische. Nachdem ich herangegangen bin Fehler im CSS auszubessern, welches mir ein Tool anzeigt, ist der Fehler in der Anzeige aufgetaucht.
- Ich habe nirgends woanders opacity oder transparent definiert, ist also völlig überflüssig. Dies zeigt auch in Firefox Entwickler-Werkzeug / Element untersuchen an.Glaube, da gibts noch ein Mißverständnis. Ich möchte den Span-Text nicht als Zeile, sondern als Block ausgeben, dieser soll den Text herum überdecken, solange man mit der Maus darauf ist. Bei deinem Beispiel wird der Folgetext verschoben, was nicht sein soll. Um den eingeblendeten Text besser lesen zu können, hat er auch eine Hintergrundfarbe... Schau dir mal den Link https://garteln.info/events.php?pflanze=Gurken&monat=da funktioniert es auch. Allerdings mit dem blöden CSS-Fehler !important außerhalb der Klammer. Wenn ich den weglasse, wird die Schrift des eingeblendeten Blocks transparent, allerdings nur, wenn sich andere solche Elemente im Hintergrund befinden. Befindet sich im Hintergrund ein Text z. B. mit <p>, besteht das Problem nicht.
Hoffe, ich habe das Problem jetzt besser umrissen.
-
Ich habe untereinander mehrere Texte mit SPAN für Einblendung von Texten, wenn mit der Maus darübergefahren wird oder darauf geklickt wird.
<a href='#' class='info'>M04-E06<span>Mitte April - Ende Juni</span></a>
Solche Felder werden mit ähnlichen Feldern untereinander dargestellt. Da die eingeblendete Info gut leserlich sein soll, dürfen die darunterliegenden Informationen nicht durchscheinen. Darunter gibt es noch eine Legende:
<p class='legende'>Erklärung:...</p>Habe folgende CSS-Definitionen:
Zitata.info { color:#4E6363; text-decoration-style: dotted; text-decoration-line: underline; font-weight: normal; }
a span {display: none; position: absolute; color:#ccffff; background:#008800; padding: 5px; opacity:1.0 !important;} !important
a {position: relative; color:ivory4; }
a:hover span {display: block; text-align: center; font-family:Arial,sans-serif; opacity:1.0 !important; } !importantTrotz des außerhalb der '}' befindlichen 2. !important , was scheinbar fehlerhaft ist, funktioniert alles bestens, sowohl in Firefox als auch im Edge.
Wenn dieses !important außerhalb der Definition jeweils weggenommen wird, wird beim Darüberfahren die Einblendung halb transparent dargestellt, wenn sich
darunter solche gleichen Elemente befinden. Im Gegensatz dazu scheint die Legende, definiert durchZitat.legende { max-width: 1200px; font-size: 90%; font-family:Arial,sans-serif; font-style:italic; text-align: left; }
nicht transparent hindurch!?Vordergrund und Hintergrundfarbe des eingeblendeten Textes wird immer richtig dargestellt.
-
Danke, funktioniert.
-
Ich habe ein Inputfeld, indem sowohl ein herkömmliches Datum eingegeben werden kann (TTMMJJ) als auch ein "gärtnerisches". Z. B. Anfang Feber 2017 (= A0217), Mitte Mai 2017 (= M0517, Ende August 2017 (=E0817). Dies deswegen, da oft das genaue Datum nicht mehr so genau zu ermitteln ist und die Angaben für Aussaat, Pflege und Ernte auch so beschrieben werden (Mitte Feber...). Verwende Firefox 50.
Jetzt funktionieren beide Pattern für sich alleine:
gärtnerisches Datum: pattern='[AME]{1,1}[0-1]{1,1}[0-9]{1,1}[1-2]{1,1}[0-9]{1,1}'>
herkömmloiches Datum: pattern='[0-3]{1,1}[0-9]{1,1}[0-1]{1,1}[0-9]{1,1}[1-2]{1,1}[0-9]{1,1}'Auch wenn ich es mit der Pipeline und Klammern kombiniere, funktioniert das herkömmliche Datum, nimmt aber nicht das gärtnerische:
pattern='([AME]{1,1})|([0-3]{1,1}[0-9]{1,1})[0-1]{1,1}[0-9]{1,1}[1-2]{1,1}[0-9]{1,1}'
A wird noch akzeptiert, jede weitere Eingabe wird schon als invalid angezeigt. Ist das mit unterschiedlichen Stellen nicht möglich? Durch die Klammer müsste der hintere Teil immer gleich sein, oder?
Edge erlaubt übrigens alles, hat scheinbar pattern nicht implementiert!? Und zeigt beim Anspringen des Feldes meine PLZ an ...
lg
-
Ich frage mit php eine MySQL-DB in UTF8 ab und erzeuge HTML5 mit UTF8. Dabei wandle ich um
$inhalt = htmlentities($Feld,ENT_QUOTES | ENT_HTML5 | ENT_SUBSTITUTE,'UTF-8');
Dabei bekomme ich HTML-benannt statt UNI-CODE UTF8. Also z. B. möchte ich für 'ß' statt 'ß' die Folge '%C3%9F' bekommen.
Wie ist das möglich? Danke.