CSS Header + Tabelle

Nomschta · Beitrag von **Nomschta** » 14.04.2011, 11:21

moin, eins vorweg: ich hab mit css und dem ganzen kram erst vor ein paar wochen angefangen, verzeiht mir also eventuelle anfaengerfehler ^^

der obere bereich meiner webseite besteht aus 3 teilen: logo, statusinfos und logininfos:

Bild

zu den zwei bereits vorhandenen statusinfos (die im code behind aktualisiert werden) werden noch ein paar hinzukommen, daher dachte ich eben an eine tabelle um das aussehen zu formatieren.
wenn ich nun aber eine feste spaltengroesse einstelle, verschiesst es mir das layout:

Bild

feste zeilenhoehe habe ich bereits probiert. woran liegt das? oder gibt es eventuell eine andere loesung?

hier die drei styles:

Code: Alles auswählen

#Logo{
     background-color: #000000;
     position: absolute;
     width: 200px;
     height: 45px;
     top: 0px;
     left: 0px;
     color: #FF0000;
 }
#Header
{ 
    position: absolute;
    left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
    height: 45px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: Black;
    color: White;
    top: 0px;
    width: auto;
    overflow: hidden;
    right: 220px;
    font-size: small;
 }
    

#Login
{
    position: absolute;
    width: 220px;
    top: 0px;
    right: 0px;
    height: 45px;
    background-color: #000000;
    font-size: small;
    color: #FFFFFF;
}

acid · Beitrag von **acid** » 14.04.2011, 11:25

Was benutzt Du? Tabellen oder divs? Left und right Angabe beim #header zur gleichen Zeit kommt mir eigenartig vor. Probier mal nur left und width anzugeben.

Nomschta · Beitrag von **Nomschta** » 14.04.2011, 12:33

naja ich will halt dass der header mit den statusinfos immer 200px vom linken und 220px vom rechten rand entfernt ist, damit das aussehen nicht abhaengig von der aufloesung ist:

logo 200px - statusinfos variable breite - logininfo 220px

benutze tabellen bzw <td>

acid · Beitrag von **acid** » 14.04.2011, 12:41

Nomschta hat geschrieben:benutze tabellen bzw <td>

Probiers mal nur mit divs. Tabellen benutzt man heutzutage idr nicht mehr.

xxx · Beitrag von **xxx** » 14.04.2011, 15:14

Hier mal schnell ein Beispiel geschrieben:

Code: Alles auswählen

<html>
<head>
<style type="text/css">
* {    
    margin: 0;
    padding: 0;
}


#logo {
    width: 200px;
    height: 200px;
    float: left;
}

#info {
    padding: 0.5em;
}

#login {
    float: right;
    width: 200px;
    height: 200px;
    background: green;
}
</style>
</head>
<body>
<div id="header">
    <h1 id="logo"><img src="logo.png" alt="Name der Seite" /></h1>
    <div id="login">Login</div>
    <div id="info">
       <ul>
         <li>Info 1</li>
         <li>Info 2</li>
         <li>Info 3</li>
       </ul>
    </div>
</div>
</body>

Groß:

Klein:

kne · Beitrag von **kne** » 18.04.2011, 12:42

acid hat recht.
Mit Tabellen layouten ist eine Todsünde.