Horizontale ausrichtung

SchneiderS · 28. August 2014

hallo profis,

ich bin z.z. an einem problem dran und ich komm nicht weiter. ich hoffe ich nerve nicht zu sehr.

vorab: ich hab schon gegoogelt und viele artikel gelesen aber ich komm trotzdem nicht weiter.

also es geht um folgenden code:

zuerst die css datei

[HTML]#startseite
{margin: 0 auto !important;
max-width: 900px;}

#startseite-group
{margin-top:10%;}

.section {
clear: both;
padding: 0px;
margin: 0px;
}

.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}

.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px) {
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 100%;
}
}[/HTML]

und hier meine html ausgabe

[HTML]<body>
<div id="startseite">
<div id="startseite-group">
<div class="section group">
<div class="col span_1_of_2">
<img src="">
</div>
<div class="col span_1_of_2">
<a href=""><img src=""></a>
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
<a href=""><img src=""></a>
</div>
<div class="col span_1_of_2">
<a href="#"><img src=""></a>
</div>
</div>
</div>
</div>
</body>[/HTML]

meine vertikale ausrichtung (also das rechts& link gleicher abstand herrscht) erfolgt über:

[HTML]#startseite
{margin: 0 auto !important;
max-width: 900px;}[/HTML]

wie bekomme ich aber eine zentrierte horizontale ausrichtung? also das der abstand oben und unten identisch ist.

ich hab auch schon folgendes ausprobiert:

[HTML]display: table-cell;
vertical-align: middle;[/HTML]

aber da tut sich nichts

das ist die aktuelle situation, aber natürlich keine lösung:
soll nicht irritieren

[HTML]#startseite-group
{margin-top:10%;}[/HTML]

ich hoffe ihr könnt mir da weiter helfen

The Scout · 28. August 2014

Hi,
im Grunde ist margin eine Kurzform. Aufgeschlüsselt kann man es folgendermaßen machen:

CSS

zeiger {
  margin: top right bottom left; /* Vier Werte mit Lücken dazwischen */
  margin: top (left right) bottom; /* Drei Werte, wobei links und rechts identisch werden */
  margin: (top bottom) (left right); /* Zwei Werte, oben+unten und links+rechts */
  margin: (top bottom left right); /* Ein Wert, für alles vier gleich */
}




/* Beispiel für drei Werte */
#whatever {
  margin: 20px 10% 0; /* heißt: Von oben 20px Abstand, rechts und links jew. 10% und unten keiner */
}

Alles anzeigen

Um nun deine Box mittig ins Fenster zu kriegen brauchst du also nur

CSS

margin: auto

, um das aber zu erkennen muss man natürlich die Box auch kleiner als den Viewport anzeigen lassen.

SchneiderS · 28. August 2014

wahnsinn, sehr cool.

dann noch eine andere frage. ich nutze folgendes um zwei spalten zu erzeugen:

HTML

/* SECTIONS */.section {clear: both;padding: 0px;margin: 0px;}
/* COLUMN SETUP */.col {display: block;float:left;margin: 1% 0 1% 1.6%;}.col:first-child { margin-left: 0; }




/* GROUPING */.group:before,.group:after {content:"";display:table;}.group:after {clear:both;}.group {zoom:1; /* For IE 6/7 */}
/* GRID OF TWO */.span_2_of_2 {width: 100%;}.span_1_of_2 {width: 49.2%;}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {.col { margin: 1% 0 1% 0%;}}
@media only screen and (max-width: 480px) {.span_2_of_2 {width: 100%; }.span_1_of_2 {width: 100%;} }

Alles anzeigen

gut, aber was wenn die rechte spalte schon floaten soll, sobald eine gewisse pixelanzahl erreicht ist?

in dem code floatet die spalte sobald ein bildschirm kleiner als 480 px ist. wie kann ich aber die spalte definieren?

also dass die spalte nicht kleiner als 300px werden darf?

-_- nervig solche fragen, sorry

wolf · 28. August 2014

Zu deiner komplett mittigen Ausrichtung noch ein bisschen off topic:
Eine Box komplett mittig im Fenster Ausrichten:

CSS

elem{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 200px;/* absolute values required! */
	height: 200px;/* absolute values required! */




	/* optional stuff */
	background-color: rgba(0,0,0, .5);
	max-width: 100%;
	max-height: 100%;
}

Alles anzeigen

The Scout · 28. August 2014

Zitat von SchneiderS

[...]also dass die spalte nicht kleiner als 300px werden darf?[...]

Solange man selber dran arbeitet, sind Fragen dazu nicht nervig, dazu ist das Forum da

Der Befehl für eine Mindest- bzw. Maximalgröße ist ganz einfach:

CSS

/*Mindestgröße */
min-width: wert;




/* Maximalgröße */
max-width: wert;

Wenn deine Box also nicht schmaler als 300px werden soll geht das einfach so

CSS

#boxzeiger {
  width: 80%; /* Was auch immer */
  min-width: 300px; /* Wird nicht unterschritten */
}

Horizontale ausrichtung

Jetzt mitmachen!

Teilen