Der Blog von Benny Neugebauer » HTML 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 Internet Explorer Kompatibilitätsansicht verhindern http://www.bennyn.de/programmierung/html/internet-explorer-kompatibilitatsansicht-verhindern.html http://www.bennyn.de/programmierung/html/internet-explorer-kompatibilitatsansicht-verhindern.html#comments Thu, 10 Nov 2011 10:38:08 +0000 bennyn http://www.bennyn.de/?p=2926 Mit dem Internet Explorer 8 hat Microsoft die Kompatibilitätsansicht eingeführt. Mit der Kompatibilitätsansicht wird die Rendering-Engine des Internet Explorers auf eine Vorversion gestellt, wodurch Webseiten, die für ältere IE-Versionen entworfen wurden, besser angezeigt werden können. Der “Compatibility Mode” wird durch ein Icon in der Adresszeile eingeschaltet.


Kompatibilitätsansicht im IE9

Für Webdesigner ist das Icon der Kompatibilitätsansicht ein Dorn im Auge, da es aussieht wie ein zerrissenes Dokument und dadurch der Eindruck entsteht, dass etwas mit der eigenen Webseite nicht in Ordnung ist. Um das Icon zu entfernen, muss die eigene Webseite selbst den Kompatibilitätsmodus bestimmen. Dazu wird der kompatible User-Agent als Meta-Tag für den Internet Explorer im head-Bereich der Seite angegeben:

1
2
3
4

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>

Die gezeigte Variante stellt die Render-Engine des Internet Explorers auf die Version von Internet Explorer 7 um, was dazu führt dass beispielsweise ein Internet Explorer 9 die Webseite anzeigt wie der IE7.

Möchte man sich nicht auf eine spezielle IE-Version festlegen, sondern immer die Aktuellste benutzen, so muss folgender Eintrag gemacht werden:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
]]> http://www.bennyn.de/programmierung/html/internet-explorer-kompatibilitatsansicht-verhindern.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 W3C valides JavaScript http://www.bennyn.de/programmierung/html/w3c-valides-javascript.html http://www.bennyn.de/programmierung/html/w3c-valides-javascript.html#comments Sat, 09 Apr 2011 15:44:32 +0000 bennyn http://www.bennyn.de/?p=2425 Wer das Tag <script type="text/javascript"> direkt im <head> Teil seiner HTML-Seite verwendet, der kann Probleme bei der W3C-Validierung seines Dokumentes bekommen, wenn innerhalb des JavaScript-Tags nach dem HTML-Standard unerlaubte Elemente enthalten sind.

Typische Fehlermeldungen dafür sind:

  • character “&” is the first character of a delimiter but occurred as data
  • cannot generate system identifier for general entity “document.getElementById”
  • general entity “document.getElementById” not defined and no default entity
  • reference not terminated by REFC delimiter
  • reference to entity “document.getElementById” for which no system identifier could be generated
  • character “;” not allowed in attribute specification list
  • element “navRoot.childNodes.length” undefined
  • end tag for “navRoot.childNodes.length” omitted, but OMITTAG NO was specified

Man kann dieses Manko umgehen, wenn man diese Deklaration ändert:

1
2
3

<script type="text/javascript">
/* My Code */
</script>

Undzwar in:

1
2
3

<script type="text/javascript"><!--//--><![CDATA[//><!--
/* My Code */
//--><!]]></script>
]]> http://www.bennyn.de/programmierung/html/w3c-valides-javascript.html/feed 2 HTML Inline und Block Elemente http://www.bennyn.de/programmierung/html/html-inline-und-block-elemente.html http://www.bennyn.de/programmierung/html/html-inline-und-block-elemente.html#comments Thu, 03 Mar 2011 23:29:46 +0000 bennyn http://www.bennyn.de/?p=2387 HTML-Elemente werden grundsätzlich in zwei Arten unterschieden, undzwar in Inline und Block Elemente. Block-Elemente erzeugen einen Zeilenumbruch und können andere Inline-Elemente enthalten. Inline-Elemente hingegen erzeugen keinen Zeilenumbruch und dürfen auch keine Blöcke enthalten; nur weitere Inline-Tags sind gestattet.

Liste der Block-Elemente

  • address
  • blockquote
  • center
  • del
  • dir
  • div
  • dl
  • fieldset
  • form
  • h
  • h
  • h
  • h
  • h
  • h
  • hr
  • ins
  • isindex
  • menu
  • noframes
  • noscript
  • ol
  • p
  • pre
  • table
  • u

Liste der Inline-Elemente

  • a
  • abbr
  • acronym
  • applet
  • b
  • basefont
  • bdo
  • big
  • br
  • button
  • cite
  • code
  • del
  • dfn
  • em
  • font
  • i
  • img
  • ins
  • input
  • iframe
  • kbd
  • label
  • map
  • object
  • q
  • samp
  • script
  • select
  • small
  • span
  • strong
  • sub
  • sup
  • textarea
  • tt
  • va
]]> http://www.bennyn.de/programmierung/html/html-inline-und-block-elemente.html/feed 0