✔ boxmodell und float Problem

Muckel1986 · 19. Februar 2008

Guten Abend,

ich bin gerade dabei für die Berufsschule, also im Unterricht, eine statische Seite zu basteln. Doch hapert es schon am Anfang. Ich möchte oben einen header haben, darunter zwei "spalten" und darunter den footer.

Dabei kommen zwei fehler (siehe Bilder).
1. Fehler bei diesem Code:

Code:

body,html{
	height:100%;
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif;
	color:#000000;
	background:#666666;
	text-align:center;
}

*{
	padding:0;
	margin:0;
	border:0;
}

#head{
	top:0;
	left:50px;
	right:50px;
	height:110px;
	padding:;/*Innenabstand*/
	margin-top:0;/*Außenabstand*/
	margin-left:50px;/*Außenabstand*/
	margin-right:50px;/*Außenabstand*/
	margin-bottom:0;/*Außenabstand*/
	border: 1px solid red;
}
#head h1 {
	color: #000000;
	line-height: 30px;
	font-size:25px;
	text-align:left;
	text-transform:uppercase;
	margin:5px;/*Innenabstand*/
}

#head p{
	color:#000000;
	line-height: 25px;
	font-size:20px;
	font-weight:bold;
	text-align:left;
	text-transform:none;
	margin:5px;/*Innenabstand*/
}

#left{
	
	top:110;
	left:50px;
	width:200px;
	padding:0;/*Innenabstand*/
	margin-top:0;/*Außenabstand*/
	margin-left:50px;/*Außenabstand*/
	margin-right:0;/*Außenabstand*/
	margin-bottom:0;/*Außenabstand*/
	border: 1px solid red;
}

#right{
	top:110;
	left:250px;
	right:50px;
	padding:0;/*Innenabstand*/
	margin-top:0;/*Außenabstand*/
	margin-left:0;/*Außenabstand*/
	margin-right:50px;/*Außenabstand*/
	margin-bottom:0;/*Außenabstand*/
	border: 1px solid red;
}

#footer{

}

2. Fehler bei diesem Code

Code:

body,html{
	height:100%;
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif;
	color:#000000;
	background:#666666;
	text-align:center;
}

*{
	padding:0;
	margin:0;
	border:0;
}

#head{
	top:0;
	left:50px;
	right:50px;
	height:110px;
	padding:;/*Innenabstand*/
	margin-top:0;/*Außenabstand*/
	margin-left:50px;/*Außenabstand*/
	margin-right:50px;/*Außenabstand*/
	margin-bottom:0;/*Außenabstand*/
	border: 1px solid red;
}
#head h1 {
	color: #000000;
	line-height: 30px;
	font-size:25px;
	text-align:left;
	text-transform:uppercase;
	margin:5px;/*Innenabstand*/
}

#head p{
	color:#000000;
	line-height: 25px;
	font-size:20px;
	font-weight:bold;
	text-align:left;
	text-transform:none;
	margin:5px;/*Innenabstand*/
}

#left{
	float:left;
	top:110;
	left:50px;
	width:200px;
	padding:0;/*Innenabstand*/
	margin-top:0;/*Außenabstand*/
	margin-left:50px;/*Außenabstand*/
	margin-right:0;/*Außenabstand*/
	margin-bottom:0;/*Außenabstand*/
	border: 1px solid red;
}

#right{
	top:110;
	left:250px;
	right:50px;
	padding:0;/*Innenabstand*/
	margin-top:0;/*Außenabstand*/
	margin-left:0;/*Außenabstand*/
	margin-right:50px;/*Außenabstand*/
	margin-bottom:0;/*Außenabstand*/
	border: 1px solid red;
}

#footer{

}

Hat jemand einen Hinweis, was ich falsch mache? Achja, bis lang nur für den Firefox was dran gemacht.

Gruß und Danke
Muckel

Maik · 19. Februar 2008

Hi.

Fehler Nr.1: Es fehlt zum Teil die Einheitenangabe (px).

Fehler Nr.2: Die top,right,bottom,left-Eigenschaft greift nur in Verbindung mit der position-Eigenschaft (relativ oder absolut).

Fehler Nr.3: Das rechts umfliessende Element erhält den linken Außenabstand, den das zu umfliessende Element als Breite besitzt.

Muckel1986 · 19. Februar 2008

OKai, danke. Es schaut nun so aus:

Code:

body,html{
	height:100%;
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif;
	color:#000000;
	background:#666666;
	text-align:center;
	overflow: hidden;
}

*{
	padding:0;
	margin:0;
	border:0;
}

#head{
	position:absolute;
	top:0;
	left:50px;
	right:50px;
	height:110px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	border: 1px solid red;
}
#head h1 {
	color: #000000;
	line-height: 30px;
	font-size:25px;
	text-align:left;
	text-transform:uppercase;
	margin:5px;/*Innenabstand*/
	overflow: hidden;
}

#head p{
	color:#000000;
	line-height: 25px;
	font-size:20px;
	font-weight:bold;
	text-align:left;
	text-transform:none;
	margin:5px;/*Außenabstand*/
}

#left{
	position:absolute;
	top:110px;
	left:50px;
	bottom:0;
	width:200px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	border: 1px solid red;
	overflow: auto;
}

#right{
	position:absolute;
	top:110px;
	left:250px;
	right:50px;
	bottom:30px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	border: 1px solid red;
	overflow: auto;
}

#footer{
	position:absolute;
	left:250px;
	right:50px;
	bottom:0;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	height:30px;
	border: 1px solid darkred;
}

der html - Teil:

HTML:

<div id="head">
	<h1>jurtenrunde.de</h1>
	<p>der Jugendbewegung und der Lyrik verschrieben</p>
</div>
<div id="left">Linkes Menue</div>
<div id="right" class="inhalt">der Content</div>
<div id="footer">footer</div>

Danke und Gruß Muckel

Maik · 19. Februar 2008

In diesem Zusammenhang sei darauf hingewiesen, dass die Vorgängerversionen des IE7 die Kombination der left/right- und top/bottom-Eigenschaft zur Positionierung eines Elements nicht unterstützen.

Im CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken werden zwei Techniken vorgestellt, um dies in den älteren IE-Versionen in den Griff zu bekommen.

Muckel1986 · 19. Februar 2008

Danke, das Tutorial kenne ich und werde ich anwenden, wenn das Design im Firefox Funktioniert.

Soweit schaut es auch schon ganz gut aus. In der Linken Spalte habe ich nun ein listen Menue. Jenes fängt leider nicht genau oben an, so wie das rechte Haupt Menue. Ich sehe den Fehler gerade nicht. Sieht jemand von euch den?

Hier der css Teil:

Code:

body,html{
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif;
	color:#000000;
	background:url(bilder/background.gif);
	background-color:#dedede;
	overflow: hidden;
}

*{
	padding:0;
	margin:0;
	border:0;
}
#links{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:50px;
	background:#666666;
}

#head{
	position:absolute;
	top:0;
	left:50px;
	right:50px;
	height:110px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	background:transparent;
	border:none;
}
#head h1 {
	color: #000000;
	line-height: 30px;
	font-size:25px;
	text-align:left;
	text-transform:uppercase;
	padding:10px;/*Innenabstand*/
	margin:5px;/*Außenabstand*/
	overflow: hidden;
}

#head p{
	color:#000000;
	line-height: 25px;
	font-size:20px;
	font-weight:bold;
	text-align:left;
	text-transform:none;
	padding:10px;/*Innenabstand*/
	margin:5px;/*Außenabstand*/
}

#rechts{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:50px;
	background:#666666;
}

#left{
	position:absolute;
	top:110px;
	left:50px;
	bottom:0;
	width:200px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	background:transparent;
	overflow: auto;
}

#left h1 {
	color:#cccccc;
	background:#999999;
	height:22px;
	width:170px;
	text-align:left;
	line-height:22px;
	font-weight:bold;
	font-size:15px;
	display:block;}

ul.subnavigation{
	width:170px;
	list-style:none;
	text-align:center;
	margin:0 0 0 20px;
	border-top:1px solid #999;
}
ul.subnavigation li a{
	border-bottom:1px solid #999;
	height:22px;
	line-height:22px;
	display:block;
	color:black;
	width:170px;
	text-decoration:none;
}
ul.subnavigation li a:hover{
	background:#eaeaea;
}

#menue{
	position:absolute;
	top:110px;
	left:250px;
	right:50px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	height:30px;
	background-color:#999999;
	color:#000000;
	overflow: auto;
}

#menue ul{
	list-style:none;
	text-align:center;
	height:30px;
}
#menue li{
	float:left;
}
#menue li a{
	display:block;
	width:108px;
	height:29px;
	line-height:30px;
	background:#999999;
	color:#cccccc;
	text-decoration:none;
	font-weight:bold;
	font-size:15px;
}
#menue li a:hover,#navigation li#active a{
	background:#eaeaea;
	color:#000000;
}

#right{
	position:absolute;
	top:140px;
	left:250px;
	right:50px;
	bottom:30px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	background-color:#cccccc;
	color:#000000;
	overflow: auto;
}

#footer{
	position:absolute;
	left:250px;
	right:50px;
	bottom:0;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	height:30px;
	background-color:#999999;
	color:#000000;
}

#inhalt{
	padding:10px;/*Innenabstand*/
}

/*Gestaltung des Textes*/
/*Überschriften*/

h1 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:24px; text-decoration:none; border:none;}
h2 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:22px; text-decoration:none; border:none;}
h3 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:20px; text-decoration:none; border:none;}
h4 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:18px; text-decoration:none; border:none;}
h5 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:16px; text-decoration:none; border:none;}
h6 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:14px; text-decoration:none; border:none;}

/*Listen*/
#right ul {
list-style-type:circle;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;} /*unordertlist*/

#right ol {
list-style-type:upper-roman;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;}/*ordertlist*/


/*Zitate*/
#right blockqoute {
background-color:#999999;
border-left: 5px solid #666666;
color:#cccccc;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
padding-top: 0;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0;
}

/*Code*/
#right code {
	font: 12px 'Courier New', Courier, Fixed;
	padding: 10px;
	margin: 10px;
}

/*Links*/
#right a:link{color:#999999; text-align:left; text-decoration: underline; border:0; margin:0;}
#right a:visited{color:#666666; text-align:left; text-decoration: underline;border:0; margin:0;}
#right a:hover{color:#666666; text-align:left; text-decoration: underline;border:0; margin:0;}
#right a:active{color:#999999; text-align:left; text-decoration: underline;border:0; margin:0;}
#right a img { border:0; }

/* braucht man immer*/
#right  acronym, abbr, span.caps {
cursor: help;
}

und hier dier html Body

HTML:

<body>
<div id="links"></div>
<div id="head">
	<h1>jurtenrunde.de</h1>
	<p>der Jugendbewegung und der Lyrik verschrieben</p>
</div>
<div id="rechts"></div>
<div id="left">
	<h1>Test 1</h1>
	<ul class="subnavigation">
		<li><a href="#">Punkt 1</a></li>
		<li><a href="#">Punkt 2</a></li>
		<li><a href="#">Punkt 3</a></li>
	</ul>
	<h1>Test 2</h1>
	<ul class="subnavigation">
		<li><a href="#">Punkt 1</a></li>
		<li><a href="#">Punkt 2</a></li>
		<li><a href="#">Punkt 3</a></li>
	</ul>
</div>
<div id="menue">
<ul class="navigation">
	<li id="active"><a href="#">Startseite</a></li>
	<li><a href="#">Person</a></li>
	<li><a href="#">Hobbies</a></li>
	<li><a href="#">Beruf</a></li>
	<li><a href="#">Bewertung</a></li>
	<li><a href="#">Impressum</a></li>
