Border-radius mit text nur innen

Dumpfbacke · 21.05.2023

Hallo,
möchte border-radius rechtecke mit gerundeten Ecken machen und in diese "Rechtecke" Text einfügen.
style.css:
#box1{
background-color: silver;
Position: absolute;
Top: 200px;
Left:100px;
Width:35em;
Heigth: 25em;
Border:1px Solid black;
Moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px}

Index.html

<body>
<div class="box1">
<p>text.....text...text</p>
</div>

Funktioniert auch "ziemlich".
Nur wenns zu viel text wird wird über die "Grenzen der runden Ecken" text ausgegeben.
Kann ich eine border-radius Box größer und eine border-radius Box kleiner ohne randstrich nach innen legen?
Hat jemand einen Tip oder das Problem schon gelöst?
Wäre sehr gut da ich im Kreis laufe und den Ausweg nicht sehe?

AndreasB · 22.05.2023

Also, dein Code funktioniert nicht, da dein Selektor eine ID anspricht du aber deinem div eine Klasse gegeben hast.
außerdem ist height falsch geschrieben und Moz-border-radius:40px; ist auch keine gültige Eingenschaft.

Ich verstehe nicht, wie es hinterher aussehen soll. Kannst du

Dumpfbacke schrieb:
Kann ich eine border-radius Box größer und eine border-radius Box kleiner ohne randstrich nach innen legen?

nochmal genauer erklären? Eventuell mit einem BIld, wie du es dir vorstellst?

Sempervivum · 22.05.2023

Ich denke mal, der Fragesteller meint den Effekt, der hier in der Grafik ganz am Anfang demonstriert wird:
https://stackoverflow.com/questions/73133360/avoiding-border-radius-with-text-in-span

Einfache Lösung indem man dem p-Element auch seitlich einen Außenabstand gibt:

Code:

        .box1 p {
            margin: 20px;
        }

Will man dagegen, dass der Text genau dem Rand folgt, muss man wahrscheinlich shape-outside verwenden, wie hier angegeben:
https://skeate.dev/2015/07/13/Wrapping-Text-to-Fit-Shaped-Containers-with-CSS.html

Dumpfbacke · 22.05.2023

Vielen Dank,
habe eine Lösung gefunden...
wobei mir die Idee von Sempervivum am sinnvollsten, einfachsten erscheint...
habe mir die Lösung hier geholt: https://stackoverflow.com/questions/42463930/box-inside-a-box-css-div
Vielen Dank, für die wirklich hilfreichen Anregungen.... Manchmal läuft der Kopf Wege die unbegreiflich sind...
vielen Dank Sempervivum geniale Lösung und so "klar"....

Sempervivum · 22.05.2023

Das ist ja erfreulich, dass Du das Problem lösen konntest. Verrätst Du uns auch, wie deine Lösung jetzt genau aussieht?

Dumpfbacke · 24.05.2023

Natürlich, auch wenn ich sicherlich noch ein wenig nachbessern muss...
So werden letztendlich die "Sprechblasen" die ich im "Blog" anzeigen möchte mit Text im bunten Rechteck angezeigt...



</html>
<!DOCTYPE html>
<html lang="de">
<head>
<title>CSS3: border-radius</title>
<meta charset="UTF-8">
<link href="css3-abgerundete-ecken.css" rel="stylesheet">
</head>

<body>
<div id="box1">
<div id="box2" float="left">
<div id="textoagenda">
<p> Text für die "Überschrift"
<li>listenpunkt 1---n</li>
<li><listenpunkt 1---n</li>
</p>

</div
</div>
</div>
</body>
</html>

/*boxen mit abgerundeten Ecken und ohne überstand der Schrift */
#box1 { width: 350px; height: 50px; background-color: white; }
#box2{ height: 230px; background-color: #9f4fa3; border-radius: 10px; margin-top: 10px; width: 600px; }
#textoagenda{ text-align: center; }

Sempervivum · 24.05.2023

auch wenn ich sicherlich noch ein wenig nachbessern muss...

Den Eindruck habe ich auch, das HTML ist noch voller Fehler, siehe meine Kommentare:

Code:

<body>
<div id="box1">
<div id="box2" float="left">
<div id="textoagenda">
<p> Text für die "Überschrift" <!-- Eine Liste innerhalb einer Überschrift ist, zumindest semantisch, verfehlt -->
<li>listenpunkt 1---n</li>
<li><listenpunkt 1---n</li> <!-- die öffnende spitze Klammer von "listenpunkt" muss weg -->
</p>


</div    <!-- Hier wiederum fehlt die schließende spitze Klammer -->
</div>
</div>
</body>
</html>

"float" ist nicht unbedingt ein Fehler aber in den allermeisten Fällen nicht angebracht. Mache dich besser gleich mit Flex- und Gridlayout vertraut, dann gehst Du den Problemen, die mit float verbunden sind, aus dem Wege.

Dumpfbacke · 24.05.2023

Danke, bin bereits am lesen... weiss, dass meine "Webseitengedönse" nicht mehr aktuell ist... habe mitte der 90er Jahre mal HTML versucht zu verstehen und dann rund 25 Jahre wegen Beruf usw. aus der Bahn geschossen
die öffnende klammer war ein fehler... bei einfügen mit vi und ich habs überlesen... da ich auf der Flucht in die Uniklinik bin zur "Generalüberholung"

Sempervivum · 24.05.2023

bei einfügen mit vi

VI ist zwar ein sehr guter Editor und ich habe im Beruf früher auch viel damit gearbeitet aber für Webentwicklung gibt es sehr viel besseres. Ich empfehle Visual Studio Code, der zeigt dir gleich beim Editieren die Fehler an:

Dumpfbacke · 24.05.2023

Danke sehr.
Leider Gottseidank, nutze ich null Produkte von MS. Nur BSD oder Linux... da ich größten Wert auf Zuverlässigkeit lege und der Zugang auf alle Dateien mir sehr missfällt. Baue mir zur Zeit ein System mit linux from scratch da mir die Art was 'Ubuntu' mit dem OS macht nicht gefällt... will Sourcecode lesen und verstehen...
Ajax hörte ich oft...
Aber noch nicht probiert...

Sempervivum · 24.05.2023

Verstehe, aber das muss kein Grund sein, auf einen Webeditor zu verzichten. Gibt sicher auch für Linux welche, NetBeans könnte vielleicht in Frage kommen.

Seit ich das automatische Markieren von Fehlern gleich bei der Eingabe in Webmatrix kennen gelernt habe, möchte ich nicht darauf verzichten. Ebenso Auto-Vervollständigung und die Anzeige der Syntax von Funktionen.

Dumpfbacke · 24.05.2023

Danke sehr, werd mir einen suchen sobald ich aktiv genug bin dass es Sinnvoll ist

Border-radius mit text nur innen

Dumpfbacke

Member

AndreasB

Well-known member

Sempervivum

Well-known member

Dumpfbacke

Member

Sempervivum

Well-known member

Dumpfbacke

Member

Sempervivum

Well-known member

Dumpfbacke

Member

Sempervivum

Well-known member

Dumpfbacke

Member

Sempervivum

Well-known member

Dumpfbacke

Member

Border-radius mit text nur innen

Border-radius mit text nur innen