• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div unter Div

T

THE_fan

Neues Mitglied
Hallo,

habe das Richtige nicht über due SuFu finden können, deshalb nun hier der Thread.

Habe ein Div mit absolute positioniert, damit es mittig ist. Nun möchte ich, direkt darunter, ein weiteres Div positionieren, ebenfalls mittig.

Habe es schon mit den selben Befehlen versucht, das haut aber nicht hin.

HTML: 
<div id="content">
    Hier steht dann ganz viel Inhalt
</div>

<div id="sponsors">
    Hier soll der neue Inhalt hin
</div>

Code: 
#content{
  width:                660px;
  background:           #fff;
  position:             absolute;
  left:                 50%;
  border-top:           30px solid #ccc;
  border-left:          4px solid #ccc;
  border-right:         4px solid #ccc;
  border-bottom:        4px solid #ccc;
  margin-left:          -335px;
  margin-right:         -335px;
}

#sponsors{
?????
}

Habe es auch schon mit allen möglichen Formen von clear versucht, es scheitert aber immer wieder!
Hat es eventuell was mit dem Doctype zu tun?
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Wäre nett, wenn mir jemand helfen könnte.
Vielen Dank!
 
Werbung:
Zum zentrieren der Elemente solltest du keine absolute Positionierung verwenden, das ist unnötig.
Das hier sollte als CSS reichen, mehr brauchst du nicht.
Code: 
#content, #sponsors {
  width: 600px;
  margin: 0 auto;
}

Das ein clear hier nichts bewirkt sollte eigentlich klar sein, denn du hast ja kein float, welches durch ein clear aufgehoben werden müsste.

Der Doctype ist korrekt, der hat damit auch nichts zu tun.
 
Werbung:
Es sollte trotzdem darauf hingewiesen werden, dass der IE Probleme mit "margin:auto;" hat.
Der IE hingegen nimmt bei einem übergeordneten Blockelement "text-align:center" an um die inneren DIVs in die Mitte zu zwingen.
Solltest du also mehrere DIVs in der Mitte haben und es IEkompatibel wollen, könntest du durchaus auf diese unschöne Methode zurückgreifen ein umliegendes DIV mit der Breite deiner Seite und einem "text-align:center;" zu definieren.
 
In frühen IE-Versionen wurden Blockelemente durch die Eigenschaft text-align: center irrtümlicher Weise zentriert, diese Eigenschaft sollte sich aber nur auf Text und Inline-Elemente auswirken. Mit margin hatte der IE, soweit ich weiß, beim Zentrieren keine Probleme, hab aber gerade keinen IE6 da um es zu testen. IE7 und IE8 kommen mit der Zentrierung mit margin definitiv klar.
 
Nein, der IE6 kommt definitiv nicht damit klar - aber ich unterstütze jede Person die ihre Webseite nicht mehr IE6-kompatibel (jetzt könnte das böse Wort kommen) "bastelt" ;)
 
Werbung:
SamiSalami schrieb:
[...]
Solltest du also mehrere DIVs in der Mitte haben und es IEkompatibel wollen, könntest du durchaus auf diese unschöne Methode zurückgreifen ein umliegendes DIV mit der Breite deiner Seite und einem "text-align:center;" zu definieren.
Zum Vergrößern anklicken....

Okay, das werde ich berücksichtigen! Danke.

Das andere funktioniert.
Allerdings tritt jetzt ein anderes Problem auf.

Ich habe drei DIVs nebeneinander
HTML: 
<div id="links">
  bilder
</div>

<div id="content">
  s.o.
</div>

<div id="sponsors">
  s.o.
</div>

<div id="rechts">
  bilder
</div>

Sodele. Ich habe dazu folgende CSS
Code: 
#links{
 width:   270px;
 float:    left;
 margin: 0 0 0 10px;
}

#content, #sponsors{
 width:   660px;
 margin:  0px auto;
}

#rechts{
 width:  270px;
 float:   right;
 margin: 0 10px 0 0;
}

Das Problem ist nun, dass sich das rechte Div an das "sponsors" anreiht, es also erst auf der Höhe des Sponsor-Div anfängt und nicht, wie gewollt, ganz oben.
Habe auch schon versucht alles links zu floaten, hilft aber nichts.
Normalerweise sollte es doch so funktionieren..

Danke vorab!


//edit:

Habs!
Habe einfach die Anordnung im HTML-Code geändert, schon funktioniert es.

links, content, sponsor, rechts
in
links, content, rechts, sponsor
geändert.
 
Zuletzt bearbeitet:
Verschieb den Teil der rechts stehen soll im Quelltext nach oben, entweder an erste Stelle oder an zweite Stelle, dann sollte es funktionieren.

SamiSalami schrieb:
Nein, der IE6 kommt definitiv nicht damit klar
Zum Vergrößern anklicken....
Ich habe gerade mal den IETester bemüht und der IE6 kommt damit klar, der IE5 jedoch nicht.
 
Zuletzt bearbeitet:
Also jetzt musst du nochmal genau erklären we dus möchtest:
Möchtest du drei Spalten:
links content, sponsoren rechts

Ein Weg ohne Floats wäre mit absoluter Positionierung zu arbeiten und sie am umliegenden element fix zu positionieren. Womöglich auch mit Z-index.
 
Werbung:
Ich habs jetzt schon :)

Hatte anfangs nur die anderen Divs nicht erwähnt.

Also Männer, vielen Dank für eure schnelle Hilfe! Bravo!
 
"Frauen", wenn ich bitten darf ;)
Dafür nicht!

@Thor: die Renderer sind allerdings nicht allzu zuverlässig, ist meine Erfahrung.

Beim IE6 auf unserem Dummyrechner hier gehts nicht.
Aber du willst mich ja eh nur ärgern :)
 
Frauen und Männer ;)

Jetzt stelle ich mir allerdings gerade die Frage, wie es ist, wenn der Bildschirm nun größer als meiner ist, respektive die Auflösung wächst..
Dann ist, bedingt durch das floaten, "links", "content" und "sponsors" immer weiter links behaftet als "rechts", welches sich ja nach rechts orientiert. Deshalb hatte ich auch das absolute Positionieren reingebracht, weil da "content", egal wie breit der Bildschirm / Auflösung war, immer mittig gesessen hat.
Gibts da Abhilfe? Oder könnt ihr mich anders beruhigen? ;)

Danke vorab!
 
Werbung:
SamiSalami schrieb:
die Renderer sind allerdings nicht allzu zuverlässig, ist meine Erfahrung.
Zum Vergrößern anklicken....
Das ist auch meine Erfahrung, deswegen werde ich hier keine endgültige Aussage treffen, da ich keinen Original IE6 zur Verfügung habe.

Beim IE6 auf unserem Dummyrechner hier gehts nicht.
Zum Vergrößern anklicken....
Dann nehmen wir das so hin und warten auf die Dinge die da kommen. ;)

Aber du willst mich ja eh nur ärgern :)
Zum Vergrößern anklicken....
Nein, nur möglichst präzise Aussagen treffen, um bestmöglich zu helfen.

THE_fan schrieb:
Jetzt stelle ich mir allerdings gerade die Frage, wie es ist, wenn der Bildschirm nun größer als meiner ist, respektive die Auflösung wächst..
Dann ist, bedingt durch das floaten, "links", "content" und "sponsors" immer weiter links behaftet als "rechts", welches sich ja nach rechts orientiert. Deshalb hatte ich auch das absolute Positionieren reingebracht, weil da "content", egal wie breit der Bildschirm / Auflösung war, immer mittig gesessen hat.
Gibts da Abhilfe? Oder könnt ihr mich anders beruhigen? ;)
Zum Vergrößern anklicken....
Du könntest statt der festen Breiten % nehmen und die 100% auf die Elemente aufteilen. Dann würde ich aber eine Mindestbreite und eine Maximalbreite festlegen, da es sonst bei zu großen oder zu kleinem Viewport sehr schlecht lesbar wird.

Ansonsten musst du damit leben, dass eine Webseite dynamisch ist und nicht in jedem Viewport gleich aussieht.
 
Semi-Offtopic:

Das folgende Beispiel funktioniert im IE6 (Windows XP Virtual Machine).

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
    </head>

    <body>

        <div style="margin: 0 auto; width: 600px; background: red;">
            demo
        </div>

    </body>

</html>

Ich sehe keinen Grund, das text-align: center; zum Zentrieren von Blockelementen noch hinzuzusetzen. Unter dem IE6 brauchen nun wirklich keine Browser mehr unterstützt zu werden.
 
SamiSalami schrieb:
Nein, der IE6 kommt definitiv nicht damit klar - aber ich unterstütze jede Person die ihre Webseite nicht mehr IE6-kompatibel (jetzt könnte das böse Wort kommen) "bastelt" ;)
Zum Vergrößern anklicken....

Der IE6 arbeitet im Boxmodell solange die Seite einen korrekten Doctype hat. Das von dir beschriebene Phänomen tritt nur bei fehlendem oder unvollständigem Doctype auf. Alle Versionen des Browsers VOR Version 6 arbeiteten so wie Du es beschreibst.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben