m.scatello Wäre natürlich eine (einfache) Alternative, die auch einfacher zu realisieren wäre... aber des Menschen Wille ist sein Himmelreich und wenn basti1012 danach fragt, dann will ich ihm zumindest einen Ansatz geben, wie man es machen könnte.
Ob er das dann nutzt, bleibt ihm natürlich selbst überlassen - und die Problematik und ggf Ungenauigkeit (zB ca. / ggf./...), die sich aus dieser Methode ergeben, muss man dann natürlich in Kauf nehmen.
Jep... mit dem Code ist ja nicht nur die Größe proportional und abhängig von der Displaybreite, sondern auch die Positionierung passt sich proportional an.
Dafür sollte dieses CSS (fast) vollständig responsive sein und alle Bildschirmgrößen abdecken.
basti1012 ... warum machst du dir das Leben unnötig schwer und plagst dich mit 'veralteten' Funktionen und irgendwelchen seltsamen regulären Ausdrücken herum. Das Problem ist doch trivial! Du willst einen 'kompletten' Satz (alles zwischen Satzzeichen - und oder Anfang/ Ende des Strings) extrahieren - oder habe ich das falsch verstanden.
Dann musst du doch bloß mit 'strpos()' die Position Suchwortes bestimmen,
dann mit 'strripos()' nach links von der gefunden Position die Position des letzten Vorkommens eines Satzzeichen (oder Stringanfang) bestimmen,
dann mit 'strpos()' die nächst folgende Position (oder Stringende) finden.
Dann hast du Anfangs- und Endposition deines Satze und kannst den mit 'substr()' ausgeben!
http://php.net/manual/de/function.strpos.php
und hier gleich noch ein Vorschlag!
Wenn es dir darauf ankommt, dass die Proportionen des Bildes (1000*500 bei einer Bildschirmbreite von 1920px) erhalten bleiben, dann kommt das wohl deinen Vorstellungen nahe:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<style>
#bild {
background-image: url("download.jpg");
background-repeat: no-repeat;
background-size: 100%;
position:relative;
width: calc(100vw / 1920 * 1000);
height: calc(100vw / 1920 * 500);
top: calc(100vw / 1920 * 100);
left: calc(100vw / 1920 * 100);
}
#textfeld {
position:relative;
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
top: calc(100vw / 1920 * 200);
left: calc(100vw / 1920 * 500);
}
</style>
</head>
<body>
<div id="bild">
<input type="text" id="textfeld"></input>
</div>
</body>
</html>Das Format 'background-size: 100%;' bei #bild kannst/solltest du noch nach deinen Vorstellungen modifizieren, damit es für dich passt!
https://www.w3schools.com/cssref/css3_pr_background-size.asp
Das ist schon mal nicht richtig, was du da an Code hast.
Das <style></style> gehört in den <head></head> Bereich!
Dann solltest du testen, ob es mit...
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;besser funktioniert.
Poste bitte den gesamten Code... HTML und CSS lassen sich nur als Einheit bewerten!
Besser noch wäre ein Link zur Seite - erspart jedem der dir helfen eine Menge Arbeit.
Nein.. mit dem Komma getrennt gilt es für sowohl als auch...
#Beispiel li -> nur für li im Container #Beispiel
#Beispiel li a -> nur für a im li im Container #Beispiel
#Beispiel li, a -> für li im Container #Beispiel und für a (egal wo)
du möchtest ja dem <a> im <li> im <ul> die Schriftfarbe geben, dann solltest du auch:
#downloadlinks li a
als Selektor nehmen!
Das geht mit der Pseudoklasse ':hover' - und damit es anklickbar ist und eine neue Seite öffnet, muss es ein Hyperlnk sein. Also so ein
'<a href="irgendwas.de">blabla</a>'
etwa so...
<!DOCTYPE html>
<html lang="de">
<head>
<style>
body{
background:red;
border:30px solid green;
}
h1 {
color: red;
background: black;
border:3px solid black;
font-size:45px;
}
a#box2 {
background-color: blue;
color: black;
position: absolute;
width: 200px;
height: 90px;
top: 655px;
left: 280px;
text-align: center;
transition: all 0.7s ease;
}
a#box2:hover {
background-color: green;
color: white;
transform: scale(1.1);
transition: all 0.7s ease;
}
</style>
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
<a id="box2" href="https://www.google.de" target="_blank">Klick mich!</a>
</body>
</html>Und wenn du einen Editor suchst, solltest du die Finger von diesen WYSIWYG Editoren lassen! Die produzieren in der Regel keinen guten Code und bereiten mehr Probleme, als dass sie nützlich sind.
Versuche mal Notepad++ https://notepad-plus-plus.org/download/v7.5.6.html damit kannst du auch deine Seite direkt in einem Browser anzeigen lassen!
Hmmm.. hatte das bisher nur am Desktop mit der Simulation der Bildschirmgröße getestet... und jetzt gerade auch mit dem Handy!
Desktop Simulation ist ok (wie ich geschrieben habe)... Handy geht gar nicht - da musst du noch was ändern - und ich vermute, es liegt daran, dass in deinem Code noch folgende Zeile fehlt!
<meta name=viewport content="width=device-width, initial-scale=1">Und das bitte in den <head></head> Bereich ziemlich weit oben!
Das sollte die Darstellung handytauglich machen, hab mal ein paar Screenshots beigefügt (Samsung Galaxy)
html-seminar.de/woltlab/attachment/1509/
html-seminar.de/woltlab/attachment/1510/
html-seminar.de/woltlab/attachment/1511/
Wobei die Bilder hier schon ca 2 mal so groß sind, wie das Handydisplay... es ist im Original kaum zu entziffern und das Menü ist nicht (bzw nur mit Glück) zu bedienen.
Bevor du dich um solche 'Kleinigkeiten' kümmerst, solltest du zunächst deine Seite 'validieren'!
https://validator.w3.org/check…29&doctype=Inline&group=0
Möglicherweise ist dein Problem dann schon behoben!
Optisch ganz nett und ansprechend gemacht. Sehr positiv, dass auf dieser ganze JS Schnick-Schnack, den man sonst so vorfindet, verzichtet wurde.
Navigation etwas gewöhnungsbedürftig - vielleicht sollte statt nur 'Zurück' auch in Unterebenen eine 'Home' angeboten werden.
Mobiles Hamburger-Menü für meinen Geschmack etwas zu groß geraten - aber über Geschmack lässt sich ja streiten.
In den Unterpunkten im Adminbereich sind die Überschriften zu 'groß'. Dadurch scrollt die Seite horizontal, wenn die Displaybreite zu klein wird (zB Handy 320px) - eigentlich ein NoNo!
Ansonsten... Daumen hoch!
Teste bitte mal, ob dich dieser CSS Code(Schnipsel) deinem Ziel näher bringt?
div.mb-3 > ul > li:nth-child(1){
display: flex;
align-content: space-between;
}
li label {
flex: 10;
}
li div.custom-control {
margin-right: 0px;
}Komme leider weder als 'testadmin' noch als 'testuser' da rein.
Ist die Seite online? Dann poste mal einen Link.
Wenn du das mit Bootstrap nicht so formatiert bekommst, wie du es brauchst, dann musst du das passende CSS 'händisch' schreiben - nur was da zu machen ist, kann man am ehesten sehen, wen man den Quellcode und das CSS sieht!
Hintegrundfarbe, Border etc. seh ich
Dann funktioniert es bei dir auch... es kann dann nur an einer fehlerhaften url(...) liegen.
Prüfe ganz genau, ob das, was du da eingetragen hast auch wirklich zu den Bildern führt!
Geht nicht
Geht nicht gibt's nicht!
Nur seltsam, dass der Code auf meinem Rechner funktioniert - also machst du irgendwas verkehrt!
Versuche es mal so...
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<style>
body {
background-color: darkgrey;
margin: 50px;
}
div.Hmm {
width: 90%;
height: 80vh;
margin: 5px auto;
border-style: solid;
border-width: 2px;
border-color: black;
background-image: url(03_bilder/kreis.png), url(03_bilder/polygon.png), url(03_bilder/quadrat.png);
background-repeat:no-repeat, no-repeat, no-repeat;
background-position: bottom center, top right, top left;
}
</style>
</head>
<body>
<div class="Hmm"></div>
</body>
</html>Ich denke, dieser Link trifft genau dein Problem...