Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Design- Login Feld optrimieren  (Read 6694 times)

0 Members and 1 Guest are viewing this topic.

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Design- Login Feld optrimieren
« 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

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>
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Design- Login Feld optrimieren
« Reply #1 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
Logged

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Re: Design- Login Feld optrimieren
« Reply #2 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? 
Logged

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Re: Design- Login Feld optrimieren
« Reply #3 on: July 07, 2007, 01:03:46 pm »

Ist es so besser? Also das Template?
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Design- Login Feld optrimieren
« Reply #4 on: July 07, 2007, 07:48:32 pm »

Besser, aber noch lange nicht valide. 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
Logged

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Re: Design- Login Feld optrimieren
« Reply #5 on: July 14, 2007, 04:38:42 pm »

ok ist es so besser?
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Design- Login Feld optrimieren
« Reply #6 on: July 15, 2007, 12:20:25 pm »

Nein, noch grausamer. Wie bereits oben beschrieben ist der Kopf kompletter Schwachsinn.
Deshalb übersteht die Seite auch keine Validierung.
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.
Logged

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Re: Design- Login Feld optrimieren
« Reply #7 on: July 15, 2007, 07:39:36 pm »

ups...sry sry sry! aber sonst? was stimmt noch nicht? 
Logged

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Re: Design- Login Feld optrimieren
« Reply #8 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?
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Design- Login Feld optrimieren
« Reply #9 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...
Logged

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Re: Design- Login Feld optrimieren
« Reply #10 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
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Design- Login Feld optrimieren
« Reply #11 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)?
Logged

charmed007

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 45
Re: Design- Login Feld optrimieren
« Reply #12 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?
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: Design- Login Feld optrimieren
« Reply #13 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.
Logged
Pages: [1]   Go Up
 

Page created in 0.024 seconds with 21 queries.