</ul>
</div>
<div id="right"><div id="inhalt">
	<h1>Testen der Funktionen</h1>
	<blockqoute>Ich bin ein Zitat</blockqoute>
	<br />
	<code>Ich bin im code Tag</code>
	<h1>Überschriften Testen</h1>
	<p>Lorem ipsum dolor ...</p>
	<h2>Überschrift Ebene 2</h2>
	<p>Lorem ipsum dolor ...</p>
	<h3>Überschrift Ebene 3</h3>
	<p>Lorem ipsum dolor ...</p>
	<h4>Überschrift Ebene 4</h4>
	<p>Lorem ipsum dolor ....</p>
	<h5>Überschrift Ebene 5</h5>
	<p>Lorem ipsum dolor ...</p>
	<h6>Überschrift Ebene 6</h6>
	<p>Lorem ipsum dolor ...</p>
</div></div>
<div id="footer">footer</div>
</body>

und der Fehler nochmals als Bild:

Da wir das Projekt als Schulaufgabe bekommen haben, müssen wir es leider statisch Programmieren. Also html (xhtml), css und, wer es kann, javascript (dhtml).

Meine Frage ist nun, ob ich ohne ein Frameset zu benutzen in meinem content Bereich den Inhalt aus einer anderen Datei auslesen/anzeigen lassen kann. Also praktisch ein include nur halt nicht in php. Denn sonst müsste ich neben dem Inhalt schreiben auch noch alles per copyandpast als neue Dateien anlegen und sie dann verlinken...

Gruß und vielen Dank
Muckel

Maik · 19. Februar 2008

Muckel1986 hat gesagt.:
In der Linken Spalte habe ich nun ein listen Menue. Jenes fängt leider nicht genau oben an, so wie das rechte Haupt Menue. Ich sehe den Fehler gerade nicht. Sieht jemand von euch den?

Code:

h1 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:24px; text-decoration:none; border:none;}

Muckel1986 hat gesagt.:
Meine Frage ist nun, ob ich ohne ein Frameset zu benutzen in meinem content Bereich den Inhalt aus einer anderen Datei auslesen/anzeigen lassen kann. Also praktisch ein include nur halt nicht in php.

Ohne eine serverseitige Scriptsprache lässt sich dieses Vorhaben nicht umsetzen.

Muckel1986 · 19. Februar 2008

vielen Dank für deine Hilfe!

Morgen kann ich mir in der Schule dann die * html hack bei bringen und/oder die javascript variante... und dann habe ich es schon fast.

Gruß Muckel

Muckel1986 · 26. Februar 2008

Guten Abend,

ich habe mir in den vergangenen Tagen das Tutorial zum *html hack an geschaut, muss aber sagen, dass es mir noch nicht wirklich klar ist, wie ich es an wenden muss. Auf dem Bild:

kann man sehen, wie ich die Seite in div Blöcken auf geteilt habe.

Den *html hack habe ich soweit verstanden, dass man den IE zuerst einmal in den Quirksmode setzen muss. In dem Beispiel hat man z.B. aus dem

Code:

#links {
              position: absolute;
              top: 150px;        /* Abstand zum oberen Fensterrand */
              left: 0;        /* Abstand zum linken Fensterrand */
              bottom: 0;        /* Abstand zum unteren Fensterrand */
              width: 200px;        /* Blockbreite */
              padding: 0;        /* Interpretation Boxmodell! */
              overflow: auto;        /* Scrollbalken, falls notwendig */
              ...
          }

das hier gemacht:

Code:

* html #links {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 200px;
  	height: 100%;
  	border-top-width: 150px;	/* = Kopfzeilenhöhe */
  	border-left-width: 0;
  	border-bottom-width: 0;
  	border-right-width: 0;
  	border-style: solid;
  	z-index: 3;

Die Angabe border-top bezieht sich, wie ja auch kommentiert, auf die Höhe des "headers".
die übrigen border Werte sind auf 0. bei border-left verstehe ich des auch, da da ja kein abstand zum Rand sein soll. Genauso wie bei dem bottom Wert. bottom-right ist auf 0, da ja auch dort kein Abstand zum Inhalt sein soll. Doch wie ist es mit dem z-index ?

Wie baut sich jener auf? Wie muss ich das in meinem "Beispiel"

machen? Zu finden ist mein Versuch hier.

Hoffe ihr könnt mir helfen.
Gruß Muckel

Edit:
Meine style.css mit dem Aufbau:

Code:

body,html{
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif;
	color:#000000;
	background:url(bilder/background.gif);
	background-color:#dedede;
	overflow: hidden;
}

*{
	padding:0;
	margin:0;
	border:0;
}
#links{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:50px;
	background:#666666;
}

#head{
	position:absolute;
	top:0;
	left:50px;
	right:50px;
	height:110px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	background:transparent;
	border:none;
}
#head h1 {
	color: #000000;
	line-height: 30px;
	font-size:25px;
	text-align:left;
	text-transform:uppercase;
	padding:10px;/*Innenabstand*/
	margin:5px;/*Außenabstand*/
	overflow: hidden;
}

#head p{
	color:#000000;
	line-height: 25px;
	font-size:20px;
	font-weight:bold;
	text-align:right;
	text-transform:none;
	padding:10px;/*Innenabstand*/
	margin:5px;/*Außenabstand*/
}

#rechts{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:50px;
	background:#666666;
}

#left{
	position:absolute;
	top:110px;
	left:50px;
	bottom:0;
	width:200px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	background:transparent;
	overflow: auto;
}

#left h1 {
	color:#cccccc;
	background:#999999;
	height:30px;
	width:108px;
	text-align:left;
	line-height:28px;
	font-weight:bold;
	font-size:15px;
	display:block;
	margin-bottom:10px;/*Außenabstand*/
	padding-left:20px;
}

#left p {
	text-align:center;
}

ul.subnavigation{
	width:160px;
	list-style:none;
	text-align:center;
	margin-left:20px;
	margin-bottom:10px;/*Außenabstand*/
	border-top:1px solid #999;
}
ul.subnavigation li a{
	border-bottom:1px solid #999;
	height:22px;
	line-height:22px;
	display:block;
	color:black;
	width:160px;
	text-decoration:none;
}
ul.subnavigation li a:hover{
	background:#eaeaea;
}

#menue{
	position:absolute;
	top:110px;
	left:250px;
	right:50px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	height:30px;
	background-color:#999999;
	border-top:1px solid #000000;
	border-left:1px solid #000000;
	border-right:none;
	border-bottom:none;
	color:#000000;
	overflow: auto;
}

#menue ul{
	list-style:none;
	text-align:center;
	height:30px;
}
#menue li{
	float:left;
}
#menue li a{
	display:block;
	width:108px;
	height:29px;
	line-height:30px;
	background:#999999;
	color:#cccccc;
	text-decoration:none;
	font-weight:bold;
	font-size:15px;
}
#menue li a:hover,#navigation li#active a{
	background:#eaeaea;
	color:#000000;
}

#right{
	position:absolute;
	top:140px;
	left:250px;
	right:50px;
	bottom:30px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	border-top:none;
	border-left:1px solid #000000;
	border-right:none;
	border-bottom:none;
	color:#000000;
	overflow: auto;
}

#footer{
	position:absolute;
	left:250px;
	right:50px;
	bottom:0;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	height:30px;
	background-color:/*#999999*/transparent;
	border-top: 1px solid #000000;
	border-left:none;
	border-right:none;
	border-bottom:none;
	color:#000000;
	line-height: 15px;
	font-size:12px;
	text-align:center;
}

#inhalt{
	padding:10px;/*Innenabstand*/
}
/*Tabelle*/
table {
	border:1px solid #000000;
	margin:0px;/*Außenabstand*/
	padding:0px;/*Innenabstand*/
	border-collapse:separate;
	vertical-align:top;
	text-align:left;
}

