LinkBack URL
About LinkBacks
ZitierenLieber Thomas
Danke dir für die Code -Box
Habe ich gar nicht dran gedacht. Mea Culpa!!
Hallo,
ic bin neu in diesem Forum und ein Anfänger in Sachen CSS, XHTML etc.
Jetzt habe ich folgendes verbrochen:
Unter dem IE 7.0, K-Melon und Feuerfuchs sieht alles so aus, wie es soll.PHP-Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--/that is my Style-Shit!-->
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<!--/that is my Print-Shit!-->
<HEAD>
<title>Test-Scenario</title>
<meta name="author" content="Tumperli">
<meta name="publisher" content="">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="index,follow">
<meta name="language" content="Deutsch">
</HEAD>
<div id=header>
<div class=menu>
<UL>
<LI><A class="current">HOME<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> </LI>
<LI><A href="http://www.traum-projekt.com/forum/100-css/No Link inside">Ein Test<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> </LI>
<LI><A href="http://www.traum-projekt.com/forum/100-css/No Link inside">Ein Versuch<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> </LI>
<LI><A href="http://www.traum-projekt.com/forum/100-css/No Link inside">Ein Reinfall</A></LI>
<LI><A href="http://www.traum-projekt.com/forum/100-css/No Link inside">Press Ma</A> </LI>
<LI><A>Williger Wahn</A>
<UL>
<LI><A title="No Link inside" href="http://www.traum-projekt.com/forum/100-css/No Link inside">Dummschau</A> </LI>
<LI><A title="No Link inside" href="http://www.traum-projekt.com/forum/100-css/No Link inside">Lumperei</A></LI>
<LI><A title="No Link inside" href="http://www.traum-projekt.com/forum/100-css/No Link inside">Streckung</A> </LI>
<LI><A title="No Link inside" href="http://www.traum-projekt.com/forum/100-css/No Link inside">Folter</A> </LI>
</UL><!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
<LI><A>Impressum<!--[if IE 7]><!--></A><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<UL>
<LI><A title="Kontakt" href="Impressum/Kontakt/kontakt.html">Kontakt</A> </LI>
<LI><A title="Disclaimer" href="Impressum/disclaimer.html">Disclaimer</A> </LI>
<LI><A title="Copyright" href="Impressum/copyright.html">Copyright</A> </LI>
<LI><A title="Webdesign" href="Impressum/webdesign.html">WebDepp</A> </LI>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></LI></UL><!--[if lte IE 6]></td></tr></table></a><![endif]--></LI>
</UL>
</div>
</div>
<!--/*##################################################################################################*/!-->
<div id="main">
<p class="center"><img src="Bilder/header.jpg" width=460 height=97></p>
<h1 class="red">Blah Blah Blahblabla</h1>
<h3>Dummbeutelei im Testverfahren </h3>
<h3>Aschka Mischka Lalalei</h3>
<BR>
<BR>
<BR>
<br>
</p>
<p class="center">Chillipom chillipom chillipom <BR>
Manitas de Plata
</p>
</div></BODY></HTML>
<div id="footer" align="center-"><table width="100%"><tr><td algin=left>Kontakt</a></td> <td align=right>Ein Test</a</td></tr></table>
</div>
</BODY></HTML>
*************************************
und dazu folgendes CSS Datei erstellt:
************************************
*
{
padding: 0;
margin: 0;
}
.menu {
BORDER-RIGHT: #000 1px solid;
FONT-SIZE: 0.85em;
Z-INDEX: 100;
WIDTH: 868px;
/* width: 1043px; */
POSITION: static;
top: 4.5 em;
HEIGHT: 32px;
}
* HTML .menu {
/* WIDTH: 1043px; */
WIDTH: 868px;
top: 4.5em;
}
.menu UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
.menu UL UL {
WIDTH: 124px
}
.menu LI {
FLOAT: left; WIDTH: 124px; POSITION: relative
}
.menu A {
BORDER-RIGHT: #000 1px solid;
BORDER-TOP: #000 1px solid;
DISPLAY: block;
text-align:center;
FONT-SIZE: 11px;
font-weight: bolder;
BACKGROUND: url("../Bilder/verlauf_grau2.gif");
BORDER-LEFT: #000 1px solid;
WIDTH: 124px;
COLOR: #3333FF;
LINE-HEIGHT: 29px;
BORDER-BOTTOM: #000 1px solid;
HEIGHT: 30px;
f
TEXT-DECORATION: none;
}
.menu A:visited {
BORDER-RIGHT: #000 1px solid;
BORDER-TOP: #000 1px solid;
DISPLAY: block;
text-align:center;
FONT-SIZE: 11px;
font-weight: bolder;
BACKGROUND: url("../Bilder/verlauf_grau2.gif");
BORDER-LEFT: #000 1px solid;
WIDTH: 124px;
COLOR: #3333FF;
LINE-HEIGHT: 29px;
BORDER-BOTTOM: #000 1px solid;
HEIGHT: 30px;
TEXT-DECORATION: none;
}
* HTML .menu A {
WIDTH: 124px;
}
* HTML .menu A:visited {
WIDTH:124px
}
.menu UL UL A.drop {
BACKGROUND: no-repeat right bottom
}
.menu UL UL A.drop:visited {
BACKGROUND: no-repeat right bottom
}
.menu UL UL A.drop:hover {
BACKGROUND:no-repeat right bottom
}
.menu UL UL :hover > A.drop {
BACKGROUND: no-repeat right bottom
}
.menu UL UL UL A {
BACKGROUND: url("../Bilder/verlauf_tiefer.gif");
}
.menu UL UL UL A:visited {
BACKGROUND: url("../Bilder/verlauf_tiefer.gif");
}
.menu UL UL UL A:hover {
BACKGROUND: #b2ab9b
}
.menu UL UL {
BORDER-TOP: #000 1px solid; LEFT: 0px; VISIBILITY: hidden; WIDTH: 124px; POSITION: absolute; TOP: 31px; HEIGHT: 0px
}
* HTML .menu UL UL {
TOP: 31px
}
.menu UL UL UL {
LEFT: 124px; WIDTH: 124px; TOP: -1px
}
.menu UL UL UL.left {
LEFT: -124px
}
.menu TABLE {
LEFT: 0px; POSITION: absolute; TOP: 0px; BORDER-COLLAPSE: collapse
}
.menu UL UL A {
BORDER-TOP-WIDTH: 0px;
BORDER-LEFT-WIDTH: 1px;
BACKGROUND: url("../Bilder/verlauf_tiefer.gif");;
BORDER-BOTTOM-WIDTH: 1px;
PADDING-BOTTOM: 5px;
WIDTH: 123px;
COLOR: #3333FF;
LINE-HEIGHT: 1em;
PADDING-TOP: 5px;
HEIGHT: auto;
Max-height: 6 em;
BORDER-RIGHT-WIDTH: 1px;
text-align:center;
overflow: visible;
}
.menu UL UL A:visited {
BORDER-TOP-WIDTH: 0px;
BORDER-LEFT-WIDTH: 1px;
BACKGROUND: url("../Bilder/verlauf_tiefer.gif");
BORDER-BOTTOM-WIDTH: 1px;
PADDING-BOTTOM: 5px;
WIDTH: 123px;
COLOR: #3333FF;
LINE-HEIGHT: 1em;
PADDING-TOP: 5px;
text-align:center;
HEIGHT: auto;
BORDER-RIGHT-WIDTH: 1px;
overflow:visible;
}
* HTML .menu UL UL A {
WIDTH: 118px
}
* HTML .menu UL UL A:visited {
WIDTH: 118px
}
.menu A:hover {
BACKGROUND: url("../Bilder/verlauf_grau2.gif");
COLOR: red;
}
.menu UL UL A:hover {
BACKGROUND: url("../Bilder/verlauf_grau2.gif");
COLOR: red;
}
.menu :hover > A {
BACKGROUND: url("../Bilder/verlauf_grau2.gif");
COLOR: red;
}
.menu UL UL :hover > A {
BACKGROUND: url("../Bilder/verlauf_grau2.gif");
COLOR: red;
}
.menu UL LI:hover UL {
VISIBILITY: visible
}
.menu UL A:hover UL {
VISIBILITY: visible
}
.menu UL :hover UL UL {
VISIBILITY: hidden
}
.menu UL :hover UL :hover UL {
VISIBILITY: visible
}
/* #######################################################################*/
/* Nachtrag momentane Position auf rot setzen*/
A.current
{
color:red;
}
.menu Ul Ul A.red
{
color:red;
}
/* ####################################################################################################
######################################################################################################*/
/* Navigatoins-Formatierung*/
body
{
background: url("../Bilder/hintergrund.jpg") repeat; padding: 10px 0;
text-align:center;
margin: 0, auto;
}
#header
{
position: static;
background-image: url(../Bilder/hintergrund.jpg);
min-height:7.3em;
height:auto;
top:0px;
font-family: "Arial Narrow", Arial, sans-serif;
width: 98%;
max-width: 870px;
text-align: center;
margin-top:0em;
margin-right: auto;
margin-left: auto;
padding-top: 1em;
padding-right: 0em;
padding-left: 0em;
padding-bottom: 0.2em;
overflow:hidden; /*Problem, da Navigation mal da ist und mal nicht*/
}
#navigation
{
position: static;
background-image: url();
height:auto;
font-family: "Arial Unicode MS", Arial, sans-serif;
font-style:normal;
width: 95%;
max-width: 870px;
margin-right: auto;
margin-left: auto;
padding-right: 1em;
padding-left: 1em;
border-top: 1px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color:black;
top:7.2em;
text-align: center;
overflow: visible;
float: none;
z-index:1;
}
#main
{
position: static;
background-image: url(../Bilder/hintergrund.jpg);
height:auto;
min-height: 32.25em;
top:1.2em;
width: 95%;
max-width: 870px;
margin-top: 0em;
margin-right: auto;
margin-left: auto;
font-family: "Arial Unicode MS", Arial, sans-serif;
text-align: justify;
overflow:auto;
padding-bottom: 1em;
padding-left:1em;
padding-right:1em;
margin-bottom:0em;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color:black;
overflow: hidden;
}
#footer
{
bottom: 0.2em;
position:relative;
background-image: url(../Bilder/hintergrund.jpg);
background-repeat:repeat;
font-family: "Arial Unicode MS", Arial, sans-serif;
text-align: left;
height:3em;
width: 95%;
max-width: 870px;
margin-left:auto;
margin-right:auto;;
padding-top:1em;
padding-left: 1em;
padding-right: 1em;
overflow: hidden;
border-top: 2px;
border-style: solid;
border-color: black;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
float:none;
clear:left;
z-index:auto;
}
body
{
}
/*Formatierungen für Block Elemente*/
p.center
{
padding-top: 0.5em;
padding-bottom:1em;
text-align: center;
}
h1.red
{
padding-top: 0.5em;
margin-bottom:0.5em;
text-align: center;
font-size: 150%;
color: red;
}
h2
{
padding-top: 1em;
margin-bottom:1em;
text-align: center;
}
h2.blue
{
padding-top: 1em;
margin-bottom:1em;
text-align: center;
color: #3333FF;
}
h3
{
padding-top: 0.25em;
margin-bottom:0.25em;
text-align: center;
}
h3.blue
{
padding-top: 1.5em;
margin-bottom:0em;
text-align: center;
color: #3333FF;
}
h3.left
{
padding-top: 1em;
margin-bottom:1em;
text-align: left;
}
h4
{
padding-top: 1em;
margin-bottom:1em;
text-align: center;
}
h4.left
{
padding-top: 1em;
margin-bottom:1em;
text-align: left;
}
/* Noch was*/
html {margin-right: -4px;}
Aber nicht unter dem IE 6.0
Kann mir jemand der Spezialisten sagen, wieso nicht.
Habe dem IE extra gesagt, das er im Falle des IE 6.0 Tabellen basteln soll. Aber alles hängt doof in einer Ecke rum, die Ganze Formatierung sieht unter dem IE 6.0 zum Brechen aus.
Habe die 3 Grafiken, auf die ich in der Css-Datei verweise, hochgeladen. Den Hintergrund habe ich weggelassen. Er ist kein Problem.
Geändert von Tumperli (15.06.2008 um 22:41 Uhr) Grund: mal in eine code-box gepackt ;-)
Lieber Thomas
Danke dir für die Code -Box
Habe ich gar nicht dran gedacht. Mea Culpa!!
Frage: Kann dakeiner was zu sagen, weil Der Code zu lang und unübersichtlich ist?
Falls ja, versuch ich gern, dass kürzer zu machen.
Ich habe momentan leider keinen IE6 mehr zum Testen.
Aber diese ganzen If-Anweisungen verstehe ich nicht. Warum denn Tables?
Der IE 6 kann genauso CSS wie jeder andere Browser, von wenigen Bugs mal abgesehen.
Also:
Schmeiß mal alles raus was mit conditional Comments zu tun hat. Sowohl für den IE6 als auch den IE7.
Dann lösche ebenfalls alle * html - Angaben.
Wenn dann noch Unterschiede sind, muss man sehen, woran das liegt.
Poste dann am besten einen Link zur HP, falls diese online ist.
Dein CSS-Code ist ziemlich umständlich und deshalb unübersichtlich. Schreibe mal alles was überall gleich ist (z.B. font-family) einmal in den Body. Das schlägt dann automatisch überall durch.
Ansonsten sieh mal hier nach, was du noch alles zusammenfassen und vereinfachen kannst. Verwende auch besser durchgehend Kleinschreibweise.
Solche Dinge sind unnötig, weils es Standardwerte sind, oder es diese Angaben nicht gibt. Die kannst du löschen:
Wenn du eine Ausklapp-Navi willst, dann halte dich an diese Anleitung und verwende die csshover.htcCode:HEIGHT: auto; padding-right: 0em; padding-left: 0em; margin-top:0em; float: none;
Danke für die Antwort, werde machen, was Du vorgeschlagen hast und dann weitersehen.
Dauert 2 Tage, glaube ich.
Problem ist allerdings, dass das Menü auch für den IE komplett ohne Jscript ffunktionieren soll.
Geändert von Tumperli (19.06.2008 um 20:38 Uhr)
Erstmal räume grundlegend dein XHTML und CSS auf - bei XHTML ist es auch nötig, alle Elemente klein zu schreiben (und nicht GROSS oder gemischt).
Dann schau dir nochmal genau die Menüs an:
http://www.cssplay.co.uk/menus/index.html
@sejuma:
Die mit CC versteckten Tabellen braucht man für ein aufklappbares Menü, das im IE6 ohne JS funktionieren soll (siehe Stu Nichols).
“My software never has bugs. It just develops random features ...”
» DevShack - die Website des freien Webentwicklers Boris
Zur Verteidigung
Ich habe ja kein strict XHTML deklariert, daher habe ich die Schreibweise so verhunzt - ich gebe ja zu, dass das nicht fein ist. Dumm ist allerdings, das auf den Seiten einiger CSS Gurus Code heruntergeladen werden kann, der groß geschrieben ist, obwohl strict xhtml deklariert wird und bei einigen dieser gurus ist es genauso durcheinander wie bei mir. Auf der Seite von Dirk Jesse (yaml) ist oder ??war?? alles, was man da runter laden kann, groß geschrieben. Ich habe ihn gefragt, warum. Er sagte, es sei wurscht - da der Doofnload-Interpreter wohl mache, was er wolle.
Trotzdem, danke Euch für die Stellungnahme, morgen abend werd ich wohl was Sauberes hier reinstellen können, ich meine jetzt in Bezug auf Übersichtlichkeit und dergleichen.
Das die ConComments von mir den JavaScript-Spaß abstellen sollen, ist klar. Richtig ist auch, dass ich mir Anregungen dazu aus dem Netz geholt hab, ich glaube, es war sogar die Seite, die du verlinkst. Ich schau da noch mal rein. Danke fürs Erste herzlichst.
Tumperli
Geändert von Tumperli (21.06.2008 um 18:20 Uhr) Grund: Ich hasse Rechtschreibfehler, die ich verursache
Ich kenn nur Dirk Hesse, und bei dem ist alles sauber: http://www.dirkhesse.com/index.php
Bei Stu Nichols im übrigen ebenso. Alle anderen, die sich "Guru" nennen und so einen Huntz zum Download anbieten, sind für mich keine Gurus.
“My software never has bugs. It just develops random features ...”
» DevShack - die Website des freien Webentwicklers Boris
Hallo,
also ich nutze auch die Sachen von Dirk Jesse und soweit ich mich erinnere funktionieren die auch immer tadellos.
Grossbuchstaben im Quellcode gab es dort auch noch nie!
Klar, ich denk mir das aus, weil ich Langeweile habe.
Ev. hat Herr Jesse den Fehler auch behoben, ich habe ihn wie gesagt darauf angesprochen, per Email.
Ich glaube nicht das er zugriff auf meine Webseiten hat. Die schon ca. 1 Jahr online sind.Ev. hat Herr Jesse den Fehler auch behoben,
Außerdem hatte er ja auch keine bestimmte Antwort.#
Naja, war ja auch nur ne Feststellung die eigentlich auf Boris Aussage bezogen war.da der Doofnload-Interpreter wohl mache, was er wolle
Hallo noch mal,
dein Problem mit dem IE6, kommt durch die CC. Löscht du die weg funktionert es fast richtig im IE6!
Das Problem ist das du bei den ersten 3 Links als CC jeweils eine Tabelle mit ner Zeile und einer Zelle beginnst aber die 3 Tabellen nur einmal schließt und dann auch nur eine Zelle. Dieser schließende Teil kommt auch erst nach mehreren Listenpunkten und sogar mehreren Menüpunkten!
Das heißt das du mit der Aktion das halbe Menü verschluckt hast. Dann geht mal eins, bis du wieder mit den CC anfängst.
Der einzige Menüpunkt der mit CC fast richtig angewendet ist, ist beim Impressum. Der richtige Part ist hier der CC nach dem </ul>.
Du willst ja nur die Untermenüpunkte mit Tabelle darstellen weil die wohl nicht richtig in dem alten Browsern dargestellt werden können. Deswegen sind die CC bei den ersten 3 Menüpunkten auch völlig deplaziert. Nötig sind sie nur bei den Klappmenüpunkten.
Meine Empfehlung?!
Wenn du nicht noch Tage basteln willst, geh zu Stu Nichols und schau dir die Menüs noch einmal an. Die funktionieren auch fast alle mit dem IE6. Dort kannst du dir den Quelltext anschauen und vergleichen.
Boris und sejuma haben recht, dein Quellcode und vor allem das CSS ist sehr aufgebläht und unübersichtlich.
Das was über <head> steht muß unter <head>
und das hier,HTML-Code:<link href="css/style.css" rel="stylesheet" type="text/css"/> <!--/that is my Style-Shit!--> <link rel="stylesheet" media="print" type="text/css" href="css/print.css" /> <!--/that is my Print-Shit!--> <HEAD>
macht es auch nicht einfacher. Das Ende gibts nur einmal, ausser bei ner Wurscht - die hat 2...HTML-Code:</div></BODY></HTML> <div id="footer" align="center-"><table width="100%"><tr><thttp://www.traum-projekt.com/forum/images/smilies/cool.gif 8)d algin=left>Kontakt</a></td> <td align=right>Ein Test</a</td></tr></table> </div> </BODY></HTML>
Und nicht wieder überbewerten! Wir sollten de Fehler suchen!
Geändert von zulujaner (22.06.2008 um 05:58 Uhr)
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
