nicht angemeldet
Hallo 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
Gunnar Bittersmann