+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: CSS und Javascript (https://forum.juergens-workshops.de/forumdisplay.php?fid=86)
+--- Thema: Zentrieren mit CSS (/showthread.php?tid=25829)
Zentrieren mit CSS - Leander - 01.05.2008
Hallo!
Meine Homepage war immer mittels Frames erstellt. Die Seite war horizontal und vertikal zentriert, mit nem Füller rundherum. Hatte jemand eine höhere Auflösung, war die Page auch zentriert, nur war eben der Füllrand drumherum größer.
Wie geht das mit CSS? Ich hab einige Templates im Net gefunden...allerdings ist da die Page nur horizontal zentriert. Links und rechts ist der Abstand gleich groß...aber sie hängt am oberen Rand.
Stu Nichols hat ne Lösung, bei der die Seite komplett zentriert ist. Allerdings ist sein Template kompliziert und sobald ich eine Kleinigkeit ändere -> die Pixelwerte, damit sie an mein Hintergrundbild angepasst werden, kommt die Seite durcheinander und es nicht mehr komplett zentriert.
Ich hab schon in mehreren Foren nachgefragt, aber leider wusste keiner eine passende Lösung.
Wichtig: Ohne Frames, ohne Javascript. Und browserkompatibel.
Zentrieren mit CSS - prm - 01.05.2008
Die CSS-Zentrierung ist pixelabhängig vom zu zentrierenden Container.
Eine anleitung findest du hier.
Wird das Fenster jedoch zu klein kann es vorkommen, dass ein Teil des Inhaltes nicht angezeigt wird (nachteil der Zentrierung). Die Größe der Box solltest du deshalb so wählen, dass sie möglichst auch in kleineren Auflösungen noch angezeigt werden kann.
Zentrieren mit CSS - Leander - 01.05.2008
Super, vielen Dank! Jetzt bin ich meinem Ziel schon viel näher gekommen. Text ok, Hintergrundbild ok...
Hab aber noch ein Problem: die DIV-Box hat 960x572 Pixel. Wenn der Text einer Seite zu lang ist, wird er einfach unterhalb der 572px angehängt...mit Scrollbalken. Allerdings sollte der Text immer INNERHALB der 572px sein...und der Scrollbalken auch nur auf Höhe der 572px kommen. Bei mir kommt er aber auf der gesamten Breite des Browsers.
Es soll sich also immer alles innerhalb der 960x572 abspielen.
Hier hab ich es mal hochgeladen.
http://www.llcp.at/hptest/seite.htm
Zentrieren mit CSS - prm - 01.05.2008
Das lässt sich noch vereinfachen:
Nimm das Hintergrundbild in den #center.
Für die Textbox definierst du einen inneren Abstand mit padding.
Positions sollstest du nur gezielt einsetzen, das ist hier nicht erforderlich:
CSS
Code:
#center
{
background-color: #E6ECFF;
border:2px solid black;
width: 960px;
height: 572px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -286px;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
overflow: auto;
}
#text
{
height: 552px;
padding: 10px;
overflow: auto;
}HTML
Code:
<div id="center">
<div id="text">
blablablalablablalbalbablaba<BR>
blablablablablablbalbalbalbalablabalbalbalblab
<BR>blablablablablablbalbalbalbalablabalbalbalblab<BR>...
</div>
</div>Zentrieren mit CSS - Leander - 02.05.2008
Vielen Dank, du hast mir sehr weiter geholfen. Endlich sehe ich Land. *freu* :bounce:
Zentrieren mit CSS - Leander - 02.05.2008
Ich hab doch noch ein Problem.
Seite:
http://www.llcp.at/hptest/test.html
Links noch nicht klickbar!
Ich habe es gut hinbekommen, Menü und Text zu positionieren. Alles war ok. Allerdings wollte ich den Hintergrund in Teilbilder zerlegen, da ich 1. kein so großes Bild wollte (Modemuser sehen zumindest z.B. 1 Teilbild während es lädt statt gar nix) und 2. muss ich den Hintergrund, der hinter dem Content-Text liegt, dunkler machen. Lädt man die Seite, wird der normale Content.jpg geladen (die Teildatei)...wird Text angezeigt, wird die dunklere Content2.jpg geladen, damit der Text besser lesbar ist.
Das große Gesamtbild habe ich also in top, menu, content, right und foot zerlegt (oben, links, mittig, rechts und unten).
Mittels divs habe ich die Teilbilder zusammengefügt. Alles klappte. Allerdings brauche ich ja noch extra Positionsangaben, wo der Menütext und der Contenttext hin soll. Musste noch zwei divs anlegen.
Mein Problem: nun werden right und foot nicht mehr angezeigt. Ich finde leider den Fehler nicht, woran es liegt.
Lieber Prm, könntest du bitte schauen, wie die divs gehören? Ich habe mit der Reihenfolge bzw. Verschachtelung Probleme, wann ein div offen bleiben muss, wann div geschlossen wird.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="SeelenPuls">
<meta name="publisher" content="SeelenPuls">
<meta name="copyright" content="SeelenPuls">
<meta name="description" content="SeelenPuls">
<meta name="keywords" content="SeelenPuls">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SeelenPuls</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="stylesheettest.css">
<style type="text/css">
</style>
</head>
<body>
<div id="center">
<div id="Menubackground"></div>
<div id="Menu">
<a href="anfang.htm" title="Startseite">Anfang</a><br>
<a href="neues.php" title="Neuigkeiten, Archiv & kommende Alben">Neues</a><br>
<a href="biographie.htm" title="Das Projekt, ich, Equipment & Interviews">Biographie</a><br>
<a href="diskographie.htm" title="Diskographie, Lyrik, Mp3s & Reviews">Diskographie</a><br>
<a href="downloads.htm" title="Downloads">Downloads</a><br>
<a href="poesie.htm" title="Gedichte">Poesie</a><br>
<a href="photographie.htm" title="Photogalerie">Photographie</a><br>
<a href="links.htm" title="Links">Links</a><br>
<a href="http://seelenpulsforum.llcp.at" target="newwindow" title="Forum">Forum</a><br>
<a href="gaestebuch11.php" title="Gästebuch">Gästebuch</a><br>
<a href="kontakt.php" title="Kontakt">Kontakt</a><br>
<a href="nachwort.htm" title="Danksagung & Grüße">Nachwort</a>
</div>
<div id="Textbackground"></div>
<div id="Text">
</div>
<div id="Right">
</div>
<div id="Footbackground"></div>
<div id="Foot">
</div>
</div>
</body>
</html>
CSS:
* { padding: 0; margin: 0; }
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
scrollbar-face-color: #808080;
scrollbar-highlight-color: #808080;
scrollbar-3dlight-color: #808080;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
}
#center
{
background-color: #E6ECFF;
border:2px solid black;
width: 960px;
height: 572px;
position: absolute;
top: 50%;
left: 50%;
background-image: url(img/top.jpg);
background-repeat: no-repeat;
margin-left: -480px;
margin-top: -286px;
overflow: auto;
}
#Menubackground
{
left: 0px;
top: 229px;
height: 321px;
width: 168px;
position: absolute;
overflow: auto;
background-image: url(img/left.jpg);
background-repeat: no-repeat;
}
#Menu
{
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
line-height: 20px;
color: #000000;
left: 0px;
top: 229px;
position: absolute;
padding: 10px;
overflow: auto;
}
#Menu A
{
color: #808080;
background-color: transparent;
text-decoration: none;
}
#Menu A:VISITED
{
color: #808080;
background-color:
transparent;
}
#Menu A:ACTIVE
{
color: #808080;
background-color: transparent;
}
#Menu A:HOVER
{
color: #ffffff;
background-color:
transparent;
font-weight:bold;
}
#Menu HR
{
color: #808080;
background-color: transparent;
}
#Textbackground
{
background-image: url(img/content.jpg);
background-repeat: no-repeat;
height: 320px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
overflow: auto;
#Text
{
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
color: #ffffff;
height: 320px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
padding: 10px;
overflow: auto;
}
#Footbackground
{
background-image: url(img/foot.jpg);
background-repeat: no-repeat;
left: 0px;
top: 549px;
height: 23px;
width: 960px;
position: absolute;
}
#Foot
{
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
left: 0px;
top: 549px;
height: 23px;
width: 960px;
position: absolute;
}
=========
Wär super, wenn du mir noch helfen könntest.
Zentrieren mit CSS - prm - 02.05.2008
Für #Right sind keine CSS-Angaben enthalten.
Ich verstehe nicht, weshalb du alles doppelt machst:
So verwendest du z.B. #Textbackground und #Text.
Da reicht doch ein und derselbe Div. Du kannst ihn gleichzeitig sowohl für den Hintergrund als auch für den Text definieren.
Somit kannst du die Häfte an Div's einsparen und alles wäre übersichtlicher.
Auch kann ich nicht nachvollziehen, weshalb du die Hintergrundgrafik überhaupt aufsplittest.
Mach einen Div mit der einheitlichen Hintergrundgrafik.
Darein setze die andren divs für Navi, Right und Footer.
Das kannst du mit float-Angaben lösen.
Sieh dir mal dieses Layout an: In den #wrapper packst du die Hintergrundgrafik und zentrierst ihn.
Innerhalb des #wrapper packst du dann deine einzelnen Bestandteile wie Navi, Content und Footer.
Die ganzen positions (mit Ausnahme der Zentrierung des #wrappers) werden damit überflüssig.
Zentrieren mit CSS - Leander - 02.05.2008
Ups. Hab ich vergessen zu pasten.
In der Datei sind sie aber drin.
Naja, ich muss ja auswählen, wo ich die Graphik hinhaben will...Abstand left, top.
Wenn aber der Text, der darüber gelegt wird, nicht haargenau die selben Werte hat bezüglich left und top, geht es ja nicht. Oder kann ich zwei Mal left und top pro div schreiben?
#Text
{
background-image: url(img/content.jpg);
background-repeat: no-repeat;
height: 320px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
overflow: auto;
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
color: #ffffff;
height: 320px;
width: 716px;
left: 178px;
top: 239px;
position: absolute;
padding: 10px;
overflow: auto;
}
====================
Ich will eine weiße Schriftfarbe für den Text verwenden. Da wird er aber wegen Schnee auf den Bergen schlecht leserlich. Also brauch ich eine zweite Datei, die ich dunkler mache...wobei der Rest hell bleiben soll.
Schau dir das mal an, falls du 1024x768 + hast.
http://www.seelenpuls.at/seelenpuls.html
dann klick z.B. auf Neues. Und der Mittelteil wird dunkler, damit man die Schrift besser sieht.
Ist mit Frames und Javascript...und ich will eben haargenau dasselbe mit CSS und nem neuen Designhintergrund, da die alte Graphik zu unscharf war.
Zentrieren mit CSS - prm - 03.05.2008
OK, du brauchst einen #content-Div mit abgedunkeltem Hintergrund.
Dazu musst du aber nicht alles zerlegen.
Verwende eine einheitliche Hintergrundgrafik und für den #content einen abgedunkelten Teilausschnitt.
Ich habe das jetzt nicht mit den Grafiken getestet, aber generell sollte es so funktionieren, wobei ggf. noch Detailanpassungen erforderlich sind:
Code:
body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
font-family: Verdana, Arial, sans-serif;
color: #fff;
}
#center
{
background-color: #E6ECFF;
border:2px solid black;
width: 960px;
height: 572px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -286px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
}
#navi
{
position: absolute;
left: 0px;
top: 229px;
overflow: auto;
padding: 10px;
font-size: 16px;
line-height: 20px;
}
#content
{
background-image: url(img/content.jpg);
background-repeat: no-repeat;
height: 297px;
width: 716px;
left: 168px;
top: 229px;
position: absolute;
overflow: auto;
font-size: 14px;
padding: 10px;
}
#footer
{
background-image: url(img/foot.jpg);
background-repeat: no-repeat;
height: 23px;
width: 960px;
position: absolute;
left: 0px;
top: 549px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="center">
<div id="navi">
Hier kommt<br>
die Navi rein.
</div><!--Ende navi-->
<div id="content">
Hier kommt der Inhalt rein
</div><!--Ende content-->
<div id="footer">
Hier kommt der Footer rein
</div><!--Ende footer-->
</div><!--Ende center-->
</body>Zentrieren mit CSS - Leander - 03.05.2008
Danke, werde es dann ausprobieren.
Also es macht nichts, wenn eine Graphik aufgerufen wird, obwohl schon eine andere als Hintergrund definiert ist?