Css: Unterschied zwischen den Versionen

Aus Vosp.info
Zur Navigation springen Zur Suche springen
 
(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[Bearbeiten]

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

divs nebeneinander ohne zeilenumbruch[Bearbeiten]

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">

hier steht ein text
hier steht ein text
hier steht ein text

</source>

float gedöns[Bearbeiten]

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[Bearbeiten]

<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[Bearbeiten]

3. Beispiel von 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>

Content

Content

Content

Content

Content

- End of Content -

     </body>

</html> </source>


div ausrichten[Bearbeiten]

div vertikal mittig ausrichten[Bearbeiten]

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

test

nachher </source>

div mittig ausrichten[Bearbeiten]

css <source lang="css"> .aussen-horizontal { text-align: center; } .innen-horizontal { display:inline-block; } </source>


html <source lang="html4strict">

Inhalt

1.11.2
2.12.2

<img height="199px" width="150px" src="https://ubohl.netz.coop/typo3temp/yag/00/001_wiese_2_539b305495bac.jpg" />

</source>



Mit Flexbox Vertikal Zentrieren[Bearbeiten]

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[Bearbeiten]

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">


<img class="innen" />

mit einem link dazwischen

<a href="ein/a/wird/ignoriert/"> <img class="innen" /> </a>

</source>

  • 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“