tr {
	border:none;
	width:100px;
	margin:0px;/*Außenabstand*/
	padding:0px;/*Innenabstand*/
	vertical-align:top;
	text-align:left;
}

td {
	border:1px solid #000000;
	margin:0px;/*Außenabstand*/
	padding:0px;/*Innenabstand*/
	vertical-align:top;
	text-align:left;
}

.important {
	background:#999999;
	color:#000000;
	font-style:italic;
	font-weight:bold;
	font-size:15px;
	text-align:center;
	width:80px;
}

.important2 {
	background:#999999;
	color:#000000;
	font-style:italic;
	font-weight:bold;
	font-size:15px;
	text-align:center;
}

.inhalt {
	background:transparent;
	color:#000000;
	font-style:italic;
	width:400px;
}

/*Gestaltung des Textes*/
/*Überschriften*/

#right h1 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:30px; text-decoration:none; border:none;}
#right h2 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:25px; text-decoration:none; border:none;}
#right h3 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:20px; text-decoration:none; border:none;}
#right h4 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:18px; text-decoration:none; border:none;}
#right h5 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:16px; text-decoration:none; border:none;}
#right h6 {color: #000000; margin: 10px 0 10px 0; text-align:left; font-size:12px; text-decoration:none; border:none;}

/*Listen*/
#right ul {
list-style-type:circle;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;} /*unordertlist*/

#right ol {
list-style-type:upper-roman;
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;}/*ordertlist*/


/*Zitate*/
#right blockquote {
	display:block;
	background-color:#999999;
	border-left: 5px solid #666666;
	color:#000000;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 0;
}

#left blockquote {
	display:block;
	background-color:transparent;
	color:#000000;
	font-style:italic;
	font-weight:bold;
	text-align:center;
	margin-top: 0;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
}

/*Code*/
#right code {
	font: 12px 'Courier New', Courier, Fixed;
	padding: 10px;
	margin: 10px;
}

/*Links*/
#right a:link{color:#999999; text-align:left; text-decoration: underline; border:0; margin:0;}
#right a:visited{color:#666666; text-align:left; text-decoration: underline;border:0; margin:0;}
#right a:hover{color:#666666; text-align:left; text-decoration: underline;border:0; margin:0;}
#right a:active{color:#999999; text-align:left; text-decoration: underline;border:0; margin:0;}
#right a img { border:0; }

/*Bild Tabelle*/
a:Hover .schwarz_machen {filter: gray();}

/*zentriert*/
.center {
	text-align:center;
}

/* braucht man immer*/
#right  acronym, abbr, span.caps {
cursor: help;
}

/*Links footer*/
#footer a:link{color:#000000; text-align:left; text-decoration: underline; border:0; margin:0;}
#footer a:visited{color:#666666; text-align:left; text-decoration: underline;border:0; margin:0;}
#footer a:hover{color:#666666; text-align:left; text-decoration: underline;border:0; margin:0;}
#footer a:active{color:#000000; text-align:left; text-decoration: underline;border:0; margin:0;}
#footer a img { border:0; }

Maik · 26. Februar 2008

Hi,

Muckel1986 hat gesagt.:
Doch wie ist es mit dem z-index ?

Wie baut sich jener auf? Wie muss ich das in meinem "Beispiel" machen?

hast du dir in dem Tutorial die angehängte Grafik, die den Schichtaufbau der einzelnen Seitenbereiche veranschaulicht, nicht näher angeschaut und mit den z-index-Angaben im anschliessenden Stylesheet verglichen?

Ansonsten schau bitte nochmal in deinem Thread Design für IE aufarbeiten - wie? vorbei, wo wir die Technik des "Star-HTML-Hacks" aus dem Tutorial schon mal besprochen und für den IE erfolgreich umgesetzt haben. Zumal es sich hierbei vom Grundsatz her um das gleiche Layout handelt.

✔ boxmodell und float Problem

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Muckel1986

Erfahrenes Mitglied

Maik

Neue Beiträge