Css: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(→‎div vertikal mittig ausrichten)
(→‎Mit Flexbox Vertikal Zentrieren)
 
(2 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 165: Zeile 165:
 
</div>
 
</div>
 
</div> <!-- << ist nur für die Veranschaulichung -->
 
</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>
 
</source>
  

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“