Nach Validierung noch restliche nicht lösbare Probleme

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
nachdem ich nun die Webpage validiert habe stehe ich vor ein Paar Problemen die ich nicht gelöst bekomme, liegt teilweise vielleicht auch an gewissen IE Bugs.
Hier mal mein Quellcode:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hella Tarara - travel advice + white tower tours</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DESCRIPTION" content="Hella Tarara">
<meta name="AUTHOR" content="büro:exit">
<meta name="COPYRIGHT" content="büro:exit">
<meta name="GENERATOR" content="txteditor">
<meta name="ROBOTS" content="all">
<link href="css/basics.css" rel="stylesheet" type="text/css" >
<link href="css/divs.css" rel="stylesheet" type="text/css" >
<link href="css/menue.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="js/uhr.js"></script>
<script type="text/javascript" src="js/pointclick.js"></script>
</head>
<body id="standartbody">
<!-- container Logo -->
<div id="logo"><img src="pics/talogo.gif" alt="Home"></div>
<!-- container Uhr -->
<div id="uhr"><script type="JavaScript">
<!--
    document.write(customDateString(new Date()));
//-->
</script></div>
<!-- container blauer Verlauf -->
<div id="blauerverlauf"><img src="pics/transgif.gif" width="1" height="1" alt=""></div>
<!-- container Titel dunkel blau -->
<div id="titeldunklerblau"><img src="pics/transgif.gif" width="1" height="1" alt=""></div>
<!-- container Titel -->
<div id="titelhellerblau"><h1>Hella Tarara - travel advice</h1></div>
<!-- container ockerfarbener Verlauf links -->
<div id="ockerverlauf">
<!-- container Menue -->
<div>
<ul>
<li class="rahmenobenblack rahmenunten"><a class="navlist" href="#">White Tower Tours</a></li>
<li class="navlistnoactive">Leistungen/Angebote</li>
<li><a class="pointmenue" href="#programme" onclick="aktivieren(this.href)"><span class="submenue">Programme</span></a></li>
<li><a class="pointmenue" href="#service" onclick="aktivieren(this.href)"><span class="submenue">V.I.P.-Service</span></a></li>
<li><a class="pointmenue" href="#insentives" onclick="aktivieren(this.href)"><span class="submenue">Insentives</span></a></li>
<li class="rahmenoben rahmenunten"><a class="navlist" href="#">Bildgallerie</a></li>
<li class="rahmenunten"><a class="navlist" href="#">Neuer Link</a></li>
<li class="navlistempty"><img src="pics/transgif.gif" width="1" height="19px" alt=""></li>
<li class="navlistempty"><img src="pics/transgif.gif" width="1" height="19px" alt=""></li>
<li class="rahmenoben rahmenuntenblack"><a class="navlist" href="#">Kontakt&nbsp;/&nbsp;Impressum</a></li>
</ul>
</div>
<!-- ende container Menue -->
</div>
<!-- container ockerfarbener Verlauf rechts -->
<div id="ockerverlaufrechts"></div>
<!-- container Bild -->
<div id="bildindex"><img src="pics/transgif.gif" width="1" height="1" alt=""></div>
<!-- container Content -->
<div id="content"><div class="inhalt">
Guten Tag und herzlich Willkommen!<br>
Wir freuen uns Über Ihren Besuch!<br>
<br>
Über unsere besonderen Serviceleistungen informieren wir Sie hier ganz aktuell:<br>
<br>
Der Schwerpunkt unserer Präsenz liegt auf individueller Programmerstellung für<br>
first class-Incentives, Special Events und besondere Privatreisen.<br>
Dabei sind Reiseleitung, Betreuung vor Ort, Organisation und  Durchführung Ihrer
Reise ebenfalls in unserer Hand.
Dabei können wir auf 40 Jahre Erfahrung mit erfolgreichen Aktivitäten weltweit zurück
greifen.<br>
<br>
Gerne würden wir auch für Sie tätig werden.<br>
<br>
Bitte kontaktieren Sie uns doch einfach mal ganz unverbindlich!<br>
</div></div>
<!-- Ende -->
</body>
</html>
Basics.css
Code: 
#standartbody
{
background:#f4f0ea; color:inherit; font-family: verdana, sans-serif; font-size:12px;
}
#intro
{
background:#3989C2; color:inherit; font-family: verdana, sans-serif;
}
.inhalt
{
font-family: verdana, sans-serif; font-size: 12px; line-height:23px; color:#000000; background:inherit; padding:0px; margin:20px 30px 20px 0px;
}
h1
{
font-family: verdana, sans-serif; font-size: 12px; font-weight:normal; color:#ffffff; background:inherit; margin:5px 0px 0px 5px; padding:0px;
}
Divs.css
Code: 
#logo
 {
  position:absolute; left:0px; top:0px; height:84px; width:210px;;
 }
#uhr
 {
 position:absolute; left:300px; top:0px; height:84px; width:50px;
 }
#blauerverlauf
 {
 position:absolute; left:210px; top:0px; height:84px; width:100%; margin:0px; padding:0px; background-image: url(../pics/blauverlauf.gif); background-repeat:repeat-x;
 }
