forum.coppermine-gallery.net

Support => Deutsch (German) => Language Specific Support => cpg1.4.x Deutsch (German) => Topic started by: charmed007 on July 06, 2007, 11:57:44 pm

Title: Design- Login Feld optrimieren
Post by: charmed007 on July 06, 2007, 11:57:44 pm
Hey,
also ich sitze an einem Layout...das klappt auch alles nur eine Sache nicht...im Layout ist vorgesehen, dass es ein Feld im Header gibt wo die Loginpunkte dann erscheinen und der Link zur Startseite dort zufinden ist...für einen alten Monitor (1024) ist es gut nur wenn nicht wenn man es mit einem 19'' Monitor anguckt sind die Links verschoben...wenn jetzt keiner weiß was ich mein klickt hier http://czeringer.ls4.allbytes.de/zoeyfans/e107_plugins/zoeyfansgallery/index.php (http://czeringer.ls4.allbytes.de/zoeyfans/e107_plugins/zoeyfansgallery/index.php)

also logischer weise liegt es am template,oder? wie bekomme ich das denn so hin das es optrimiert ist?

momentan ist der Header in 3 Teile aufgeteilt, auf den 3.Teil ist das Feld. Ich habe es mit einem <div> probiert aber es optrimiert nicht...

weiß jemand eine lösung?

Hier mal ein auszug aus dem Template:

Code: [Select]
<table border="0" cellpadding="0" cellspacing="0" width="650" font-size="8">
   <tbody><tr><td style="border: 0px none ;" class="nav" background="themes/zoey/images/header_1.png" height="41" width="600" font-size="8"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{SUB_MENU}
</td></tr></tbody></table>

<table border="0" cellpadding="0" cellspacing="0" height="60" width="650">
<tbody><tr><td style="border: 0px none ;" class="nav" background="themes/zoey/images/header_2.png" height="305" width="457">
</td><td style="border: 0px none ;" class="nav" background="themes/zoey/images/header_3.png" height="305" width="194">
<div style="left: 640;top: 250;width: 130;position: absolute">
{SYS_MENU}</div>
</td></tr></tbody></table>
Title: Re: Design- Login Feld optrimieren
Post by: Joachim Müller on July 07, 2007, 10:09:15 am
Dein Markup ist verkehrt, deswegen werden "seltsame" Sachen passieren. Vor der doctype declaration hat nichts stattzufinden. http://czeringer.ls4.allbytes.de/zoeyfans/e107_plugins/zoeyfansgallery/themes/zoey/template.html ist totaler Müll - da bist Du wohl mit der Heckenschere durch gegangen. Um es nur einigermassen in die Spur zu bekommen solltest Du es zumindest mal wie folgt ändern:
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{LANG_DIR}">
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}">
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="themes/zoey/style.css" type="text/css">
{META}
<!----------Coded by Julia___magiccharmed.de---------->
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html,v 1.20 2005/10/25 01:16:24 gaugau Exp $ -->

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<center>

<table border="0" cellpadding="0" cellspacing="0" width="650" font-size="8">
   <tbody><tr><td style="border: 0px none ;" class="nav" background="themes/zoey/images/header_1.png" height="41" width="600" font-size="8"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{SUB_MENU}
</td></tr></tbody></table>

<table border="0" cellpadding="0" cellspacing="0" height="60" width="650">
<tbody><tr><td style="border: 0px none ;" class="nav" background="themes/zoey/images/header_2.png" height="305" width="457">
</td><td style="border: 0px none ;" class="nav" background="themes/zoey/images/header_3.png" height="305" width="194">
<div style="left: 640;top: 250;width: 130;position: absolute">
{SYS_MENU}</div>
</td></tr></tbody></table>



  <table border="0" cellpadding="0" cellspacing="0" width="100%">

<table border="0" cellpadding="0" cellspacing="0" height="343" width="650">
     <tbody><tr>
       <td align="center" valign="top"  background="themes/zoey/images/back.png">

  <table border="0" cellpadding="0" cellspacing="0" width="650">
    <tbody><tr>
      <td style="border: 0px none ; background="themes/zoey/images/back.png" valign="top"">
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100">
          <tbody><tr>
            <td style="padding-top: 0px;" valign="top">
<div width="100" height="10">{ADMIN_MENU}</div>
<div width="100">
{GALLERY}</div>

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="66">
   <tbody><tr><td style="border: 0px none" background="themes/zoey/images/bottom.png">
   <center>
   {CUSTOM_FOOTER}   <table border="0" cellpadding="0" cellspacing="0" width="100%" height="10">
   <tbody><tr><td style="border: 0px none">
   <center>

{LANGUAGE_SELECT_LIST}
{THEME_SELECT_LIST}<br>
<br>
</div>

</td>
</tr>
</tbody></table>
</table>
</table>
</table>

</td></tr></tbody>

</table>

</table>

</center>


</body>
</html>
Dringend empfohlen wird die Lektüre von selfHTML - speziell http://de.selfhtml.org/html/allgemein/grundgeruest.htm
Das "Nesting" Deiner Tabellen ist auch katastrophal, ich weiss gar nicht, wo ich da anfangen soll.

Sorry, will Dich nicht runtermachen, aber mir scheint Du solltest erst mal die "Basics" reparieren, bevor Du Dich an's "Feintuning" machst.

Joachim
Title: Re: Design- Login Feld optrimieren
Post by: charmed007 on July 07, 2007, 12:54:18 pm
Hey,
danke für deine Antwort.
Ich weiß das irgendwas nicht stimmt, deswegen suche ich hilfe  :'(
Bei den Tabellen, weiß ich nicht was ich da noch ändern kann....wie meinst du das? Zu viele Tabellen? 
Title: Re: Design- Login Feld optrimieren
Post by: charmed007 on July 07, 2007, 01:03:46 pm
Ist es so besser? Also das Template?
Title: Re: Design- Login Feld optrimieren
Post by: Joachim Müller on July 07, 2007, 07:48:32 pm
Besser, aber noch lange nicht valide (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fczeringer.ls4.allbytes.de%2Fzoeyfans%2Fe107_plugins%2Fzoeyfansgallery%2F). Ein Beispiel gefällig?
Code: [Select]
<td style="border: 0px none ; background="themes/zoey/images/back.png" valign="top"">ist Wunschdenken, kein tatsächlicher Code, der etwas tun könnte. Richtiger wäre
Code: [Select]
<td style="border:none; background-image:url(themes/zoey/images/back.png);" valign="top">
Am schlimmsten ist aber das Tabellen-Nesting: es sind nicht zu viele oder zu wenige, nur sind sie halt falsch gesetzt - lies http://de.selfhtml.org/html/tabellen/aufbau.htm
Title: Re: Design- Login Feld optrimieren
Post by: charmed007 on July 14, 2007, 04:38:42 pm
ok ist es so besser?
Title: Re: Design- Login Feld optrimieren
Post by: Joachim Müller on July 15, 2007, 12:20:25 pm
Nein, noch grausamer. Wie bereits oben beschrieben (http://forum.coppermine-gallery.net/index.php?topic=45034.msg214277#msg214277) ist der Kopf kompletter Schwachsinn.
Deshalb übersteht die Seite auch keine Validierung (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fczeringer.ls4.allbytes.de%2Fzoeyfans%2Fe107_plugins%2Fzoeyfansgallery%2F).
Warum stopfst Du so einen Schwachsinn in den Header?
Intensives selfHTML-Studium ist das einzige, was hilft in Deinem Fall, wenn Du meine vorgeschlagenen Änderungen des Kopfs ignorierst, denn da steht wieder
Code: [Select]
<!----------Coded by Julia___magiccharmed.de---------->
<html dir="{LANG_DIR}"><head><title>{TITLE}</title>




<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}">
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="themes/zoey/style.css" type="text/css"></head>





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p>



{META}
drin, was einfach nur Quatsch ist.
Title: Re: Design- Login Feld optrimieren
Post by: charmed007 on July 15, 2007, 07:39:36 pm
ups...sry sry sry! aber sonst? was stimmt noch nicht? 
Title: Re: Design- Login Feld optrimieren
Post by: charmed007 on July 15, 2007, 08:46:15 pm
sry für doppelposten....
ich habe jetzt mal die Errors die der Markup Validation Service gefunden hat, so gut ich konnte verbessert..jetzt sind es von 28 noch 11 Errors...die verstehe ich nicht wirklich....wie muss die reihenfolge denn sein?
Title: Re: Design- Login Feld optrimieren
Post by: Joachim Müller on July 16, 2007, 08:53:19 am
Wie schon gesagt stimmt das "Nesting", also die Struktur Deiner Tabellen-Tags nicht: ein Tag, der geöffnet wird muss wieder geschlossen werden.

Das hier ist richtig:
Code: [Select]
<table>
  <tr>
    <td>
      Inhalt
    </td>
  </tr>
