Forum / Bits und Bytes / CSS Problem - Button feste Maße

Moin. Ich will auf die Startseite meiner neuen Website 6 Buttons haben die zusammen ein Quadrat ergeben.

(Maße sind nur Beispielhaft)

Es sollen drei Buttons mit 200x 408 px
und drei Buttons mit 200x200 px werden.

Zwischen den Buttons sollen 8 px Platz sein.

Wie bekomme ich die einzelnen Buttons gebaut?
Ich bekomme keine feste Breite und Höhe hin. Der Text in den Buttons verändert immer die Maße des Buttons.

Ich such mir schon den ganzen Tag nen Wolf ...

KEIN JAVA, PHP etc. - Nur CSS und HTML !!!!

[verlinkte Grafik wurde nicht gefunden]

[zustimmen]

LED-Technik - Architainment - Medientechnik - Smart Home - Tonstudiotechnik

Mr-Trust

- 29
Halbprofi (offline)

Dabei seit 12.2011
182 Beiträge

Geschrieben am: 30.05.2013 um 19:35 Uhr
Zuletzt editiert am: 30.05.2013 um 19:39 Uhr

Wie meinst du das mit Quadrat?

Dass da ein 3x2 großer Button Block ist?

Wenn ja, dann einfach in CSS 3 Klassen erstellen, jeweils left floaten, und dann eben mit content befüllen. Für die 2. Reihe nutzt du dann einfach wieder dieselben Klassen.

Ich hoff ich habs richtig verstanden ^^

EDIT:

Gut oke das verändert die Lage etwas ^^

Erstell 4 Klassen in CSS, gib allen float:left; mit und eben jeweils dann die restlichen Atribute wie Farbe, Breite, Höhe, Schlagschatten etc.. Und dann einfach per HTML die einzelnen Klassen ansprechen.

PS:
Die langen, liegenden Buttons und die rechteckigen graue Buttons kann man in einer Klasse zusammenfassen ^^

[zustimmen]

Expect us!

Harmachis

- 34
Profi (offline)

Dabei seit 01.2010
676 Beiträge

Geschrieben am: 30.05.2013 um 19:36 Uhr
Zuletzt editiert am: 30.05.2013 um 19:37 Uhr

Habs gerade beispielhaft auf den Server geladen. Siehe oben.

[zustimmen]

LED-Technik - Architainment - Medientechnik - Smart Home - Tonstudiotechnik

Harmachis

- 34
Profi (offline)

Dabei seit 01.2010
676 Beiträge

Geschrieben am: 30.05.2013 um 20:19 Uhr

So das mit der Größe tut. Effekte etc. auch.

Die Schrift - wie bekomme ich die in die Mitte der Felder?
text-align:center; habe ich aber mir fehlt die vertikale Mitte ???

[zustimmen]

LED-Technik - Architainment - Medientechnik - Smart Home - Tonstudiotechnik

Harmachis

- 34
Profi (offline)

Dabei seit 01.2010
676 Beiträge

Geschrieben am: 30.05.2013 um 22:17 Uhr

So ich bin schon fast zufrieden.

Die zwei unteren Quadrate müssen noch nach oben - WIE?
Der Text muss immer noch in die Mitte x Mitte - WIE?

Aktueller Stand

[zustimmen]

LED-Technik - Architainment - Medientechnik - Smart Home - Tonstudiotechnik

Mr-Trust

- 29
Halbprofi (offline)

Dabei seit 12.2011
182 Beiträge

Geschrieben am: 30.05.2013 um 22:25 Uhr

floate am besten das rechte horizontale nach rechts ;)

Und die Schrift musst du manuell mit Padding verschieben.

[zustimmen]

Expect us!

Harmachis

- 34
Profi (offline)

Dabei seit 01.2010
676 Beiträge

Geschrieben am: 30.05.2013 um 22:34 Uhr
Zuletzt editiert am: 04.06.2013 um 20:50 Uhr

Das ganz oben rechts?

EDIT: margin-top: -150px; in der class für die beiden Quadrate hat funktioniert.

So das mit dem padding funktioniert nicht wie es soll.
Es zerreist mir die einzelnen Buttons statt den Text zu verschieben.

Muss ich den gesamten <a> bla bla </a> teil in ein <p> </p> setzen damit es nur den Text verschiebt? oder nur den Text im Link?

Funktioniert beides nicht.
Update: Alles paletti und Seite steht.

[zustimmen]

LED-Technik - Architainment - Medientechnik - Smart Home - Tonstudiotechnik

[Antwort schreiben]

Forum / Bits und Bytes