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

zentrierte Ausgabe bei max-width

Status
Für weitere Antworten geschlossen.
H

HittiSan

Neues Mitglied
Hallo,
ich habe in meinem Stylesheet die Maximale Weite auf 1000px begrenzt, um so extrem breite und folglich weniger augenfreundliche Anzeigen bei immer häufiger auftretenden Bildschirmweiten über 1024 iger Auflösung zu verhindern.
hier das div für den Header:

#header
{
position: static;
background-image: url(Bilder/pagegrey2.gif);
height:7.2em;
top:0px;
font-family: "Arial MS Unicode", Arial, sans-serif;
width: 95%;
max-width: 1000px;
text-align: center;
margin-top:0em;
margin-right: 1%;
margin-left: 1%;
padding-top: 1em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.5em;
overflow:hidden;
}

Wenn ich nun auf einem Monitor mit mehr als 1000 Pixeln Bildschirmbreite diese Seite (hier der Header) betrachte, rutscht die Site nach links. Wie kann ich erreichen, dass sie weiter in der Bildschirmmitte steht? Unabhängig von der Auflösung?
 
Entweder, du benutzt statt margin-right: 1%; margin-left: 1%; einfach margin: auto; , oder du lässt es ganz weg und benutzt einfach <div align="center"></div>
 
Tja, beim IE klappt es mit Body,
aber beim Firefox nicht und Opera spielt auch nicht mit.


:cry:

Nun, wenn ich

#header
{
position: static;
background-image: url(Bilder/pagegrey2.gif);
height:7.2em;
top:0px;
font-family: "Arial MS Unicode", Arial, sans-serif;
width: 95%;
max-width: 1000px;
text-align: center;
margin-top:0em;
margin-right: auto;
margin-left: auto;
padding-top: 1em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.5em;
overflow:hidden;
}

margin hier ändere klappt es so wie es soll.
Danke für das Auto :mrgreen:
 
Zuletzt bearbeitet:
Hi,

Zitat von HittiSan:
Wenn ich nun auf einem Monitor mit mehr als 1000 Pixeln Bildschirmbreite diese Seite (hier der Header) betrachte, rutscht die Site nach links. Wie kann ich erreichen, dass sie weiter in der Bildschirmmitte steht? Unabhängig von der Auflösung?
Zum Vergrößern anklicken....

Pack doch mal deine ganzen container in einen wrapper und zentriere den:
Code: 
 <body>
             <div id="wrapper>
             <div id="header></div>
             <div id="navi"></div>
             <div id="content"></div>
              </div><!--Ende # wrapper-->
            </body>

formatieren dann so:
Code: 
#wrapper  { margin:0 auto;  }

#wrapper braucht dann natürlich noch die Angaben für width und max-width.

position:static; ist doch von Hause aus eingestellt, das muss doch nicht extra angegeben werden, oder?

Eine fixe Höhe für #header würde ich auch nicht angeben.
Die Höhe kannst du doch durch den Inhalt + Angabe von margin und padding regeln.
Dann bleibst du flexibler.
 
Die Höhe ist aber nicht fix. Em ist elastisch, es richtet sich halt nach der Schriftgröße und das möchte ich so haben.

Ferner erinnert mich der Wrapper an Divitis. Was soll ich Continer ineinader verschachteln, wenn es auch ohne geht. Ich halte so was für unsauber.

Ich ändere die Postion in den divs häufiger, da ich damit oft rumspiele. Deswegen steht immer mir in den Containern immer die Position. Während der Entwurfsphase. das ist dann einfach zu lesen und zu verstehen. Wenn ich die Dateien optimiere, lösche ich vieler dieser Formatierungsregeln wieder.
 
Zuletzt bearbeitet:
Hi,

Zitat von Hittisan:
Die Höhe ist aber nicht fix. Em ist elastisch, es richtet sich halt nach der Schriftgröße und das möchte ich so haben.
Zum Vergrößern anklicken....
Die Angabe einer definierten Höhe ist erstmal eine fixe,- und in diesem Fall unnötige Angabe.

