:: Buchempfehlung ::

TomDD · #1 07.03.2008, 08:39:29

Hallo,

irgendwie werd ich nicht so recht schlau aus einigen "hilfeseiten" im internet.
ich möchte meine seite gern mittig platzieren, nur bin ich gerade ratlos, wie das geht.

auflösung ist 800x600.
gibts da einen einfachen befehl, welchen ich in die css-datei einbaue oder muss ich das
mit tabellen realisieren und jede seite ändern, die ich habe?

im idealfall würde ich gern noch einen hintergrundbild links und rechts davon nutzen.

danke

ach ja, es geht um die seite: www.historisch.biz

TomDD · #2 07.03.2008, 09:12:56

wenn ich die CSS so ändere:

#container {width:800px; margin:auto; }

und in der php-seite dann unter body: <div id="container"> einbinde wird ein teil zwar zentriert, aber einige dinge, die bleiben wo sie sind, weil ich die position ja pixelgenau angegeben habe. wie kann man das problem lösen?

TomDD · #3 07.03.2008, 10:43:03

so, habs jetzt selbst hinbekommen, nachdem ich zig seiten durchgelesen habe.

für andere die es evtl. mal wissen wollen.

in die CSS folgendes einbinden:

#container {position : absolute; width: 800px; margin: auto; left : 50%; top : 0; margin : 0 0 0 -400px;}

und in der html-datei lediglich direkt nach body:

<div id="container">
...hier kommt der ganze andere rest der seite rein....
</div>

TomDD · #4 07.03.2008, 10:43:51

hat jemand eine idee, wie ich es nun hinbekomme, dass links und rechts am rand eine art
schatten angebracht werden kann, damit es nicht so abgehackt aussieht?

FabianWesner · #5 07.03.2008, 10:56:00

Hast Du denn verstanden, was dein CSS-Code bewirkt?

Ich würde innerhalb von #container ein zweispaltiges Layout anlegen. Rechts neben dem eigentlichen Content kommt noch ein 10-Pixel breiter Container #shadow_right für den Schatten. #shadow_right bekommt die vorbereitete Schattengrafik als Hintergrundbild, welches vertikal wiederholt wird. Etwas schwieriger sind die Ecken des Schatten oben und unten.

Eine Alternative wäre es #shadow_right mit absoluter Positionierung neben #container zu stellen (auf exakt die gleiche Art und Weise wie #container). Das Problem ist dann aber die Höhe. #container muss dann immer eine gleichbleibende Höhe haben, damit der Schatten korrekt nach unten hin abschließt.

Der untere Schatten muss innerhalb von #container angebracht werden, da dieser bei absoluter Positionierung nicht platznehmend ist. Es ist also nicht möglich einfach einen weiteren Container unterhalb von #container anzubringen, es sei denn Du kennst die exakte Höhe von #container.

TomDD · #6 07.03.2008, 11:04:34

hallo Fabian...

ich habe getreu dem motto gehandelt: "denn sie wissen nicht was sie tun" ;-)

bin leider kein css-profi und versuche mir durch logik alles zusammenzubasteln...aber auch die logik spielt einem ja bekanntlich manchmal streiche. das ist bei mir alles learning by doing....lesen und ausprobieren.

mit den containern probier ich bei gelegenheit mal aus, denn das braucht sicher ein wenig zeit. ich denke oben ist der schatten kein problem, da brauch ich keinen, links, rechts und unten wären schön, ja.

danke erstmal für den arbeitshinweis :-)

FabianWesner · #7 08.03.2008, 19:56:59

nur nicht den Kopf hängen lassen :-)

Zentrierung, egal ob vertikal oder horizontal, gehört mit den zu schwierigsten Sachen die man mit DIV-Containern und CSS machen kann. Ich habe es bislang beispielsweise noch nicht geschafft einen Text in einem Container von unten nach oben 'wachsen' zu lassen (vertical-align:bottom), ohne eine Hilfstabelle benutzen zu müssen.

ksticker · #8 10.03.2008, 00:15:30

Also ich mach es immer mit Tabelle siehe hier im Beispiel:

PHP-Code:


			
<html>

    <head>

        <title>HP - Mittig 800x600</title>

    </head>

    <body>

        <table border="0" width="100%" height="100%">

            <tr>

                <td align="center" valign="middle">

                    <table border="0" width="800" height="600">

                        <tr>

                            <td bgcolor="blue">

                            Dein Inhalt

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

    </body>

</html>

So nun dürfte es so sein wie Du es wolltest.

Wi "Dein Inhalt" steht, kannst Du mit PHP, ohne weitere Probleme immer Deinen Inhalt dynamisch einfügen (<?php include('dokument.php') ?>)

Und als bedingung welches dokument es auswählen sollte schau einfach mal nach was die GET-Übertragung ist. Dann kannst du das entweder über ne if lösen oder über eine switch-Bedingung

MFG KSTICKER

FabianWesner · #9 10.03.2008, 12:41:13

Die Lösung mit der Tabelle liefert zwar ein optisch korrektes Resultat, ist aber semantisch falsch. Tabellen sind für die Strukturierung von Daten gedacht und nicht für das Layout. Zudem blähen sie den Code unnötig auf. Kann man so machen... muss man aber nicht :-)

ksticker · #10 10.03.2008, 18:53:56

was sollte man denn sonst nehmen, css oder frames oder was?

:: Buchempfehlung ::

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!