Wie kann ich eine hompage zentrieren?

rainbow-six3

Jungspund

Dabei seit: 16.11.2009

Beiträge: 11

1

Mittwoch, 25. November 2009, 18:58

Hallo ich habe eine eigen webseite zusamengebaut mit css,java und html. dass Css hat mehrere contener. ich möcht gerne
das sich die webseite automatisch rechts/links zentriert ?
hab schon bei google gesuch aber nichts ging?

gruss rainbow-six3

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »rainbow-six3« (25. November 2009, 19:02)

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327

2

Mittwoch, 25. November 2009, 19:02

	Cascading Style Sheet
1	body { margin: 0 auto; }

Damit wird der "Container" body zentriert und damit die ganze Seite. Bin mir aber nicht sicher, obs auch im IE klappt.

dermainzer

rainbow-six3

Jungspund

Dabei seit: 16.11.2009

Beiträge: 11

3

Mittwoch, 25. November 2009, 19:04

das hab ich schon ausprobiert dan hat es bei mir disch schrift und s. w. auch zetriert und das möchte ich nicht

dermainzer

Routinier

Dabei seit: 07.03.2009

Beiträge: 327

4

Mittwoch, 25. November 2009, 19:08

Dann mach es so:

	HTML
1	<div class="zentriert">Dieser Text soll aber trotzdem linksbündig sein!</div>

	Cascading Style Sheet
1	.zentriert { margin: 0 auto; text-align: left; }

Sollte eglt. funktionieren, wenn nicht: Mach einen span Container drum und gib ihm ein text-align: left;

dermainzer

PhosGEN

König

Dabei seit: 21.02.2003

Beiträge: 767

5

Donnerstag, 3. Dezember 2009, 16:39

Dein Quelltext samt CSS wäre hilfreich. Allerdings Bringt es nichts dem body {margin: 0 auto} zu geben...sondern das musst du dem Div-Container geben der zentriert dargestellt werden soll. Ich nehme mal an das du ein Div hast in welchem all dein Inhalt Platz findet..und dem gibst du dann diese margin Anweisung. Jedoch klappt das erst ab IE7 in der Explorer Familie. Aber musst du wissen ob du den IE6 noch unterstützen willst. Wenn ja dann musst du für diesen mit {text-align: middle} arbeiten.

Hoffe ich konnte mich verständlich ausdrücken.

Gruß Phos

All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···

Monteras

Eroberer

Dabei seit: 01.12.2009

Beiträge: 61

6

Donnerstag, 3. Dezember 2009, 22:02

also ich mach mir nen div container:

	Cascading Style Sheet
1 2 3	#site { width: 800px margin: 0 auto;

wobei ich für die 800px natürlich die breite meiner seite einsetze
wenn ich jetzt meinen html code anschaue:

	HTML
1 2 3 4 5	<body> <div id="site"> pagecontent </div> </body>

dann mach ich das so und schreibe meine seite dahin wo der pagecontent steht.

dann ist die seite deine angegebene weite breit, linksbündiger text und trotzdem in der mitte

Reeperbahner11

unregistriert

7

Freitag, 4. Dezember 2009, 08:51

Morgen, ich denke du hattest es schon richtig gepostet

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<title>Titel der Page</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<link href="css.css" type="text/css" rel="stylesheet" /> 
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" /> 
</head> 
<body> 
<div id="zentriert_rahmen"> 
<!-- Hier deine Layoutsdivs <div id="head"></div><div id="navi"></div> usw. --> 
</div> 
</body> 
</html>

Css

	Quellcode
1 2	* {margin: 0; padding: 0;} #zentriert_rahmen {width: 800px; min-height: 730px; height: auto; margin: auto; }

Um im zentrierten div margin nur auto zu geben, muss in dein css style: *{Werte}

* bedeutet für alle die anweisung zu verwenden.

MFG

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Reeperbahner11« (4. Dezember 2009, 08:51)

lpion3d

Eroberer

Dabei seit: 20.11.2009

Beiträge: 60

8

Donnerstag, 10. Dezember 2009, 15:50

Hallo ich hätte da auch noch eine Lösung, die ist zwar nicht unbedingt optimal, aber für die meisten zwecke reicht es, find ich zumindest.
Also ich zentriere meine DIVs folgendermaßen:

HTML

	HTML
1	<div id="main" align="center"><img src="./pics/back.jpg" width="800" alt="main"></div>

align="left" wäre es dann bei dir damit die Schrift links ausgerichtet ist.

CSS

	HTML
1 2 3 4 5 6 7	div#main { position:absolute; left:50%; margin-left:-400px; z-index:1; top:18px; }

hier kannst du auch position:fixed; nehmen ganz wie du möchtest.

Erklärung: ich habe meinem div ein bild gegeben, und eine feste breite, und die höhe verändert sich dann automatisch.
mit left:50% rückst du den div in die mitte (den linken äußeren rand), und mit margin-left: kannst du ihn dann wieder verschieben.
in meinem Beispiel hier hab ich eine breite von 800px, und gebe margin-left:-400px; (- ist links...gar nichts ist +also rechts) also die hälfte von meiner
div-breite! Damit ist die Mitte des Divs auch immer in der Mitte des Browserfensters.

Nachteil:Wenn du das Fenster verkleinerst schiebst du das ganze irgendwann links hinaus, und ist dann auch durch scrollen nicht mehr erreichbar!

Ich hoffe du verstehst meine zugegeben etwas verwirrende Erklärung. Ich verwende die Methode schon ewig, aber ich habe sie noch nie jemanden erklärt.

Bei Fragen: frag einfach

Nicht der Tage erinnert man sich, sondern der Augenblicke.

Syrws

Grünschnabel

Dabei seit: 06.01.2010

Beiträge: 5

9

Mittwoch, 6. Januar 2010, 16:46

Also bei meiner Page wars recht einfach -> ich hab alles in ne Tabelle gebaut (bzw Layout Tabelle in Dreamweaver CS3), abgespeichert und hab anschließend mit Texteditor: 'align="center"' eingefügt.

Zitat

<table width="1004" border="0" cellpadding="0" cellspacing="0" align="center">

Statt center geht auch natürlich left oder right. Ich behaupte mal, dass ist eine der einfachsten Methoden

Gruß,
Syrws

phpcheck

unregistriert

10

Mittwoch, 6. Januar 2010, 16:49

Zitat von »lpion3d«
Hallo ich hätte da auch noch eine Lösung, die ist zwar nicht unbedingt optimal, aber für die meisten zwecke reicht es, find ich zumindest.
Also ich zentriere meine DIVs folgendermaßen:

HTML
HTML
1
<div id="main" align="center"><img src="./pics/back.jpg" width="800" alt="main"></div>
align="left" wäre es dann bei dir damit die Schrift links ausgerichtet ist.

CSS
HTML
1
2
3
4
5
6
7
div#main {
      	position:absolute;
      	left:50%;
      	margin-left:-400px;
      	z-index:1;
      	top:18px;
      	}
hier kannst du auch position:fixed; nehmen ganz wie du möchtest.

Erklärung: ich habe meinem div ein bild gegeben, und eine feste breite, und die höhe verändert sich dann automatisch.
mit left:50% rückst du den div in die mitte (den linken äußeren rand), und mit margin-left: kannst du ihn dann wieder verschieben.
in meinem Beispiel hier hab ich eine breite von 800px, und gebe margin-left:-400px; (- ist links...gar nichts ist +also rechts) also die hälfte von meiner
div-breite! Damit ist die Mitte des Divs auch immer in der Mitte des Browserfensters.

Nachteil:Wenn du das Fenster verkleinerst schiebst du das ganze irgendwann links hinaus, und ist dann auch durch scrollen nicht mehr erreichbar!

Ich hoffe du verstehst meine zugegeben etwas verwirrende Erklärung. Ich verwende die Methode schon ewig, aber ich habe sie noch nie jemanden erklärt.

Bei Fragen: frag einfach

Wie machst du das denn, intern und externes css. Sieht so danach aus :?:

Aber hattest ja schon erwähnt das sie nicht unbedingt optimal ist.

P.S. Ich weiß ist fast schon Off Topic aber das musste ich dazu noch sagen.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »phpcheck« (6. Januar 2010, 16:49)

verwebbt

Doppel-As

Dabei seit: 22.11.2009

Beiträge: 118

11

Mittwoch, 6. Januar 2010, 18:06

Ich versteh nicht ganz, wo das Problem liegt. Also warum das nicht funktioniert.

Ich habe bei mir im Blog (yay!) im body ganz einfach margin und padding auf 0 gesetzt.
Dann hab ich 3 große Container. header, content und footer (im content sind beiträge und sidebar nochmal getrennt). jeder dieser 3 hat als eigenschaft:

	Cascading Style Sheet
1	margin: auto;

Das sollte eigentlich immer funktionieren.
Wenn es mit dem Text probleme gibt sollte ein einfaches

	Cascading Style Sheet
1	text-align: left;

helfen.

//EDIT

Zitat von »Syrws«

Also bei meiner Page wars recht einfach -> ich hab alles in ne Tabelle gebaut (bzw Layout Tabelle in Dreamweaver CS3), abgespeichert und hab anschließend mit Texteditor: 'align="center"' eingefügt.

Zitat

<table width="1004" border="0" cellpadding="0" cellspacing="0" align="center">

Davon würde ich eher stark abraten. Tabellenlayouts sind - nahja. Nichtmehr das, was man will.

Gruß,
Timo

verwebbt nochmal!
Don't forget to be awesome!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »verwebbt« (6. Januar 2010, 18:06)

phpcheck

unregistriert

12

Mittwoch, 6. Januar 2010, 18:38

Zitat von »lpion3d«

Nachteil:Wenn du das Fenster verkleinerst schiebst du das ganze irgendwann links hinaus, und ist dann auch durch scrollen nicht mehr erreichbar!

dann läuft aber irgendwas falsch oder nicht? Wird wahrscheinlich am Floaten liegen.

Auf jeden Fall geht es am besten wenn man dem rahmendiv(wurde hier jetzt auch schon 5mal gesagt und es schreiben immer noch leute Tabellen etc, pipapo...) eine feste breite zuweisst und dann nur dem rahmendiv margin: auto; wenn du oben einen kleinen abstand willst machst du eben margin: 10px auto; aber das wars auch schon, dann errechnest nur noch den Platz für di inneren divs, korrekt floaten und clearen und perfekt ist. da verschiebt sich nichts!!!!!!!! Man muss nicht jedem Div margin: auto; geben.

So nu is aber gut :huh:

Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von »phpcheck« (7. Januar 2010, 06:44)

PhosGEN

König

Dabei seit: 21.02.2003

Beiträge: 767

13

Mittwoch, 6. Januar 2010, 20:43

Zitat von »phpcheck«

...wenn du oben einen kleinen abstand willst machst du eben margin: 10px auto;

Wenn nur oben einen Abstand sein soll, dann ist

	Cascading Style Sheet
1	margin: 10px(oben) auto(rechts) 0(unten) auto(links);

wohl besser.

Bei

	Cascading Style Sheet
1	margin: 10px(oben/unten) auto(rechts/links);

hast du nicht nur oben sondern auch unten 10px Abstand. Die Klammern müssen natürlich weg gelassen werden ;-)

All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »PhosGEN« (6. Januar 2010, 20:43)

phpcheck

unregistriert

14

Donnerstag, 7. Januar 2010, 12:42

Zitat von »PhosGEN«
Zitat von »phpcheck«

...wenn du oben einen kleinen abstand willst machst du eben margin: 10px auto;

Wenn nur oben einen Abstand sein soll, dann ist
Cascading Style Sheet
1
margin: 10px(oben) auto(rechts) 0(unten) auto(links);
wohl besser.

Bei
Cascading Style Sheet
1
margin: 10px(oben/unten) auto(rechts/links);
hast du nicht nur oben sondern auch unten 10px Abstand. Die Klammern müssen natürlich weg gelassen werden ;-)

Bei einer automatischen Höhe , also ich habe das noch nie gemerkt, wenn sich die Höhe eh dem Inhalt anpasst. Wo merkt er dann ob unten auch 10px sind. Sieht man nicht