em ist eine Größenangabe relativ zur Schriftgröße, das ist richtig, aber das kommt erst zum Tragen wenn du die Seite ein,- oder auszoomst oder die Schriftgröße veränderst.

Der Vorteil eines elastischen Layouts kommt auch erst zum Tragen wenn alle Formatierungsangaben in em gemacht werden, dann kann man zoomen und Schriftgröße beliebig ändern ohne das das Layout auseinderfällt.

Dein Layout ist leider kein elastisches Layout weil du auch Angaben in % und px darin machst.

Zitat von HittiSan:
Ferner erinnert mich der Wrapper an Divitis. Was soll ich Continer ineinader verschachteln, wenn es auch ohne geht. Ich halte so was für unsauber.
Zum Vergrößern anklicken....
Einen #wrapper zu definieren hat mit divitis nicht das geringste zu tun, im Gegenteil, es ist gängige Praxis.
Und unsauber ist es gleich gar nicht.

Bei elastischen Layouts kommt man um ein #wrapper auch kaum herum, jedenfalls wenn man ein echtes elastisches Layout basteln will.

Zitat von HittiSan:
Ich ändere die Postion in den divs häufiger, da ich damit oft rumspiele. Deswegen steht immer mir in den Containern immer die Position.
Zum Vergrößern anklicken....
Da position:static; die normale Einstellung in allen Browsern ist, ist die Angabe unsinnig.
position:relative; und postion:absolute; sollte man auch nur verwenden, wenn es sich absolut nicht vermeiden läßt (z.B. Dropdown-Menüs ohne JS, oder bei der Gilder/Levine-Methode zum Image Replacement).

Normalerweise funktioniert modernes Webdesign vor allem mit float/clear und padding/margin für die Abstände.
 
Nun reit mal nicht so auf "position:static;" rum, habe ich nicht gesagt, dass ich in der Entwurfsphase gern spiele? Dann spare ich mir die wiederholte Eingabe des Wortes Position. Was Du davon hälst ist Deine Sache

Ferner ist das Layout bis 1000 px wohl elastisch. Auch Prozentangaben sind elastisch. Wie kommst Du denn darauf, Prozentangaben seien statisch?

Und nun zu den Wrappern, die viele gern benutzen. Ich halte das für überflüssig. Es geht auch ohne.
Und dann noch so eine Art grundsätzlicher Regel. Wenn du ein Div nicht unbedingt brauchst, dann lass es weg!

Und ich komm halt ohne Wrapper aus.:mrgreen:
 
Hi,

Zitat von HittiSan:
Auch Prozentangaben sind elastisch. Wie kommst Du denn darauf, Prozentangaben seien statisch?
Zum Vergrößern anklicken....

Prozentangaben sind relative Größenangaben, das hat mit elastisch und statisch gar nichts zu tun.

%, em und px sind relative Größenangaben, mm, cm sind z.B absolute Größenangaben.

statisch, relativ und absolut in Verbindung mit Boxen (div z.B.)
sind Angaben die sich auf das Verhalten in Bezug auf den Dokumentenfluß beziehen.

Ich will dir ja nicht zu nahe treten, aber ich habe den Eindruck als würdest du die Bedeutung von Größenangaben oder die Angaben zur Erscheinung im Dokumentenfluß (position:relative, static, absolute) nicht so richtig verstehen.

Informier dich doch erst einmal genau darüber, bevor du dich auf eine Diskussion darüber einläßt.
 
Na, wenn Du das denn meinst...

Dein Eindruck sei Dir gegönnt.
Jetzt hast Du es endlich geschafft, und dass, was Dir schon die ganze Zeit auf der Zunge lag, rausgebracht.

Mach es Dir doch nicht so schwer.:roll:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben