HTML Seite mit CSS zentrieren

chamo

Hallo Leute,

ich bin gerade dabei meine Hausaufgabe zu machen.
Wir nehmen im Unterricht gerade HTML durch.
Um genauer zu sagen die Formulare.

Da ich mich schon ziemlich gut mit HTML auskenne, und ich vorher schon ein bissel mit CSS rum gebastelt habe, habe ich mir gedacht, machste mal das Layout der Seite mit CSS anstatt mit Frames.
Habe bereits einen groben Entwurf mit Frames gemacht...entspricht auch ungefähr so meinen Vorstellungen.
Hab die Seite mal eben hoch geladen: http://www.file-upload.net/download-18931…nzept1.zip.html

Ihr müsst index.htm öffnen...

so das wollte ich jetzt mit CSS machen.

So weit so gut...

Ich wollte jetzt der Seite eine genaue Maße geben, also sie sollte 800x600px erst mal nur sein. Hab das auch hinbekommen, mit

Code

body {
    width: 800px;
    height: 600px;
    }

So, nun möchte ich aber, dass wenn der Bildschirm auf dem die Seite angezeigt wird größer als 800x600px ist, dass der komplette Inhalt in der Mitte zentriert wird. Das bekomm ich aber irgendwie nicht hin...hab auch schon auf http://de.selfhtml.org/ geguckt, aller dings nichts gefunden

Nun hoffe ich, das ihr mir weiter helfen könnt.
Auch wenn ihr noch andere Anregen zu meiner HA habt sagts ruhig, bin immer offen für alle verbesserungs Vorschläge und auch für Kritik.

Danke schon mal im vorraus

Elvis

http://www.ohne-css.gehts-gar.net/0068.php

chamo

orrr ich wusste es, warum bin ich nicht gleich drauf gekommen???

xD thanks

Donkey

Eine Anmerkung hab ich

Mach noch einen Doctype rein:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Besser wär´s natürlich wenn Du das ganze mit Div's machst.
Da bekommst Du das Layout genauso hin.

Und mit PHP bekommst Du es "frameähnlich" hin.

chamo

mit PHP?
mhhh leider hab ich kein Plan von PHP wollen wir aber auch bald im Unterricht durch nehmen...

und natürlich arbeite ich mit div xD wer is denn so verrückt und macht das nicht?

aber thanks

so hab gleich das nächste problem

schaut euch erst mal das nächste bild an...
[Blockierte Grafik: http://www2.pic-upload.de/16.09.09/cwnatlvokhv7.jpg]

hier der quelltext:

HTML

<html>
<head>
    <title>Hardware Express</title>
    <style type="text/css">
    body {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    border: 20px ridge darkred;
    }

    div#banner {
    text-align: center;
    vertical-align: middle;
    padding: 0;
    background-color: red;
    height: 130px;
    }

    div#unterschrift {
    text-align: center;
    }

    div#Navigation {
    float: left;
    width: 155px;
    margin 0 0 1.2em; padding 0;
    border: 2px dashed orange;
    }

    div#Navigation li {
    list-style: none;
    margin: 0; padding: 0.3em;
    }

    div#Navigation a {
    background-color: green;
    font-weight: 700;
    display: block;
    }

    ul#Navigation a:link {
    color: black; background-color: black;
    }

    ul#Navigation a:visited {
    color: #666; background-color: #eee;
    }

    ul#Navigation a:hover {
    color: black; background-color: white;
    }

    ul#Navigation a:active {
    color: white; background-color: gray;
    }




    </style>
</head>
<body>
<div id="banner">
    <br>
    <font size="9">Hardware Express</font>
    <br>
    <br>
    <font size="4">Eine Seite von  &copy;</font>
</div>




<div id="Navigation">
    <font size="+2">Navigation:</font>
    <ul>
        <li><a href="2main.htm">Startseite</a></li>
        <li><a href="2login.htm">Login</a></li>
        <li><a href="2register.htm">Registrieren</a></li>
    </ul>
</div>
</body>
</html>

Alles anzeigen

so, mein Problem oder eher gesagt meine Frage, wie bekomme ich die Links,
die sich ja im grün eingefärbten Kasten befinden links an den Rand, also das sie nicht mehr eingerückt sind?

thanks schon mal für eure Antworten

Donkey

list-style musste <ul> zuweisen.

