Frage Textgestaltung in Boxen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

faith

Neues Mitglied
12 Juli 2018
22
0
1
50
#1
Hallo,
ich versuche mich gerade etwas in das Thema "Layout Boxen" einzuarbeiten und habe dazu beispielhaft mehrere Boxen erstellt.

Wie schaffe ich es nun, dass ich z.B. den Text in Box 1 zentriert, in Box 2 linksbündig und in Box 3 rechtsbündig schreiben kann?

Irgendwie klappt immer nur das ein oder andere für alle Boxen!

Vielen Dank schon mal ...
 

faith

Neues Mitglied
12 Juli 2018
22
0
1
50
#5
@faith Du musst jeder Box eine individuelle Klasse oder ID zuweisen, dann kannst Du sie damit auch individuell gestalten.
Vielen Dank Sempervivum!

Ich habe in der index.html jetzt mal Folgendes geschrieben:

<div id="box3">
<div style="text-align: left">
MENUE
</div>
</div>

Das hat nun soweit geklappt, dass der Text linksbündig ausgerichtet ist ....

Frage: Ist das korrekt, diese Angabe "text-align" in der index.html zu machen, oder könnte ich das auch in der style.css machen?
 
Zuletzt bearbeitet:

faith

Neues Mitglied
12 Juli 2018
22
0
1
50
#7
Richtig: Das gehört eigentlich in der style.ss rein und nicht als inline-syle
Hallo basti,

könntest du mir bitte kurz zeigen, wie ich das dann in der style.css schreiben muss, damit der Text linksbündig ausgerichtet wird?

Bisher sieht die box3 bei mir in CSS wie folgt aus:

#box3 {
background-color: lime;
position: absolute;
width: 961px;
height: 40px;
left: 200px;
top: 555px;
padding: 10px;
}

Nun finde ich keine Infos darüber, wie ich hier den Befehl <div style="text-align: left"> unterbringen kann!?

Vielen Dank!
 

Aaron3219

Aktives Mitglied
6 Oktober 2015
931
183
43
17
#8
CSS:
#box3 {
background-color: lime;
position: absolute;
width: 961px;
height: 40px;
left: 200px;
top: 555px;
padding: 10px;

//Das hier ist die Änderung:
text-align: left;
}
Ist jetzt kein Hexenwerk und das hättest du eigentlich googeln können. Aber naja.
Viel wichtiger wäre es, dass du dir mal die Grundlagen von CSS und HTML anschaust.
w3schools.com

Denn das hier:
CSS:
#box3 {
background-color: lime;
position: absolute;
width: 961px;
height: 40px;
left: 200px;
top: 555px;
padding: 10px;
}
Sieht mir ziemlich Abenteuerlich aus ;)

Falls du das so schon eingebunden hast und trotzdem keine Veränderung angezeigt wird, solltest du mal den Cache deines Browsers leeren.
 
Zuletzt bearbeitet:

faith

Neues Mitglied
12 Juli 2018
22
0
1
50
#9
Vielen Dank Aaron!

Ja, hat geklappt. Also die Zeilen wurden so in einem Video (Youtube) gezeigt - ist das nicht korrekt?

Danke, schaue mir die Seiten "w3schools.com" an ...
 

Aaron3219

Aktives Mitglied
6 Oktober 2015
931
183
43
17
#10
Ja, hat geklappt. Also die Zeilen wurden so in einem Video (Youtube) gezeigt - ist das nicht korrekt?
Doch prinzipiell erzeugt dein Code keine Fehler. Es geht hier eher um das Layout.
Was du da versuchst mit position:absolute wird NUR für eine bestimmte Bildschirmgröße funktionieren.
Man sieht es ja schon: Eine ABSOLUTE Position (Platz von oben: 555px, Platz links: 200px).
Was du stattdessen versuchen solltest, ist unbedingt auf absolute Angaben zu verzichten!
Es gibt media queries, aber wenn das kein absoluter Albtraum werden soll, musst du die Grundlagen für die Gestaltung eines Layouts kennen.
http://jsfiddle.net/Aaron3219/n35ubkmy/12/

Ich glaube der Unterschied sollte klar sein, wenn du das Outputfenster mal vergrößerst und verkleinerst.
 

faith

Neues Mitglied
12 Juli 2018
22
0
1
50
#11
Ich glaube der Unterschied sollte klar sein, wenn du das Outputfenster mal vergrößerst und verkleinerst.
Ja, vielen Dank Aaron - denke das ist jetzt soweit klar!

Was mir jedoch aufgefallen ist:
Wenn ich das Outputfenster entsprechend verkleinere, dann wird ja in den oberen drei 'div-Tags' die Zeilenanzahl automatisch erhöht.

Frage:
Im Prinzip könnte es doch jetzt bei einer ungünstig kleinen Bildschirmauflösung dazu kommen, dass das oben Dargestellte sozusagen in das unten Dargestellte "hineinfließt". Lässt sich so etwas vermeiden?

Vielen Dank!