Der Martin: Layout

Beitrag lesen

Hallo,

<header id="header">

<a href="#">
<img id="bild" src="#"/>
</a>
<a href="#" id="schrift">
                Some Text
</a>
</header>


>   
> ~~~css

#header  

> {  
> width: 100%;  
> }  
> #bild  
> {  
> width: 20%;  
> float: left;  
> }  
> #schrift  
> {  
> display: block;  
> width: 80%;  
> }

Ziel soll es sein, dass das Bild links oben 20% der Seitenbreite ist und daneben die Schrift noch 80%... Beides soll ein Link sein... Also gewissermassen links ein Logo und Rechts die passende Schrift...

dann würde ich float wegen der möglichen Nebenwirkungen vermeiden. Stattdessen lieber display:inline-block für den Textblock, und width:20% für das Bild und width:80% für den Textblock.
Vorsicht: Wenn eines der Elemente noch margin, padding oder border hat, passt es nicht mehr, weil dann beide Elemente zusammen mehr als 100% der verfügbaren Breite hätten.

Ciao,
 Martin

--
Zwischen Leber und Milz
passt immer noch'n Pils.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(