#titeldunklerblau
 {
 position:absolute; left:0px; top:84px; height:25px; width:100%; margin:0px; padding:0px; color:inherit; background:#1F4B68;
 }
#titelhellerblau
 {
 position:absolute; left:220px; top:84px; height:25px; width:547px; background-image: url(../pics/blauverlaufdunkel.gif); background-repeat:repeat-x;
 }
#ockerverlauf
 {
 position:absolute; left:0px; top:109px; width:220px; height:100%; margin:0px; padding:0px;  background-image: url(../pics/ockerverlauf_gross.gif); background-repeat:repeat-x;
 }
#ockerverlaufrechts
 {
 position:absolute; left:767px; top:109px; height:100%; width:100%; margin:0px; padding:0px;  border-width:1px 0px 0px 0px; border-style:solid; border-color:#000000; background-image: url(../pics/ockerverlauf.gif); background-repeat:repeat-x;
 }
#bildindex
 {
 position:absolute; left:220px; top:109px; height:165px; width:545px; background-image: url(../pics/eisberge.jpg); background-repeat:no-repeat; border-width:0px 1px; border-style:solid; border-color:#000000;
 }
#bildreiseorganistaion
 {
 position:absolute; left:220px; top:109px; height:174px; width:545px;  background-image: url(../pics/eaersrock.jpg); background-repeat:no-repeat;
 }
#content
 {
 position:absolute; left:220px; top:274px; width:545px; height:100%; padding:0px; margin:0px; color:inherit; background:#ffffff; border-width:1px 1px 1px 1px; border-style:solid; border-color:#000000;
 }
#language
{
 position:absolute;
 width:790px; left:50%; margin-left:-395px; /* negative HŠlfte von width: 790px */
 height:450px; top:50%; margin-top:-225px; /* negative HŠlfte von width: 450px */
}
menue.css
Code: 
ul {position:relative;
 	   top:0px;
	   left:0px;
 	   margin:0px;
            padding:0px;
 	   list-style-type:none;
}

li span.submenue {  padding:0px 0px 0px 35px; }
.rahmenoben {border-top:1px solid #4f4f4f;}
.rahmenunten {border-bottom:1px solid #4f4f4f;}
.rahmenobenblack {border-top:1px solid #000000;}
.rahmenuntenblack {border-bottom:1px solid #000000;}

.listempty {width:198px;
	   margin:0px;
            color:#4f4f4f;
            background:inherit;}

.navlistnoactive {
		 width:198px;
		 line-height:23px;
        		 margin:0px;
                  padding:0px 0px 0px 22px;
         	 color:#4f4f4f;
                  background:inherit;
         	 text-decoration:none;
         	 font-family: Verdana, sans-serif;
        		 font-size: 11px;}

a.navlist:link, a.navlist:visited {
				  width:198px;
			          line-height:23px;
                                   display: block;
	       			  margin:0px;
                                   padding:0px 0px 0px 22px;
                		          color:#4f4f4f;
                                   background:inherit;
                			  text-decoration:none;
                			  font-family: Verdana, sans-serif;
                			  font-size: 11px;
                                   }

a.navlist:hover, a.navlist:active {
                                   width:198px;
				  line-height:23px;
                                   display: block;
                                   margin:0px;
                                   padding:0px 0px 0px 22px;
                 		  color:#ffffff;
                                   background:inherit;
                 	 	  text-decoration:none;
                 		  font-family: Verdana, sans-serif;
                 		  font-size: 11px;}

a.pointmenue,a.clicked{
	  	   width:198px;
     		   line-height:23px;
      		   display:block;
     		   margin:0px;
    		   color:#4f4f4f;
                    background:inherit;
    		   text-decoration:none;
     		   font-family: Verdana, sans-serif;
     		   font-size: 11px;}

a.pointmenue:hover,a.clicked{background-image:url(../pics/point.gif);
			    width:198px;
     			    line-height:23px;
                             display:block;
     			    margin:0px;
    			    color:#ffffff;
                             background:inherit;
    			    text-decoration:none;
     			    font-family: Verdana, sans-serif;
     			    font-size: 11px;}


a.languagemenu:link, a.language.visited{
			         	color:#ffffff;
                                         background:inherit;
					text-decoration:none;
     				    	font-family: Verdana, sans-serif;
     			   		font-size: 11px;
}
a.languagemenu:hover, a.language.active{
					color:#ffffff;
                                         background:inherit;
					text-decoration:none;
     				    	font-family: Verdana, sans-serif;
     			   		font-size: 11px;
}
pointclick.js
Code: 
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(pointmenue|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'pointmenue';
                        }
                }
        }
}
uhr.js
Code: 
function Datum(n) {
    this.length = n
    return this
}
monthNames = new Datum(12)
monthNames[1] = "Januar"
monthNames[2] = "Februar"
monthNames[3] = "März"
monthNames[4] = "April"
monthNames[5] = "Mai"
monthNames[6] = "Juni"
monthNames[7] = "July"
monthNames[8] = "August"
monthNames[9] = "September"
monthNames[10] = "Oktober"
monthNames[11] = "November"
monthNames[12] = "Dezember"

dayNames = new Datum(7)
dayNames[1] = "Sonntag"
dayNames[2] = "Montag"
dayNames[3] = "Dienstag"
dayNames[4] = "Mittwoch"
dayNames[5] = "Donnerstag"
dayNames[6] = "Freitag"
dayNames[7] = "Samstag"
function customDateString(oneDate) {
    var theDay = dayNames[oneDate.getDay() + 1]
    var theMonth = monthNames[oneDate.getMonth() + 1]
    var theYear = oneDate.getYear()
    if(theYear<1000) theYear+=1900;
        var theMinutes = oneDate.getMinutes();
    if (theMinutes < 10) theMinutes = "0" + theMinutes;
        return theDay + " " + oneDate.getDate() + "." + theMonth + " " + oneDate.getHours() + ":" + theMinutes + " Uhr";
}

Probleme bereite mir das die beiden Balken oben nicht wie eigentlich gecodet 100% lang werden, im IE der Contentbereich nicht bis zum Randgeht obwohl er auf 100% steht (ich weiß das das der IE anderst berechnet nur wie löst man solch ein Problem?) und das Javascript wird überhaupt nicht angezeigt obwohl es funktioniert.

Hoffe mir kann jemand helfen.

Gruß
DirtyWorld
 
  • Balkenkänge: dem body -Element fehlen die auf 0 gesetzten Angaben zu margin und padding.

  • Uhr: im Attribut type= muß 'text/javascript' notiert werden:
Code: 
<div id="uhr"><script type="JavaScript">
<!--
    document.write(customDateString(new Date()));
//-->
</script></div>
 
Hi,
also die Korrigierung der Syntaxfehler brachte leider nur eine Veränderung bei dem orangefarbigen Balken mit sich.
Hast du vielleicht noch ein paar Ideen woran der Rest das liegen könnte?
Ich bekomme hier bald Zustände :) .

Gruß
 
Zuletzt bearbeitet:
Wenn du mit dem Rest die vertikale Ausdehnung der DIVs meinst, dann füge in der basics.css mal folgende Zeilen ein:

Code: 
body
{
height: 100%;
margin: 0;
padding: 0;
}
Problem: die nebeneinander liegenden DIVs #ockerfarbe und #content sind unterschiedlich weit von oben absolut positioniert, und um diese Differenz von 165px verschiebt sich der untere Rand vom DIV#content (!)


[editpost]

Kannst du die Seite mal online stellen, damit man sich ein Gesamtbild von der Seite machen kann? Ohne Hintergrundgrafiken lässt sich das Problem nur schwer erkennen.
 
Zuletzt bearbeitet von einem Moderator:
Das könnte mir helfen bei meinen Prob im Contentbereich auf dem IE, nur leider funktioniert das nicht.
Also ich habe ein Gif mit weißer Farbe abgespeichert und dann auf repeat-y 100% 0; gesetzt.Kein repeat-X da ich das Gif so breit wie das Div ist abgespeichgert habe.
Habe ich da irgendwas übersehen? Also ich denke, wenn ich jetzt den IE Box-Moddeling Bug richtig verstanden habe, trifft auf dieses problem nicht zu. Aber mein englisch ist auch nicht grad das beste :) .
 
Da hast du wohl was falsch verstanden.

In dem Artikel wird eine 'grafische' Lösung für ein mehrspaltiges Layout mit gleichen Spaltenhöhen vorgestellt.

In deinem Fall sind das die Spalten #ockerverlauf, #content, #ockerverlaufrechts.

Diese drei DIVs werden in einem übergeordneten Parent-DIV eingebettet, das mit einer in Y-Richtung (= vertikal) zu wiederholenden Hintergrundgrafik formatiert wird, die die Spalten (z.B. farblich abgesetzt) simuliert.
 
Habe inzwischen auch eine deutsche übersetzung gefunden. Hatte einige Stellen etwas falsch verstanden gehabt. Aber das hilft mir ja eigentlich nur bedingt weiter. Den das mit dem Contentbereich könnte ich unter Umständen als Zweitlösung auch einfach mit mehreren <br>-tags oder einem 100% Inhaltsdiv (liegt über dem Content) lösen, wäre zwar nicht das gleiche wie zum Bildschrimrand, aber besser als jetzt.
Den das hauptproblem sind die Divs mit den Hintergründen die bis zum Bildschrimrand rechtsgehen sollen dies aber nicht tuen, und das Div mit dem JS welches nicht angezeigt wird.
Falls du hierzu noch ein paar Ideen zur Problemlösung hast wäre ich echt dankbar.
 
Den Grund für das nicht-Anzeigen des Scripts und die Fehlerbehebung habe ich dir doch schon in meinem ersten Posting genannt ;)

Der Link zur Test-Seite führt neuerdings ins 'Daten-Nirvana' (!)

http://www.janstieler.de/tarara/index.html hat gesagt.:
Status: 404 Not found Content-Type: text/html
Error message

The named page does not exist (
Zum Vergrößern anklicken....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück