tabelle zentrieren

snueff

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

driver

versuchs mal mit margin-left (oder evtl padding-left)

snueff

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^^

ad3nau

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

snueff

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

schnueff

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

ad3nau

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

mfg

Lizzard

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

snueff

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                        * 
*                   *                                  * 
*                   *                                  * 
*------------------------------------------------------*

Alles anzeigen

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;}

Alles anzeigen

...und in einem entsprechenden html einzubetten:

Code

<div id="mainbox"> 
 
<div id="header"> 
        [url='index.html'][img]pics/header/logo_white_smaller.gif[/img][/url] 
        [url='index.html'][img]pics/header/header.jpg[/img][/url] 
</div> 
 
 
<div id="hauptmenue"> 
 
<div id="hauptsprach"> 
        [img]pics/header/de.gif[/img] 
        [img]pics/header/v_line_brown.gif[/img] 
        [url='pages/franz/home.html'][img]pics/header/fr.gif[/img][/url] 
        [img]pics/header/v_line_brown.gif[/img] 
        [url='pages/englisch/home.html'][img]pics/header/en.gif[/img][/url] 
</div> 
 
 
<div id="hauptnavi"> 
        [url='index.html'][img]pics/header/home.gif[/img][/url] 
        [img]pics/header/v_line_brown_large.gif[/img] 
        [url='pages/deutsch/firma.html'][img]pics/header/de_firma.gif[/img][/url] 
        [img]pics/header/v_line_brown_large.gif[/img] 
        [url='pages/deutsch/fokus.html'][img]pics/header/de_fokus.gif[/img][/url] 
        [img]pics/header/v_line_brown_large.gif[/img] 
        [url='pages/deutsch/referenzen.html'][img]pics/header/de_referenzen.gif[/img][/url] 
        [img]pics/header/v_line_brown_large.gif[/img] 
        [url='pages/deutsch/pinboard.html'][img]pics/header/pinboard.gif[/img][/url] 
</div> 
 
</div>

Alles anzeigen

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

Lizzard

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 {
font-family: ;
font-weight: ;
font-size: ;
color: ;
margin: 0 auto;
padding: 0;
}


#hauptcontainer {
margin: 0 auto;
padding: 0px;
}


#logo {
width: px;
height: px;
float: left;
background: transparent url(LOGOURL) no-repeat;
}


#bild {
width: px;
height: px;
float: right;
background: transparent url(BILDURL) no-repeat;
}


#clear {
clear: both;
}


#sprachnavigation {
width: px;
height: px;
float: left;
}


#seitennavigation {
width: px;
height: px;
float: right;
}


#koerper {
width: px;
height: px;
background: transparent url(BILDURL) repeat-y;
}


#unternavigation {
width: px;
height: px;
float: left;
}


#seiteninhalt {
width: px;
height: px;
float: right;
}


#fussleiste {
margin: 0 auto;
height: px;
width: px;
clear: both;
}

Alles anzeigen

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>

Alles anzeigen

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

Tags