Css: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(→‎divs unten ausrichten)
(→‎div ausrichten)
Zeile 107: Zeile 107:
  
 
== div ausrichten ==
 
== div ausrichten ==
 +
 +
=== div mittig ausrichten ===
 +
'''css'''
 +
<source lang="css">
 +
.aussen-vertikal {
 +
text-align: center;
 +
}
 +
.innen-vertikal {
 +
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-vertikal" style="background-color: grey;">
 +
<div class="innen-vertikal" 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>
 
=== divs unten ausrichten ===
 
=== divs unten ausrichten ===
  

Version vom 13. Juni 2014, 17:32 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 mittig ausrichten

css 

	.aussen-vertikal {
		text-align: center;
	}
	.innen-vertikal {
		display:inline-block;
	}


html 

	<div style="background-color: greenyellow; width:600px; height:600px;"> <!-- << ist nur für die Veranschaulichung -->
		<div class="aussen-vertikal" style="background-color: grey;">
			<div class="innen-vertikal" 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 -->

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=3095“