Seite Zentrieren...

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
inetandfun

inetandfun hat kostenlosen Webspace.
21:09, 3.12.2010
Hi,
ich möcht eine Seite Zentrieren und wenn man das Fenster kleiner wird, soll die Seite (auf beiden Seiten) bis an den Rand gehen. Momentan sieht das ganz anders aus. Der linke balken (#left) ist immer ganz links???? aber der obere (#top) ist genau zentriert.
Also mein CSS code sieht bis jetzt so aus:

(#left und #top sind div's)
```
#top {
    background-color: #093;
    width: 950px;
    height: 5em;
    margin-left: auto;
    margin-right: auto



}
#left {
    float:left;
    background-color: #093;
    width: 5em;
    height: 30em;
    margin-left: auto;
    margin-right: auto
}
```
Wäre cool, wenn ihr mir helfen könntet

Grüße
Benni
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
ryanblack

ryanblack hat kostenlosen Webspace.

22:32, 3.12.2010
Bei `#left` einfach `float:left;` entfernen. :)

Ryan
Autor dieses Themas
inetandfun

inetandfun hat kostenlosen Webspace.

12:02, 4.12.2010
Ja dann ist #left aber in der Mitte :(( und das möchte ich ja auch nicht
hsa-kurs-bs

hsa-kurs-bs hat kostenlosen Webspace.

16:49, 6.12.2010
Hast du es schon mal mit den befehl justify ausprobiert.

Gruß: S.Schubert

17:47, 6.12.2010

echt was ihr da für tipps gebt...

Du brauchst zum Beispiel ein Element das so gross ist wie die Seite und darin ist der Inhalt zentriert. Verkleinert sich das Element bleibt alles mittig bis natürlich der Inhalt so gross ist wie das Element selbst...

Ein Beispielcode:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispiel</title>
<style>
	#container {
		width:100%;
		float: none !important;
	}
		
	#wrapper {
		margin: 0 auto;
		width: 500px;
	}
</style>
</head>

<body>
    <div id="container">
        <div id="wrapper">
            <div id="header">
                <h1>Willkommen</h1>
                <ul id="navigation"><li>Home</li><li>Über mich</li></ul>
            </div>
            <div id="content">
                <h2>Überschrift</h2>
                <p>Text text text text</p>
            </div>
        </div>
    </div>
</body>
</html>

Beitrag zuletzt geändert: 6.12.2010 17:52:15 von frnkymen

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city