Css: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(div ausrichten)
(divs unten ausrichten)
Zeile 108: Zeile 108:
 
== div ausrichten ==
 
== div ausrichten ==
 
=== divs unten ausrichten ===
 
=== divs unten ausrichten ===
 +
 +
das innere element wird im äusseren Element unten ausgerichtet
 +
 
'''css'''
 
'''css'''
 
<source lang="css">
 
<source lang="css">
Zeile 122: Zeile 125:
 
'''html'''
 
'''html'''
 
<source lang="html4strict">
 
<source lang="html4strict">
 +
 +
 +
<div class="aussen">
 +
<img class="innen" />
 +
</div>
 +
 +
mit einem link dazwischen
 
<div class="aussen">
 
<div class="aussen">
 
<a href="ein/a/wird/ignoriert/">
 
<a href="ein/a/wird/ignoriert/">
Zeile 128: Zeile 138:
 
</div>
 
</div>
 
</source>
 
</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://www.html.de/threads/div-unten-ausrichten.21441/ div unten ausrichten]

Version vom 20. Mai 2014, 10:34 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

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