Meine lieben Leser, die Ihr alle so klug und hübsch seid - vermutlich ist einer von Euch in der Lage, ein CSS-Problem, an dem ich jetzt schon den ganzen Abend rumgrüble zu lösen. So soll es aussehen:
Und so habe ich es bisher versucht:
XHTML:
Und so habe ich es bisher versucht:
XHTML:
<div id="header">
<div id="cover"><a href="/"><img src="greyblob.png" alt="grey blob" /></a></div>
<div id="headertext">
<h1><a href="/">Überschrift</a></h1>
<p>Blablabla</p>
</div>
</div>
CSS:
#header {
text-transform:lowercase;
font-family:"Trebuchet MS", Helvetica, Arial, sans-serif;
}
#header #cover {
width:150px;
float:left;
padding-right:10px;
margin-right:10px;
}
#header #headertext {
height:211px;
margin:0 0 0 160px;
padding:0 0 0 10px;
vertical-align:bottom;
}
#header h1 {
font-size:3em;
}
#header h1 a {
color:#111;
text-decoration:none;
}
Mal davon abgesehen, daß die Schriftart anders ist - wo ist mein Denkfehler? Irgendwie will die Überschrift nach unten...
ich wuerde die ueberschrift rechts floaten lassen und mit einer margin-top versehen. height sollte unnoetig sein, es sei denn du willst das absolut machen, dann fehlt aber overflow: was auch immer. vertical-align ist auch unnuetz, wenn du margin und padding addierst und als padding-top rein nimmst (margin wird hin und wieder ignoriert wenn du floatest).
#header #headertext {
padding-top:170px;
}
wie gesagt, wenn irgendein browser probleme macht solltest du die reihenfolge aendern und die ueberschrift rechts floaten lassen.
ueberhaupt: warum machst du immer margin-right, padding-right? bspw. beim image, da wuerde doch eine Summe reichen. es sei denn du willst einen rahmen mit der hintergrundfarbe des bildes machen. dann ist padding ganz nuetzlich.
Die Idee war, daß die Überschrift und diese untere Zeile unten bündig sind, egal wie groß die Schrift ist und auch dann, wenn der Leser im Browser die Schrift vergrößert oder verkleinert hat.
Aber ich werde es so mal probieren, der Ansatz ist auf jeden Fall schon mal gut.
Das getrennte Margin und Padding kommt tatsächlich daher, daß ich auch mit einem Rahmen rechts des Bildes rumexperimentiert hatte.
dann versuch mal das bild hinter dem "sonstigen" text zu stellen (html-technisch) und die div mit ueberschrift/text rechts floaten zu lassen und das bild links. dann solltest du mit vertica-align am bild arbeiten koennen.
Hiermit funktioniert das eigentlich ganz gut:
<style type="text/css">
<!--
#container {
width:500px;
height:300px;
}
#placeholder {
float:left;
width:150px;
height:300px;
display:block;
}
#inner {
width:300px;
height:100%;
position:relative;
}
#inner div {
position:absolute;
bottom:0;
}
-->
</style>
<div id="container">
<img id="placeholder" src="gedoens.gif" alt="" />
<div id="inner">
<div>
<h1><a href="/">Lorem ipsum dolor</a></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut</p>
</div>
</div>
</div>