Hallo alle zusammen,
nun habe ich ein wieteres Problem bei meiner Homepage. Ich habe im folgenden Code im linken Div ein Bild. Wenn ich hier die Angabe von max height oder max width verwende passiert nichts.
Desweiteren habe ich auch noch links und rechts vom Div Container ein pseudo Element (:before und :after). Wenn ich ein Hochkantbild und eine Bildhöhe in % verwende verschwindet ab einer bestimmten Fenstergröße das rechts pseudo Element.
Und als drittes kommt noch hinzu das wenn das Bild breiter als linke div wird dann geht es über den div hinaus. Das sieht nicht schön aus. Wie könnte ich das auf die maximale Größe vom Div beschränken.
Hier der Code:
HTML-Code:
<div id="container" >
<div class="cinner">
<div id="cleft">
<img src="EKOHENSO.png" height="50%">
<p style="padding: 0px 0 5px 0;">„Wende das Licht nach innen und lasse deine wahre Natur leuchten“<br>
<span style="float:right; font-size:12pt">Dogen Zenji</span></p>
</div>
<div id="cright">
</div>
</div>
</div>
<div id="footer">
<div class="finner">
<div id="footerup" style="height:45%; style="line-height: 0%;"><a href="impressum.htm">Impressum</a> | <a
href="datenschutz.htm">Datenschutz</a> | <a href="links.htm">Links</a></div>
<div id="footerdown">© 2019 Leonard Schmidt</div>
</div>
</div>
CSS Code:
Code:
#container {
position: fixed;
top: 75px;
bottom: 50px;
width:100%;
z-index: -1;
line-height: 1.5;
background: #a3a3a3;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#container::before, #container::after
{
display: inline-block;
width: 2em;
min-width: 2em;
content: '';
}
#container .cinner
{
width:100%;
max-width:1200px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#cleft
{
width: 100%;
max-width: 22.5%;
padding: 25px 50px 0 50px;
margin-right: 4%;
border: solid 1px;
}
#cright
{
width: 100%;
max-width:69.5%;
padding-top: 25px;
overflow:auto;
border: solid 1px;
}
#container ul, li
{
display: block;
position: static;
margin-left:0px;
font-size: 14pt;
padding: 5px 0 5px 0;
}
#footer {
position: fixed;
bottom: 0px;
height: 50px;
width: 100%;
z-index: -1;
overflow: hidden;
background: #ffd9f7;
line-height: 30px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
#footer::before, #footer::after
{
display: inline-block;
width: 2em;
min-width: 2em;
content: '';
}
#footer .finner
{
width: 100%;
max-width: 1200px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
webkit-box-align: center;
moz-box-align: center;
ms-flexbox-align: center;
webkit-flex-align: center;
align-items: center;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
p
{
font-size:14pt;
}
Vielen lieben Dank