Der Blog von Benny Neugebauer » CSS http://www.bennyn.de Alles über die Informatik & Co. Wed, 08 Feb 2012 16:31:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Div Element horizontal und vertikal zentrieren http://www.bennyn.de/programmierung/css/div-element-horizontal-und-vertikal-zentrieren.html http://www.bennyn.de/programmierung/css/div-element-horizontal-und-vertikal-zentrieren.html#comments Fri, 27 Jan 2012 12:16:14 +0000 bennyn http://www.bennyn.de/?p=3140 Ein Code sagt mehr als tausend Worte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Centering a Div horizontally and vertically</title>
    <style type="text/css">
      html
      {
        background-color: black;
      }
 
      body
      {
        width: 100%;
        height: 100%;
        position: static; /* don't make it relative! */
      }
 
      #centered
      {
        position: absolute;
        height: 396px;
        width: 400px;
        margin: -198px 0px 0px -200px; /* 50% height, 0px, 0px, 50% width */
        top: 50%;
        left: 50%;
        background-color: violet;
        border: 1px solid white;
      }
    </style>
  </head>
  <body>  
    <div id="centered"></div>
  </body>
</html>
]]> http://www.bennyn.de/programmierung/css/div-element-horizontal-und-vertikal-zentrieren.html/feed 0 DIV-Container mit 100 Prozent Höhe http://www.bennyn.de/programmierung/css/div-container-mit-100-prozent-hohe.html http://www.bennyn.de/programmierung/css/div-container-mit-100-prozent-hohe.html#comments Mon, 07 Nov 2011 09:37:04 +0000 bennyn http://www.bennyn.de/?p=2889 Oft wünscht man sich in einem CSS-Layout einen Div-Container, welcher als Wrapper fungiert und 100 Prozent der im Browser zur Verfügung stehenden Höhe einnimmt. Möchte man dieses Verhalten browserkompatibel gestalten, ist das die Möglichkeit:

HTML

1
2
3

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13

html, body 
{
  height: 100%;
}
 
div#wrapper
{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-color: seagreen;
  width: 300px;
}
]]> http://www.bennyn.de/programmierung/css/div-container-mit-100-prozent-hohe.html/feed 0 Div Container übereinander legen http://www.bennyn.de/programmierung/css/div-container-ubereinander-legen.html http://www.bennyn.de/programmierung/css/div-container-ubereinander-legen.html#comments Wed, 26 Oct 2011 11:59:38 +0000 bennyn http://www.bennyn.de/?p=2863 Wenn man einen Div-Container über ein anderes Div-Element legen möchte, muss man dem umschließendem Eltern-Element das Attribut position: relative; zuweisen und den darin befindlichen Div-Containern die Eigenschaft position: absolute; geben. Dadurch liegt dann das Kinder-Div, welches zuletzt im Code definiert wurde, am Obersten. In meinem Beispiel liegt child_2 also über child_1:
HTML

1
2
3
4

    <div id="parent">
      <div id="child_1"></div>
      <div id="child_2"></div>
    </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#parent
{
  position: relative;
}
 
#child_1, #child_2
{
  width: 200px;
  height: 200px;
  position: absolute;
}
 
#child_1
{
  background-color: red;
}
 
#child_2
{
  background-color: green;
}

Möchte man die Reihenfolge der Überlappung selbst bestimmen, so muss man den z-index einsetzen. Ein Element mit höherem z-index liegt über Elementen mit niedrigerem z-index. Mit folgender CSS-Code-Änderung würde child_1 über child_2 liegen:

1
2
3
4
5
6
7
8
9
10
11

#child_1
{
  background-color: red;
  z-index: 2;
}
 
#child_2
{
  background-color: green;
  z-index: 1;
}
]]> http://www.bennyn.de/programmierung/css/div-container-ubereinander-legen.html/feed 0 Suckerfish CSS done right! http://www.bennyn.de/programmierung/css/suckerfish-css-done-right.html http://www.bennyn.de/programmierung/css/suckerfish-css-done-right.html#comments Tue, 19 Apr 2011 19:14:51 +0000 bennyn http://www.bennyn.de/?p=2444 Vor ein paar Tagen wollte ich ein modernes HTML-Submenü bauen, welches aufklappt, wenn man mit der Maus über einen Menüpunkt fährt.

Auf diversen Seiten habe ich gesehen, dass viele diese Technik mit JavaScript realisieren. Ich finde das übertrieben, da sich dieser Effekt auch mit der CSS “hover”-Eigenschaft für Listenelemente lösen lässt (Stichwort: Suckerfish CSS). Das funktioniert aber nur in aktuellen Browsern.

