Anzeige

Tabelle "relativ" zentrieren

Tabelle "relativ" zentrieren | PSD-Tutorials.de

Erstellt von Bartholomaeus, 02.06.2009.

  1. Bartholomaeus

    Bartholomaeus Meckerfritze

    Dabei seit:
    13.02.2008
    Beiträge:
    49
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Augen, Kopf und Verstand
    Kameratyp:
    Sony Alpha 100 (DSLR)
    Tabelle "relativ" zentrieren
    Hi,

    ich bastel gerade an meiner Homepage und habe da ein kleines Problem.

    Ich habe mit Photoshop die einzelnen Seiten erstellt und einzeln gesliced. Herausgekommen ist ein Layout mit den Maßen 500px mal 800px (also Breite mal Höhe mein ich.. )
    Das habe ich im Body-Tag wie folgt positioniert:
    HTML:
    1. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="3" [...] >
    und durch die Tabelle habe ich es zentriert:
    HTML:
    1. <table id="Tabelle_01" width="501" height="801" border="0" cellpadding="0" cellspacing="0" align="center">
    Also ist das Layout mittig und hat einen oberen Rand von 3px.
    Das funktioniert auch soweit im Firefox, allerdings weder im Internet Explorer 7, noch im Opera 10 (Alpha-Version).

    Wie kann ich es nun erreichen, dass auch im IE, sowie im Opera die Tabelle einen oberen Rand hat?

    Bzw. andere Möglichkeit, die mir sogar noch lieber wäre:
    Gibt es eine Möglichkeit die Tabelle so zu zentrieren, dass es wie folgt aufgebaut ist:
    Code (Text):
    1.  
    2.            leer
    3. leer | Tabelle | leer
    4.            leer
    5.  
    also dass oben und unten so jeweils 10% vielleicht Rand wären, und dass links und rechts je 1/3 Rand wäre und die Tabelle auch 1/3 (des Browserfensters) einnehmen würde, ohne dass die Proportionen verändert werden. Also, dass man da irgendwie mit relativen Angaben arbeitet, anstatt, wie ich es jetzt getan habe mit absoluten Werten.

    Hat jemand zu diesen zwei Möglichkeiten eine Idee, wie ich das realisieren könnte?

    Am Besten wäre eine reine HTML-Lösung, weil ich mit CSS auch Probleme hatte: Ich hatte die Linkfarbe per CSS in den Header eingefügt, doch IE und Opera haben das ingnoriert und die Links trotzdem (wie es Standard ist) blau angezeigt.

    Grüße,

    Bart.
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Tabelle "relativ" zentrieren
    AW: Tabelle "relativ" zentrieren

    damit wird zunächst erstmal gar nichts positioniert. mit margin legst du AUSSEN Abstände fest. (manche Browser mit fehlerhaftem Boxmodel mögen das verstehen...)
    HTML:
    1.  
    2. <body style="magin: 0; padding: 0; background: #000000">
    3. <!-- besser wäre das allerdings im style-bereich noch besser in der css-datei untergebracht-->
    4.  
    HTML:
    1. <table id="Tabelle_01" style="width:501px; height:801px; border:0; margin: 3px auto 0 auto;" cellpadding="0" cellspacing="0">
    2. <!--auch hier wäre das style im style-bereich besser -->
    so sollte es in verschiedenen browsern gleich aussehen, wenn das jetzt noch eine der passenden Doctypes hat, die auch den IE6 im Konformen Modus laufen lassen, sollte es passen

    eine Tabelle mit der vorgegebenen Breite von 501px wird nur in dem fenster ein drittel einnehmen, das genau 1503px breit ist.(also sozusagen nie)

    html legt nur die Struktur des Dokuments fest, alles was da "style" heisst ist Sache von css.
     
    Zuletzt bearbeitet: 02.06.2009
    #2      
  3. Bartholomaeus

    Bartholomaeus Meckerfritze

    Dabei seit:
    13.02.2008
    Beiträge:
    49
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Augen, Kopf und Verstand
    Kameratyp:
    Sony Alpha 100 (DSLR)
    Tabelle "relativ" zentrieren
    AW: Tabelle "relativ" zentrieren

    Okay,
    ich habe das jetzt soweit eingearbeitet und jetzt funktioniert es so, wie ich mir das vorgestellt habe.
    Dankeschön :)
     
    #3      
  4. esupanetz

    esupanetz Immer wieder mal da :-)

    Dabei seit:
    27.04.2006
    Beiträge:
    223
    Geschlecht:
    weiblich
    Software:
    CS2, Gimp, Scribus
    Kameratyp:
    Canon PowerShot SX10IS
    Tabelle "relativ" zentrieren
    AW: Tabelle "relativ" zentrieren

    Hi Bartholomaeus,

    ich erlaub mir auch wenn dein Problem (fürs erste) gelöst ist) ein paar Fragen an dich:

    Warum eine Webseite (ich nehm an es gibt mehr als die Homepage ;-) ) mit Photoshop?
    Warum arbeitest du mit Tabellen, die eindeutig nicht mehr "State of the Art" sind? Mit einem netten kleinen div, das du dementsprechend positionierst kriegst du deine Inhalte sicher schöner an die Stelle wo du sie haben willst.
    Zu den Linkfarben: Wie hast du sie im Header definiert? Das checken nämlich normalerweise sowohl FireFox als auch Internet Explorer ganz gut

    lG

    Eva
     
    #4      
  5. Bartholomaeus

    Bartholomaeus Meckerfritze

    Dabei seit:
    13.02.2008
    Beiträge:
    49
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Augen, Kopf und Verstand
    Kameratyp:
    Sony Alpha 100 (DSLR)
    Tabelle "relativ" zentrieren
    AW: Tabelle "relativ" zentrieren

    Hallo Eva,

    Warum mit Photoshop?
    Naja ganz einfach, weil ich eine Webseite für meine fotografischen Aktivitäten erstellen wollte, die den Aufbau (m)einer Corporate Identity unterstützt.
    Da ich wie schon geschrieben, eher auf dem Gebiet der Fotografie tätig bin, habe ich nicht sonderlich viel Ahnung von HTML, CSS, PHP, usw.
    Da kam mir Photoshop, das ich eh zu Fotobearbeitung auf dem Rechner habe, mit der Slice-Funktion zu Hilfe, wo ich einfach die Seiten normal gestaltet habe und dann mithilfe der Slices die Hyperlinks definiert habe.

    Daher auch Tabellen und keine div-Container, weil Photoshop nun einmal das Ganze in Tables ausgibt.

    Wegen den Linkfarben: IE7 und Opera 10 hatte bei mir um die Thumbnails zu den Fotos die in einer Lightbox geöffnet werden, blaue Rahmen gesetzt, als ich versucht habe die Linkfarben per CSS im Header zu integrieren.
    Jetzt wo sie im Body-Tag stehen funktioniert es ohne blauen Rahmen :)

    LG,
    Bart.
     
    #5      
Seobility SEO Tool
x
×
×