Layout

[Mike]

Hallo liebes Forum

Versuche hier gerade ein einfaches Layout auf die Beine zu stellen...

Hier das HTML:

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

Hier das 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...
Weitere Elemente sollen erst unterhalb der beiden Elemente kommen...
Mit angefügtem Code ist das Bild 20%, jedoch die Schrift nicht 80% sondern zu kurz...

Wer kann helfen, besten Dank bereits jetzt.

Freundliche Grüsse

[Der Martin]

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

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

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.

Dafür gibt es box-sizing.

Matthias

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

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.

Es passt auch so nicht, da zu den 20% und 80% noch die Breite des Leerzeichens dazwischen hinzukommt.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Mike!

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

Ich bau mal ein wenig um:

Also gewissermassen links ein Logo und Rechts die passende Schrift...

Ja, dann mach das doch.

<img src="…" alt="…"> die passende Schrift  

Beides soll ein Link sein...

Ja, dann mach das doch.

<a id="logo" href="…"><img src="…" alt="…"> die passende Schrift</a>  

Ziel soll es sein, dass das Bild links oben 20% der Seitenbreite ist und daneben die Schrift noch 80%...

Jetzt wird es spannend. Soll sich die Schrift tatsächlich auf den ganzen Rest ausdehnen? Ich denke, nein. Wenn doch, soll der Abstand zwischen den Buchstaben größer werden, die Buchstaben breiter oder der Text insgesamt größer?

#logo {  
  display: block; /* Damit wird er so breit wie sein Elternelement */  
}  
#logo img {  
  width: 20%;  
}

Zum schön Aussehen suchst du jetzt noch möglicherweise vertical-align.

Matthias

[Gunnar Bittersmann]

@@Mike:

nuqneH

Beides soll ein Link sein...

Was heißt das? Beides soll _jeweils ein_ Link sein? Oder: Beides soll _einundderselbe_ Link sein?

Also gewissermassen links ein Logo und Rechts die passende Schrift...

Das lässt vermuten, dass letzteres der Fall ist. Dann gehört das Bild und der Text in ein einziges a-Element:

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

BTW, die ID "header" für ein header-Element ist auch irgendwie unsinnig. Wenn der Seitenheader überhaupt eine ID braucht, dann eher sowas aussagekräftiges wie "pageheader".

Qapla'