Webseite wird falsch dargestellt

lmb · 23 Januar 2009

Hallo liebe Community,
ich habe das Problem, dass die Webseite verzogen dargestellt wird, könnt ihr mir helfen?
Hier der Link, Quelltext seht ihr ja sowieso ;-)
http://www.staubwolke-fischeln.de
MfG
Der Lukas

Efchen · 23 Januar 2009

Das fängt damit an, dass Du keinen Doctype hast. Dadurch schaltet der IE in den Quirks Mode und arbeitet mit einem falschen Box Model.

Es geht weiter, dass Du HTML & CSS bunt mischst, z.B. Tabellen fürs Layout missbrauchst. HTML ist nur für die Semantik da, CSS nur für die Optik.

Auch durch den fehlenden Doctype hast Du nohc 43 Fehler in Deinem HTML-Code: [Invalid] Markup Validation of http://www.staubwolke-fischeln.de/new/ - W3C Markup Validator

Und wozu 90% des Codes JavaScripte sind, mag ich gar nicht nachschauen.

Man könnte noch viel an dem Code aussetzen, was Dir die Arbeit unnötig schwer macht, aber ich denke, bei Dir fehlt es einfach am Grundwissen, das Du jetzt erstmal lernen musst, bevor das was wird.

lmb · 23 Januar 2009

Ups, ja.
Es ist nichts grosses, eine kleine Vereinswebseite.
Ich möchte ienfach nur, dass der Inhalt rechts neben der Navigation und nicht dahinter (!) ist. Ich kenne die Grundlagen von HTML, von PHP einigermassen.
Sind denn nicht viele Webseiten mit Tables geschrieben?
Kennt jemand eine andere Lösung für eine "Rounded Corner Box"?

Efchen · 23 Januar 2009

lmb schrieb:
Es ist nichts grosses, eine kleine Vereinswebseite.

Und das soll was bedeuten? Dass der Verein nicht wichtig ist? Dass man da Fehler einbauen kann? Dass es unwichtig ist, wenn jemand, der sich für den Verein interessiert, die Site aus irgendeinem Grund nicht ansehen kann?

Ich glaube nicht, dass Du das so siehst und der Verein vermutlich noch weniger.

Ich möchte ienfach nur, dass der Inhalt rechts neben der Navigation und nicht dahinter (!) ist.

Das ist bei mir der Fall. Mach doch einfach Deinen Viewport größer ;-)
Die Navigation bekommt in vernünftigem Code ein "float:left" und schon ist sie daneben. Der Inhalt kriegt wahrscheinlich noch ein margin-left in der Breite der Navigation und alles ist klar. Aber eben nur, wenn die Basis aus HTML valide und semantisch korrekt ist.
Und ohne Doctype geht das sowieso nicht.

Ich kenne die Grundlagen von HTML einigermassen.

Sei mir nicht böse, aber ich glaube, Du überschätzt Dich da "ein wenig".

Sind denn nicht viele Webseiten mit Tables geschrieben?

Und das soll was heißen? Nicht alles, was irgendwer macht, muss auch richtig oder gut sein. Tabellen sind kein geeignetes Mittel für das Layout. Schon seit 10 Jahren nicht mehr. Du hast recht, es gibt zahlreiche Websites mit Tabellen, die halten sich wie das berühmte kleine gallische Dorf...das heißt aber nicht, dass das eine sinnvolle Vorgehensweise ist. Und im Sinne von HTML ist es schlichtweg falsch.
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Hilfe bekommst Du hier, ist nicht so, dass man Dich im Regen stehen lässt. Aber es bringt mir und Dir auch nichts, wenn ich Dich belüge und Dir Dinge beibringe, die man in den 1990er Jahren so machen musste, die aber heute glücklicherweise überholt sind und zudem eigentlich eher nur schaden.

lmb · 23 Januar 2009

Das heisst, es muss nicht hyperperfekt sein.
Zur Navigation etc.:
Geh mal auf zum Beispiel Gästebuch oder Galerie - Fotos
Zu Tabellen:
Welche Alternativen gibt es denn?
Frames will ich und mache ich nicht, und es soll einfach verständlich gehalten werden, da auch andere Vereinsmitglieder, die sich noch nie mit HTML auseinandergestzt haben, manche Sachen einbringen.

Efchen · 23 Januar 2009

lmb schrieb:
Das heisst, es muss nicht hyperperfekt sein.

Aber es ist ja noch nichtmal gut. Sorry - bei der Aussage kann ich nicht anders antworten, immerhin will ich ja ehrlich sein :-)

Geh mal auf zum Beispiel Gästebuch oder Galerie - Fotos

Da seh ich gar nichts mehr.

Zu Tabellen:
Welche Alternativen gibt es denn?

Hast Du den Artikel gelesen, den ich verlinkt habe?

Eigentlich gibt es keine Alternative, so wie Du sie Dir vorstellst. Es kommt auf die Bedeutung des Inhalts an. HTML benutzt man zur logischen Auszeichnung des Inhalts. Man markiert Überschriften, setzt Textabsätze usw. Wenn man tabellarische Daten hat (z.B. Fußball-Liga), dann zeichnet man die mit dem Element <table> aus. Nichts, was Du mit HTML macht, machst Du für die Optik.

Die wiederum machst Du mit CSS. Alles, was Layout oder Design angeht, macht man mit CSS.

Schon auf der Startseite gibts ja gar keinen Grund, Tabellen überhaupt zu verwenden.

Frames will ich und mache ich nicht

Und das ist auch gut so, denn Frames haben für die Nutzer nur Nachteile.

und es soll einfach verständlich gehalten werden, da auch andere Vereinsmitglieder, die sich noch nie mit HTML auseinandergestzt haben, manche Sachen einbringen.

Du meinst, die editieren ihre Inhalte in den HTML-Dateien? Gerade dann solltest Du kein Layout in diesen Dateien unterbringen (z.B. in Form von Tabellen). Denn HTML in seiner eigentlichen Form ist an sich so einfach, dass es sogar ein Nicht-Webmaster versteht. Die meisten, die auf CSS-Design umstellen, attestieren HTML eine Komplexität, die es gar nicht hat. Sie denken zu weit, sie erwarten Dinge von HTML, die es gar nicht können soll.

Wenn man das begriffen hat, wozu HTML eigentlich da ist, und dann Inhalt und Layout konsequent voneinander trennt, wird der Aufbau einer Website zum Kinderspiel. Sogar Leute, die keine Ahnung haben, können ihre Inhalte recht einfach einbauen, denn in den HTML-Dateien stehen dann nur die Inhalte aber keinerlei Layout-Informationen.

Wenn Dein Einwand mit den Anderen, die Inhalte beisteuern sollen, anders gemeint war, dann habe ich den Bezug zu meinem Einwand nicht verstanden.

Schönes Wochenende,
-Efchen

lmb · 23 Januar 2009

ja, so ist es gemeint.
allerdings benutzen die wysiwyg
den artikel habe ich gelesen.
ich schreibe mal kurz mein grundgerüst:
index.php

PHP:

<?php
  if($page=="")
    {
    include ("home.php")
    }
  elseif ($page="berichte")
    {
    include ("berichte.php")
    }
  else
    {
    include ("404.php")
    }

  ?>

berichte.php

HTML:

<html>
<head>
<title>Berichte - Staubwolke Fischeln</title>
</head>
<body>
<table width="100%" height="100%">
<td>
<?php include ("navi.php") ?>
</td>
<td>
<?php include ("berichte.html") ?>
</td>
</table>
</body>
</html>

berichte.html

HTML:

Hier einige Berichte blablabla

navi.html im nächsten post ;Jump
.

lmb · 23 Januar 2009

navi.html teil1

HTML:

<style ="text/css">
#navlist
{
padding: 1px;
margin-left: 0;
font: bold 13px monospace;
background: #52A00C;
width: 100px;
color: #000066; }

#navlist li
{
list-style: none;
margin: 0px;
border-bottom: 1px #004080 dotted;
text-align: left;
}
#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.5em;
text-decoration: none;
}

#navlist li a:link { color: #000000; }
#navlist li a:visited { color: #000000; }

#navlist li a:hover
{
color: #000080;
background: white;
}
#tooltips a:link { color: #ffffff; }
#tooltips a:visited { color: #ffffff; }
#tooltips a:active { color: #ffffff; }
#tooltips a:hover { background-color: #808080; }
b.round,b.roundfill{display:block}
b.round *{
    display:table-row;
    height: 1px;
    line-height:1px;
    font-size: 1px;
    overflow:visible;
    border-style:solid;
    border-width: 0 1px}

b.corners,b.fill{display:block}
b.corners *{display:block;height: 1px;line-height:1px;font-size: 1px;
    overflow:hidden;border-style:solid;border-width: 0 1px}

b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}

b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

* { padding:0; margin:0;}
body { background-image: url('http://www.staubwolke-fischeln.de/new/background.gif'); font-family: Arial,sans-serif;}
div#box {
        position: absolute;
        width: 100px;
        padding: 20px;
        margin-top: 50px;
        margin-left: 50px;
        float: left;
        background: #52A00C;}
h1 { color: #444; margin-bottom: 10px;}

</style>
<script language="JavaScript">
<!--
function zeige_verstecke( span ) {
displayType = ( document.getElementById( span ).style.display == 'none'
) ? 'block' : 'none';
document.getElementById( span ).style.display = displayType;
}
//-->
</script>

<script language="JavaScript">
//<!--
var RoundedCornersOk=(document.getElementById && document.createElement && Array.prototype.push);
var RoundedCornersCss=false;

String.prototype.find=function(what){
return(this.indexOf(what)>=0 ? true : false);
}

var oldonload=window.onload;
if(typeof(RoundedCornersLoad)!='function') RoundedCornersLoad=function(){};
if(typeof(oldonload)=='function')
    window.onload=function(){oldonload();AddCss();RoundedCornersLoad()};
else window.onload=function(){AddCss();RoundedCornersLoad()};

function AddCss(){
RoundedCornersCss=true;
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","round.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

function RoundedCorners(selector,options){
if(RoundedCornersOk==false) return;
if(RoundedCornersCss==false) AddCss();
var i,v=selector.split(","),h=0;
if(options==null) options="";
if(options.find("fixed-height"))
    h=getElementsBySelector(v[0])[0].offsetHeight;
for(i=0;i<v.length;i++)
    Rounded(v[i],options);
if(options.find("height")) SameHeight(selector,h);
}

function Rounded(selector,options){
var i,top="",bottom="",v=new Array();
if(options!=""){
    options=options.replace("left","tl bl");
    options=options.replace("right","tr br");
    options=options.replace("top","tr tl");
    options=options.replace("bottom","br bl");
    options=options.replace("transparent","alias");
    if(options.find("tl")){
        top="both";
        if(!options.find("tr")) top="left";
        }
    else if(options.find("tr")) top="right";
    if(options.find("bl")){
        bottom="both";
        if(!options.find("br")) bottom="left";
        }
    else if(options.find("br")) bottom="right";
    }
if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}
v=getElementsBySelector(selector);
for(i=0;i<v.length;i++){
    FixIE(v[i]);
    if(top!="") AddTop(v[i],top,options);
    if(bottom!="") AddBottom(v[i],bottom,options);
    }
}

function AddTop(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
d.style.background=bk;
d.className="corners";
p=getPadding(el,"Top");
if(options.find("small")){
    d.style.marginBottom=(p-2)+"px";
    btype+="s"; lim=2;
    }
else if(options.find("big")){
    d.style.marginBottom=(p-10)+"px";
    btype+="b"; lim=8;
    }
else d.style.marginBottom=(p-5)+"px";
for(i=1;i<=lim;i++)
    d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingTop="0";
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,side,options){
var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;
d.style.marginLeft="-"+getPadding(el,"Left")+"px";
d.style.marginRight="-"+getPadding(el,"Right")+"px";
if(options.find("alias") || (color=getBk(el))=="transparent"){
    color="transparent";bk="transparent"; border=getParentBk(el);btype="t";
    }
else{
    bk=getParentBk(el); border=Mix(color,bk);
    }
d.style.background=bk;
d.className="corners";
p=getPadding(el,"Bottom");
if(options.find("small")){
    d.style.marginTop=(p-2)+"px";
    btype+="s"; lim=2;
    }
else if(options.find("big")){
    d.style.marginTop=(p-10)+"px";
    btype+="b"; lim=8;
    }
else d.style.marginTop=(p-5)+"px";
for(i=lim;i>0;i--)
    d.appendChild(CreateStrip(i,side,color,border,btype));
el.style.paddingBottom=0;
el.appendChild(d);
}

function CreateStrip(index,side,color,border,btype){
var x=CreateEl("b");
x.className=btype+index;
x.style.backgroundColor=color;
x.style.borderColor=border;
if(side=="left"){
    x.style.borderRightWidth="0";
    x.style.marginRight="0";
    }
else if(side=="right"){
    x.style.borderLeftWidth="0";
    x.style.marginLeft="0";
    }
return(x);
}

function CreateEl(x){
return(document.createElement(x));
}

function FixIE(el){
if(el.currentStyle!=null && el.currentStyle.hasLayout!=null && el.currentStyle.hasLayout==false)
    el.style.display="inline-block";
}

function SameHeight(selector,maxh){
var i,v=selector.split(","),t,j,els=[],gap;
for(i=0;i<v.length;i++){
    t=getElementsBySelector(v[i]);
    els=els.concat(t);
    }
for(i=0;i<els.length;i++){
    if(els[i].offsetHeight>maxh) maxh=els[i].offsetHeight;
    els[i].style.height="auto";
    }
for(i=0;i<els.length;i++){
    gap=maxh-els[i].offsetHeight;
    if(gap>0){
        t=CreateEl("b");t.className="fill";t.style.height=gap+"px";
        nc=els[i].lastChild;
        if(nc.className=="corners")
            els[i].insertBefore(t,nc);
        else els[i].appendChild(t);
        }
    }
}

function getElementsBySelector(selector){
var i,j,selid="",selclass="",tag=selector,tag2="",v2,k,f,a,s=[],objlist=[],c;
if(selector.find("#")){ //id selector like "tag#id"
    if(selector.find(" ")){  //descendant selector like "tag#id tag"
        s=selector.split(" ");
        var fs=s[0].split("#");
        if(fs.length==1) return(objlist);
        f=document.getElementById(fs[1]);
        if(f){
            v=f.getElementsByTagName(s[1]);
            for(i=0;i<v.length;i++) objlist.push(v[i]);
            }
        return(objlist);
        }
    else{
        s=selector.split("#");
        tag=s[0];
        selid=s[1];
        if(selid!=""){
            f=document.getElementById(selid);
            if(f) objlist.push(f);
            return(objlist);

            }
        }
    }
if(selector.find(".")){      //class selector like "tag.class"
    s=selector.split(".");
    tag=s[0];
    selclass=s[1];
    if(selclass.find(" ")){   //descendant selector like tag1.classname tag2
        s=selclass.split(" ");
        selclass=s[0];
        tag2=s[1];
        }
    }
var v=document.getElementsByTagName(tag);  // tag selector like "tag"
if(selclass==""){
    for(i=0;i<v.length;i++) objlist.push(v[i]);
    return(objlist);
    }
for(i=0;i<v.length;i++){
    c=v[i].className.split(" ");
    for(j=0;j<c.length;j++){
        if(c[j]==selclass){
            if(tag2=="") objlist.push(v[i]);
            else{
                v2=v[i].getElementsByTagName(tag2);
                for(k=0;k<v2.length;k++) objlist.push(v2[k]);
                }
            }
        }
    }
return(objlist);
}

function getParentBk(x){
var el=x.parentNode,c;
while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent")
    el=el.parentNode;
if(c=="transparent") c="http://www.staubwolke-fischeln.de/new/background.gif";
return(c);
}

lmb · 23 Januar 2009

navi.html teil2

HTML:

function getBk(x){
var c=getStyleProp(x,"backgroundColor");
if(c==null || c=="transparent" || c.find("rgba(0, 0, 0, 0)"))
    return("transparent");
if(c.find("rgb")) c=rgb2hex(c);
return(c);
}

function getPadding(x,side){
var p=getStyleProp(x,"padding"+side);
if(p==null || !p.find("px")) return(0);
return(parseInt(p));
}

function getStyleProp(x,prop){
if(x.currentStyle)
    return(x.currentStyle[prop]);
if(document.defaultView.getComputedStyle)
    return(document.defaultView.getComputedStyle(x,'')[prop]);
return(null);
}

function rgb2hex(value){
var hex="",v,h,i;
var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
var h=regexp.exec(value);
for(i=1;i<4;i++){
    v=parseInt(h[i]).toString(16);
    if(v.length==1) hex+="0"+v;
    else hex+=v;
    }
return("#"+hex);
}

function Mix(c1,c2){
var i,step1,step2,x,y,r=new Array(3);
if(c1.length==4)step1=1;
else step1=2;
if(c2.length==4) step2=1;
else step2=2;
for(i=0;i<3;i++){
    x=parseInt(c1.substr(1+step1*i,step1),16);
    if(step1==1) x=16*x+x;
    y=parseInt(c2.substr(1+step2*i,step2),16);
    if(step2==1) y=16*y+y;
    r[i]=Math.floor((x*50+y*50)/100);
    r[i]=r[i].toString(16);
    if(r[i].length==1) r[i]="0"+r[i];
    }
return("#"+r[0]+r[1]+r[2]);
}
//--></script>
<script type="text/javascript">
window.onload=function(){
RoundedCorners("div#box","big");
}
</script>
 <body background="http://www.staubwolke-fischeln.de/new/background.gif">
         <table width="100%" height="100%"><tr><div id="box">
 <div id="navcontainer">
 <ul id="navlist">
 <a href="http://www.staubwolke-fischeln.de/new"><img style="border: 0px solid ; width: 100px; height: 100px;" alt="logo" title="Home" src="http://www.staubwolke-fischeln.de/new/logo2.png"></a>
     <li><a href="http://www.staubwolke-fischeln.de/new/index.php">Home</a>
   </li>
     <li><a onclick="zeige_verstecke('team'); return false;" href="#">Team</a>
   </li>
       <span id="team" style="display: none">
        <li>
          <a href="http://www.staubwolke-fischeln.de/new/index.php?page=fahrer">&bull;&nbsp;Fahrer</a>
        </li>
        <li>
        <a href="http://www.staubwolke-fischeln.de/new/index.php?page=trainer">&bull;&nbsp;Trainer</a>
        </li>
          <li>
        <a href="http://www.staubwolke-fischeln.de/new/index.php?page=vorstand">&bull;&nbsp;Vorstand</a>
        </li>
       </span>
   <li>
   <a onclick="zeige_verstecke('aktuelles'); return false;" href="#">Aktuelles</a>
   </li>
        <span id="aktuelles" style="display: none">
        <li>
        <a  href="http://www.staubwolke-fischeln.de/new/index.php?page=termine">&bull;&nbsp;Termine</a>
        </li>
        <li>
        <a href="http://www.staubwolke-fischeln.de/new/index.php?page=training">&bull;&nbsp;Training</a>
        </li>
        <li>
        <a href="http://www.staubwolke-fischeln.de/new/index.php?page=wetter">&bull;&nbsp;Wetter</a>
        </li>
        </span>
     <li><a onclick="zeige_verstecke('galerie'); return false;" href="#">Galerie</a>
   </li>
        <span id="galerie" style="display: none">
        <li>
        <a  href="http://www.staubwolke-fischeln.de/new/index.php?page=bilder">&bull;&nbsp;Bilder</a>
        </li>
        <li>
        <a href="http://www.staubwolke-fischeln.de/new/index.php?page=videos">&bull;&nbsp;Videos</a>
        </li>
        </span>
     <li><a onclick="zeige_verstecke('events'); return false;" href="#">Events</a>
  </li>
       <span id="events" style="display: none">
       <li>
       <a  href="http://www.rad-net.de/modules.php?name=Ausschreibung&menuid=288">&bull;&nbsp;Rennen</a>
       </li>
       <li>
       <a href="http://www.rad-net.de/modules.php?name=Breitensport&menuid=287">&bull;&nbsp;RTF/CTF</a>
       </li>
       <li>
       <a href="http://www.staubwolke-fischeln.de/new/index.php?page=sonstige">&bull;&nbsp;Sonstige</a>
       </li>
       <li>
       <a href="http://www.staubwolke-fischeln.de/new/trainingslager.pdf">&bull;&nbsp;Trainingslager</a>
       </li>
       </span>
  <li>
  <a onclick="zeige_verstecke('sonstiges'); return false;" href="#">Sonstiges</a>
  </li>
       <span id="sonstiges" style="display: none">
       <li>
       <a  href="http://www.staubwolke-fischeln.de/new/index.php?page=formulare">&bull;&nbsp;Formulare</a>
       </li>
       <li>
       <a href="http://www.staubwolke-fischeln.de/new/index.php?page=links">&bull;&nbsp;Links</a>
       </li>
       <li>
       <a href="http://www.staubwolke-fischeln.de/new/index.php?page=spenden">&bull;&nbsp;Spenden</a>
       </li>
       </span>
  <li>
  <a href="http://www.staubwolke-fischeln.de/new/index.php?page=guestbook">G&auml;stebuch</a>
  </li>
 </ul>
 </div>
 </div>
 </div></tr></table>

Webseite wird falsch dargestellt

lmb

Neues Mitglied

Efchen

Guest

lmb

Neues Mitglied

Efchen

Guest

lmb

Neues Mitglied

Efchen

Guest

lmb

Neues Mitglied

lmb

Neues Mitglied

lmb

Neues Mitglied

Neueste Beiträge