CSS befehl zentrieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
beispiel
bild
boxen
code
container
datei
einbinden
ersten reihe
gesamten inhalt
glauben
http
kenntnis
klappen
pack
page
position
sicherheit
text
url
-
Hallo,
kann mir jemand in die CSS Datei den Zentrierbefehl einfügen, dass die Seite nicht am rand sondern in der Mitte des Bildschirms angezeigt wird.
body { font-size: 12px; font-family: Helvetica,Arial,sans-serif; } #Teil1 { border: 2px dotted green; width: 950px; height: 4em; } #Teil2 { border: 2px dotted yellow; float: left; width: 950px; } #Teil3 { border: 2px dotted red; float: left; width: 950px; } #Bereich1 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; width: 18em; background-color: rgb(238, 238, 238); float: left; } #Bereich2 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); float: right; width: 16em; } #Bereich3 { border: 1px dashed silver; background-color: rgb(238, 238, 238); } #Bereich4 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; float: left; width: 15em; } #Bereich5 { border: 1px dashed silver; margin: 0pt 12em 1em 16em; padding: 0pt 1em; } #Bereich6 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; float: right; width: 12em; background-color: rgb(238, 238, 238); } #Bereich7 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); }
und noch was: wie kann ich da bilder einbinden?
Schöne Grüße
pcundsoftware -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Versuch das
<html> <body> <div class="page">content</div>
CSS:
.page { position:absolute; top:50%; left:50%; width:600px; height:400px; margin:-200px 0px 0px -300px; background:#cccccc }
Grüsse
Color
Beitrag zuletzt geändert: 14.9.2009 13:15:36 von color -
Ich glaube das hätte wo anders hinmüssen so gehts nämlich nicht. wohin aber?
body { font-size: 12px; font-family: Helvetica,Arial,sans-serif; } .page { position:absolute; top:50px; left:50px; width:600px; height:400px; margin:-200px 0px 0px -300px; background:#cccccc } #Teil1 { border: 2px dotted green; float: left; width: 950px; } #Teil2 { border: 2px dotted yellow; float: left; width: 950px; } #Teil3 { border: 2px dotted red; float: left; width: 950px; } #Bereich1 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; width: 18em; background-color: rgb(238, 238, 238); float: left; } #Bereich2 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); float: right; width: 16em; } #Bereich8 { border 1px dashed silver; margin 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); float: center; width: 16em; } #Bereich3 { border: 1px dashed silver; background-color: rgb(238, 238, 238); } #Bereich4 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; float: left; width: 15em; } #Bereich5 { border: 1px dashed silver; margin: 0pt 12em 1em 16em; padding: 0pt 1em; } #Bereich6 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; float: right; width: 12em; background-color: rgb(238, 238, 238); } #Bereich7 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); } -
so
html
... <div class="page"> <div class="page_c"> [hier dein conent] </div> </div> ...
css
.page { text-align: center; } .page_c { text-align: left; }
müsste klappen!
-
der obrige code verändert leider überhaupt nichts
-
Nein, weil keine breite und nix angegeben ist. Mal so gefragt, wie gut sind deine Kenntnisse im Bereich CSS?
Weil, wenn du dich damit kaum auskennst brauchen wir auch keine Codeschnippsel liefern sonder müssten wir deinen COde kennen und den Verändern.
Schreib uns doch wie deine HTML-Strucktur aussieht und dazu deine CSS-Datei. -
Soll die Seite eine feste Breite haben? Wenn ja, pack den gesamten Inhalt in einen zusätzlichen Container
<body> <div id="page"> Alle Seiteninhalte </div> <body>
Css dazu:
body{ width:100%; } #page { width: Die gewünschte Seitenbreite; margin: 0 auto; }
FF -
Entweder so wie ff geschrieben hat oder so, wie ich es auf dieser Seite gemacht habe:
html:
<div class="box"> Dein content </div>
css:
.box { background: transparent url(sooche.png) no-repeat; left: 50%; margin-left: -270px; position: absolute; width: 540px; }
"margin-left" muss immer halb so breit sein wie die "box" in der der gesamte content steckt. Habe dir übrigens noch ein Beispiel dazu getan, wie man Bilder einfügt, weil du das auch gefragt hast - einfach mit "background: url(deinBild.jpg);". -
Warum so umständlich?
<div id="main"> ... </div>
CSS:
#main { width:800px; margin-left:auto; margin-right:auto; -
trueweb schrieb:
Warum so umständlich?
<div id="main"> ... </div>
CSS:
#main { width:800px; margin-left:auto; margin-right:auto;
Funktioniert mit dem IE6 eben nicht - wenn man den bei seinen Seiten berücksichtigen will... -
kaetzle7 schrieb:
trueweb schrieb:
Warum so umständlich?
<div id="main"> ... </div>
CSS:
#main { width:800px; margin-left:auto; margin-right:auto;
Funktioniert mit dem IE6 eben nicht - wenn man den bei seinen Seiten berücksichtigen will...
Mit Sicherheit, wenn du als Doctype XHTML strict oder transitional angibst und dabei die XML-Deffinition weglässt, da der Doctype für den IE 6 in der ersten Reihe stehen muss
Beitrag zuletzt geändert: 14.9.2009 13:54:47 von trueweb -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
