Druckbare Version
[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
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!
@pogo
Wenn ich dich richtig verstanden habe, willst du das so machen:
Dabei kommen aber nur Boxen untereinander raus!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>
@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:
Hab mich vielleicht etwas falsch ausgedrückt. Jedenfalls wird das nicht mit phph gemacht, sondern ganz einfach mit CSS und prozentualen angaben.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>
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
öhm möp?
des geht net wirklich :(
Dennis
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
Dann so:Zitat:
Zitat von dennis_meckel
Und das CSS dazu: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>
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.Code:.main {
width:100%;
height:100%;
margin-left:20px;
margin-right:20px;
}
.links {
float:left;
}
.mitte {
margin: 30px;
width: 69%;
float:left;
}
.rechts {}
Wenn das jetzt nicht klappt, dann weiß ich auch nicht was du willst...
shice, ich meinte das '*' verschieden groß ist (auflösungsbedingt), aber immer mit den andern '*' gleich groß ist ;)
Sry :(
Dennis
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;
}
Ö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 ;)
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 ;)Zitat:
Zitat von pogo
THX!
Dennis
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