</table>
Das hier ist falsch:
Code: [Select]
<table>
  <tr>
    <td>
      Inhalt
  </tr>
</table>
genauso wie:
Code: [Select]
<table>
  <tr>
    <td>
      Inhalt
</table>
oder:
Code: [Select]
<table>
  <tr>
    <td>
      Inhalt
  </tr>
    </td>
</table>



Ich habe mir mal die Mühe gemacht, Deine "verstrubbelte" Tabellen-Struktur zu entwirren - template.html sollte also etwa wie folgt aussehen:
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{LANG_DIR}">
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}"/>
<meta http-equiv="Pragma" content="no-cache"/>
<link rel="stylesheet" href="themes/zoey/style.css" type="text/css"/>
{META}
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html,v 1.20 2005/10/25 01:16:24 gaugau Exp $ -->

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="650">
   <tbody><tr><td style="border:none; background-image:url(themes/zoey/images/header_1.png)" class="nav" height="41" width="600"><center><br></br>{SUB_MENU}</center>
</td></tr></tbody></table>

<table border="0" cellpadding="0" cellspacing="0" width="650">
  <tbody>
    <tr>
      <td style="border: 0px none ;border:none; background-image:url(themes/zoey/images/header_2.png)" class="nav" height="305" width="457">
      </td>
      <td style="border: 0px none ;background-image:url(themes/zoey/images/header_3.png)" class="nav" height="305" width="193">
        <div style="left: 640;top: 250;width: 20;position: absolute">
          <br></br><br></br><br></br><br></br>
          {SYS_MENU}
        </div>
      </td>
    </tr>
  </tbody>
</table>


<table cellpadding="0" cellspacing="0" width="650">
  <tbody>
    <tr>
      <td style="border:none; background-image:url(themes/zoey/images/back.png);" valign="top" height="100%">
        {ADMIN_MENU}
        {GALLERY}
      </td>
    </tr>
  </tbody>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td style="border:none; background-image:url(themes/zoey/images/bottom.png);text-align:center" height="66">
        {CUSTOM_FOOTER}
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td style="border: 0px none">
                <center>
                  {LANGUAGE_SELECT_LIST}
                  {THEME_SELECT_LIST}
                </center>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

</div>
</body>
</html>
Die Einrückungen sind technisch nicht notwendig, machen aber den Code wesentlich lesbarer und helfen, Struktur-Fehler wie Deine zu vermeiden. Bitte lies nochmal intensiv http://de.selfhtml.org/html/tabellen/aufbau.htm und die verwandten Kapitel auf selfHTML. Deine Frage ist keine Coppermine-spezifische, sondern eine allgemeine zum Thema HTML. Das sprengt aber den Rahmen dieses Forums - wir können keine HTML-Grundkenntnisse vermitteln. Zu diesem Zweck gibt es aber eine riesige Menge an Seiten, die sich nur darum kümmern...
Title: Re: Design- Login Feld optrimieren
Post by: charmed007 on July 16, 2007, 02:30:52 pm
OK !
Aber meine eigentliche Frage ist ja wie ich das mit dem Login hinbekomme.....mehr will ich nicht wissen
Title: Re: Design- Login Feld optrimieren
Post by: Joachim Müller on July 16, 2007, 07:50:16 pm
Ich verstehe die Frage nicht. Meinst Du
Code: [Select]
        <div style="left: 640;top: 250;width: 20;position: absolute">
          <br></br><br></br><br></br><br></br>
          {SYS_MENU}
        </div>
Meiner Meinung nach missbrauchst Du das Menü für etwas, für das es nie gedacht war, aber egal. Wie soll es denn aussehen. Was erwartest Du, wenn Du so schwammige Positionsangaben machst (die line-breaks)?
Title: Re: Design- Login Feld optrimieren
Post by: charmed007 on July 16, 2007, 10:16:31 pm
also es sollte so sein, dass das "SYS-Menu" mittig im Feld ist und auch wenn man sich anmeldet nicht herausragt....ich hatte es mal so dass es ging aber dann ging es nicht bei einem 19'' Bildschirm....da muss es doch eine Möglichkeit geben es zu hinzubekommen oder?
Title: Re: Design- Login Feld optrimieren
Post by: Joachim Müller on July 17, 2007, 09:05:44 am
div-Container nehmen sich den Platz, den Ihr Inhalt braucht. Wenn Du damit nicht zufrieden bist, dann bearbeite die Style-Eigenschaften des Containers.