PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS | Help & Boxen: zentriert - 200px etc.


Maisaffe
02.12.2004, 21:34
[1]
Ist es möglich, mit PHP in etwa so etwas zu machen wie auf rpg-maker.com (http://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, 22: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 :D probiers aus!
dead_orc
03.12.2004, 17:51
@pogo
Wenn ich dich richtig verstanden habe, willst du das so machen:

<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, 18: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>
<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, 11: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, 11:59
öhm möp?
des geht net wirklich :(
Dennis
Maisaffe
04.12.2004, 12: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, 13:22
|* 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>
<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:


.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, 17:02
shice, ich meinte das '*' verschieden groß ist (auflösungsbedingt), aber immer mit den andern '*' gleich groß ist ;)
Sry :(

Dennis
pogo
04.12.2004, 18:44
Auch kein problem. Du tauscht halt einfach die prozent- mit den pixelangaben aus.
Also so:



<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>




.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, 19: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, 23: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, 12:51
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, 18: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 :D