Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2008 Teil von April

SELFHTML Forumsarchiv
Div Container zentrieren

Informationsseite
  1. Seite (CSS) Div Container zentrieren von jogi, 30. 04. 2008, 12:10
nach unten

Div Container zentrieren

Die folgende Nachricht zum Thema stammt von: jogi, 30. 04. 2008, 12:10

hallo erstmal!
ich habe das Problem, dass ich einen Div-Container komplett zentrieren will. Das einzige was ich aber hinbekomme ist, dass der Text zentriert wird. Ich habe gelesen, dass man es mit margin: 0px auto machen kann, aber auch das hilft bei mir nicht. Ich hoffe ihr könnt mir helfen.
Hier mein CSS-Code: (Es geht um den Bereich: #background)



/* CSS Document */


body {

        text-align: left;
        background-color: #5f5d59;
}

a:link, a:visited, a:hover {
        color: #ffffff;
        text-decoration: none;
        font-family: Myriad Pro;
}



#background {
        float: left;
        padding: 0px;
        width: 800px;
        height: 640px;
        margin: 0px auto;
        background-color: black;
}


#main {
        position: fixed;
        float: left;
 padding: 0px;
 margin-left: 280px;
        margin-top: 148px;
 width: 409px;
 height: 297px;
        background: url(../images/main.jpg) no-repeat;
}

#navigation {
        position: fixed;
        float: left;
        padding: 0px;
        margin-left: -110px;
        margin-top: 100px;
        width: 100px;
}

#writing_down_under {
        position: fixed;
        float: left;
        padding: 0px;
        margin-left: 340px;
        margin-top: 255px;
        width: 192px;
        height: 42px;
        background: url(../images/writing_down_under.jpg) no-repeat;
}

#line_down {
        position: fixed;
        float: left;
        padding: 0px;
        margin-left: -477px;
        margin-top: -598px;
        width: 1px;
        height: 640px;
        background-color: #d98a0c;
}

Danke schonmal für die Hilfe!
gruß Johann

nach obennach unten

Div Container zentrieren

Die folgende Nachricht zum Thema stammt von: suit, 30. 04. 2008, 12:28

»» ich habe das Problem, dass ich einen Div-Container komplett zentrieren will. Das einzige was ich aber hinbekomme ist, dass der Text zentriert wird. Ich habe gelesen, dass man es mit margin: 0px auto machen kann, aber auch das hilft bei mir nicht. Ich hoffe ihr könnt mir helfen.

margin: 0 auto; (px ist bei 0 überflüssig, da 0 immer 0 ist unabhängig von der einheit) funktioniert nicht im quirks-mode

"komplett zentrieren" - meinst du damit vertikal und horizontal oder nur nur horizontal (margin: 0 auto; tut letzteres)

um eine seite auch vertikal zu zentrieren brauchst du ein zweites pseudoelement

---
[codel lang=html]
<html>
  <head></head>
  <body>
    <div id="top"></div>
    <div id="container">
      <h1>ueberschrift</h1>
      <p>text text text</p>
    </div>
  </body>
</html>
[/code]

html, body {
  position: relative;
  height: 100%;
 }


#top {
  width: 1px;
  height: 50%;
  margin-bottom: -200px; /* halbe Höhe des Containers */
  float: left;
}


#container {
  position:relative;
  margin: 0 auto;
  height: 400px;
  width: 600px;
  clear: left;
  background: #FF0000;
  border: 1px solid #000000;
}

nach obennach unten

Div Container zentrieren

Die folgende Nachricht zum Thema stammt von: jogi, 30. 04. 2008, 13:04

danke.. das es so einfach war hät ich auch jetzt nicht gedacht.. super!!
gruß Johann

nach obennach unten

Div Container zentrieren

Die folgende Nachricht zum Thema stammt von: suit, 30. 04. 2008, 13:50

»» danke.. das es so einfach war hät ich auch jetzt nicht gedacht.. super!!

das ist eigentlich nicht so einfach, zumindest nicht naheliegend, dass man es so macht ;) die wirklich "einfache variante" funktioniert nämlich nicht so wie gewünscht

nach obennach unten

Div Container zentrieren

Die folgende Nachricht zum Thema stammt von: Detlef G., 02. 05. 2008, 18:22

Hallo suit,

übrigens: http://forum.de.selfhtml.org/archiv/2006/1/t122049/#m785118

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser

- aber das Beste und Interessanteste ist der Weg dahin!

nach obennach unten

Div Container zentrieren

Die folgende Nachricht zum Thema stammt von: Christoph, 03. 05. 2008, 14:39

Moin.

»» übrigens: http://forum.de.selfhtml.org/archiv/2006/1/t122049/#m785118

And als Antwort auf /archiv/2008/3/t168719/ auch dies hier.

Christoph

nach obennach unten

Div Container zentrieren

Die folgende Nachricht zum Thema stammt von: thebach, 30. 04. 2008, 12:29

Hallo

FAQ?

--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: suit, 30. 04. 2008, 12:34

»» FAQ?

mit verlaub, die unter http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte gezeigte methode (mit position absolute) ist eine sehr dämliche

wenn der viewport kleiner wird als der seiteninhalt, verschwindet alles nach links oben ins nirvana (ohne scrollbalken) - ggf könnte man die von mir gepostete variante mal in die faq aufnehmen - diese ist wesentlich praktikabler
http://forum.de.selfhtml.org/?t=170478&m=1114446

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: suit, 30. 04. 2008, 12:40

»» mit verlaub, die unter http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte gezeigte methode (mit position absolute) ist eine sehr dämliche

nachtrag:
weil ichs garde sehe - die darunter beschriebene tabellenlösung sollte man ggf ebenfalls entfernen, da sie suggeriert, dass es ok ist nicht standardkonformes markup zu verwenden ;)

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: thebach, 30. 04. 2008, 13:05

»» nachtrag:
»» weil ichs garde sehe - die darunter beschriebene tabellenlösung sollte man ggf ebenfalls entfernen, da sie suggeriert, dass es ok ist nicht standardkonformes markup zu verwenden ;)

Es wird doch gerade an der Version 9 gearbeitet - da werden solche Jugendsünden sicherlich getilgt werden.

--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: Pete, 02. 05. 2008, 01:16

»» »» mit verlaub, die unter http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte gezeigte methode (mit position absolute) ist eine sehr dämliche
»»
»» nachtrag:
»» weil ichs garde sehe - die darunter beschriebene tabellenlösung sollte man ggf ebenfalls entfernen, da sie suggeriert, dass es ok ist nicht standardkonformes markup zu verwenden ;)

Was genau ist denn an der Tabellenlösung nicht OK?

Pete

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: suit, 02. 05. 2008, 10:57

»» Was genau ist denn an der Tabellenlösung nicht OK?
die frage ist jetzt nicht dein ernst ;)

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: Pete, 02. 05. 2008, 23:24

»» »» Was genau ist denn an der Tabellenlösung nicht OK?
»» die frage ist jetzt nicht dein ernst ;)

Auch wenns peinlich ist, doch!

Pete

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: at, 05. 05. 2008, 14:07

Hallo.

»» »» »» Was genau ist denn an der Tabellenlösung nicht OK?
»» »» die frage ist jetzt nicht dein ernst ;)
»»
»» Auch wenns peinlich ist, doch!

Tabellen sollten tabellarischen Daten vorbehalten bleiben, Stichwort: Semantik. Als gestalterische Hilfskonstruktion sind sie zweckentfremdet eingesetzt und bei späteren Änderungen unhandlich.
MfG, at

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: Pete, 05. 05. 2008, 14:44


»» Tabellen sollten tabellarischen Daten vorbehalten bleiben, Stichwort: Semantik. Als gestalterische Hilfskonstruktion sind sie zweckentfremdet eingesetzt und bei späteren Änderungen unhandlich.


Ja das ist klar und auch Ansichtssache. Aber unter falsch verstehe ich falsch im Sinne von fehlerhaft, und Fehler kann ich keine erkennen.

Pete

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: at, 05. 05. 2008, 15:37

Hallo.

»» Ja das ist klar und auch Ansichtssache.

Das ist keine Ansichtssache, sondern Semantik.

»» Aber unter falsch verstehe ich falsch im Sinne von fehlerhaft, und Fehler kann ich keine erkennen.

Dann hast du offenbar entweder ein Verständnis- oder ein Erkenntnisproblem.
Ein Satz, der aufgrund seines Aufbaus keinen Sinn ergibt, ist auch dann fehlerhaft, wenn sein Aufbau syntaktisch korrekt ist. So funktioniert Kommunikation, ganz unabhängig von der gewählten Sprache.
MfG, at

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: Pete, 05. 05. 2008, 16:40

Hallo,

