nicht angemeldet
Responsive Header mit Bildern und Texten
Gunnar BittersmannHallo Zusammen,
ich möchte gerne einen Responsiven Header bauen der 2 Bilder und 1 Text beinhaltet.
Die Bilder sollen rechts und links in der Ecke sein (Link mit einen kleinen Abstand).
Der Text soll zwischen den 2 Bildern sehen und Vertikal zentriert sein.
Wenn ich nun das Browserfenster verkleiner, sollen sich die Bilder verkleinern, bis die mindestens so groß sind, wie der Text. Sie sollen nicht kleiner werden.
Die mindest Höhe ist damit die Text Höhe und max. die Bilder größe. Nur sollen sich beim verkleinernd es Browserfenster auch die Bilder verkleinern und wenn sie den mindest Wert erreicht haben, sollen sie einfach weiter zusammen rutschen.
Nur jetzt stehe ich, das die Bilder sicht verkleinern ist kein Problem, aber wie mache ich das, das die Bilder trotzdem mindestens so groß wie der Text sind. Min-Height bringt mich da gerade nicht weiter oder aber ich habe durch meine vielen Versuche etwas total durcheinander gebracht.
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
</head>
<body>
<header class="cf">
<div id ="logo-pferd"><img src="logo-pferd_neg.png" width="100" height="86"></div>
<div id ="headline" class="cf">
<div id="dummy-vertical-align"></div>
<h1>Headline</h1>
</div>
<div id ="weltkarte"><img src="weltkarte.png" width="256" height="98"></div>
</header>
</body>
</html>
Der erste Teil(schlecht lesbare) vom CSS ist eher uninteressant: CSS reset, Clear Fix.
Habe den Teil aber trotzdem drinnen, damit man auch alles 100%ig nach stellen kann.
<style>
@charset "utf-8"; /* CSS RESET Anfang */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: Arial,Helvetica,Verdana,SansSerif; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* CSS Reset Ende */ /** * Clear Fix * Container umschließt seine Kinder nicht **/ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; }
body {
font-size: 1em;
font-size: 1rem;
}
h1 {
font-size: 2em;
font-size: 2rem;
margin: .67em 0;
margin: .67rem 0;
}
h2 {
font-size: 1.5em;
font-size: 1.5rem;
margin: .75em 0;
margin: .75rem 0;
}
h3 {
font-size: 1.17em;
font-size: 1.17rem;
margin: .83em 0;
margin: .83rem 0;
}
h5 {
font-size: .83em;
font-size: .83rem;
margin: 1.5em 0;
margin: 1.5rem 0;
}
h6 {
font-size: .75em;
font-size: .75rem;
margin: 1.67em 0;
margin: 1.67rem 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bolder;
}
header {
width: 100%;
position: relative;
background: #006cc0; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNmNjMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIyJSIgc3RvcC1jb2xvcj0iIzE1NzhjNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzY1YTZkOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iIzc2YjBkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZmI1ZGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(left, #006cc0 0%, #1578c5 22%, #65a6d9 75%, #76b0dd 89%, #7fb5df 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#006cc0), color-stop(22%,#1578c5), color-stop(75%,#65a6d9), color-stop(89%,#76b0dd), color-stop(100%,#7fb5df)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #006cc0 0%,#1578c5 22%,#65a6d9 75%,#76b0dd 89%,#7fb5df 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #006cc0 0%,#1578c5 22%,#65a6d9 75%,#76b0dd 89%,#7fb5df 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #006cc0 0%,#1578c5 22%,#65a6d9 75%,#76b0dd 89%,#7fb5df 100%); /* IE10+ */ background: linear-gradient(to right, #006cc0 0%,#1578c5 22%,#65a6d9 75%,#76b0dd 89%,#7fb5df 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006cc0', endColorstr='#7fb5df',GradientType=1 ); /* IE6-8 */
}
header #logo-pferd{
max-height: 98px;
min-height: 3rem;
float: left;
width: 6.31%;
}
header #logo-pferd img{
width: auto;
margin: 5% auto 5% 5%;
max-width: 95%;
height: auto;
}
header #weltkarte {
min-height: 3rem;
max-height: 98px;
float: right;
width: 15.24%;
}
header #weltkarte img{
width: 100%;
max-width: 100%;
height: auto;
}
header h1{
margin: 0;
display: inline-block;
vertical-align: middle;
}
header #headline {
margin: auto 2.5%;
height: 100%;
float: left;
left: 6.31%;
position: absolute;
}
header #dummy-vertical-align {
display: inline-block;
vertical-align: middle;
height: 100%;
}
</style>
Falls jemand die Lösung kennt und/oder Rat wie ich etwas besser/anders machen könnte, würde ich mich sehr freuen!
MfG
Borewa
-
@@Borewa:
nuqneH
Wo kann man sich deine Seite ansehen?
<style>
[code lang=css] @charset "utf-8";
Das ist falsch. „Wenn Stil-Angaben in ein Dokument eingebettet sind, ist keine @charset-Regel nötig; dann darf auch keine verwendet werden. Diese Regel ist nur zur Verwendung in verlinkten Stylesheets gedacht.“ [[qa-css-charset](http://www.w3.org/International/questions/qa-css-charset)] Qapla' -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Wo kann man sich deine Seite ansehen?
http://webdaten.braination-events.de/test/test.html
Habe den Code nochmal leicht angepasst. Nun werden die Bilder zwar nicht kleiner als sie sollen, aber ich musste gucken was wie mindest Höhe ist und dann prozentual davon die mindest Breite bei den Bildern angeben, sehr lästig, sollte man die wechseln.
Nur jetzt ist der Text nicht mehr vertikal mittig!
Und wenn ich das Fenster ganz klein mache, rutschen Text und Bild in eine weitere Zeile, was eigentlich nicht passieren soll, aber außer bei einer bestimmten Breite mithilfe von Media Queries ein overflow hidden oder das ausblenden der Bilder zu veranlassen fällt mir nichts ein.
<style>
[code lang=css] @charset "utf-8";
> > Das ist falsch. Ist mir bekannt, aber da das CMS System noch einen Bug bzgl des externen einbinden von CSS Dateien hat, ist im Moment ein Workaround aktiv, mit dem das CSS direkt eingebunden wird und dann leider so etwas auch und beim manuellen bearbeiten habe ich es übersehen zu löschen.
-