Css: Unterschied zwischen den Versionen
Aus Vosp.info
F (Diskussion | Beiträge) (→divs nebeneinander ohne zeilenumbruch) |
F (Diskussion | Beiträge) (→Mit Flexbox Vertikal Zentrieren) |
||
(19 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"> | <source lang="css"> | ||
div.umschliessendesElement { | div.umschliessendesElement { | ||
− | display:table; | + | /* bewirkt das die höhe gleich der inhaltshöhe ist */ |
+ | display:table; | ||
+ | background-color: grey; /* optional */ | ||
} | } | ||
− | + | ||
div.nebeneinanderstehendesElement{ | div.nebeneinanderstehendesElement{ | ||
+ | /* bewirkt das die elemente nebeneinander stehen und nicht untereinander */ | ||
float: left; | 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>© 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> | </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"> | ||
+ | .aussen-horizontal { | ||
+ | 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> | ||
+ | |||
+ | |||
+ | '''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 !!!!!
Inhaltsverzeichnis
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>© 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