mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 07:32 Benutzername: Passwort: Auto-Login

Thema: 4 divs in css/html mit gleichem Abstand zentieren ? vom 26.11.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> 4 divs in css/html mit gleichem Abstand zentieren ?
Autor Nachricht
vali97
Threadersteller

Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht: Männlich
Verfasst Mo 26.11.2012 18:47
Titel

4 divs in css/html mit gleichem Abstand zentieren ?

 Antworten mit Zitat Zum Seitenanfang
hallihallo Grins

Ich habe folgends Problem :

Code:
<div class="container">
                <span class="class1"><p>blblblblbl</p></span>
                <span class="class2"><p>blllblblblbl</p></span>
                <span class="class3"><p>blblbl</p></span>
                <span class="class4"><p>blblblblbl</p></span>
         </div>

Der Container ist 900px breit, und die Spans sind jeweils 202px breit. Ich versuch die ganze Zeit die 4 span von links nach rechts zu positionieren sodass alle den gleichen abstand haben (und noch in IE 7 funktioniert) ohne langen CSS code zu haben.
  View user's profile Private Nachricht senden
DEKONSTRUKTIV

Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
Verfasst Mo 26.11.2012 19:34
Titel

Antworten mit Zitat Zum Seitenanfang
und was is jetz deine frage?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mo 26.11.2012 19:58
Titel

Antworten mit Zitat Zum Seitenanfang
Ein p in einem span ist schon mal per Definition ungültig.
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Mo 26.11.2012 21:27
Titel

Antworten mit Zitat Zum Seitenanfang
Ein paar Stichworte: Block-Elemente, Float, Margin
Alternativ: Flexbox + Polyfill

Gruß
Karl
  View user's profile Private Nachricht senden
vali97
Threadersteller

Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht: Männlich
Verfasst Mo 26.11.2012 21:30
Titel

Antworten mit Zitat Zum Seitenanfang
DEKONSTRUKTIV hat geschrieben:
und was is jetz deine frage?


Wie man die spans alle zentriert sodass sie alle den gleichen abstand haben in dem container
  View user's profile Private Nachricht senden
Graphicana

Dabei seit: 17.03.2009
Ort: -
Alter: 33
Geschlecht: Männlich
Verfasst Mo 26.11.2012 22:47
Titel

Antworten mit Zitat Zum Seitenanfang
Wenn du schon unterschiedliche Klassen anlegst (meinst du vielleicht eher ID's, oder wiederholt sich dein Blocklayout?), kannst du diese ja auch definieren. Du hast ja auch ein statisches layout wo sich nix selber skaliert (feste Werte!), dann kannst du ja Rechnen und dann per CSS ausrichten?

Code:

* { margin: 0; padding: 0; }

.container { width: 900px; height: auto; }

.class1 { margin-left: 0px; float: left; }
.class 2 { margin-left: 30px; float: left; }

/* (....) und so weiter */


Aber:
30px ist ein Kompromiss-Wert; die Rechnung ist so: 900px - 4*202px=808px; 92px sind also dein Space; das teilst du durch 3, weil sich bei vier Containern 3 lücken ergeben. --> 92px : 3 = 30,66667.. rundest hier aber ab, weil du nicht 31px verwenden kannst (Boxen hätten mit gesamt-Space von 93px kein Platz).

Aber überlege lieber nochmal an deinen Boxen, ob du die nicht anders machst, so dass sich ein schöner Leerraum ergibt.
Ein Grid kannst du dir hier erstellen:
http://gridulator.com/
  View user's profile Private Nachricht senden
vali97
Threadersteller

Dabei seit: 10.10.2012
Ort: Bockenau
Alter: 27
Geschlecht: Männlich
Verfasst Sa 22.12.2012 19:14
Titel

Antworten mit Zitat Zum Seitenanfang
Graphicana hat geschrieben:
Wenn du schon unterschiedliche Klassen anlegst (meinst du vielleicht eher ID's, oder wiederholt sich dein Blocklayout?), kannst du diese ja auch definieren. Du hast ja auch ein statisches layout wo sich nix selber skaliert (feste Werte!), dann kannst du ja Rechnen und dann per CSS ausrichten?

Code:

* { margin: 0; padding: 0; }

.container { width: 900px; height: auto; }

.class1 { margin-left: 0px; float: left; }
.class 2 { margin-left: 30px; float: left; }

/* (....) und so weiter */


Aber:
30px ist ein Kompromiss-Wert; die Rechnung ist so: 900px - 4*202px=808px; 92px sind also dein Space; das teilst du durch 3, weil sich bei vier Containern 3 lücken ergeben. --> 92px : 3 = 30,66667.. rundest hier aber ab, weil du nicht 31px verwenden kannst (Boxen hätten mit gesamt-Space von 93px kein Platz).

Aber überlege lieber nochmal an deinen Boxen, ob du die nicht anders machst, so dass sich ein schöner Leerraum ergibt.
Ein Grid kannst du dir hier erstellen:
http://gridulator.com/


Danke das habe ich auch gemacht nur das mit dem aufrunden wurde in IE 7 falsch angezeigt. Ich meine das zB der Div mit class4 unter, anstatt nebendran angezeigt wird (fucking Internet Explorer) Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen tabellenloses design -> 3px abstand zwischen divs nur im IE
[Gelöst] PHP + HTML-Dateien mit gleichem Suffix
GB in Flash und HTML parallel mit gleichem Inhalt
HTML/CSS Problem mit <html><body> komischer Abstand unten
html abstand
abstand bild zum text (html/css)
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB