Design- Login Feld optrimieren Design- Login Feld optrimieren
 

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

Design- Login Feld optrimieren

Started by charmed007, July 06, 2007, 11:57:44 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

charmed007

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>

Joachim Müller

#1
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

charmed007

#2
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? 

charmed007

#3
July 07, 2007, 01:03:46 PM
Ist es so besser? Also das Template?

Joachim Müller

#4
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

charmed007

#5
July 14, 2007, 04:38:42 PM
ok ist es so besser?

Joachim Müller

#6
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.

charmed007

#7
July 15, 2007, 07:39:36 PM
ups...sry sry sry! aber sonst? was stimmt noch nicht? 

charmed007

#8
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?

Joachim Müller

#9
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...

charmed007

#10
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

Joachim Müller

#11
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)?

charmed007

#12
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?

Joachim Müller

#13
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.
Print
Go Up Pages1
User actions