Hi, ich will hier kein Thema aufgreifen was schon in google in Massen zu finden wäre. Mit floaten und clearfix arbeite ich auch zuverlässig - aber hier habe ich etwas, was scheinbar nicht geht.
und zwar LINKS ein Bild - RECHTS ein Bild - und in der Mitte ein <h1>-Text.
Ich habe versucht den <h1>-Text in ein eigenes Div zu packen und zu floaten ... aber dann steht der nicht mehr mittig.
Dann hab ich versucht ALLES in ein eigenes Div zu packen ... geht genauso wenig.
Hab also schon einige Variationen hinter mir.
Aber was geht nicht?
Links das Bild muss mit bottom und einem Minuswert positioniert werden ... Ok ...
dann kommt der Textteil ... und der ist ja nicht gefloatet
und deshalb kommt das float-rechts-bild unterhalb des bottom mit seinem Top - oder wie man das auch immer erklären soll:
Der nachfolgende Teil ist eigentlich relativ egal, weil ich hier schon etliche Variationen durchgespielt habe. So funktioniert er jedenfalls am besten.
Ich habe auch schon ein Div um alles gelegt ... genauso sch....
Vielleicht fällt ja jemandem was auf ... (ausser meine Rechtschreibfehler )
Eine schöne Programmiernacht an alle!
und zwar LINKS ein Bild - RECHTS ein Bild - und in der Mitte ein <h1>-Text.
Ich habe versucht den <h1>-Text in ein eigenes Div zu packen und zu floaten ... aber dann steht der nicht mehr mittig.
Dann hab ich versucht ALLES in ein eigenes Div zu packen ... geht genauso wenig.
Hab also schon einige Variationen hinter mir.
Aber was geht nicht?
Links das Bild muss mit bottom und einem Minuswert positioniert werden ... Ok ...
dann kommt der Textteil ... und der ist ja nicht gefloatet
und deshalb kommt das float-rechts-bild unterhalb des bottom mit seinem Top - oder wie man das auch immer erklären soll:
HTML-Code:
#header { width: 100%; height: 20%; max-height: 150px; overflow: hidden; } #header .headerinfotext { margin-left: auto; margin-right: auto; text-align: center; width: auto; } #header h1{ display: inline-block; font-size: 2.3em; color: #FF0000; margin-top: 40px; } #header .headerimage img { float: left; height: 100%; max-height: 100px; margin-left: 80px; position: relative; bottom: -45px; } #header .logo img { height: 100%; float: right; max-height: 150px; margin-right: 40px; position: relative; top: -90px; }
Der nachfolgende Teil ist eigentlich relativ egal, weil ich hier schon etliche Variationen durchgespielt habe. So funktioniert er jedenfalls am besten.
Ich habe auch schon ein Div um alles gelegt ... genauso sch....
HTML-Code:
<div id="header"> <div> <div class="headerimage"><img src="<?php print(BILDERPFAD.'/header/baerli1.gif');?>"></div> <div class="headerinfotext"> <h1>Hier steht eine Zeile mit Bla und Blubb ... <br/> und hier was für Gummibärchen, die auch blubbern ... </h1> </div> <div class="logo"><img src="<?php print(BILDERPFAD.'/header/header-logo.png');?>"></div> </div> </div>
Vielleicht fällt ja jemandem was auf ... (ausser meine Rechtschreibfehler )
Eine schöne Programmiernacht an alle!
Kommentar