Textgestaltung - Wie?

07/14/2015 18:30 DasLampe#1
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? :)





[Only registered and activated users can see links. Click Here To Register...]
07/14/2015 19:40 -Shigetora#2
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 :D
07/14/2015 20:25 DasLampe#3
Quote:
Originally Posted by -Shigetora View Post
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 :D
Perfekt! Vielen dank :)
07/15/2015 22:01 YatoDev#4
setz min-width und min-height falls der text mal zu groß für den block wird
07/17/2015 17:52 mastermo#5
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:

Quote:
#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 ;)