Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Nervsammanbrott på Table ..

1
Skriv svar
Permalänk
Medlem
●

Nervsammanbrott på Table ..

Hej,

Jag har ett problem som jag har försökt lösa väldigt länge nu men kommer bara inte på varför det inte ska funka ... Jag håller på att göra en Kontakt sida där man ska kunna skicka mail direkt från hemsidan.
Iallafall här är kodningen för hemsidan :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Hemsida</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
<!--
$(function(){

$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});

$("#page-wrap div.button").click(function(){

$clicked = $(this);

if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {

$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );

var idToLoad = $clicked.attr("id").split('-');

$("#content").find("div:visible").fadeOut("fast", function(){

$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}

$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );

});
});

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

<style type="text/css">
<!--
body {
background-color: #18DAC7;
background-image: url(../Flexic%20background.jpg);
background-repeat: no-repeat;
}
page-wrap {background-color:#81E1E9

}
body,td,th {
color: #000;
}
-->
</style></head> <div align="center">

<body onload="MM_preloadImages('../email2.gif')">
<div align="center"><br />

</div>
<div id="page-wrap">
<p align="center"><img src="../flexic banner2.jpg" width="700" height="291" alt="Banner" /></p>
<div id="home-button" class="button">
<div align="center"><img src="images/menu-home.png" alt="home" width="150" height="60" class="button" /> </div>
</div>
<div id="about-button" class="button">
<div align="center"><img src="images/menu-about.png" alt="about" class="button">
</div>
</div>

<div id="contact-button" class="button">
<div align="center"><img src="images/menu-contact.png" alt="contact" class="button">
</div>
</div>

<div class="clear"></div>

<div id="content">

<div id="home">
<p align="center">Hej och välkommen Flexic Hemsida. </p>
<p align="center">Hemsidan och vi är under konstruktion just nu. </p>
<p align="center"> </p>
<p align="center">
</p>
</div>

<div id="about">

<p align="center">Här ser du mer om Flexic.
</div>

<div id="contact">
<p align="center">Här kan du kontakta oss på Flexic.
<table width="637" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="128" class="style10">Name:</td>
<td width="475"><div align="center">
<input type="text" name="name" value="Hej" size= "35" />
</div></td>
</tr>
<tr>
<td class="style10">Email:</td>
<td><div align="center">
<input type="text" name="email" value="" size="35" />
</div></td>
<td width="16"> </td>
<td width="12"></td>
</tr>
<tr>
<td valign="top" class="style10"> Message:</td>
<td><div align="center">
<textarea rows="5" cols="40" name="comments"></textarea>
</div></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Send Message" name="submit" /></td>
</tr>
</table>
<p class="style10">
</div>
</div>
</div>
</div>
</body>

</html>

Problemet är att Själva rutorna där du ska skriva tex. Namn Email osv. syns ej, linkar en bild på hur det ser ut i Firefox ..

/hqproblemetnervsammanbrotj

Tacksam för alla svar!

Visa signatur

Jag kan hoppa från alla höjder,
Men landa är en annan sak ...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Verkar som att du saknar <form>-tagg? Form-taggen ska omsluta alla <input> och <textarea>.

Visa signatur

"The devil will find work for idle hands to do."

Redigera
Citera flera Citera
Permalänk
Medlem
●

Använd inte tabeller till layout.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ett tips vid problemsökning är att göra ett enkelt pilot fall, så enkelt som möjligt utan andra saker.

Visa signatur

citera!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Kolla först så att du stänger alla öppna taggar, du har nämligen en massa öppna <P>-taggar. Efter det blir det förmodligen bättre och lättare att felsöka.

Och sedan ska du nog ta bort <DIV>-en som ligger innan <BODY>.

Sedan har du blandat mängden celler per rad i tabellen: 2 på första, 4 på andra, 2 på tredje och 2 på fjärde. Det får man inte göra, i sådana fall ska man lägga till COLSPAN.

