CSS - Dem Wahnsinn nahe (Ausrichtungsfrage)

[Balu der Bär]

Moin,

folgendes Problem:
Ich möchte nen CSS-Container haben, dieser soll nur 2 Eigenschaften haben: 750px breit sein und genau in der Mitte des Browsers liegen. Ich hab mittlerweile schon hundert Sachen ausprobiert, dass einzigste was aber in die Nähe von dem kommt was ich will ist das hier:

Code:

.header {
background-color: rgb(227,227,227);
border: 1px #000000 solid;
margin-left: 50%;
margin-right: 50%;   
width: 750px;
/*position: relative;  */
}

Leider jedoch wird dadurch das Browserfenster komplett verzogen, ich möchte aber das es genauso bleibt ohne Scrollbars. Kann mir da mal irgendjemand helfen ? :gruebel:

Danke schonmal,

[s.h.a.r.k]

Hey,

willst du es unbedingt mit CSS machen? ansonsten gibts ja auch den HTML-Tag <center></center>.

mfg shark

[Balu der Bär]

Ja ich weiß, es sollte aber schon CSS bleiben da ich einspurig fahren möchte. ;)

Da muss es doch ne Möglichkeit geben. :gruebel:
Is bestimmt so einfach das ich einfach nicht drauf komme...

[chris01]

Hi,

also ich löse dies immer mit

Code:

.header { 
background-color: rgb(227,227,227); 
border: 1px #000000 solid; 
margin: 0 auto;
width: 750px; 
}

und habe damit keinerlei Probleme.

gruß

[alcaeus]

Schon mal

Code:

margin:auto;

versucht? ;)

Greetz
alcaeus

[Balu der Bär]

Hallo,

danke erstmal. Im Firefox geht das mehr oder weniger, im Internet Explorer eider überhaupt nicht, es bleibt ganz links. :-(

@alci: siehe oben :-(

[markusj]

IE ist auch (sorry) kacke, der hält sich nicht an die Darsellungsregeln ...
wenn du 50% Margin machst, bedeutet das meines Wissens nach (bitte nicht schlagen, ich hab schon ewig kein CSS mehr gecoded),
dass er 50% Bildschirmgröße für einen Rand rechts und 50% für einen Rand links reserviert.
Macht 100% --> Fensterverziehen.

mfG

Markus

[Balu der Bär]

Die IE wird aber am meisten eingesetzt.

Ich frage mich grad wie Matze das wohl macht. :gruebel:

Ich seh grad er macht es auch mit margin: auto...

[alcaeus]

@markus: toll :roll:

@Baerli:

Code:

<div style="text-align:center;">
<div style="border:1px solid red;width:750px;text-align:left;">aslfkj</div>
</div>

;)

Greetz
alcaeus

[Balu der Bär]

Jupp alci das geht supi, danke, aber warum geht das nicht:

Code:

.header {
background-color: rgb(227,227,227);
border: 1px #000000 solid;
text-align: center;
width: 750px;
/*position: relative;  */
}

Hintergrund ist weil ich alle Styles-Eigenschaften gerne in ne externe CSS-Datei auslagern würde.

[markusj]

@ Balu: Was macht er denn ...??? Bzw. was macht er nicht???

@alcaeus was meinst du mit Toll ... die Erkenntnis dass diese Werte nicht funktionieren? Ich hab nur meine Meinung gepostet ...

mfG

Markus

EDIT: Ich hab zwar kein Ahnung, aber mal so geraten: vielleicht musst du zur Positionierung den Margin einbauen ...

[alcaeus]

@Balu: text-align bestimmt die Ausrichtung des Inhalts, aber nicht des Containers.
@markus: mit dem "Toll" meinte ich, dass solche Kommentare ja aeusserst viel bringen. Dass der IE manchmal nicht alles korrekt anzeigt weiss mittlerweile jedes Kind, das muss nicht bei jeder Gelegenheit erwaehnt werden, v.a. wenn der Inhalt ja sonst nicht viel mitm Thema zu tun hat; aber egal

Greetz
alcaeus

[Balu der Bär]

Ok, ich habs jetzt hinbekommen, danke. :-)

[Flare]

Und wie hast du es nun hinbekommen? Ich denke mal das wird hier ein paar interessieren! :mrgreen:


Flare

[Elvis]

Zitat:

Zitat von alcaeus

@markus: mit dem "Toll" meinte ich, dass solche Kommentare ja aeusserst viel bringen. Dass der IE manchmal nicht alles korrekt anzeigt weiss mittlerweile jedes Kind, das muss nicht bei jeder Gelegenheit erwaehnt werden, v.a. wenn der Inhalt ja sonst nicht viel mitm Thema zu tun hat; aber egal

Man muss aber nicht aktiv an der Vebreitung dieser Seuche mitwirken. Wenn eine korrekte Seite im IE beschissen aussieht: shit happens, wer's vernünftig dargestellt haben will könnte doch bei FF oder Opera vorbeischauen.
Darwinismus klappte in der Natur die letzten 3.5 Milliarden Jahre lang auch hervorragend. (Auch wenn die Krönung der Schöpfung den IE erschuf... :mrgreen: )

Fies wird's erst wenn es keine oder nur eine der "vernünftigen" Rendering engines gebacken kriegt.

[Balu der Bär]

Zitat:

Zitat von Flare

Und wie hast du es nun hinbekommen? Ich denke mal das wird hier ein paar interessieren! :mrgreen:

In der CSS-Datei:

Code:

.main {
      text-align:center;
      }
      
.header {
       border: 1px #9A9A9A solid;
      width:750px;
      text-align:left;
      background-color: rgb(227,227,227);
       }

In der HTML-datei dann:

Code:

<div class="main"> 
<div class="header"><p class="maintext">Willkommen</p></div> 
</div>

[Flare]

Wunderbar! Danke! :thumb:


Flare

[SubData]

Man kann sonst auch ein wenig schummeln, damit es auf allen Browsern funktioniert.

Das Element

Code:

<div id="MyElement" style="width: 200px; height: 100px;">

</div>

Body Onload:

Code:

<body onLoad="centerElement('MyElement');">

JavaScript:

Code:

function centerElement(e)
{
 e = document.getElementById(e);
 var ex, ey, wx, wy, sx, sy;
 ex = parseInt(e.style.width);
 ey = parseInt(e.style.height);
 
 /* --- Inner Width/Height --- */
 if (self.innerHeight)
 {
  wx = self.innerWidth;
  wy = self.innerHeight;
 }
 else if (document.documentElement && document.documentElement.clientHeight)
 {
  wx = document.documentElement.clientWidth;
  wy = document.documentElement.clientHeight;
 }
 else if (document.body)
 {
  wx = document.body.clientWidth;
  wy = document.body.clientHeight;
 }

 /* --- Scrolling offset --- */
 if (self.pageYOffset)
 {
  sx = self.pageXOffset;
  sy = self.pageYOffset;
 }
 else if (document.documentElement && document.documentElement.scrollTop)
 {
  sx = document.documentElement.scrollLeft;
  sy = document.documentElement.scrollTop;
 }
 else if (document.body)
 {
  sx = document.body.scrollLeft;
  sy = document.body.scrollTop;
 }
 e.style.left = (((wx / 2) - (ex / 2)) + sx) + 'px';
 e.style.top  = (((wy / 2) - (ey / 2)) + sy) + 'px'; 
}

Diese Methode funktioniert übrigens auch, wenn man schon ein Stück runter gescrollt hat.
Man kann also die Funktion auch später aufrufen (beim Einblenden vom Element) und das Element wird trotzdem an der richtigen Stelle zentriert gesetzt :)

Edit: Wichtig ist nur, dass das Element eine absolute Größenangabe hat.

[monta]

Zitat:

Zitat von s.h.a.r.k

HTML-Tag <center></center>.

der wäre meines wissens nach eh deprecated und sollte laut Empfehlung nicht mehr verwendet werden, statdessen gibts ja auch zentrierte Divs.

Zitat:

Zitat von Elvis

Zitat:

Zitat von alcaeus

@markus: mit dem "Toll" meinte ich, dass solche Kommentare ja aeusserst viel bringen. Dass der IE manchmal nicht alles korrekt anzeigt weiss mittlerweile jedes Kind, das muss nicht bei jeder Gelegenheit erwaehnt werden, v.a. wenn der Inhalt ja sonst nicht viel mitm Thema zu tun hat; aber egal

Man muss aber nicht aktiv an der Vebreitung dieser Seuche mitwirken. Wenn eine korrekte Seite im IE beschissen aussieht: shit happens, wer's vernünftig dargestellt haben will könnte doch bei FF oder Opera vorbeischauen.
Darwinismus klappte in der Natur die letzten 3.5 Milliarden Jahre lang auch hervorragend. (Auch wenn die Krönung der Schöpfung den IE erschuf... :mrgreen: )

Fies wird's erst wenn es keine oder nur eine der "vernünftigen" Rendering engines gebacken kriegt.

Der Standardanwender wird aber einen Teufel tun, seinene schönen mitgelieferten Browser zu wechseln. Stattdessen wird er sich fragen, wieso deine Seite so besch... aussieht und diese daraufhin abhacken und sich eine andere Suchen, welche er vernünftig im IE betrachten kann. Somit muss eine Seite, wenn sie auch auf Firefox, Mozilla oder dergleichen optimiert ist, imGroßen und ganzen mit jedem Browser betrachtbar sein und (halbwegs) vernünftig (bei ordentlichen Fensterabmessungen und Schriftgröße versteht sich) aussehen. Der Darwinismus mag ja klappen, aber veilleicht stirbt auch deine Seite aus :mrgreen:

Die Methode von SubData hat halt den Nachteil, das sie JS benötigt, wenns das nicht gibt hat man wieder ein Problem. Aber das sollte ja im IE meist an sein wird ich mal denken.

[jensw_2000]

Ich zentriere Elemente immer so auf dem "Eltern-Element" ....

Code:

.Screenbox {
              margin 0px auto 0px auto;
              boarder 1px solid black;
              ...
}

Das funktioniert auf allen aktuellen Browsern ohne Probleme.
Ob meine Website mit NetScape 2.0.2.866 oder IE 3.0 läuft interessiert mich erhrlich gesagt nicht.




Schöne Grüße,
Jens
:hi:

[s.h.a.r.k]

Zitat:

Zitat von Balu der Bär

Die IE wird aber am meisten eingesetzt.

Ich frage mich grad wie Matze das wohl macht. :gruebel:

Ich seh grad er macht es auch mit margin: auto...

Kommt zwar ein bisschen spät von mir, aber ich hab doch nen Satz drüber zu verlieren: Und zwar ist es eigentlich egal, welcher browser absolut oder relativ am meisten genutzt wird. Eine Website sollte auf dem IE, Firefox, Mozilla, Opera und vielleicht noch dem Netscape gleich aussehen und am besten nach den festgelegten Normen erstellt sein.

Außerdem wurde auch schon gesagt, dass sich der IE nicht an alle Konventionen hält, was an und für sich schwachsinn ist. Zu was gibt es denn diese Regeln sondt. Microsoft hat auch schon angekündigt, dass der neue IE Version 7 dieses Regeln zum Teil auch nicht beachten wird und nach eigenen Regeln vorgeht. Zu was denn bitte schön?

Die Programmierer von Websiten haben es heutzutage schon sehr schwer, da sie von jedem HTML-Tag oder auch CSS-Code wissen müssen, was er bei welcher Browser-Version welche Auswirkung hat. Und dann stellt sich Microsoft (aus welchen Gründen auch immer) wieder mal quer und kocht sein eigenes Süppchen... Ist das wirklich Sinn und Zweck? Ich finde nicht!

[markusj]

Und wenn wir den IE Boykottieren, werden unsere Seiten Boykottiert, wie Monta festgestellt hat ...
M$ muss halt extratouren Drehen, um zu zeugen, wer am längeren Hebel sitzt.
Da bleibt nur eines : lang lebe der Feuerfuchs.

Ich persönlich surfe nur noch mit FF ... und gestalte auch meine Page nur mit FF.

mfG

Markus

PS: Ich glaube ich werden auf meine Homepage eine Warnungan alle IE-User bringen: Achtung, aufgrund ihres nicht standardkonformen Browsers kann es zu Darstellungsfehlern kommen ... ich empfehle Fierefox (Link). :)

EDIT: OK, ich halte mein OT-gequatsche zurück

[CalganX]

Hi zusammen,
könntet ihr bitte beim Thema bleiben und den Thread nicht zu einem "Warum der IE schlecht ist" bzw. "FF vs. IE"-Thema verkommen lassen? Ansonsten müssen wir den Thread schließen und ich glaube nicht, dass das im Sinne des Threaderstellers ist.

Danke,
Chris

[Robert Marquardt]

Ja das mit dem IE ist wirklich schlimm.
Im Mobipocket Forum gibt es z. B. laufend Beschwerden warum es denn mit dem IE7 beta nicht geht und das das doch bitteschoen schnellstens gefixt werden soll.
Microsoft hat hier elegant die Arschloecher und Volltrottel dieser Welt fuer sein Monopol eingespannt.

[CalganX]

Hi Robert,

Zitat:

Zitat von Robert Marquardt

Microsoft hat hier elegant die Arschloecher und Volltrottel dieser Welt fuer sein Monopol eingespannt.

ich glaube dir sollte klar sein, dass das nicht die Ausdrucksweise ist, die wir hier von allen erwarten. :warn:

Chris

[Thorben77]

Zitat:

Zitat von markusj

PS: Ich glaube ich werden auf meine Homepage eine Warnungan alle IE-User bringen: Achtung, aufgrund ihres nicht standardkonformen Browsers kann es zu Darstellungsfehlern kommen ... ich empfehle Fierefox (Link). :)

Guck mal hier: Beitrag von KingIR