Der Internet Explorer 6 unterstützt die “hover”-Eigenschaft nämlich nur für Anker. Wie ich leider feststellen musste, gibt es noch weitere Besonderheiten die man beachten muss. Nach 2 Stunden Arbeit habe ich dann aber einen Code entwickelt, der barrierefrei (ohne den Einsatz von display:none und visibility:hidden) ist und problemlos in Firefox und Internet Explorer 6-7 funktioniert (andere Browser wurden nicht getestet).

Screenshot:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>Floating Navigation</title>
		<style type="text/css">
		*
		{
			margin: 0; padding: 0; border: 0;
		}
 
		#navMenu ul
		{
			line-height: 30px;
		}
 
		#navMenu li
		{
			list-style: none;
			float: left;
			position: relative;
		}
 
		#navMenu a
		{
			text-align: center;
			display: block;
			width: 100px;
			height: 30px;				
		}
 
		/* nested list */
		#navMenu ul ul
		{			
			top: 30px;
			position: absolute;
			left: -999em;
		}
 
		#navMenu li:hover ul,
		#navMenu li.sfhover ul
		{
			left: auto;
		}
 
		/* IE7 fix: Prevents that the submenu disappears. */
		#navMenu ul ul 
		{
			background: white;
		}
 
		/* IE6 fix: Displays the submenu items among each other. */
		#navMenu li.sfhover ul
		{
			width: 100px;
		}
		</style>
		<!--[if IE 6]>
		<script type="text/javascript">
		sfHover = function()
		{
			var sfEls = document.getElementById("navMenu").getElementsByTagName("LI");
			for (var i=0; i<sfEls.length; i++)
			{
				sfEls[i].onmouseover=function()
				{ this.className+=" sfhover"; }
				sfEls[i].onmouseout=function()
				{ this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }
			}
		}
		if (window.attachEvent) window.attachEvent("onload", sfHover);
		</script>
		<![endif]-->
	</head>
	<body>
		<div id="wrapper">
			<div id="navMenu">
				<ul>
					<li>
						<a href="#">Menu 1</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Menu 2</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>						
					</li>
					<li>
						<a href="#">Menu 3</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>						
					</li>
					<li>
						<a href="#">Menu 4</a>
						<ul>
							<li><a href="#">Submenu 1</a></li>
							<li><a href="#">Submenu 2</a></li>
							<li><a href="#">Submenu 3</a></li>
							<li><a href="#">Submenu 4</a></li>
							<li><a href="#">Submenu 5</a></li>
						</ul>						
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Hinweis: Alle Menüpunkte sind 30 Pixel hoch und 100 Pixel breit. Der gewählte DOCTYPE und die “X-UA-Compatible”-Eigenschaft sind wichtig für die korrekte Darstellung im Internet Explorer.

]]> http://www.bennyn.de/programmierung/css/suckerfish-css-done-right.html/feed 2 CSS Stil für Keyboard-Tasten http://www.bennyn.de/programmierung/css/css-stil-fur-keyboard-tasten.html http://www.bennyn.de/programmierung/css/css-stil-fur-keyboard-tasten.html#comments Mon, 07 Feb 2011 11:02:39 +0000 bennyn http://www.bennyn.de/?p=2330 In meinem Blog gebe ich häufig Tastenkombinationen an, um zu beschreiben, wie bestimmte Dinge bedient werden. Um diese Tastaturkürzel mehr herauszuheben, habe ich einen CSS-Stil entworfen. Hier ein Beispiel:

Bitte drücke Strg + Alt + Entf.

Ich finde, dass die Wörter “Strg” und “Alt” sowie “Entf” aussehen, wie richtige Tasten einer Tastatur. :)
Den Code dafür möchte ich natürlich niemanden vorenthalten.

HTML-Seite mit Keyboard CSS-Stil

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html>
	<head>
		<title>Beispiel</title>
		<style type="text/css">
		tt
		{
			padding-top: 1px;
			border-top: 1px solid #CCCCCC;
 
			padding-bottom: 1px;
			border-bottom: 3px solid #888888;
 
			padding-left: 2px;
			border-left: 1px solid #CCCCCC;
 
			padding-right: 2px;
			border-right: 3px solid #888888;
 
			background-color: #EEEEEE;			
		}
		</style>
	</head>
	<body>
		Bitte drücke <tt>Strg</tt> + <tt>Alt</tt> + <tt>Entf</tt>.
	</body>
</html>
]]> http://www.bennyn.de/programmierung/css/css-stil-fur-keyboard-tasten.html/feed 1