CSS - Hompage zentrieren + maximale Breite + dynamische Anpassung

Falko81

Hallo Leute,

ich bastel zurzeit an einer Homepage und habe diese momentan zentriert und auf eine Breite von 1000px gebracht .

Code

body
	{
	...	
	text-align:center;
	...
	}


.bodyline
	{
	...	
	width:1000px;
	margin:auto;
	text-align:left;
	...
	}

Alles anzeigen

Nun möchte ich jedoch noch, dass sich diese Seite automatisch mit verkleinert, wenn jemand ein Browserfenster schmaler als 1000px hat.

Klar geht das momentan nicht, weil die Breite auf 1000px eingestellt ist.
Ich habe jedoch auch mit max-width rumgespielt, aber dann springt die Homepage wieder auf die komplette Browserbreite um.

Kann mir somit jemand erklären, wie ich die folgenden Punkte

- max Breite (1000px)
- zentriert
- dynmaisch unter der maximalen Breite

gleichzeitig hinbekomme.

Danke

synaptic

ja probier mal mit % zu arbeiten.. also width:95%; max-width:1000px;
der ie6 kann aber kein max-width oder min-width...
und zentrieren über margin: 0 auto;

interessant ist http://www.css4you.de

edit: und nicht vergessen dass du nen anständigen doctype brauchst

Falko81

Habe es auf die schnelle getestet und leider ist width:95%; dominant und max-width:1000px; wurde gar nicht beachtet.
Sprich egal wie breit das Browserfenster ist, die Homepage bleibt auf 95%.

Ich mache nun erst einmal Pause. Mal schauen ob bis in paar Stunden noch mehr Tipps dabei sind.

Danke Dir erstmal

synaptic

joa war auch nur ne idee auf die schnelle.. getestet hatte ich das nicht. du kannst ner css-eigenschaft noch nen !important anhängen (also max-width:1000px !important; ), so sollte die auf jeden fall umgesetzt werden.
wichtig ist auch immer mit welchem browser du testest..., weil nicht jeder alles kann.
wenn ich wach werde und dein prob bis dahin nich gelöst is, werd ich selber mal gucken was da geht und was nicht.
wenns mit reinem css nicht geht, ist javascript auf jeden fall eine alternative.

und bedenke: 1024px breite is heutzutage das, was 800px vor 8 jahren war^^ => die kleinste genutzte breite. die heutigen auflösungen sind allesamt um einiges größer und 1000px is ne moderate breite

nachti

Tobse

Was ist das problem, wenn die Seite breiter als 1000px ist? Das Forum hier passt sich auch imer der Fensterbreite an. Kannst mal mim Firebug ins HTML und CSS schaun, da wirste hier glaub fuendig

sejuma

So klappt das:

Code

html, body {
width: 100%;
height: 100%;
}


.bodyline
{
width: 95%;
max-width:1000px;
margin: 0 auto;
}

Alles anzeigen

Die Frage ist nur, ob du das auch so willst. Vielleicht meinst du auch min-width.

Ich würde generell nur die 1000px nehmen. Bei prozentualen Werten hast du je nach Inhalt das Problem, dass die Relationen verloren gehen, insbesondere wenn noch Grafiken zum Einsatz kommen.

synaptic

da sieht man ma wat ne übernächtigung bringt.. is ja klar, dass die % nich wirklich angenommen werden, wenn der bezugspunkt fehlt...

danke sejuma denn dan den style vom body hab ich heut nacht gar net gedacht... basics, die man während der arbeit immer macht^^

Falko81

So, auch bisl ausgeschlafen nun.
Nach bisl rumprobieren funktionieren wohl eure Lösungen nicht bei jedem Browser wie schon vermutet.
Ich hatte die ganze zeit mit Chrome getestet. Sieht so aus als ob der max und min-width nicht kennt
Finde ich sehr schade!
Im Firefox funktioniert es mit

Code

body
	{	
	text-align:center;	
	}


.bodyline
	{
	max-width:1000px;
	margin: 0 auto;
	text-align:left;	
	}

Alles anzeigen

einwandfrei.

Bei Chrome passt es sich dem Fenster auch über 1000px hinaus an.

synaptic

dann probier ma max-width:1000px !important;

Falko81

nope

Das mag Chrome auch nicht.
Scheint wohl keine "schöne" Programmierung zu sein. Oder warum unterstütz so etwas ein moderner Browser nicht?
Wäre nämlich schon praktisch wenn bei Netbooks die Breite schmaler gemacht wird und bei großen Bildschirmen eine maximale Breite vorgegeben ist.
Was spricht denn dagegen!?

sejuma

Hast du html und body auf 100% width gesetzt?
Hat die Seite einen standardkonformen Doctype?

Ansonsten immer am besten: Link zur Problemseite posten, damit man alles im Zusammenhang sieht.

Falko81

Keine Änderung (doch siehe EDIT:)

Was du mit Doctype meinst weiß ich nicht. Bin mal wieder son Anfänger der erst seit 2 Tagen rumbastelt.
Hab mal meine Seite probeweise online gestellt. Könnt gern mal schauen.
Link zur Webseite
Ist halt eine Abwandlung von einem eqdkpplus Template.
Finde es auch total mies, das Firefox viel zu helle Rahmen anzeigt. In Chrome ist das wunderschön dunkel.

EDIT:
Habs nun so gelöst. Alles bezüglich Breite in body geschrieben. Dort wird es wohl auch von Chrome beachtet.

Code

html, body
	{
	background:#000000;
	color:#CCCCCC;
	font:11px Verdana,Arial,Helvetica,sans-serif;
	margin:0px;
	padding:0;
	scrollbar-face-color: #202020;
	scrollbar-highlight-color: #606060;
	scrollbar-shadow-color: #303030;
	scrollbar-3dlight-color: #202020;
	scrollbar-arrow-color:  #60cffd;
	scrollbar-track-color: #000000;
	scrollbar-darkshadow-color: #202020;

	[COLOR='red'][B]max-width:1050px;
	margin: 0 auto;	
	width: 96%;[/B][/COLOR]
	}


.bodyline
	{

	background: url(images/winter-tile.jpg)  center no-repeat;
	border:0px solid #606060;	
	[COLOR='red'][B]width: 100%;[/B]	[/COLOR]
	}

Alles anzeigen

Danke euch für die Mühe. Falls ich noch was interessantes herausbekomme melde ich mich.

Vielleicht hat es ja mit diesem Bug zu tun. https://bugs.webkit.org/show_bug.cgi?id=25016

sejuma

Tut mir leid, aber bei so vielen Fehlern mach ich mir da nicht die Mühe einzusteigen.
Mein Tipp: Wenn es dir ein ernstes Anliegen ist, eine Website zu haben, dann lerne HTML und CSS.

Falko81

Wenn dann mach ICH mir da nicht die Mühe die Fehler zu korrigieren, weil die meisten Fehler wohl eh schon im dkpplus template usw liegen
Ich hab nur die CSS bisl bearbeitet und nebenbei bisl HTML mitgelernt.
ICh bin voll zufrieden und solang alles klappt gibt es auch kein Grund dies nicht zu sein. Falls etwas nicht funktioniert dann gehe ich das Problem gezielt an und beseitige nicht direkt alle möglichen Fehler. Ist ja nur ein privates Projekt.
Soooo ernst ist es mir dann doch nicht.
In diesem Sinne.. gn8

synaptic

also mit dem bug hats nichts zu tun, denn ich seh da nirgendwo nen display:table; in deinem css...
dein chrome-problem lösen vermag ich auch nicht, da ich mir die kiste nicht installieren werde...
wenn etwas im firefox funktioniert is es eigentlich auch in 90% aller anderen browser funktionsfähig.
für die restlichen abweichungen brauchste nen eigenes stylesheet und ne browserweiche zum einbinden..

Tags