Frage von Rutherford1981, 48

Html + CSS Freie Flächen mit CSS gestalten ohne Schrift im HTML-Code?

Die Frage ist etwas blöd zu erklären, daher ne Ausführung: Also man kann ja alles was man mit html geschrieben hat mit CSS nacher formatieren bzw. optisch anpassen (Schriftgröße, Farbe, Abstände usw.). Alle dinge die man mit html macht haben ja nen Text. Also zum Beispiel h1 .. Heute ist es schönes Wetter.... h2....die Sonne scheint.

Jetzt möchte ich wissen ob man auch etwas gestalten kann ohne dass im Html eine Text hinterlegt hat, also zum Beispiel ich möchte oben rechts auf meiner Website eine quadratische Fläche haben die eine Farbe enthält. Auf dieser Fläche soll sich kein Text befinden.

Falls das geht, kann man das einfach so machen oder entspricht das nicht dem html Standard. Soll man da am besten einfach nen div Tag verwenden und den dan Leerlassen im html?

Ein Beispielcode währe hilfreich. Vielen Dank LG

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von RedKungFuMastr, 32

Jeder Browser hat einen Standart für die Pixelhöhe der Schrift. Wenn du einem Tag einen Text einfügst, weiß der Browser welche Höhe das Element hat und kann es als Fläche darstellen.

Nun hast du einen Tag, der weder Höhe, Breite, noch einen Text besitzt und wird natürlich auch nicht angezeigt.

Du hast nun 2 Varianten das zu machen.

1. Du setzt ein Leerzeichen in das Tag

 

2. Du setzt Höhe und Breite selbst:

.mein-tag{ width: 100px; height: 100px; }

Die erste Variante hat den Vorteil, dass man den Text hinterher noch verändern kann. Und wenn du eine größere Fläche haben willst, kannst du auch paddings nutzen.

Kommentar von Rutherford1981 ,

Ok, super. Habe es schon probiert mit div und text weggelassen da kommt gar nix, ich probiere es mal mit Ihrer Methode aus

Antwort
von Sarkophator, 20

Kann ehrlich gesagt nicht ganz folgen, zumindest nennst du die Lösung doch bereits selbst?

Einfach ein leeres div-Element erstellen, dieses kannst du dann dort hinplatzieren und es macht genau das was du möchtest.

Generell könntest du theoretisch schon h1-Elemente, h2-Elemente und viele weitere Elemente für die gleiche Aufgabe benutzen, sofern du denen über CSS eine Breite und Höhe (und ggf. display auf block o.ä. stellst) allerdings ist das kein sauberer Code, sollte man nicht machen und einen Vorteil gegenüber einem div-Element sehe ich auch nicht wirklich.

https://jsfiddle.net/3f6g1xok/

Zumindest wenn es das ist was du meintest.

Kommentar von Rutherford1981 ,

Danke, mir ging es auch darum ob man das machen kann, wegen html standard. Das mit dem Div habe ich gerstern ausprobiert also einfach nur Div-Tag und den leer gelassen und es funktioniert net;-(

Kommentar von Sarkophator ,

Das kommt drauf an wie du das div verwenden möchtest und wie du das umsetzt. Für dein Beispiel gibt es genug verschiedene Möglichkeiten, auch abhängig davon was genau du damit machen möchtest, denn interpretieren kann man das auch in verschiedensten Arten und Weisen.

Hier mal ein Beispiel mit position absolute/fixed, float und mit Flexbox:

https://jsfiddle.net/1u97berz/3/

Das Interessante ist der CSS/HTML-Teil (außer die Buttons), das JavaScript ist auch nur für die Buttons.

Antwort
von RakonDark, 18

das geht mit jedem tag :)

grundlegend muss da nichts mit inhalt gefüllt sein ,

die meisten nehmen tatsächlich ein div , da der samelcontainer ncihts anderes ist als ein blockelement zum sammeln .

beispiel wäre

<div style="width:100px; height:100px; background-color:#FFAA00">

bzw eine class nehmen und im css definieren .

<div class="meinleererblock"></div>

und im style

.meinleererblock {width:100px; height:100px; background-color:#FFAA00}
Antwort
von applica, 23

Du könntest entweder ein Bild als Fläche verwenden, oder wenn du einen CSS Kasten hast, kannst du einen Text zwar mit HTML rein machen, ihn aber mit text-shadow in zB weis machen & den Schatten nach links oder rechts so weit verschieben, dass sozusagen die Schrift aus der Farbe herausschaut :D kapisch?😂

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten