Css: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(→‎Listenelementen)
(→‎Mit Flexbox Vertikal Zentrieren)
 
(20 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
erstmal lose Notizen !!!!!
 
erstmal lose Notizen !!!!!
  
−
+
 
 
=== Listenelementen ===
 
=== Listenelementen ===
 
  li{
 
  li{
Zeile 9: Zeile 9:
  
 
=== divs nebeneinander ohne zeilenumbruch ===
 
=== divs nebeneinander ohne zeilenumbruch ===
 +
'''css'''
 +
<source lang="css">
 +
div.umschliessendesElement {
 +
/* bewirkt das die höhe gleich der inhaltshöhe ist */
 +
display:table;
 +
background-color: grey; /* optional */
 +
}
 +
 +
div.nebeneinanderstehendesElement{
 +
/* bewirkt das die elemente nebeneinander stehen und nicht untereinander */
 +
float: left;
 +
width: 33%; /* optional */
 +
}
 +
</source>
 +
'''html'''
 +
<source lang="html4strict">
 +
<div class="umschliessendesElement">
 +
<div class="nebeneinanderstehendesElement">hier steht ein text</div>
 +
<div class="nebeneinanderstehendesElement">hier steht ein text</div>
 +
<div class="nebeneinanderstehendesElement">hier steht ein text</div>
 +
</div>
 +
</source>
 +
=== float gedöns ===
 +
 +
wenn nach dem float gedöns, alles wieder normal weitergehen soll, sprich auch die static positionierung klappen soll .. muss
 +
 +
ansich ist es wohl nur display:block;
 +
 +
<source lang="css">
 +
.main:after{
 +
display:block; 
 +
content:".";
 +
clear:both;
 +
overflow:hidden;
 +
}
 +
</source>
 +
 +
=== standarts unterdrücken ===
 +
<source lang="css">
 +
p {
 +
display: inline; /* Kein Umbruch */
 +
}
 +
 +
h3 {
 +
margin:0px; /* Kein Absatz, also kein Abstand zur neuen Zeile. */
 +
}
 +
</source>
 +
 +
 +
=== FOOTER unten wenn wenig fixiert und doch weg wenn zuviel content  ===
 +
3. Beispiel von [http://www.tutorials.de/webmaster-faq/353420-css-wie-laesst-sich-der-footer-am-unteren-fensterrand-ausrichten.html Wie lässt sich der Footer am unteren Fensterrand ausrichten?] reduziert aufs wesentliche
 +
<source lang="html4strict">
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 +
      <head>
 +
            <title>Sticky Footer - Version III</title>
 +
            <style type="text/css">
 +
            html,body {
 +
                    height:100%;
 +
            }
 +
 +
            #wrapper {
 +
                    position:relative;
 +
                    min-height:100%;
 +
                    height:auto !important;
 +
                    height:100%;
 +
            }
 +
 +
            #middle {
 +
                    padding-bottom: 80px;
 +
            }
 +
            #footer {
 +
                    position:absolute;
 +
                    bottom:0;
 +
                    height:80px;
 +
            }
 +
            </style>
 +
      </head>
 +
      <body>
 +
            <div id="wrapper">
 +
                <div id="middle" >
 +
                      <p>Content</p>
 +
                      <p>Content</p>
 +
                      <p>Content</p>
 +
                      <p>Content</p>
 +
                      <p>Content</p>
 +
                      <p>- End of Content -</p>
 +
                </div>
 +
                <div id="footer">
 +
                      <p>&copy; 2010 Maik[at]tutorials.de</p>
 +
                </div>
 +
            </div>
 +
      </body>
 +
</html>
 +
</source>
 +
 +
 +
== div ausrichten ==
 +
 +
=== div vertikal mittig ausrichten ===
 +
'''CSS:'''
 +
<source lang="css">
 +
/*.mfp-wrap {
 +
height: 100%;
 +
position: fixed;
 +
}*/
 +
.mfp-container:before {
 +
content: "";
 +
display: inline-block;
 +
height: 100%;
 +
vertical-align: middle;
 +
}
 +
.mfp-content {
 +
display: inline-block;
 +
background-color: green;
 +
/*vertical-align: middle;*/
 +
}
 +
</source>
 +
 +
'''html:'''
 +
<source lang="html4strict">
 +
vorher
 +
<!--<div  class="mfp-wrap">-->
 +
<div class="mfp-container">
 +
<div class="mfp-content">test</div>
 +
</div>
 +
<!--</div>-->
 +
nachher
 +
</source>
  
 +
=== div mittig ausrichten ===
 +
'''css'''
 
<source lang="css">
 
<source lang="css">
−
div.umschliessendesElement {
+
.aussen-horizontal {
−
display:table;
+
text-align: center;
 +
}
 +
.innen-horizontal {
 +
display:inline-block;
 +
}
 +
</source>
 +
 
 +
 
 +
'''html'''
 +
<source lang="html4strict">
 +
<div style="background-color: greenyellow; width:600px; height:600px;"> <!-- << ist nur für die Veranschaulichung -->
 +
<div class="aussen-horizontal" style="background-color: grey;">
 +
<div class="innen-horizontal" style="background-color: white;">
 +
Inhalt
 +
<table>
 +
<tr><td>1.1</td><td>1.2</td></tr>
 +
<tr><td>2.1</td><td>2.2</td></tr>
 +
</table>
 +
<img height="199px" width="150px" src="https://ubohl.netz.coop/typo3temp/yag/00/001_wiese_2_539b305495bac.jpg" />
 +
</div>
 +
</div>
 +
</div> <!-- << ist nur für die Veranschaulichung -->
 +
</source>
 +
 
 +
 
 +
 
 +
 
 +
====Mit Flexbox Vertikal Zentrieren ====
 +
Eltern Element mit folgender Klasse/ bzw Regeln versehen
 +
<source lang="css">
 +
.parent {
 +
  display: flex;
 +
  flex-direction: column;
 +
  justify-content: center;
 +
  /* justify-content: space-between; */
 +
}
 +
</source>
 +
 
 +
=== divs unten ausrichten ===
 +
 
 +
das innere element wird im äusseren Element unten ausgerichtet
 +
 
 +
'''css'''
 +
<source lang="css">
 +
.aussen {
 +
position: relative;
 +
}
 +
.innen {
 +
position: absolute;
 +
bottom: 0;
 
}
 
}
 
</source>
 
</source>
 +
 +
 +
'''html'''
 +
<source lang="html4strict">
 +
 +
 +
<div class="aussen">
 +
<img class="innen" />
 +
</div>
 +
 +
mit einem link dazwischen
 +
<div class="aussen">
 +
<a href="ein/a/wird/ignoriert/">
 +
<img class="innen" />
 +
</a>
 +
</div>
 +
</source>
 +
 +
* der a tag ist hier nur zusätzlich eingefügt um zu zeigen das dieses in der ausrichtung einfach ignoriert wird ... sprich
 +
 +
* [http://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]
 +
* [http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height im kommentar eine interessante lösung, leider nur mit absoluten werden]

Aktuelle Version vom 24. November 2018, 19:39 Uhr

erstmal lose Notizen !!!!!


Listenelementen

li{
   margin-bottom:20px;               # Abstand zwischen Listenelementen
   list-style-type: none;            # Listen-Punkte nicht anzeigen
}

divs nebeneinander ohne zeilenumbruch

css 

div.umschliessendesElement {
	/* bewirkt das die höhe gleich der inhaltshöhe ist */
	display:table; 
	background-color: grey; /* optional */
}
 
div.nebeneinanderstehendesElement{
	/* bewirkt das die elemente nebeneinander stehen und nicht untereinander */
	float: left;
	width: 33%; /* optional */
}

html 

<div class="umschliessendesElement">
	<div class="nebeneinanderstehendesElement">hier steht ein text</div>
	<div class="nebeneinanderstehendesElement">hier steht ein text</div>
	<div class="nebeneinanderstehendesElement">hier steht ein text</div>
</div>

float gedöns

wenn nach dem float gedöns, alles wieder normal weitergehen soll, sprich auch die static positionierung klappen soll .. muss

ansich ist es wohl nur display:block; 

.main:after{ 
	display:block;  
	content:"."; 
	clear:both; 
	overflow:hidden; 
}

standarts unterdrücken

p {
	display: inline; /* Kein Umbruch */
}

h3 {
	margin:0px; /* Kein Absatz, also kein Abstand zur neuen Zeile. */
}


FOOTER unten wenn wenig fixiert und doch weg wenn zuviel content

3. Beispiel von Wie lässt sich der Footer am unteren Fensterrand ausrichten? reduziert aufs wesentliche 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
            <title>Sticky Footer - Version III</title>
            <style type="text/css">
            html,body {
                    height:100%;
            }

            #wrapper {
                    position:relative;
                    min-height:100%;
                    height:auto !important;
                    height:100%;
            }

            #middle {
                    padding-bottom: 80px;
            }
            #footer {
                    position:absolute;
                    bottom:0;
                    height:80px;
            }
            </style>
      </head>
      <body>
            <div id="wrapper">
                 <div id="middle" >
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>- End of Content -</p>
                 </div>
                 <div id="footer">
                      <p>&copy; 2010 Maik[at]tutorials.de</p>
                 </div>
            </div>
      </body>
</html>


div ausrichten

div vertikal mittig ausrichten

CSS: 

/*.mfp-wrap {
	height: 100%;
	position: fixed;				
}*/
.mfp-container:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}				
.mfp-content {
	display: inline-block;
	background-color: green;
	/*vertical-align: middle;*/		
}

html: 

vorher
<!--<div  class="mfp-wrap">-->
	<div class="mfp-container">
		<div class="mfp-content">test</div>
	</div>
<!--</div>-->
nachher

div mittig ausrichten

css 

	.aussen-horizontal {
		text-align: center;
	}
	.innen-horizontal {
		display:inline-block;
	}


html 

	<div style="background-color: greenyellow; width:600px; height:600px;"> <!-- << ist nur für die Veranschaulichung -->
		<div class="aussen-horizontal" style="background-color: grey;">
			<div class="innen-horizontal" style="background-color: white;">
				Inhalt
				<table>
					<tr><td>1.1</td><td>1.2</td></tr>
					<tr><td>2.1</td><td>2.2</td></tr>
				</table>
				<img height="199px" width="150px" src="https://ubohl.netz.coop/typo3temp/yag/00/001_wiese_2_539b305495bac.jpg" />
			</div>
		</div>
	</div> <!-- << ist nur für die Veranschaulichung -->



Mit Flexbox Vertikal Zentrieren

Eltern Element mit folgender Klasse/ bzw Regeln versehen 

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* justify-content: space-between; */
}

divs unten ausrichten

das innere element wird im äusseren Element unten ausgerichtet

css 

.aussen {
	position: relative;
}	
.innen {
	position: absolute;
	bottom: 0;
}


html 

<div class="aussen">
	<img class="innen" />
</div>

mit einem link dazwischen
<div class="aussen">
	<a href="ein/a/wird/ignoriert/">
		<img class="innen" />
	</a>
</div>
  • der a tag ist hier nur zusätzlich eingefügt um zu zeigen das dieses in der ausrichtung einfach ignoriert wird ... sprich
Abgerufen von „https://vosp.info/index.php?title=Css&oldid=5092“