Textgestaltung - Wie?

[DasLampe]

Hi,
Ich möchte auf meiner Website noch bisschen Text einfügen.
Derzeit ist nur wenig Text aus meiner Seite und das ist ja auch z.B. schlecht fürs Ranking in Suchmaschinen. Ich frage mich jetzt wie ich den Text am besten gestalten kann. Ich habe mir gedacht das ich einen Text in die Mitte der Website setze und der hintergrund in diesem Block in dem der Text ist hat die Farbe Grau, so wie im Bild unten. Jedoch habe ich keine ahnung wie ich sowas mache. Kann mir jemand helfen?

[-Shigetora]

HTML:

<div id="text"> (div erstellen, also einen unsichtbaren "kasten" um dein element (text))
<p> Text...... </p> (text)
</div>

CSS:

#text {
border-color: grey; (farbe vom rand)
border-width: 2px; (border breite)
border-radius: 10px; (rundet ecken ab)
border-style: solid; (normaler border als linie)

background-color: lightgrey; (setzt hintergrund farbe auf helles grau)
}

Wenn du es komplett in der Mitte der Website haben willst könntest du noch das Folge hinzufügen ins CSS:

display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;

und dann noch wenn du lust hast die höhe/breite von dem kasten unabhängig vom text inhalt setzen:
height: 100px;
width: 100px;

Zumindest funktionierts bei mir so und das ist der einfachste Weg meiner Meinung nach

[DasLampe]

Originally Posted by -Shigetora

HTML:

<div id="text"> (div erstellen, also einen unsichtbaren "kasten" um dein element (text))
<p> Text...... </p> (text)
</div>

CSS:

#text {
border-color: grey; (farbe vom rand)
border-width: 2px; (border breite)
border-radius: 10px; (rundet ecken ab)
border-style: solid; (normaler border als linie)

background-color: lightgrey; (setzt hintergrund farbe auf helles grau)
}

Wenn du es komplett in der Mitte der Website haben willst könntest du noch das Folge hinzufügen ins CSS:

display: block;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;

und dann noch wenn du lust hast die höhe/breite von dem kasten unabhängig vom text inhalt setzen:
height: 100px;
width: 100px;

Zumindest funktionierts bei mir so und das ist der einfachste Weg meiner Meinung nach

Perfekt! Vielen dank

[YatoDev]

setz min-width und min-height falls der text mal zu groß für den block wird

[mastermo]

Bei der Breite würde ich aber folgendes empfehlen:

width: 100%;
max-width: 100px;

oder wie breit das ganze auch sein sollte. So ist das ganze für andere Endgeräte auch besser

Desweiteren würde ich folgendes ändern:

#text {
border-color: grey; (farbe vom rand)
border-width: 2px; (border breite)
border-radius: 10px; (rundet ecken ab)
border-style: solid; (normaler border als linie)

background-color: lightgrey; (setzt hintergrund farbe auf helles grau)
}

border 2px solid grey;
border-radius: 10px;

und aus background-color folgendes:

background: lightgrey;



Gruß
Mo


Ps für den Innenabstand würde ich ein Padding mit einbauen