Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: CSS/HTML: Kaksi ongelmaa

Sivun loppuun

Rocceri [04.04.2009 15:38:54]

#

Moikka taas

Kirjoitin tämmöisen koodin:

<html>
<head>
<title>Elixair ilmanpuhdistin</title>
<meta name="keywords" content="Elixair, elixair, ilmanpuhdistin, Ilmanpuhdistimet, ilman puhdistus, raikas ilma, toimiva ilmanpuhdistin, Elixair ilmanpuhdistimet">
<meta name="author" content="Elixair ilmanpuhdistimet">

<!--[If IE]>
<link rel="stylesheet" href="style_ie.css" type="text/css">
<![endif]-->

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

<body bgcolor="#FFFFFF" text="#000000">

<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img src="img/ylapalkki.jpg" border="0"></td>
  </tr>
</table>
<br>
<!-- Tästä menu -->
<table class="blueborder" width="800" border="0" cellspacing="0" cellpadding="0" align="center" border="1">

  <tr valign="top">

    <td background="img/viiva.jpg">
	<div align="center"><b>
	Valikko:<br></b></div>
      <p><a href="index.htm"  class="menu">&nbsp;&nbsp;Etusivu</a><br>
        <a href="ajankohtaista.htm" class="menu">&nbsp;&nbsp;Ajankohtaista ja &nbsp;&nbsp;tiedotteita</a><br>
        <a href="puhdistimet.htm" class="menu">&nbsp;&nbsp;Ilmanpuhdistimet</a><br>
        <a href="kanavasuodatin.htm" class="menu">&nbsp;&nbsp;Kanavasuodatin</a></br>
        <a href="pdf/elixairsolvent.pdf" class="menu">&nbsp;&nbsp;Kennonpesuneste</a><br>
        <a href="komponentit.htm" class="menu">&nbsp;&nbsp;Komponentit</a><br>
        <a href="myyjat.htm" class="menu">&nbsp;&nbsp;J&auml;lleenmyyj&auml;t</a><br>
        <a href="huolto.htm" class="menu">&nbsp;&nbsp;Huoltoliikkeet<br>
       </a> <a href="maahantuojat.htm"  class="menu">&nbsp;&nbsp;Maahantuojat</a><br>
        <a href="ohjeet_esitteet.htm" class="menu">&nbsp;&nbsp;Esitteet</a> <br>
        <a href="http://www.lauantaiforum.com/059/elixair_512K.wmv" class="menu">&nbsp;&nbsp;Elixair-video</a> <br>
<a href="yhteys.htm" class="menu">&nbsp;&nbsp;Yhteystiedot</a> </p>

    <td>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td valign="top">

</td>
</tr>
</table>
<!-- Tästä liput -->

<div id="flags">

<a href="en/index_en.htm"><img src="http://elixair.fi/kuvat/flag_en.gif" border="0"></a>
<a href="pdf2/ruotsi.pdf" target="_blank"><img src="http://elixair.fi/kuvat/flag_se.jpg" border="0"></a>
<a href="en/instructions_de.htm" target="_blank"><img src="http://elixair.fi/kuvat/flag_de.jpg" border="0"></a>
<a href="pdf2/espanja.pdf"><img src="http://elixair.fi/kuvat/flag_sp.jpg" border="0"></a>
<a href="http://www.elixair.ru"><img src="http://elixair.fi/kuvat/flag_ru.jpg"border="0"></a>
</div>


<!-- Välilyönti = &nbsp; -->
<div align="center">
Tekstiä
</div>
 </td>
  </tr>

  <tr>
    <td width="149" background="img/viiva.jpg">&nbsp;</td>
    <td width="635">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Ja siihen IE CSS:

body {
background-color: #ffffff;
scrollbar-face-color:#F0F3F9;
scrollbar-arrow-color:#02399C;
scrollbar-track-color:#F0F3F9;
scrollbar-shadow-color:#D9DEE8;
scrollbar-highlight-color:#A18BC1
}

body, table {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: x-small
}

.blueborder {
	border: 1px solid #02399C;
	padding:0px;
}

a:link {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#02399C}
a:visited {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#98525C}
a:hover {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#02399C; text-decoration:none}
a:active {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#AA2336}



a.menu:link {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
text-decoration:none; color: #1E2B88; font-weight:normal; line-height: 14pt}


a.menu:visited {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
color: #930905; text-decoration:none; font-weight:normal; line-height: 14pt}

a.menu:hover {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
text-decoration:underline; background:#E9EDF5; font-weight:normal; line-height: 14pt }

a.menu:active {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
 text-decoration:underline; font-weight:normal; line-height: 14pt}

h4 {
font-size:14 px;
color:#7584A1
}

input,select {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10pt;
}

hr {
width: 100%;
height: 1px;
color: #02399C;
padding: 0px;
}

#margin {
margin-left: 0px;
margin-top: 6px;
text-align: center;
padding: 0px;
}

img {
border:0px;
}

#flags {
background-image: url("img/flags.bmp");
height: 27px;
width: 654px;
text-align: center;
padding-top: 5px;
}

Ja muut selaimet:

body {
background-color: #ffffff;
scrollbar-face-color:#F0F3F9;
scrollbar-arrow-color:#02399C;
scrollbar-track-color:#F0F3F9;
scrollbar-shadow-color:#D9DEE8;
scrollbar-highlight-color:#A18BC1
}

body, table {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: x-small
}

.blueborder {
	border: 1px solid #02399C;
}

a:link {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#02399C}
a:visited {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#98525C}
a:hover {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#02399C; text-decoration:none}
a:active {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: x-small; color:#AA2336}



a.menu:link {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
text-decoration:none; color: #1E2B88; font-weight:normal; line-height: 14pt}


a.menu:visited {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
color: #930905; text-decoration:none; font-weight:normal; line-height: 14pt}

a.menu:hover {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
text-decoration:underline; background:#E9EDF5; font-weight:normal; line-height: 14pt }

a.menu:active {  font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;
 text-decoration:underline; font-weight:normal; line-height: 14pt}

h4 {
font-size:14 px;
color:#7584A1
}

input,select {
font-family: Geneva, Arial, Helvetica, san-serif;
font-size: 10pt;
}

hr {
width: 100%;
height: 1px;
color: #02399C;
padding: 0px;
}

#margin {
margin-left: 0px;
padding-top: -5px;
text-align: center;
padding: 0px;

}

img {
border: 0px;
}

b {
text-decoration: bold;
font-size: 11pt;
}

#flags {
background-image: url("img/flags.bmp");
height: 27px;
width: 654px;
text-align: center;
padding-top: 5px;
}

Ja ongelmia on kaksi:

1. Explorerilla tuhon tablen yläreunan ja flags määrittelyn väliin jää pixelin kokoinen valkoinen rako. Tätä ei näy Mozillalla.

2. Mozillalla flags määrittelyn alapuolelle tulee tuota sinistä väriä, jota IE:llä ei siinä ole. Tässä tablen ja flags määrittelyn välissä ei ole valkoista rakoa.

Osaako joku auttaa, mikä on pielessä?

-Rocceri
Ps. Tulipa pitkä viesti noiden koodien takia :o

juha127 [04.04.2009 16:34:14]

#

Ensinnäkin huomauttaisin tavastasi sekoittaa tyylejä. Jos käytät css:ää, et laita html muotoisia tyylejä. Kuten:

<body bgcolor="#FFFFFF" text="#000000">

Ja silti määrität taustan css:ssä

body {
background-color: #ffffff;
scrollbar-face-color:#F0F3F9;
scrollbar-arrow-color:#02399C;
scrollbar-track-color:#F0F3F9;
scrollbar-shadow-color:#D9DEE8;
scrollbar-highlight-color:#A18BC1
}

Sitten nuo css tiedostojen linkittäminen. Tämä saattaa aiheuttaa osan ongelmista IE:llä. Nimittäin Mozillaa varten suunniteltu tyyli linkitetään aina, ja kaiken lisäksi IE-tyylin jälkeen. Joten aina IE:llä IE-fiksaus tyyli kumoutuu.

Sitten huomasin, että blueborder tablessa olet määrittänyt html tyyliin reunan sekä 0, että 1 vahvuiseksi. Lisäksi määrität reunan vielä css tiedostossa.

Pikaisesti koodissa on monia päällekkäisyyksiä, joten suosittelisin ensin vilkaisemaan jollain validaattorilla löytyykä se koodista virheitä. http://validator.w3.org/ löytää monesti vikoja koodista, jotka eivät osu omaan silmään.

Rocceri [04.04.2009 16:38:33]

#

http://elixair.fi Oikeastaan teen tuolle yhtiölle sivuja, ja tuo minun on valmiista koodista väännetty.

EDIT: Sain väännettyä sen kuntoon <!--[If IE]> tagien kanssa.

temu92 [05.04.2009 03:47:40]

#

Hyvä idea alkaa tekemään jollekkin sivuja kun ei vielä edes kunnolla niitä osaa tehdä..

Tosin jos niille kelpaa sekin niin jatkappa vaan.

punppis [05.04.2009 12:14:59]

#

temu92 kirjoitti:

Hyvä idea alkaa tekemään jollekkin sivuja kun ei vielä edes kunnolla niitä osaa tehdä..

Tosin jos niille kelpaa sekin niin jatkappa vaan.

Jos halvalla saa niin ei tollasia pikkufirmoja yleensä kiinnosta tuleeko koodista validia vai ei. Kuhan näkyy selaimessa firman nimi ja vähän tuotetietoja niin se on siinä.

TeNDoLLA [05.04.2009 23:21:53]

#

Kyllä se kannattas kiinnostaa firmaa kuin firmaa onko se koodi validia, jos haluaa että hakukoneet löytää niiden sivut. Hakukoneet kun ei osaa indeksoida oikein sivuja, joiden html sisältää virheitä. Ja tuskin pienien yksinkertaisien sivujen teettäminen validina on kuitenkaan kovin suuri investointi.

Merri [06.04.2009 00:12:33]

#

Validius ei ole niin tärkeää. Tärkeämpää on oikeiden elementtien käyttö ja oikeanlaisen sisällön kirjoittaminen, jotta hakukoneet osaavat napata oikean sisällön. Tällöin saadaan korostettua oikeat asiat (otsikkoelementtien käyttö, linkkien listoittaminen jotta hakukone voi ymmärtää niiden yhteenkuuluvuuden jne). Validius on myös hyvä asia, virheitä on aina hyvä välttää, mutta hakukoneisiin sillä on väliä vain jos koodi on niin virheellistä, ettei mistään voi saada mitään tolkkua.

TeNDoLLA [06.04.2009 00:19:07]

#

Niin siis tuo nyt oli vain yksi osa hakukoneoptimoinnista, joka tuli mieleen kun punppis sanoi, ettei validius ole tärkeää kaikille. Eli tietysti se riippuu niistä millasia virheitä siellä koodissa on myös. Esimerkkinä jos joku tagi on vaikka jäänyt auki niin hakukone saattaa hukata koko sen sivun sisällön. En tiedä (tuskin) nuo tyylimäärittelyjen päällekkäisyydet tuossa OP:n koodissa vaikuttaa niihin mitenkään.

Grez [06.04.2009 00:22:33]

#

Itse mietin validiutta siltä kannalta, että on todella helppoa tehdä validia koodia ja silloin se yleensä toimii helposti oikein eri selaimissa.

Jos roiskii vaan mitä sattuu yritys ja erehdys -menetelmällä yhdellä tai kahdella selaimella testaten, niin lopputulos ei ole kovin hyvä ja toimivuus muissa selaimissa todennäköisesti huonompi.

Aikaakin testaamalla tekemiseen menee luultavasti enemmän kuin jos opiskelisi ensin sen verran, että ymmärtää mitä tekee, ja tekisi suoraan toimivaa.

Ja nämä kommentit on sitten ihan yleisellä tasolla - en ole edes sen kummemmin katsonut threadin aloittajan koodeja.

reca [06.04.2009 11:03:06]

#

Väittäisin, että ei pienille yrityksille se koodin oikeaoppisuus välttämättä ole tärkeintä, kun eivät ne itse välttämättä siitä mitään ymmärrä. Silloin tärkeintä on vain se mitä ruudulla näkyy...

Mitä enemmän on tietoa asioista, sitä enemmän varmasti odottavat asioita.

ankzilla [06.04.2009 16:10:51]

#

@reca: Luulisi nyt useimpia yrityksiä kiinnostavan, kun on maine kyseessä.

Grez [06.04.2009 17:19:54]

#

No kyllähän tuo "maine" on aika suhteellista. Jos sivut toimii kaikilla selaimilla, mutta eivät ole valideita, niin yrityksen maine menee ehkä kourallisen nörttejä kohdalla. Ketään muuta ei kiinnosta.

Validin tavaran tekeminen on silti perusteltua, koska se jättää enemmän hiuksia tekijän päähän.

tsuriga [06.04.2009 17:28:36]

#

ankzilla kirjoitti:

kun on maine kyseessä

Siinä ei paljoa paina jonku Ville-16v-nörtin foorumihihittelyt kun sivuston käyttäjäkunta ja yhtiön asiakaskunta on ilmapumppuja ostavia Maukka55:ia, joiden kiinnostus on siellä yrityksen tuotteissa.


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta