Css: Unterschied zwischen den Versionen
Aus Vosp.info
F (Diskussion | Beiträge) |
F (Diskussion | Beiträge) |
||
| Zeile 55: | Zeile 55: | ||
margin:0px; /* Kein Absatz, also kein Abstand zur neuen Zeile. */ | 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> | </source> | ||
Version vom 25. März 2014, 22:25 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>
