CSS | Help & Boxen: zentriert - 200px etc.

**Maisaffe** · 02.12.2004 20:34

[1]
Ist es möglich, mit PHP in etwa so etwas zu machen wie auf rpg-maker.com?

Damit bei einer niedrigeren Auflösung die Menüs eng aneinander sind, bei einer höheren weiter auseinander.

Falls ja:
WIe muss ich das dem CSS (2.0) ein- 'basteln'?

_

[2]
Kann man (direkt!) per CSS zB. die Mitte (zentriert horizontal) minus nehmen?

ala:
X - 200

X = horizontal zentriert
_

Dennis

**pogo** · 02.12.2004 21:16

So wie ich das verstanden hab, brauchst du einfach nur relative angaben.
Du brauchst ein div-layer, das die ganze seite umfasst und auf width:100%; steht und die div-layer, die diese einzelnen boxen (die menüs) beinhalten. Diese layer brauchen eine absolute breiten- und höhenangabe. Also z.B. width:200px. So müssten die abstände dazwischen je nach auflösung anders sein.

Und zu deiner zweiten frage: Da brauchst du auch wider ein div-layer mit breite 100%. Und dann machst du darein noch ein div, das einen rand von 200px hat, also margin:200px;

EDIT: Mom, ich denk grad nochmal da drüber nach und glaub das das zweite auch nur mit einem div geht, das einen rand von 200px hat.... aber ich kann grad irgendwie nicht mehr denken

probiers aus!

**dead_orc** · 03.12.2004 16:51

@pogo
Wenn ich dich richtig verstanden habe, willst du das so machen:

HTML-Code:

<div style="width: 100%; position: relative;">
<div style="width: 10px; height: 20px; position: relative;">T E S T</div>
<div style="width: 50px; height: 100px; position: relative;">Noch ein Test!</div>
<div style="width: 100px; height: 12px; position: relative;">BLUB!!!</div>

Dabei kommen aber nur Boxen untereinander raus!

**pogo** · 03.12.2004 17:40

@getöteter_ork:
Die boxen, die bei rpg-maker.com untereinander sind, ändern ja auch nicht ihren abstand zueinander. Nur die einzelnen spalten tun das. Also brauch man sowas, wie das hier:

HTML-Code:

<html>
<body>

<div style="width: 100%; height: 100%; padding-top: 10px; padding-left: 10px;">
	<div style="width: 50%; float: left;">
		<div style="width: 100px; height: 100px; position: relative; margin-top: 10%;">T E S T</div>
		<div style="width: 100px; height: 100px; position: relative; margin-top: 10%;">Noch ein Test!</div>
		<div style="width: 100px; height: 100px; position: relative; margin-top: 10%;">BLUB!!!</div>
	</div>
	<div style="width: 50%;">
		<div style="width: 100px; height: 100px; margin-top: 10%;">T E S T</div>
		<div style="width: 100px; height: 100px; margin-top: 10%;">Noch ein Test!</div>
		<div style="width: 100px; height: 100px; margin-top: 10%;">BLUB!!!</div>
	</div>
</div>

</body>
</html>

Hab mich vielleicht etwas falsch ausgedrückt. Jedenfalls wird das nicht mit phph gemacht, sondern ganz einfach mit CSS und prozentualen angaben.

**Maisaffe** · 04.12.2004 10:46

das sollte schonmal die richtung sein in die ich gehen will

(sry, klar mit php geht das eigetnlich net

)

Dennis

PS: Poste später nocheinmal hier rein

**Maisaffe** · 04.12.2004 10:59

öhm möp?
des geht net wirklich

Dennis

**Maisaffe** · 04.12.2004 11:11

ich erkläre es mal anders:

|* links * mitte * rechts *|

'*' soll immer gleich groß sein (egal bei welcher auflösung), der rest ist festgelegt (per CSS - immer zentriert etc.)

Und wenn möglich soll das ganze ohne Tabelle sein

Dennis

**pogo** · 04.12.2004 12:22

Zitat von dennis_meckel

|* links * mitte * rechts *|

'*' soll immer gleich groß sein (egal bei welcher auflösung), der rest ist festgelegt (per CSS - immer zentriert etc.)

Dann so:

HTML-Code:

<html>
<body>

<div class="main">
    <div class="links">
   Test Test Test Test Test
    </div>
    <div class="mitte">
    blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb    blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb
    </div>
    <div class="rechts">
    Test Test Test Test Test
    </div>
</div>

</body>
</html>

Und das CSS dazu:

Code:

.main {
width:100%;
height:100%;
margin-left:20px;
margin-right:20px;
}

.links {
float:left;
}

.mitte {
margin: 30px;
width: 69%;
float:left;
}

.rechts {}

Main wird auf die volle bildschirmbreite gesetzt und bekommt einen rand, das wären also bei dir die äußeren beiden '*'. Die mitte bekommt auch einen rand, der dann die andern beiden '*' darstellt. Diese ränder sind dann bei jeder auflösung gleich groß, bei mir hier sinds 20 bzw. 30 px. Wichtig ist immer das float:left; da sich die nachfolgenden elemente dann links neben dem vorhergehenden element anordnen. Auch wichtig ist die prozentuale breite der mitte, die hier auf 69% steht, aber auch beliebige verändert werden kann.

Wenn das jetzt nicht klappt, dann weiß ich auch nicht was du willst...

**Maisaffe** · 04.12.2004 16:02

shice, ich meinte das '*' verschieden groß ist (auflösungsbedingt), aber immer mit den andern '*' gleich groß ist

Sry

Dennis

**pogo** · 04.12.2004 17:44

Auch kein problem. Du tauscht halt einfach die prozent- mit den pixelangaben aus.
Also so:

HTML-Code:

<body>

<div class="main">
    <div class="links">
   Test Test Test Test Test
    </div>
    <div class="mitte">
    blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb    blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb blubb
    </div>
    <div class="rechts">
    Test Test Test Test Test
    </div>
</div>

</body>
</html>

Code:

.main {
width:100%;
height:100%;
margin-left:5%;
margin-right:5%;
}

.links {
float:left;
width:75px;
}

.mitte {
margin-right: 20%;
margin-left: 20%;
width: 250px;
float:left;
}

.rechts {
width:75px;
}

**Maisaffe** · 04.12.2004 18:48

Öh Oo
Das Linke und das in der Mitte funzt (fast)...
Aber das rechte fällt wieder unter das linke...

Ich mach es jetz vorläufig mit ner tabelle, indem der kram zentriert ist (ala rpg-maker.com).

Dennis

PS: Trotzdem ein fettes Danke

**pogo** · 04.12.2004 22:42

Das rechte fällt unter das linke? oO also bei mir nicht. Was haste denn für eine auflösung? Ich hab von 1024*768 bis 1280*1024 alles ausprobiert und es gab immer eine dreispaltige tabelle.

Naja, auch egal...

**Maisaffe** · 05.12.2004 11:51

Zitat von pogo

Das rechte fällt unter das linke? oO also bei mir nicht. Was haste denn für eine auflösung? Ich hab von 1024*768 bis 1280*1024 alles ausprobiert und es gab immer eine dreispaltige tabelle.

Naja, auch egal...

1024x768, ist aber jetz egal

THX!

Dennis

**pogo** · 05.12.2004 17:50

Auch wenns egal ist: Bei mir wars eine dreispaltige tabelle (also so wie es sein sollte) weil ichs nur in Opera (meinem standardbrowser) getestet hab. Im Mozilla und IE rutscht es tatsächlich (komischerweise) unter das linke...

Aber da das ja jetzt egal ist, bemüh ich mich nicht mehr den fehler zu finden

Thema: CSS | Help & Boxen: zentriert - 200px etc.

Themen-Optionen

Anzeige

CSS | Help & Boxen: zentriert - 200px etc.

Berechtigungen