Så här har jag snyggat upp din kod litegrann, men du bör nog göra om den helt rätt från början då du har en massa konstiga <DIV>-ar som centrerar, clearar osv...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hemsida</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="style.css" />

    <style type="text/css">
      body {
        background-color: #18DAC7;
        background-image: url(../Flexic%20background.jpg);
        background-repeat: no-repeat;
      }
      
      page-wrap {
        background-color:#81E1E9
      }
      
      body,td,th {
        color: #000;
      }
    </style>

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
      <!--
      $(function(){
      
      $("#about-button").css({
      opacity: 0.3
      });
      $("#contact-button").css({
      opacity: 0.3
      });
      
      $("#page-wrap div.button").click(function(){
      
      $clicked = $(this);
      
      
      if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
      
      $clicked.animate({
      opacity: 1,
      borderWidth: 5
      }, 600 );
      
      
      var idToLoad = $clicked.attr("id").split('-');
      
      
      $("#content").find("div:visible").fadeOut("fast", function(){
      
      $(this).parent().find("#"+idToLoad[0]).fadeIn();
      })
      }
      
      
      $clicked.siblings(".button").animate({
      opacity: 0.5,
      borderWidth: 1
      }, 600 );
      
      });
      });
      
      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_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_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 onload="MM_preloadImages('../email2.gif')">
    <div align="center">
      <div align="center"><br /></div>
      
      <div id="page-wrap">
        <p align="center"><img src="../flexic banner2.jpg" width="700" height="291" alt="Banner" /></p>
        <div id="home-button" class="button">
          <div align="center">
            <img src="images/menu-home.png" alt="home" width="150" height="60" class="button" />
          </div>
        </div>
      
        <div id="about-button" class="button">
          <div align="center">
            <img src="images/menu-about.png" alt="about" class="button">
          </div>
        </div>
    
        <div id="contact-button" class="button">
          <div align="center">
            <img src="images/menu-contact.png" alt="contact" class="button">
          </div>
        </div>
    
        <div class="clear"></div>
    
        <div id="content">
          <div id="home">
            <p align="center">Hej och välkommen Flexic Hemsida. </p>
            <p align="center">Hemsidan och vi är under konstruktion just nu. </p>
            <p align="center"> </p>
            <p align="center"></p>
          </div>
    
          <div id="about">
            <p align="center">Här ser du mer om Flexic.</p>
          </div>
    
          <div id="contact">
            <p align="center">Här kan du kontakta oss på Flexic.</p>
    
            <table width="637" border="0" cellspacing="2" cellpadding="0">
              <tr>
                <td width="128" class="style10">Name:</td>
                <td width="475" colspan=3>
                  <div align="center">
                    <input type="text" name="name" value="Hej" size= "35" />
                  </div>
                </td>
              </tr>
              <tr>
                <td class="style10">Email:</td>
                <td colspan=3>
                  <div align="center">
                    <input type="text" name="email" value="" size="35" />
                  </div>
                </td>
                <td width="16"> </td>
                <td width="12"></td>
              </tr>
              <tr>
                <td valign="top" class="style10"> Message:</td>
                <td colspan=3>
                  <div align="center">
                    <textarea rows="5" cols="40" name="comments"></textarea>
                  </div>
                </td>
              </tr>
              <tr>
                <td> </td>
                <td colspan=3><input type="submit" value="Send Message" name="submit" /></td>
              </tr>
            </table>
        
            <p class="style10"></p>
  
        </div>
      </div>
    </div>

  </body>
</html>

Sedan bör alltid CSS ligga före javascript i koden för att inte användaren ska behöva vänta på layouten medan javascriptet laddar.

Senast redigerat
Visa signatur

[Min IP] [Hur många ord i minuten kan du skriva?] [Slumpa Lösenord]

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har inte hittat felet, men har börjat på en ny mall med spry i dreamweaver det kommer förhoppningsvis se snyggare ut, och även funka bättre.

Tacksam för all hjälp och svar jag fått!

Mvh Jonas

Visa signatur

Jag kan hoppa från alla höjder,
Men landa är en annan sak ...

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av You:

Använd inte tabeller till layout.

Gå till inlägget

Blir så trött på folk som inte förklarar varför... Nu när du har sagt till honom att han inte ska använda tabeller till layouts får du gärna även förklara varför, annars ger det i princip ingenting.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Jajje:

Blir så trött på folk som inte förklarar varför... Nu när du har sagt till honom att han inte ska använda tabeller till layouts får du gärna även förklara varför, annars ger det i princip ingenting.

Gå till inlägget

Det är samma sak som om du skulle använda flash för att visa en stillbild istället för att använda <img> taggen och länka till jpg filen.

klart det funkar, men det är inte så man gör

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Jajje:

Blir så trött på folk som inte förklarar varför... Nu när du har sagt till honom att han inte ska använda tabeller till layouts får du gärna även förklara varför, annars ger det i princip ingenting.

Gå till inlägget

Blir så trött på att behöva förklara varför... hade alla utdaterade guider och program slutat användas hade vi inte haft något problem. I alla fall;

Använd inte tabeller till layout!
Samt Roger Johanssons utmärkta artikel om Struktur och Presentation och även Webboken.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Freddish93:

Det är samma sak som om du skulle använda flash för att visa en stillbild istället för att använda <img> taggen och länka till jpg filen.

klart det funkar, men det är inte så man gör

Gå till inlägget

Jag är väldigt medveten om detta då jag är utbildad webbdesigner samt programmerare. Men tycker att ni kan hjälpa trådskaparen lite genom att förklara varför och inte bara skriva ett litet påstående. Visst, det finns google men ändå. Har man sagt A så får man säga B.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara