tabellen mit css zentrieren (schon wieder)

Status
Nicht offen für weitere Antworten.
H

helkies

Grünschnabel
Hilfe !
Ich möchte eine Tabelle im Browserfenster allseitig zentrieren, und zwar unabhängig von der Bildschirmauflösung mit 10% vom Rand. Das ganze soll in einer externen CSS-Datei erfolgen. Der margin-Befehl macht mir die 10% rechts, links und oben. Nur unten nicht, warum? Ich habe auch schon separat den margin-bottom versucht, und auch margin-left:10%; margin-top:10%; margin-right:10%; margin-bottom:10%.
Klappt aber nicht.
Wer kann mir sagen woran es liegt? :(
 
Original geschrieben von helkies
mit 10% vom Rand
Zum Vergrößern anklicken....

Hmmm, das mit dem 10% verstehe ich nicht so ganz, aber du kannst es mal mit einer seitenfüllenden Tabelle außenherum versuchen, horizontale und vertikale Ausrichtung auf mittig setzen und dort hinein die eigentlich zu zentrierende Tabelle platzieren.
 
Tabellen zentrieren (schon wieder)

Eine Tabelle drum herum mit 100% geht schon, ich möchte aber, das wenn der Besucher eine Auflösung von 800x600 hat, genau 10% Rand auf allen Seiten hat. Genauso soll es sein, wenn der Besucher eine Auflösung von 1024x768 hat.
Mit JavaScript könnte man das leicht lösen, indem man verschiedene Seiten baut, die dann mit einer Browserabfrage geladen werden, ich wollte aber eine Seite bauen, die komplett ohne JavaScript auskommt und der HTML-Code schlank bleibt, also alles was geht in CSS auslagern.
 
Hi,

Du müsstest den sichtbaren Bereich (html) und Body so einschränken, dass nur
noch 80% der Gesamtfläche zur Anzeige zur Verfügung stehen. Hier könnte die
Tabelle eingeblendet werden.

Da jedoch die verschiedenen Browser auch verschiedene Sichtweisen besitzen,
was Anzeigefläche und deren Grösse angeht, ist einiges an Ausprobieren notwendig.

Ich habe einen Lösungsansatz, der sicherlich noch verbessert werden kann. Aber
vielleicht kann er Dir als Grundlage dienen.
Code: 
html{ height: 80%;
      width: 100%;
      margin: 10%;
      padding: 0px;
      overflow: hidden;}
:root html{ width: 80%;}
body{ height: 80%;
      width: 100%;
      margin: 0px;
      padding: 0px;
      overflow: hidden;}
* html body{ margin: 10%;}
:root body{ width: 80%;}
table{ width: 100%;
       height: 100%;
       border: 1px solid black;}
Mit :root ausgezeichnete Definitionen gelten nur für Mozilla-Browser, mit * html
ausgezeichnete nur für den IE.

Da der Opera die Tabelle zwar richtig plaziert hat, jedoch die Seite immer zu gross
interpretierte, wurde eine vertikale Scrollbar eingeblendet. Diese wurde mit overflow: hidden
unterdrückt. Es ist deshalb im Design selbst unablässig, Bereiche zu definieren,
die bei Übergrösse die Scrollbar wieder einblenden (overflow: auto).

Weiterhin ist zu beachten, dass das Ganze nur im Quirks-Mode zufriedenstellend
läuft:
&nbsp;&nbsp;<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

Vielleicht kannst Du damit ja was anfangen.

Ciao
Quaese
 
Huh, man kann für HTML und BODY CSS definieren? Das habe ich ja noch nie gesehen, muss ich wohl auch mal ausprobieren...
 
Tabellen zentrieren (schon wieder)

Vielen Dank, Quaese,

das mit HTML hat nicht geklappt. Aber der Body war wohl der Knackpunkt. Das zentrieren geht jetzt.
Allerdings habe ich jetzt eine Art Rahmen (ist aber nicht der Rahmen, den Border hab ich mal auf "dashed" gesetzt, zum testen; ist was anderes) den ich noch nicht wegbekommen habe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück