CSS: Website Zentrieren bzw DIV mittig ausrichten

Möchte man eine Website bzw ein Div mittig im überliegenden Div platzieren, so geht die recht einfach.

Wichtig ist, dass man dem mittig zu platzierenden Element ein margin: 0 auto gibt. Wobei der zweite Wert von Bedeutung ist, denn es setzt das Margin für links und rechts auf Auto.

Desweiteren muss das Element als Block dargestellt werden. Möchte man ein IMG oder ein Span zentrieren so muss das Style display: block noch festgelegt werden.

 

HTML Code  einer zentrieren Website:

<body>
  <div id="wrapper">
  </div>
</body>

CSS für den Wrapper:

#wrapper{
     width: 1200px;
     margin: 0 auto;
}

Weiterlesen

CSS: Link beim Mouseover animiert unterstreichen

Wem das normale Underline zu langweilig ist für seine Links, der kann das Ganze auch etwas verspielter machen. Z.b das Unterstreichen von links nach rechts zu animieren.

Wichtig ist, dass das a-Element ein Text-decoration: none bekommt um eine automatische Unterstreichung zu vermeiden. Dann sollte man dem Element ein Position: relative verpassen, da wir unsere Linie absolut unter dem Element platzieren.

 

DEMO: Hover Me

 

a {
  color: #333333;
  text-decoration: none;
  position: relative;
}

Jetzt erstellen wir mit einem a:after unsere Linie die zum derzeitigen Punkt noch eine Breite von 0% hat. Sie wird beim Hover auf 100 Prozent gesetzt und durch eine Transition wird das animiert.

 

a:after {
  content: ''; /* content ist leer... */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #333333;
  transition: 0.6s;
}

a:hover:after {
  width: 100%;
}

 

Weiterlesen