gesucht : WebSeiten zentrieren

Versuch's mal hiermit:

body
{
width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
}

Mit dem Zusatz "!important" überschreibst du etwaige dominierende Definitionen der Seite.
"position: relative" dient dem Zweck, absolut positionierte Elemente mit in den body "hineinzuholen".

Ob das schon für jede Seite reicht, weiß ich nicht, aber den größten Teil dürftest du damit wohl erschlagen.

sowas würde mir auch gefallen. leider kriegen dabei seiten, die sich automatisch auf fensterbreite ausdehnen (z. b. dieses forum), links und rechts breite abstände. wenn ich im css meine displaybreite (1280px) angebe, sind die abstände zwar weg, aber das zentrieren funktioniert dann nicht mehr.

wär es möglich, dass seiten wie das farum hier nicht vom zentrieren beeinflusst werden, sondern nur seiten wie http://www.golem.de ? oder wenn das nicht geht: wie würde es mit einer blacklist aussehen, wo ich alle zu zentrierenden seiten eintrage?

ich hab von css dummerweise keinen schimmer. :oops:

ich hab mir gedacht mit greasmonkey.

ja das wäre noch eine tolle sache die ich auch vermisse. auf nem widescreen-display sieht sowas einfach blöd aus:

[Blockierte Grafik: http://img168.imageshack.us/img168/9182/fffb2.th.jpg] [Blockierte Grafik: http://img100.imageshack.us/img100/3203/ffgls0.th.jpg]

die zeilen haben bei mir auch nicht viel bewirkt.

meine userchrome.css sieht im moment so aus: http://nopaste.php-q.net/239578

ist da irgendwas falsch?

hab firefox 1.5.0.6 und nen 1280x800-panel

Der Code für die Seitenzentrierung gehört nicht in die userChrome.css sondern in die userContent.css.

Noch deutlich komfortabler geht es aber mit der Erweiterung Stylish.

Probierts damit:

html {
  height:100% !important;
  display:table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


body {
  display:table-cell !important;
  vertical-align: middle !important;
}

Eventuell an margin rum fummeln und wenns nicht überall passen will, dann ganz weg lassen.

Mittels

@-moz-document url-prefix(http://www.ms-office-forum.net/forum/showthread),
url-prefix(http://ms-office-forum.net/forum/showthread),
url-prefix(http://ms-office-forum.net/forum/showpost),
url-prefix(http://www.ms-office-forum.net/forum/showpost)
 {
 pre {
  font-size: 0.9em !important;
  width: 746px !important;
 }
 
 font[face] {
  font-family: inherit !important;
 }
 
}

wirkt sich der Code nur auf bestimmte Seiten aus (hier eben das besagte Forum). Das geht so ab Fx1.5 (glaube ich), die Erweiterung "stylish" ist dabei nicht zwingend notwendig.

das ist doch mal super! danke loshombre werd mal beobachten wie sich im täglichen browsen auswirkt, aber bis jetzt scheint es super zu funktionieren

ich bin begeistert!

durch den code von ReinekeFux hatte ich das problem, dass z.b. die seite von msi-forum.de auf einmal fast rechtsbündig war - quasi das gegenteil zu vorher.

edit:
klappt doch nicht so - z.b bei sämtlichen wikipedia-seiten

Tja, irgendwas ist immer!

Zitat von loshombre

Eventuell an margin rum fummeln und wenns nicht überall passen will, dann ganz weg lassen.

was ist mit der variante, dass die seiten nicht zentriert werden sollen, aber die feste breite verlieren? quasi die gesamte breite des browser-fensters nutzen? ist das "einfacher" zu realisieren als das zentrieren?

oder wie kann ich mit stylish die seite auf 100% breite des browser-fensters bekommen? ich hatte das hier gefunden --> http://userstyles.org/style/show/444
aber das bringt nix wenn das fenster mal kleiner ist als 1200 - 100% wäre besser?!?

Hallo ladiko!

Hast du schonmal ausprobiert, aus dem:

body {
    width:1200px;
    margin:auto;
}

ein

body {
    width:100%;
    margin:auto;
}

zumachen?

Zitat von loshombre

Probierts damit:

CSS

html {
  height:100% !important;
  display:table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


body {
  display:table-cell !important;
  vertical-align: middle !important;
}

Alles anzeigen

Habe deinen Code übernommen und es werden bei mir Webseiten in die Mitte zentriert. Soweit so gut.

Jetzt habe ich aber noch ein anderes Problem dadurch:
Um englischsprachige Seiten mit einem Klick ins Deutsche übersetzen zu lassen, habe ich mir ein Lesezeichen kreiert:

javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=de&langpair=auto|de&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=de&langpair=auto|de&tbb=1&ie='+e;};

Wenn ich diesen Code in der userContent.css belasse, dann funktioniert die Übersetzung nicht mehr und ich bekomme bei allen Seiten, die ich vom Englischen ins Deutsche übersetzen möchte, eine fast leere Seite.

Die sieht so aus
[url=http://pichost.spasms.de/bild.php/1397,bersetzerX2TBY.jpg][Blockierte Grafik: http://pichost.spasms.de/bild.php/2,1397,bersetzerX2TBY.jpg][/url]

Entferne ich den userContent-Code, klappt die Übersetzung wieder.

Mit dem Code sieht der Inhalt der google-Seite auch etwas verschoben aus, die Suchergebnisse sind nach links verrutscht.

[url=http://pichost.spasms.de/bild.php/1398,1NTH95.jpg][Blockierte Grafik: http://pichost.spasms.de/bild.php/2,1398,1NTH95.jpg][/url]

Kann mal bitte ein Code-Spezialist sich diesen Code anschauen? Und vielleicht erkennen, was daran nicht OK ist, denn beschriebene Probleme bestehen immer noch.

Ohja, nein ich bin zwar kein Code-Spezialist, aber wenn Du dir den besagten "userContent.css" Codeschnippsel in Stylish packst, dann funktioniert der Übersetzungscode wahrscheinlich zu 99% :wink: Test hier 99,99%

Habe den Code mal in Stylish getestet und bislang ist mir kein Unterschied zum userContent.css aufgefallen.

[url=http://pichost.spasms.de/bild.php/1401,1DAE78.jpg][Blockierte Grafik: http://pichost.spasms.de/bild.php/2,1401,1DAE78.jpg][/url]

Die Vorschläge bei google sind immer noch seitlich nach links versetzt. Auch dass die Übersetzung Englisch=>Deutsch wie beschrieben nicht klappt, ist gleich geblieben.

Vielleicht meldet sich doch noch mal ein Code-Kenner :klasse:

Zitat von ReVox

Test hier 99,99%

Dann kannste vielleicht mal testen:
Um englischsprachige Seiten mit einem Klick ins Deutsche übersetzen zu lassen, habe ich mir ein Lesezeichen kreiert:

[javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/translate_t?text='+t+'&hl=de&langpair=auto|de&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+escape(location.href)+'&hl=de&langpair=auto|de&tbb=1&ie='+e;};

All das als Lesezeichen nehmen und zusammen mit dem Stylish-Code die Übersetzung testen.

Hi Fox2Fox
Sorry, hatte beim 99.99% Test den besagten "userContent.css" Codeschnippsel nicht in Stylish aktiviert gehabt! :oops:
Daher meine Fehlinfo. :wink:
Die Verhaltensweise ist auch bei mir so wie von Dir beschrieben.

@namespace url(http://www.w3.org/1999/xhtml);


@-moz-document url-prefix(http://translate.google){


html {display: -moz-box !important;}}

Nimm den hier mit dazu. Damit schließt du die Übersetzung aus und gut is.