Ergebnis 1 bis 10 von 10

Thema: tabelle zentrieren

  1. #1
    snueff
    Gast

    Standard tabelle zentrieren

    habe mich heute daran gewagt mal sowas wie css anzuschauen

    soweit alles paletti - NUR....die tabelle bleibt konsequent und absolut unausweichlich immer am linken rand kleben und ich möchte doch das teil auf der seitenmitte zentrieren.

    soweit hab ich das teil wie es aussehen soll....es fehlt rein an der horizontalen ausrichtung. sagt mir nicht, dass ich nicht umhin komme, das im html zu definieren

    Code:
    .maintable { vertical-align:  top  ; 
                 width:  900px      ;
                 height: 100%       ;
                 cols:   280px,680px;
                 border-collapse: collapse;
                 border-top: solid 1px #420D07;
                 border-bottom: solid 1px #420D07;
                 border-left: solid 1px #420D07;
                 border-right: solid 1px #420D07;  }
    dabei war ich kurz davor zu meinen, dass ich sowas wie ein verständnis für css entwickeln könnte.... irgend jemand einen tipp oder hinweis? kann ja sein, dass horizontale ausrichtung einer tabelle im css schlicht und ergreifend nicht möglich ist...dann wärs einfach gut ich wüsste es...dann kann ich meine suche beenden und das "align:center", das nicht gehen will ins html knallen....

    vielen dank für allfällige tips
    para
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    versuchs mal mit margin-left (oder evtl padding-left)
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    snueff
    Gast

    Standard

    margin-left ermöglicht mir aber nicht die dynamische zentrierung auf einer seite, wenn ich das window vergrössere oder verkleinere, oder?

    margin-left benötigt einen wert....und ich will es ja dynamisch haben^^

  4. #4
    Meister(in)
    Registriert seit
    04.01.2006
    Ort
    Gotha
    Beiträge
    430
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    probier es mal das "text-align: center" in den body zu schreiben, ich glaube so funktioniert es.

    also so:
    Code:
    body {
     text-align: center;
    }
    mfg
    Das Leben ist binär. Entweder Du bist eine 0 oder eine 1.
    Meine Seite: sr-web.de

  5. #5
    snueff
    Gast

    Standard

    hab ich...das einzige was passiert ist, dass die inhalte der ersten col zentriert werden....

  6. #6
    schnueff
    Gast

    Standard

    oh...sry..hab in die table definition gemacht....in der body funzts - vielen dank!

  7. #7
    Meister(in)
    Registriert seit
    04.01.2006
    Ort
    Gotha
    Beiträge
    430
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hab ich selber vorher nicht ausprobiert, deswegen war ich mir auch nicht ganz sicher, aber wenn es funtzt dann ist es gut.

    mfg
    Das Leben ist binär. Entweder Du bist eine 0 oder eine 1.
    Meine Seite: sr-web.de

  8. #8
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    München
    Beiträge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    du verwendest den IE, stimmts? Denn nur der IE zentriert mit text-align fälschlicherweise auch Blockelemente...

    Du brauchst für den Body einfach im CSS:

    margin: 0 auto;

    und im CSS für die Tabelle auch wieder

    margin: 0 auto;

    dann sollte er deine ganze Tabelle auch in anderen Browsern als den IE zentrieren.

    MfG
    LizZard
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

  9. #9
    snueff
    Gast

    Standard danke

    Hi Lizzard

    Danke für den Tipp. Hat soweit alles geklappert das css funzt nun wie es soll. Ich kaue gerad daran die Tabellen aus meinem Layout zu kriegen - da das scheinbar nicht so toll sein soll.

    Mittlerweile sitzt ich aber eher desillusioniert vor dem Bildschirm und mein Tatendrangbarometer bewegt sich gerade steil abwärts.....die Seite ist folgendermassen eingeteil:

    Code:
    *------------------------------------------------------* 
    *                   *                                  * 
    * LOGO              *         BILD                     * 
    *                   *                                  * 
    *------------------------------------------------------* 
    * Sprachnavigation  *                  Seitennavigation* 
    *------------------------------------------------------* 
    *                   *                                  * 
    * Unternavigation   *    INHALT                        * 
    *                   *                                  * 
    *                   *                                  * 
    *------------------------------------------------------*
    ich hab nun versucht das in einem css festzuhalten....

    Code:
    body     {font-family: Arial, sans-serif; 
              font-size: 100%; 
              text-align: center; 
              background-color:#0482B8; 
              color:#000;     } 
      
    #mainbox {margin: 0 auto; 
              width: 905px; 
              text-align: left; 
              background-color:white; 
              color:#000;  
              border-top:    solid 1px #420D07; 
              border-bottom: solid 1px #420D07; 
              border-left:   solid 1px #420D07; 
              border-right:  solid 1px #420D07;    } 
    
    #header  {background-color: white; 
              color: #000;                
              vertical-align:middle;  } 
    
    #hauptmenue  {background-color: #420D07; 
                  color: #000; 
                  padding: 10px 0px 10px 0px;} 
    
    #hauptsprach {width:220px; 
                  align:left; 
                  margin-left:10px;} 
    
    #hauptnavi   {width:680px; 
                  floating:right; 
                  margin-right:10px;}
    ...und in einem entsprechenden html einzubetten:

    Code:
     
    <div id="mainbox"> 
     
    <div id="header"> 
            [img]pics/header/logo_white_smaller.gif[/img] 
            [img]pics/header/header.jpg[/img] 
    </div> 
     
     
    <div id="hauptmenue"> 
     
    <div id="hauptsprach"> 
            [img]pics/header/de.gif[/img] 
            [img]pics/header/v_line_brown.gif[/img] 
            [img]pics/header/fr.gif[/img] 
            [img]pics/header/v_line_brown.gif[/img] 
            [img]pics/header/en.gif[/img] 
    </div> 
     
     
    <div id="hauptnavi"> 
            [img]pics/header/home.gif[/img] 
            [img]pics/header/v_line_brown_large.gif[/img] 
            [img]pics/header/de_firma.gif[/img] 
            [img]pics/header/v_line_brown_large.gif[/img] 
            [img]pics/header/de_fokus.gif[/img] 
            [img]pics/header/v_line_brown_large.gif[/img] 
            [img]pics/header/de_referenzen.gif[/img] 
            [img]pics/header/v_line_brown_large.gif[/img] 
            [img]pics/header/pinboard.gif[/img] 
    </div> 
     
    </div>
    makel 1: das logo ist nicht vertikal in der mitte
    makel 2: die sprachnavi ist zwar links - die hauptnavi hält sich aber penetrant darunter auf und will nicht nach rechts
    makel 3: ich hab null plan, wie ich die subnavi und den inhalt definiere...sprich wie ich das dann nebeneinander krieg

    tja....die leiden einer css-newcomerin....irgendwann begreif ich es vielleicht auch einmal

  10. #10
    Prinz(essin) Avatar von Lizzard
    Registriert seit
    19.02.2006
    Ort
    München
    Beiträge
    788
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    dann wollen wir doch mal schauen, das erste was mir auffällt: Der Befehl lautet "float" und nicht "floating"

    Also ich schreib das mal als grunsätzliches Gerüst auf:

    Erstmal das CSS:
    Code:
    body &#123;
    font-family&#58; ;
    font-weight&#58; ;
    font-size&#58; ;
    color&#58; ;
    margin&#58; 0 auto;
    padding&#58; 0;
    &#125;
    
    #hauptcontainer &#123;
    margin&#58; 0 auto;
    padding&#58; 0px;
    &#125;
    
    #logo &#123;
    width&#58; px;
    height&#58; px;
    float&#58; left;
    background&#58; transparent url&#40;LOGOURL&#41; no-repeat;
    &#125;
    
    #bild &#123;
    width&#58; px;
    height&#58; px;
    float&#58; right;
    background&#58; transparent url&#40;BILDURL&#41; no-repeat;
    &#125;
    
    #clear &#123;
    clear&#58; both;
    &#125;
    
    #sprachnavigation &#123;
    width&#58; px;
    height&#58; px;
    float&#58; left;
    &#125;
    
    #seitennavigation &#123;
    width&#58; px;
    height&#58; px;
    float&#58; right;
    &#125;
    
    #koerper &#123;
    width&#58; px;
    height&#58; px;
    background&#58; transparent url&#40;BILDURL&#41; repeat-y;
    &#125;
    
    #unternavigation &#123;
    width&#58; px;
    height&#58; px;
    float&#58; left;
    &#125;
    
    #seiteninhalt &#123;
    width&#58; px;
    height&#58; px;
    float&#58; right;
    &#125;
    
    #fussleiste &#123;
    margin&#58; 0 auto;
    height&#58; px;
    width&#58; px;
    clear&#58; both;
    &#125;
    So bis hierhin wars einfach, jetzt das HTML-Gerüst und dann die Erklärung

    Code:
    <div id="hauptcontainer">
      <div id="logo"></div>
      <div id="bild"></div>
      <div id="clear"></div>
    
      <div id="sprachnavigation">Inhalt der Sprachnavi</div>
      <div id="seitennavigation">Inhalt der Seitennavigation</div>
      <div id="clear"></div>
      
      <div id="koerper">
        <div id="unternavigation">Inhalt der Unternavigation</div>
        <div id="seiteninhalt">Seiteninhalt</div>
      </div>
    </div>
      
    <div id="fussleiste"></div>
    Soo nun zur Erklärung:

    Der Aufbau müsste grundsätzlich mal klar sein. Das DIV "clear" sorgt dafür, den normalen Textfluss nach den Floatelementen wieder herzustellen.
    Dann für den Seiteninhalt gibt es das Element "koerper". Es enthält eine Hintergrundgrafik, die den Eindruck erweckt, dass Unternavigation und Seiteninhalt immer die selbe Länge haben, egal ob nun Navigation oder Inhalt länger sind.

    Ein entsprechendes Bild dafür könnte etwa so aussehen:

    Code:
    *                   *                                  *
    so trennt es optisch Navigation von Inhalt.

    Das Element "fusszeile" stellt den Textfluss wieder her, und schließt den Seiteninhalt und die Navigation mit einem entsprechenden Bild ab:
    Code:
    *------------------------------------------------------*
    Ich hoffe das gibt dir ein gutes Gerüst und hilft dir bei der Arbeit, stell nur weiter Fragen ich helf gerne, wenn jemand versucht von leidigen Tabellen loszukommen

    MfG
    LizZard
    Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

Ähnliche Themen

  1. Tabelle zentrieren!
    Von eatofid im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 26.11.2007, 17:34
  2. Tabelle in einer Zelle zentrieren
    Von chris90night im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 07.10.2006, 13:08
  3. Tabelle im Browser vertikal zentrieren
    Von Heiko im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 02.07.2006, 12:45
  4. Tabelle vertikal zentrieren
    Von step5 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.09.2005, 15:54
  5. was ist falsch? (Tabelle vertikal zentrieren)
    Von donald im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 11.04.2004, 12:59

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •