[TYPO3-german] [OT] CSS - Podcast Thomas Biller

Thu Feb 19 13:22:09 CET 2009

Arbeite bei sowas immer in "px" !

dann sollte das so aussehen:

#wrapper {
   padding: 0px;
   margin: 0px;
   float: left;
   display: inline;
   weight: 200px;
}

usw.

und dann kannst du später dein system mit padding usw. ausbauen!

grüße, basti

------------------------------------------

TYPO3 - TIPS - ANLEITUNGEN - NEWS - TYPO3

unter: http://blog.ingeniumdesign.de/

------------------------------------------

Daniel Gercke schrieb:
> Hallo zusammen,
> 
> Thomas erklärt in seinem CSS Podcast auf typo3.org, wie man ein Layout 
> erstellt, bei dem die Umrechnung von em in px sehr genial und einfach 
> funktioniert.
> 
> Zur Erinnerung hier nochmal der Link:
> http://castor.t3o.punkt.de/files/podkast_7mf_css.m4v
> 
> Heute ist mir jedoch etwas aufgefallen, was ich mir nicht erklären kann, 
> und ich hoffe, dass von Euch jemand den entscheidenden Tipp für mich hat.
> 
> Ich habe ein 3 Spaltiges Layout erstellt. Die Spalten haben alle
> float: left; und sind natürlich div´s.
> 
> Ich habe dabei folgende Breiten in em verwendet:
> 
> Wrapper: 98.0em;
> Links & Rechts: 17.6em;
> Mitte: 62.8em;
> 
> Leider bricht die letzte Spalte im IE7 um.
> Damit Ihr das mal nachvollziehen könnt, hier der Code:
> 
> ---- HTML ----
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
> <head>
>  <title>CSS - PROBLEM</title>
>   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
>   <link href="layout.css" rel="stylesheet" type="text/css" />
> </head>
> <body>
> <div id="page_margins">
>   <div id="header">
>     <div class="sideCol">Links</div>
>     <div class="centerCol">Mitte</div>
>     <div class="sideCol">Rechts</div>
>   </div>
> </div>
> </body>
> </html>
> ---- ENDE ----
> 
> --- CSS ---
> /* CSS Document */
>   * {
>     font-size: 1em;   /* dont change */
>     margin:0;
>     padding: 0;
>     font-weight: normal;
>   }
>   html {
>     font-size: 62.5%; /* dont change */   
>   }
> 
>   body{
>     color: #093057;
>     background: #fff;
>     text-align: left; /* LTR */
>     margin:0;
>     padding:0;
>     font-size: 1.0em; /* global font-size tag*/
>     font-family:  Arial, Helvetica, sans-serif;
>   }
> 
>   #page_margins {
>     width: 98.0em;
>     padding:1.0em 0.0em;
>     margin: 0.0em auto;
>   }
> 
>   #header {
>     background: #093057;
>     color: #fff;
>     margin:0.0em;
>     padding:0.0em;
>     height: 6em;
>     width: 98.0em;
>   }
> 
>   .sideCol {
>     margin:0;
>     padding:0;
>     float: left;
>     width: 17.6em;
>     background-color: #eaeaea;
>     position:relative;
>     height: 6em;
>   }
> 
>   .centerCol {
>     float: left;
>     width: 62.8em;
>     margin:0;
>     padding:0;
>     background:navy;
>     position:relative;
>     height: 6em;
>   }
> --- ENDE ---