Beiträg geändert: Schreibfehler korrigiert

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »phpcheck« (7. Januar 2010, 12:42)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 998

15

Donnerstag, 7. Januar 2010, 13:25

der merkt sich das nicht, sondern "hängt" einfach unten 10px weiter dran. Mit margin und paddings kannst du dir am besten mit dreamweaver anschauen wie die funktioneiren, da wird es toll dargestellt

Mein kleines Projekt
-Cruel Online-

PhosGEN

König

Dabei seit: 21.02.2003

Beiträge: 767

16

Donnerstag, 7. Januar 2010, 21:26

Die "Guhgl" Bildsuche tut's auch

In meinen Design sehe ich immer wenn irgendwo Pixel zu viel sind die ich da nicht rein gepackt habe. Ein gutes Design sollte vorher am Reisbrett entstehen und nicht erst "by chance" während man dran rumdocktert.

phpcheck

unregistriert

17

Freitag, 8. Januar 2010, 06:30

Ich benutze kein Dreamweaver, na gut dann merkt ihr halt was. Wers mag, und ihr macht das schon so lange jajajajaja drea<mweaver O.o Lasst mich blos in Ruhe

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 998

18

Freitag, 8. Januar 2010, 09:38

ja PhosGEN man muss aber schon wissen was dieses Viereck bedeutet. Man denkt sich : "Ach das ist doch leicht zu verstehen"

aber nicht für jeden

ich finde Dreamveawer ist eine Nette möglichkeit ins webdesign einzusteigen, weil es den Besten WYSIWYG editor hat. Habe schon viele kostenlose programme getestet und mit dereamveawer kann da keins mithalten wenn darum geht.

Mein kleines Projekt
-Cruel Online-

phpcheck

unregistriert

19

Freitag, 8. Januar 2010, 10:35

Zitat von »cccpmik«

ja PhosGEN man muss aber schon wissen was dieses Viereck bedeutet. Man denkt sich : "Ach das ist doch leicht zu verstehen" aber nicht für jeden ich finde Dreamveawer ist eine Nette möglichkeit ins webdesign einzusteigen, weil es den Besten WYSIWYG editor hat. Habe schon viele kostenlose programme getestet und mit dereamveawer kann da keins mithalten wenn darum geht.

ich schau es mir an, aber bin bisher immer so zurecht bekommen und auch bei bekannten validen css vorlagen wird das in css so wie ich gepostet habe geschrieben, nun bin ich mir unsicher was genau richtig ist

lpion3d

Eroberer

Dabei seit: 20.11.2009

Beiträge: 60

20

Freitag, 8. Januar 2010, 12:11

Zitat

Wie machst du das denn, intern und externes css

ja, ich weiß das ist nicht unbedingt üblich, aber mir dient es einfach der übersicht.
Wie ich angefangen habe mit websites hab ich sehr schnell viel durcheinander gelernt, ich glaube das merkt man auch wenn man sich meinen code so ansieht.

Zitat

dann läuft aber irgendwas falsch oder nicht? Wird wahrscheinlich am Floaten liegen.

hat
Das kann natürlich sein, float verwende ich fast nie, hab es irgendwie nie gebraucht.

Die Methode die ich vorgeschlagen habe hab ich vor 3 jahren oder so irgendwo im netzt gefunden, ich hab damals das selbe problem gehabt.
Ich wollte die seite immer centriert haben, und irgendwo hab ich dass dann gefunden, bis jetzt hat das immer gereicht, allerdings bin ich gerade dabei meinen code zu ändern.
Mittlerweile hab ich ja mehr dazugelernt, und deshalb passt bei meiner art zu coden sowieso einiges nicht wie ich draufgekommen bin.

Zitat

nun bin ich mir unsicher was genau richtig ist

Ich weiß leider auch nicht was richtig ist, aber ich glaube es gibt auch kein richtiges RICHTIG, weil einfach jeder anderst arbeitet, und jeder muss selber entscheiden was die richtige Methode ist.

Ich werde selber jetzt wieder nach der optimalsten Möglichkeit für mich, wenn ich etwas interessantes gefunden habe poste ich es natürlich hier

Nicht der Tage erinnert man sich, sondern der Augenblicke.