Du solltest auch alle Angaben die Du mit <font> gemacht hast durch css ersetzen

chamo

mhhh oben im style bereich oder den font einfach durch nen style tag ersetzen?

weil ich dachte mir, das das vielleicht, wenn ich das oben im head mit rein nehme, mir zu unübersichtlich mit der zeit wird...weil denn müsste ich ja für jede einzelne überschrift nen neuen dingens...(name fällt mir gerade nicht ein) oben anlegen....

Elvis

*OMG* Bitte schult doch einer mal die Lehrer. Fahrlehrer können doch auch autofahren....

Layout-Angaben haben im <body> nichts zu suchen! Sie gehören entweder in den <head> oder entsprechend ausgelagert. Und formatierende HTML-Attribute oder Tags sind genauso lange aus der Mode, wie 90% Deiner Lehrer.

Wie donkey schon gesagt hat, verzichte auf Frames und benutze einen ordentliche Dokumentendeklaration. Der Einbau von PHP ist wirklich kein Hexenwerk und PHP selber musst Du dafür auch nicht lernen.

Donkey

Zu dem Lehrer wollt ich auch schon was schreiben, habs mir aber verkniffen.
Aber da die Katze jetzt eh aus dem Sack is...

Framesets sind schon seit ner ganzen Weile "out"
und wenn das dennoch an der Schule gelehrt wird kann ich das nur als Katastrophe bezeichen.

Wenn Du wirklich lernen willst wie man eine ordentliche Website erstellt musst Du Dich selbst drum kümmern, denn anscheinend lernt man heutzutage nichts mehr Gescheites in der Schule...

Zu Deiner CSS-Sache:

Lager die CSS_Angaben erstmal in eine externe Datei aus, dann is es auch nicht unübersichtlich

chamo

jaja hatte ich auch vor, wollte ja eh denn auch noch ein paar weitere Seiten machen, die so ähnlich auf gebaut sind...und so...jaja, son richtiger nooby bin ich nun auch nicht mehr...:D

ja lehrer...xD die sind schon was tolles...xD unser hat uns ein pdf dokument gegeben, 94 seiten lang, und hat uns gesagt, ja aufgabe bla auf seite bla bis montag...xD das wars...:D nagut eigentlich braucht man denn nur die seiten bis zur aufgabe durchlesen...aber da durch behält man doch sowas nicht... *kopfschüttel*

zum glück konnte ich das vor her schon ein wenig...aber naja...die anderen aus meiner klasse, die da von überhaupt keine ahnung haben, die haben ganz schön zu kämpfen im mom...weil in einer woche fangen wir schon an...mit den ersten arbeiten...:!

aber mit meinem prob bin ich irgendwie immer noch nicht weiter...mhm...schau ich morgen noch mal...

naja, ich geh jetzt pennen, bis denn

Donkey

Hab Dir mal ein Beispiel geschrieben wie man eine Website mit PHP aufbauen kann.

Da Du ja einen Login einbauen willst brauchst Du eh PHP - so kannst Dich schonmal dran gewöhnen.

Noch ein Tipp:
Lass das mit der begrenzten Breite.
Das ist nur ärgerlich für Leute mit grösseren Bildschirmen.
Mach lieber ein flexibles Layout

Das ist nur ein recht grobes Beispiel.
Mehr zeig ich Dir nicht, sonst lernste nichts wenn ich Dir alles vorkau...

koslowski

Moin,

Zitat von Donkey

Noch ein Tipp:
Lass das mit der begrenzten Breite.
Das ist nur ärgerlich für Leute mit grösseren Bildschirmen.
Mach lieber ein flexibles Layout

ärgerlich für Leute mit grösseren Bildschirmen ist vor allen Dingen keine begrenzte Breite.
Da geht dann die Laufweite der Zeilen gegen unendlich und man hat spätestens nach zwei Zeilen keinen Bock mehr weiterzulesen, weil es zu anstrengend ist.

Eine gute Usability sollte immer wichtiger sein als eine gute Optik (für Monsterbildschirme).
Schließlich wollen wird ja Infos von Webseiten lesen und nicht nur ein Bild betrachten, wo rechts und links kein Rand ist.

chamo

mhhh okay...ich steig da nicht wirklich durch....
könntet ihr mir vielleicht nen gutes tutorial empfehlen?

Tags

Benutzer online in diesem Thema