»»
»» »» Ja das ist klar und auch Ansichtssache.
»»
»» Das ist keine Ansichtssache, sondern Semantik.
»»
»» »» Aber unter falsch verstehe ich falsch im Sinne von fehlerhaft, und Fehler kann ich keine erkennen.
»»
»» Dann hast du offenbar entweder ein Verständnis- oder ein Erkenntnisproblem.
»» Ein Satz, der aufgrund seines Aufbaus keinen Sinn ergibt, ist auch dann fehlerhaft, wenn sein Aufbau syntaktisch korrekt ist. So funktioniert Kommunikation, ganz unabhängig von der gewählten Sprache.

Du betrachtest das Innenleben/Gerüst einer Webseite als Kommunikation?
Für mich ist Kommunikation das was rauskommt, nicht was drin steckt.

Oder mathematisch:
Wenn a+b=c ergibt, dann ist doch egal ob diese Aussage auf einem Papier steht was vom Aussehen eher in den Papierkorb gehört. Natürlich liegt der Fall bei Webseiten anders, denn es muss gewährleistet sein, dass alle Systeme/Nutzer die gleiche Information in gewünschter Verpackunge erhalten.

Also stellt sich nur die Frage ist der Code Valide?

Pete

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: at, 05. 05. 2008, 17:01

Hallo.

»» Du betrachtest das Innenleben/Gerüst einer Webseite als Kommunikation?

Ich betrachte HTML als Sprache.

»» Für mich ist Kommunikation das was rauskommt, nicht was drin steckt.

Dann empfehle ich dir das TXT-Format.

»» Oder mathematisch:
»» Wenn a+b=c ergibt, dann ist doch egal ob diese Aussage auf einem Papier steht was vom Aussehen eher in den Papierkorb gehört.

Vom Aussehen war bisher noch gar nicht die Rede, was daran liegen könnte, dass HTML ja nicht für die Darstellung verantwortlich ist.

»» Natürlich liegt der Fall bei Webseiten anders, denn es muss gewährleistet sein, dass alle Systeme/Nutzer die gleiche Information in gewünschter Verpackunge erhalten.

Das ist nicht zu gewährleisten, da die Unterstützung der Verpackung namens CSS recht unterschiedlich ausfällt.

»» Also stellt sich nur die Frage ist der Code Valide?

Und damit stellt sich die Frage, ob du in absehbarer Zeit einen Semantik-Validator veröffentlichst, oder ob ich auch weiterhin meinen Kopf benutzen muss.
MfG, at

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: ChrisB, 05. 05. 2008, 21:07

Hi,

»» Also stellt sich nur die Frage ist der Code Valide?

Nein.

Auch *hoechst* *unsinniger* Code kann technisch valide sein.

Validitaet ist lediglich *eine* Mindestanforderung an "guten" Code - alleine macht sie aber noch lange keinen.

MfG ChrisB


--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: thebach, 30. 04. 2008, 13:03

Hallo suit

»» wenn der viewport kleiner wird als der seiteninhalt, verschwindet alles nach links oben ins nirvana (ohne scrollbalken)

Also bei mir (Firefox 2.0.0.14) kommen in diesen Fall Scrollbalken.

--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: suit, 30. 04. 2008, 13:11

»» Also bei mir (Firefox 2.0.0.14) kommen in diesen Fall Scrollbalken.

bei mir kommt unter jedem browser auch ff 2.0.0.14 ein scrollbalken, aber der scrollbalken erlaubt es mir nur nach rechts und unten zu scrollen, nicht aber den unsichtbaren bereich links und oben wieder in den viewport zu rücken ;)

nach obennach unten

Div Container zentrieren (Ergänzung für die FAQ?)

Die folgende Nachricht zum Thema stammt von: thebach, 30. 04. 2008, 13:29

»» »» Also bei mir (Firefox 2.0.0.14) kommen in diesen Fall Scrollbalken.
»»
»» bei mir kommt unter jedem browser auch ff 2.0.0.14 ein scrollbalken, aber der scrollbalken erlaubt es mir nur nach rechts und unten zu scrollen, nicht aber den unsichtbaren bereich links und oben wieder in den viewport zu rücken ;)

Oh, äh Verzeihung. Hätte den Viewport(ja liebe Firefox Rechtschreibkontrolle, das heißt so und nicht 'Viehexport') noch kleiner machen sollen ;-)

Also ist das Beispiel suboptimal. (Deines konnte ich jetzt noch nicht testen)

--
selfcode: ie:% fl:( br:> va:) ls:& rl:( n4:~ ss:| de:> js:( ch:? mo:} zu:)
"Egal, ob ein Sandkorn oder ein Stein. Im Wasser sinken sie beide."

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2008 Teil von April

© 1998-2006 Seite Impressum, Software: Classic Forum