selfhtml.de - Alles für den Webmaster!

Anzeige: united-domains - Die ganze Welt der Domains

Problem mit Centered Div

Autor: SuicideClown
Datum: 30.10.2011 00:40:27

Hey,

Ich redesigne gerade mein Portfolio, und habe ein Problem mit einem Div. Dieses ist gecentered.


------------ Code----------------
.center
{
    width:  1050px; border: 30px solid #ffffff; text-align: left;  position: absolute; left: 50%; top: 0px; margin-left: -525px;  background-color: #ffffff;
}

-------------Code End-------------

In diesem Div(.center) ist ein anderes Div, welches problemlos funktioniert.

-------------Code-----------------

#footercomment1
{
    width: 150px; height: 100px; border-radius: 5px;  -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color:  #7d6262; position:absolute; left: 0px  
}

-------------Code End----------------

Jedoch tritt ein Fehler auf wenn ich ein anderes Div in das Div(.center) einfüge.


------------Code-----------------

.contentdiv
{
    position: absolute; top: 150px; text-align: left; font-size: 24px;
}

------------Code End--------------

Der Fehler wird offensichtlich durch position absolute ausgelöst. (Jedoch ist dieser Tag auch im problemlosen div vorhanden.)

Hier das genannte Problem:

Seite ohne Fehler und ohne postion Tag in Div(.contentdiv):

http://www.suicideclown.com/index2.html


Seite mit Fehler und mit position Tag in Div(.contentdiv):

http://www.suicideclown.com/index3.html

Ich bin ratlos wie ich das Problem lösen könnte....

Ich würde mich über eure Hilfe freuen.

Re: Problem mit Centered Div

Autor: Freddy
Datum: 30.10.2011 02:50:49

Hallo,

und herzlich willkommen. :-)

> Ich redesigne gerade mein Portfolio, und habe ein
> Problem mit einem Div. Dieses ist gecentered.
> Ich würde mich über eure Hilfe freuen.

Das Problem wird durch "position:absolute" hervorgerufen.
Zentriere doch anders, ich sehe keine Grund für eine Zentrierungs mittels "position:absolute".

.centered {
    width:1050px;
    margin:0 auto;
}

Wenn das auch für den IE5 (und IE6 in Quirksmode?) gelten soll, musst Du dem "DIV.centered" überordneten Element (BODY?) "text-align:center;" zuweisen. In ".centered" selbst kannst Du die Schriftausrichtung wieder auf links setzen.

P.S.: Schreibe doch die CSS-Eigenschaften und Werte untereinander. Das machen fast alle so und es dient der Übersichtlichkeit und Lesbarkeit.

Gruß,
Freddy

Re: Problem mit Centered Div

Autor: manya
Datum: 30.10.2011 11:00:52

> Dieses ist gecentered.

"gecentered"  aka _zentriert_  
Me stand the hairs to mountain when I this read. ;-)


Ohne einen vollständigen Doctype wird das im IE mit dem Zentrieren nichts.
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#html

Zusätzlich zu Freddys Tipps brauchst du noch ein position:relative für das "gecenterte" Div.

Gruß
manya

Re: Problem mit Centered Div

Autor: SuicideClown
Datum: 30.10.2011 11:32:59

> > Dieses ist gecentered.
>
> "gecentered"  aka
> _zentriert_  
> Me stand the hairs to mountain when I this read.
> ;-)
>
>
> Ohne einen vollständigen Doctype wird das im IE
> mit dem Zentrieren nichts.
>
> http://de.selfhtml.org/html/allgemein/grundgeruest.htm#html
>
> Zusätzlich zu Freddys Tipps brauchst du noch ein
> position:relative für das "gecenterte" Div.
>
> Gruß
> manya







Entschuldigung, Ich habe in Englisch gedacht und wollte in Deutsch übersetzten.

zum Doctype, Die Seite ist HTML5, daher habe ich diesen weggelassen.

Um es nocheinmal allgemeiner zu formulieren:

Allgemeines Ziel des Unterfanges ist:
- Ein horizontal Zentriertes Div, welches vertikal die gesamte Seite umfasst (oben bis unten) zu erstellen.
- Innerhalb des Div-Elementes sollen andere Div Element mit position: absolute positioniert werden können.


Meine Bisherigen Schritte:

1. Ein Div class="center" mit
-----------------------------------
Code:

position: absolute; left: 50%; top: 0px; margin-left: -525px; width:  1050px;
------------------------------------

zu zentrieren

2. Andere Div-Elemente mit position: absolute in das Div in Punkt 1. einzufügen.

Der Fehler: Das Div in Punkt 1. umfasste nicht mehr vertikal die Gesamte Seite (oben bis unten) wenn Schritt 2. ausgeführt wurde.

(konkreter: Beim im Anfangspost genannten Div mit id="footercomment1" passiert kein Fehler wenn es eingefügt ist, jedoch beim im Anfangspost genannten Div mit class="contentdiv" erscheint besagter Fehler)

Danke im Voraus für eure Hilfe.

Re: Problem mit Centered Div

Autor: Matthias
Datum: 30.10.2011 16:28:36

> Allgemeines Ziel des Unterfanges ist:
> - Ein horizontal Zentriertes Div, welches
> vertikal die gesamte Seite umfasst (oben bis
> unten) zu erstellen.
> - Innerhalb des Div-Elementes sollen andere Div
> Element mit position: absolute positioniert
> werden können.


> Danke im Voraus für eure Hilfe.


Da der Quelltext nicht mehr erreichbar ist, nehme ich an das Problem wurde von Dir gelöst. Vielleicht hätte sich hier jemand für die Lösung interessiert, aber das ist natürlich Deine Sache.

Schön wenn wir helfen konnten!



Matthias

Re: Problem mit Centered Div

Autor: SuicideClown
Datum: 30.10.2011 17:03:43

> > Allgemeines Ziel des Unterfanges ist:
> > - Ein horizontal Zentriertes Div, welches
> > vertikal die gesamte Seite umfasst (oben
> bis
> > unten) zu erstellen.
> > - Innerhalb des Div-Elementes sollen andere
> Div
> > Element mit position: absolute positioniert
> > werden können.
>
>  
> > Danke im Voraus für eure Hilfe.
>
>
> Da der Quelltext nicht mehr erreichbar ist, nehme
> ich an das Problem wurde von Dir gelöst.
> Vielleicht hätte sich hier jemand für die Lösung
> interessiert, aber das ist natürlich Deine Sache.
>
>
> Schön wenn wir helfen konnten!
>
>
>
> Matthias

Danke für eure Hilfe!
Ich habe mich entschieden auf position: absolute zu verzichten.

Das Ergebnis ist unter http://www.suicideclown.com/ zu sehen.

Re: Problem mit Centered Div

Autor: gaby
Datum: 01.11.2011 11:40:58

> Ich habe mich entschieden auf position: absolute
> zu verzichten.

Nachdem es dir unabhängig voneinander in 3 Foren erklärt worden ist!
(auf html.de und forum-hilfe.de).
Meinst du nicht, daß du damit die Hilfsbereitschaft der User mißbrauchst, indem du sie veranlasst, sich mit deinem Problem zu beschäftigen, das in Wirklichkeit schon woanders gelöst wurde?
Nunja, genau für solche Leute, die sich nichts dabei denken, geben wir beim Erstellen eines neuen Threads nochmal den rot unterlegten Hinweis, daß Multipostings - übrigens nicht nur hier(!) -  unerwünscht sind (Screenshot, s.o.)
Sich darüber hinwegzusetzen, ist schon ziemliche frech.


Gaby

Re: Problem mit Centered Div

Autor: SuicideClown
Datum: 01.11.2011 14:59:24

> > Ich habe mich entschieden auf position:
> absolute
> > zu verzichten.
>
> Nachdem es dir unabhängig voneinander in 3 Foren
> erklärt worden ist!
> (auf html.de und forum-hilfe.de).
> Meinst du nicht, daß du damit die
> Hilfsbereitschaft der User mißbrauchst, indem du
> sie veranlasst, sich mit deinem Problem zu
> beschäftigen, das in Wirklichkeit schon woanders
> gelöst wurde?
> Nunja, genau für solche Leute, die sich nichts
> dabei denken, geben wir beim Erstellen eines
> neuen Threads nochmal den rot unterlegten
> Hinweis, daß Multipostings - übrigens nicht nur
> hier(!) -  unerwünscht sind (Screenshot,
> s.o.)
> Sich darüber hinwegzusetzen, ist schon ziemliche
> frech.
>
>
> Gaby
>
>

Ich entschuldige mich.

Ich hae den entsprechenden Hinweis nicht gelesen. Ich gebe dir in gewisser Weise recht.

Re: Problem mit Centered Div

Autor: gaby
Datum: 02.11.2011 12:17:25

Okay, Schwamm drüber. :-)


Grüße
gaby

Re: Problem mit Centered Div

Autor: gaby
Datum: 04.11.2011 10:12:54

> Ich habe mich entschieden auf position: absolute
> zu verzichten.
> Das Ergebnis ist unter
> http://www.suicideclown.com/ zu sehen.


Moin moin,

In deiner verlinkten Datei ist davon aber nichts zu sehen.
Was bei deiner Zentrierungsmethode mit 'position: absolute' bei kleinem Anzeigebereich passiert, siehst du in obigem Screenshot.

Lösung:
siehe Freddys Codeschnipsel.


> Um es nocheinmal allgemeiner zu formulieren:
>
> Allgemeines Ziel des Unterfanges ist:
> - Ein horizontal Zentriertes Div [...] zu erstellen.
> - Innerhalb des Div-Elementes sollen andere Div
> Element mit position: absolute positioniert
> werden können.

siehe dazu den letzten Satz in Manyas Posting.


Und dein 'border: 30px solid #ffffff' im DIV.center sollte besser ein 'margin: 30px solid #ffffff' werden, sonst bekommst du früher Scrollbalken, als es nötig wäre.


Grüße
gaby

Re: Problem mit Centered Div

Autor: SuicideClown
Datum: 05.11.2011 19:22:30

> > Ich habe mich entschieden auf position:
> absolute
> > zu verzichten.
> > Das Ergebnis ist unter
> > http://www.suicideclown.com/ zu sehen.
>
>
> Moin moin,
>
> In deiner verlinkten Datei ist davon aber nichts
> zu sehen.
> Was bei deiner Zentrierungsmethode mit 'position:
> absolute' bei kleinem Anzeigebereich passiert,
> siehst du in obigem Screenshot.
>
> Lösung:
> siehe Freddys Codeschnipsel.
>
>
> > Um es nocheinmal allgemeiner zu
> formulieren:
> >
> > Allgemeines Ziel des Unterfanges ist:
> > - Ein horizontal Zentriertes Div [...] zu
> erstellen.
> > - Innerhalb des Div-Elementes sollen andere
> Div
> > Element mit position: absolute positioniert
> > werden können.
>
> siehe dazu den letzten Satz in Manyas Posting.
>
>
> Und dein 'border: 30px solid #ffffff' im
> DIV.center sollte besser ein 'margin: 30px solid
> #ffffff' werden, sonst bekommst du früher
> Scrollbalken, als es nötig wäre.
>
>
> Grüße
> gaby


Danke für die erneute Hilfe, jedoch habe ich Probleme wenn ich Freddys Methode verwende.

Link:

http://www.suicideclown.com/index2.html

Grüße, SuicideClown

Re: Problem mit Centered Div

Autor: gaby
Datum: 06.11.2011 09:19:58

> Danke für die erneute Hilfe,

bitte sehr

> jedoch habe ich
> Probleme wenn ich Freddys Methode verwende.
>
> Link:
>
> http://www.suicideclown.com/index2.html



1. Zitat  Freddy:
> Das Problem wird durch "position:absolute"
> hervorgerufen.
> Zentriere doch anders, ich sehe keine Grund für
> eine Zentrierungs mittels "position:absolute".

d.h.: entferne 'position:absolute' und das zugehörige 'top:0', und du entfernst das Problem.


2. Zitat Freddy:
> P.S.: Schreibe doch die CSS-Eigenschaften und
> Werte untereinander.  [...]
> es dient der Übersichtlichkeit und Lesbarkeit.

... und steigert die Bereitschaft anderer User, sich mit deinem Problem zu befassen


3. Benutze einen Doctype, der auch niedrigere IE-Versionen in den Standard-Modus setzt.
    Zitat  Manya:
> Ohne einen vollständigen Doctype wird das im IE
> mit dem Zentrieren nichts.
>
> http://de.selfhtml.org/html/allgemein/grundgeruest.htm#html


4. Zitat Manya:
> Zusätzlich zu Freddys Tipps brauchst du noch ein
> position:relative für das "gecenterte" Div.  


5. Vergleiche mal die Namensgebung für dein umschließendes DIV im Stylesheet und im HTML-Code.


Grüße
gaby

Re: Problem mit Centered Div

Autor: manya
Datum: 08.11.2011 15:55:50

> jedoch habe ich
> Probleme wenn ich Freddys Methode verwende.
>
> Link:
>
> http://www.suicideclown.com/index2.html


Damit sollte es dein Layout zentriert sein:

.center
{
width:  1000px;
    margin: auto;
    position: relative;
     border: 30px solid #ffffff;
    background-color: #ffffff;
    min-height: 100%;
}

Falls nicht, dann lasse doch mal testweise erstmal alle anderen Stylesheets und die JavaScripte weg, und füge sie nur Schritt für Schritt wieder ein. Dann kannst du erkennen, welches Stylesheet oder Script für eventuelle falsche Darstellung verantwortlich ist.

Gruß
manya