✔ Design für IE aufarbeiten - wie?

Muckel1986 · 8. Januar 2008

Vielen Dank für deine Hilfe, es funktioniert nun alles. Zu sehen unter http://jurtenrunde.de/test/ .

Nun werde ich mich an ein PlugIn für Wordpress setzen, danach das Design mit den Variablen für das Wordpress erweitern und dann habe ich es fertig. Danke dir nochmal!

Muckel1986 · 27. Februar 2008

Guten Abend,

für ein neues Design und damit ich das mit dem * html hack lerne habe ich mich daran nochmal versucht. Mein neues Design ist so auf geteilt: Anhang anzeigen 37612

Daraus er gibt sich, dass ich folgende div Blöcke habe:

links Linke spalte, 100% höhe, 50px breit
head110px höhe und 100% breit (Breite zwischen links und rechts)
rechtsrechte spalte, 100% höhe, 50px breit
leftdie innere linke spalte, breit 200px höhe 100% (zwischen head und ende brwoser)
menue höhe 30px breite 100% von rechts zu left
righthöhe 100% (zwischen menue und footer), breite 100% zwischen left und rechts
footer30px hoch, breite 100% zwischen rechts und links

Somit habe ich laut dem Tutorial ja 7 z-index ebenen.

head
footer
links
rechts
menue
left
right

Mein Versuch könnt ihr hier sehen: http://jurtenrunde.de/test/hobbies.htm . Meine CSS-Datei schaut so aus:

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;
}

* html #links {
  	top: 0;
  	width: 50px;
  	height: 100%;
  	border-top-width: 110px;
  	border-left-width: 0;
  	border-bottom-width: 0;
  	border-right-width: 50px;
  	border-style: solid;
	z-index: 4;
}

#head{
	position:absolute;
	top:0;
	left:50px;
	right:50px;
	height:110px;
	padding:0;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	background:transparent;
	border:none;
}

* html #head {
  	top: 0;
  	width: 100%;
  	height: 110px;
  	border-top-width: 0;
  	border-left-width: 50px;
  	border-bottom-width: 0;
  	border-right-width: 50px;
  	border-style: solid;
	z-index: 1;
}

#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;
}

* html #rechts {
  	top: 0;
  	width: 100%;
  	height: 30px;
  	border-top-width: 110px;
  	border-left-width: 0;
  	border-bottom-width: 0;
  	border-right-width: 0;
  	border-style: solid;
	z-index: 4;
}

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

* html #left {
  	top: 0;
  	width: 200px;
  	height: 100%;
  	border-top-width: 110px;
  	border-left-width: 50px;
  	border-bottom-width: 0;
  	border-right-width: 0;
  	border-style: solid;
	z-index: 6;
}

#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;
}

* html #menue {
  	top: 0;
  	width: 200px;
  	height: 100%;
  	border-top-width: 0;
  	border-left-width: 250px;
  	border-bottom-width: 0;
  	border-right-width: 50px;
  	border-style: solid;
	z-index: 5;
}

#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;
}

* html #right {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border-top-width: 140px;	/* = head110 + menue30 = 140  */
  	border-left-width: 250px;	/* = links50 + left200 = 250*/
  	border-bottom-width: 30px;	/* = footer = 30px*/
  	border-right-width: 50px;	/* = right=50px*/
  	border-style: solid;
 	z-index: 7;				/* tiefste z-Ebene! */
}

#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;
}

* html #footer {
  	top: 0;
  	width: 100%;
  	height: 30px;
  	border-top-width: 0;
  	border-left-width: 250px;
  	border-bottom-width: 0;
  	border-right-width: 50px;
  	border-style: solid;
	z-index: 2;
}

#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; }

Könnt ihr mir sagen, wo mein Fehler liegt?

Gruß und vielen Dank
Muckel

Maik · 28. Februar 2008

Hi.

Muckel1986 hat gesagt.:
Könnt ihr mir sagen, wo mein Fehler liegt?

Code:

* html #right {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	border-top-width: 140px;	/* = head110 + menue30 = 140  */
  	border-left-width: 250px;	/* = links50 + left200 = 250*/
  	border-bottom-width: 30px;	/* = footer = 30px*/
  	border-right-width: 50px;	/* = right=50px*/
  	border-style: solid;
 	z-index: 7;				/* tiefste z-Ebene! */
}

Mit dem z-index-Wert "7" ist dies die höchste z-Ebene in deinem Modell, denn je größer der Wert, desto weiter oben liegt die Ebene und überdeckt die Ebenen mit niedrigerem z-index-Wert - siehe auch z-index (Schichtposition bei Überlappung).

Muckel1986 · 28. Februar 2008

OKai, danke für Deine Antwort. Hatte die Reihenfolge genau um gedreht. Nun sind die div Blöcke nach den Ebenen so angeordnet:

right die größte Fläche daher ganz unten
menueda es ja über dem content liegen soll, habe ich es darüber gelegt
footersoll wie das menue über dem content sein, daher hier an geordnet
leftdie Spalte mit den Bildern, soll ja neben dem content und dem menue und dem footer sein, daher hier an geordnet
rechtsdie äußere Spalte
linksdie äußere Spalte
headder Kopf oben

Das hat leider genauso wenig gebracht, wie diese Anordnung:

rightder content mit der größten fläche unten
leftdie Spalte neben dem content
linksdie außen spalte links
rechtsdie außen spalte rechts
headder kopf über dem rest
footerunter dem content
menueüber dem content

Die Rahmen habe ich meiner Meinung nach richtig berechnet, oder? In dem div right soll der Inhalt der Seite sein. Daher auf width & height 100%; durch die Rahmen ja wieder ein gegrenzt. Das div left soll ja direkt neben dem div right liegen. Da die anderen divs ja durch die Rahmen zurück gehalten werden, denke ich mal, dass es an zweiter ebene richtig ist. Die div Blöcke links und rechts sind jeweils die äußeren Spalten, da sie durch die begrenzte Breite ja nicht in den content (right) und in die spalte (left) rein fallen, habe ich sie über die beiden an geordnet. Der head ist ja nun über die spalten angeordnet, daher an dieser Position. Nun kommt der footer und zu letzt das menue. Da die zwei ja die Bereiche sind, die auf dem Content liegen, habe ich sie an geordnet.

Kann es vielleicht sein, dass ich bei den Ebenen einige Bereiche zusammen fassen muss. Das man dann z.B. dieses hat:

rightder content mit der größten fläche unten
leftdie Spalte neben dem content
links & rechtsdie äußeren spalten
headder kopf über dem rest
footer & menueliegen ja beide auf dem content aber an verschiedenen stellen

Gruß und vielen Dank
Muckel

Maik · 28. Februar 2008

Ehrlich gesagt verstehe ich nicht, womit du dich so schwer tust, denn in Post #18 hatte ich dir den CSS-Code gepostet.

Muckel1986 · 28. Februar 2008

Guten Tag,

ja, dein Code funktioniert ja auch, aber jetzt habe ich ein anderes Design. Das erste war so auf gebaut:

Obere Div Reihe: ecke, head, bild
darunter: links, mitte, rechts (links und rechts gehen bis ganz unten)
unten: footer

Das jetztige ist so auf gebaut:

oben der header, darunter eine linke spalte die bis zum ende geht. rechts daneben das menue, unter dem menue der inhalt und darunter der footer. Das ganze hat jeweils rechts und links noch einen "freiraum", also zwei Spalten.

Die beiden sind, wie ich finde, schon sehr unterschiedlich auf gebaut. Vielleicht ist der Punkt, der mir fehlt, ja ganz einfach, aber ich sehe ihn zurzeit nicht.

Gruß Muckel

Maik · 28. Februar 2008

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;
}

* html #links {
          top: 0;
          height: 100%;
          z-index: 5;
}

#head{
        position:absolute;
        top:0;
        left:50px;
        right:50px;
        height:110px;
        padding:0;/*Innenabstand*/
        margin:0;/*Außenabstand*/
        border:none;
}

* html #head {
          top: 0;
          left:0;
          width: 100%;
          height: 110px;
          border-left-width: 50px;
          border-bottom-width: 0;
          border-right-width: 50px;
          border-style: solid;
          border-color:#dedede;
          z-index: 4;
}

#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;
}

* html #rechts {
          top: 0;
          height:100%;
          z-index: 5;
}

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

* html #left {
          top: 0;
          left:50px;
          width: 200px;
          height: 100%;
          border-top: 110px solid #dedede;
          z-index: 3;
}

#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;
}

* html #menue {
          left:0;
          width:100%;
          border-left: 250px solid #dedede;
          border-right: 50px solid #666666;
          z-index: 2;
}

#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;
}

* html #right {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-top: 140px solid #dedede;        /* = head110 + menue30 = 140  */
          border-left: 250px solid #dedede;        /* = links50 + left200 = 250*/
          border-bottom: 30px solid #dedede;        /* = footer = 30px*/
          border-right: 50px solid #999999;        /* = right=50px*/
          z-index: 0;                                /* tiefste z-Ebene! */
}

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

        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;
}

* html #footer {
          position:absolute;
          left:0;
          bottom: 0;
          width: 100%;
          height: 30px;
          border-left: 250px solid #dedede;
          border-right: 50px solid #666666;
          z-index: 1;
}

#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; }

Mögliche Feinschliffarbeiten darfst du dann selber übernehmen

Muckel1986 · 28. Februar 2008

Vielen Dank und bis auf zwei Rahmen brauch ich keinen Feinschliff mehr

Werde mir mal beide css Dateien (deine und meine) aus drucken und an schauen, wo genau der unterschied liegt - evtl. verstehe ich dann den * html hack.

Gruß und vielen Dank
Muckel

Muckel1986 · 28. Februar 2008

Für meine 2. Navigation habe ich folgende, verschachtelte Liste:

Code:

<ul id="leftmenue">
		<li><a href="#">Test</a></li>
		<li><a href="#">Jurtenrunde</a></li>
			<ul id="subleft">
				<li><a href="#">Unterpunkt1</a></li>
				<li><a href="#">Unterpunkt2</a></li>
			</ul>
		<li><a href="#">Singekreis</a></li>
		<li><a href="#">Schmerz Forum</a></li>
	</ul>

Das Ganze ist laut validome.org und validator.w3.org nicht valid. Stimmt das? Oder kann man das doch so hin kriegen, dass es valid ist?

Die Unterpunkte, die ich bis jetzt habe, definiere ich mit Hilfe von einer id. Eine id darf man aber nur einmal zu ordnen - also müsste ich dann ja eine class nehmen. Wie kann ich folgenden Code in eine class um ändern, so dass er trozdem berücksichtigt wird?

Code:

ul#subleft {
    list-style:none;
    text-align:left;
    margin-left:5px;
    margin-right:5px;
	padding-left:10px;
}

#subleft li a {
	height: 22px;
	line-height: 22px;
	text-align: left;
	border-bottom: 1px solid #999999;
	background:transparent;
	color: #000000;
	text-decoration:none;
	
}

#subleft li a:hover {
	background:#eaeaea;
}

Muss ich dass #subleft einfach durch ein .subleft ersetzen und im html Bereich class anstatt id schreiben?

Gruß und vielen Dank
Muckel

Maik · 28. Februar 2008

Dann schick mal dieses Markup durch den Validator:

Code:

<ul id="leftmenue">
		<li><a href="#">Test</a></li>
		<li><a href="#">Jurtenrunde</a>
			<ul id="subleft">
				<li><a href="#">Unterpunkt1</a></li>
				<li><a href="#">Unterpunkt2</a></li>
			</ul>
                </li>
		<li><a href="#">Singekreis</a></li>
		<li><a href="#">Schmerz Forum</a></li>
	</ul>

Und ja, eine ID darf innerhalb eines Dokuments nur einmal vergeben werden.

✔ Design für IE aufarbeiten - wie?

Muckel1986

Erfahrenes Mitglied

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Maik

Muckel1986

Erfahrenes Mitglied

Muckel1986

Erfahrenes Mitglied

Maik

Neue Beiträge