zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden max height oder max width reagiert nicht auf Bild und andere Bildprobleme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.09.2019, 12:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 26
crane befindet sich auf einem aufstrebenden Ast
Standard max height oder max width reagiert nicht auf Bild und andere Bildprobleme

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;">&bdquo;Wende das Licht nach innen und lasse deine wahre Natur leuchten&ldquo;<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">&copy; 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.09.2019, 13:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Die antwort ist die selbe wie bei deinem letzten Post: Du brauchst dieses Konstrukt mit :before und :after hier überhaupt nicht, baue deine Struktur neu auf und dann hast du all diese Probleme nicht.
Auch wenn du die Antwort wohl nicht hören willst.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bildproblem, max-height, max-width

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
joomla template wrock CSS 2 06.04.2012 19:24
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 17:32
Unterschiedliche Darstellung in Firefox / IE memphis2k CSS 16 30.08.2011 17:40
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Darstellungsprobleme im IE lea11011989 CSS 17 05.11.2010 09:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:32 Uhr.