Hejsan,
Jag försöker rensa upp min sajt http://www.ayianapa.nu som är mestadels skriven i PHP. Det är ett helvete när det inte finns några Optimerings program som till HTML :angry: OCH man själv inte kan PHP utan bara lite HTML. Men det är ju iof HTML koden som jag optimerar och försöker rätta till alla klagomål från http://validator.w3.org

Många saker måste skrivas om till CSS eftersom taggar som "height" osv. inte gillas i HTML enligt Validatorn.

Nu undrar jag: Finns någon typ lista att hitta på nätet vad CSS motsvarigheterna till HTML är? Tex att "cellPadding" i HTML är bara "padding" i CSS. Det skulle verkligen va bra att ha.

Sen om det är någon som har lite tips om hur jag kan förenka optimeringen av en sida som har blandad PHP och HTML så vore det toppen så klart :) Fär det finns väl inget program som klarar det än vad jag vet.

/Mats

HTML / XHTML validatorn på W3C kombinerat med CSS validatorn borde nog räcka...


Samtidigt så kan du läsa igenom W3C CSS 1/2 standard på deras sida... Helt utmärkt guide....


Lite tips:




Nu är detta bara generellt...

Har lärt mig att hålla mig ifrån "globala" klasser i CSS....

Dvs.

table kan ersättas med: table.padding_off

och då används: <table class="padding_off">

Tack för hjälpen, men mitt liv är inte så enkelt tyvärr. 1 sida är uppbyggd av flera PHP sidor. header, footer, menu, banners selection osv osv. Så vi sa tables har cellPadding=0 medans andra har ett värde. Så TYVÄRR så ka jag inte göra så vilket annars är ganska lätt i Dreamweaver som jag jobbar i när det gäller HTML.

Detta kanske är lite offtopic; men skall du försöka optimera HTML-kod uppdelad på flera sidor med dåligt kodad php, till att bli valideringsbar xhtml med god css, så lär det bli rejält jobbigt om du använder Dreamweaver ja :-). Jobbigt i alla lägen, men jag skulle verkligen rekommendera en text/kodeditor här. Det blir mycket lättare att navigera runt på olika sidor, och senast då jag prövade dreamweaver strulade den till sidorna rätt rejält bara det kommer php in i bilden :)

Fast du kanske inte använder dig av Wysiwyg-delen av dreamweaver. Men i sådana fall borde det ändå bara fungera som en vanlig kodeditor, lite segare än vanligt, men annars som så, och då borde det mest vara att göra som ovanstående talare med CSS för tables och body etc . och ta bort råkoden i HTML-koden :-)

Nej jag menade inte så direkt. Jag menade bara att även om inte jag kan CSS så är det lätt fixat i tex. Dreamweaver. Dreamweaver tycker jag förövrigt är utomordentligt bra för ren HTML. (kanske beroende på att jag inte är lika bra på HTML som Deamweaver *s*)

Men för rensningen nu så använder jag BBEdit eftersom det är snabbare och enklare precis som du sa :)

Men då ska man kunna CSS, PHP och HTML med <_<

Det var därför jag letade HTML till CSS refferens sida.

Här kommer ett exempel på är vad som gör mig GALEN!!

Titta först på min sajt http://www.ayianapa.nu

Till vänster så det en box som heter "Nya Medlemmar". Den boxen är gjort med den NYA optimerade och rensade PHP filen newmembers.php.

Som ni ser så är "header image" en bit ovanför boxen och ser konstig ut... Detta är alltså den OPTIMERADE/RENSADE filen.

Den gamla röriga klumpigt skrivna php sidan "såg" i alla fall rätt ut, men var inte alls godkänd av w3c validatorn tex.

Jag har bifogat den gamla php filen och den nya. Är det någon som kan titta och jämföra och klura ut vad som går snett så vore jag väldigt imponerad :rolleyes:

Suttit i timmar med detta, och fått hjälp av en vän som kan betydligt mer PHP/HTML än mej. Men även han går bet...

Men validatorn brukar ju tala om vad som är fel. Beta av fel för fel.

/Zoran

zorna,
??? Det var ju inte det som var frågan.

Problemet är en bugg i IE. Rubriken ligger rätt i Opera och FF.

Prova med att lägga in bilden som bildar rubriken som en vanlig bild, dvs. inte som en bakgrundsbild. Du lägger således in bilden enligt:

Lite andra synpunkter. Om du vill lära dig vad som kan göras med CSS, så är du nog tvungen att sätta dig ner och läsa om det ordentligt. CSS kommer bara till sin rätt när man väl kan det. Det är mycker mer komplext än html.

När du anger ett värde till 0, så behöver du inte ange vilken enhet som avses. Det är ingen skillnad på 0 pixels eller 0 centimeter osv.

En sak som går att göra med CSS är byte av en bild i en länk till en annan när man för musen över den. Det är mycket bättre än att hålla på med javascriptfunktioner som sköter bytet.

Jag sa ju att jag försöker lära mig :)

Nu har jag ändrat allt igen...

i nemembersbox.php så ser det ut så här:

<table border="0" cellPadding="0" cellSpacing="0" width="116">
<tbody>
<tr>
<td colSpan="2">[img]/images/box_top_nyamedlemmar.gif[/img]</td></tr>
<tr>
<td class='newmembersbox'>

<?php
if(TRUE) //fnGetFileCache("m_newMembers.php",30000)) blablabla

Sen i napa.css ser det ut så här:

td.newmembersbox
{
border-style: solid;
border-color: #000000;
border-width: 1px;
padding: 0px;
padding-top: 15px;
padding-left: 0px;
padding-bottom: 15px;
margin: 0px;
background-color: #FFC700;
width: 116px;
}

Det som inte verkat funka nu är padding-left: opx; bara vad jag kan se???

padding-left: opx; <--- du använder boksaven o istället för siffran 0 ????


sen kan du faktiskt skriva alla dina margins och paddings på en rad, typ:

padding: 0px 15px 0px 15px;

Kommer dock ej ihåg i vilken ordning top/left/bottom/right kommer...

Nej det är en nolla "0" :) Jag har nu ändrat det tol 5px med vilket det ska vara.

Ännu en skum sak är att mellanrummer mellan Nya medlemmar boxen och den övre Logga in boxen blivit dubbelt <_< Suck!!!

Nu har jag kommit en bit på väg. Från 160 errors i W3C är det nu nere i 44 :)

Jojo man lär sig. Men om någon HTML/CSS kung skulle ha tid och hjälpa mig med att förstå några saker i sidans (min sida) uppbyggnad så kan man nog göra många saker mycket smidigare och mer optimerat.

Någon som har lite tid över o tjabba kod? B)

Syntaxen är enligt följande

padding: 5px; (alla sidor)
padding: 5px 5px; (top/bottom right/left)
padding: 5px 5px 5px; (top right/left bottom)
padding: 5px 5px 5px 5px; (top right bottom left)

En annan sak: Värden som är 0 behöver inte ha någon typ. T.ex. 0px behöver bara anges 0. Exempel:

padding: 0;
padding: 5px 0 10px 0;

Ok jag fattar. Men sen om det är "margin" eller "border" tex. måste dom komma tex före eller efter ditt förslag?

Så här ser en av mina CSS ut i dag:

[color=blue]td.newmembersbox
{
margin: 0px;
padding: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #FFC700;
width: 116px;
}

Sen undar jag om såna här coola saker kan göras om och godkänas utav W3C:

[color=blue]body
{
scrollbar-face-color:#FF6F00;
scrollbar-highlight-color:#FD8F3B;
scrollbar-3dlight-color:#6F5F4F;
scrollbar-darkshadow-color:#6F5F4F;
scrollbar-shadow-color:#DB6102;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#FFC700;
background-attachment: fixed;
background-image: url(images/bgr2.gif);

Om du titar på min sajt så har alla boxar mellanrum. Dom flesta rätt antal px (5px) tror jag. Vad är det som gör dom mellanrumen? det är inte i CSS iaf, men vad är namnet på den taggen som gör dom? spacing nånting kanske? (Har problem med dom) :(

Vad ska man göra med alla <embed> taggar som tes flash banners har som sen W3C klagar på? Och hur får man en flash banner "href" så att sökmotorer kan indexera den?

Är det ute med tables nu och div som gäller?

Såja, nu börjar det bli lite för myclet frågor :)

Det har ingen betydelse i vilken ordning du lägger dina attribut inom t.ex. en klass.

Det exempel jag gav för padding gäller även för margin. Ett förkortat skrivsätt för border är enligt

border: 1px solid red; ([ramens bredd] [ramens utseende] [ramens färg];

En sak med Cascading Style Sheet är att sista kommandot är det som gäller. Det är det som avses med att de kommer i kaskad. Prioritering är:

1. Webbläsarens inställningar
2. Länkade inställningar
3. Inbäddade inställningar
4. Inställningar på en enskild html-tagg

Det innebär att om du har t.ex. <td style="color: red"> så kommer den inställningen gälla före alla andra. Det innebär att du i den länkade inställningen (separat fil) kan ha td {color: green;} och vill du att bara en enda td ska ha textfärgen röd så anger du <td style="color: red;">. Alla td har färgen grön utom just den som du angav specifikt att den skulle ha röd.

Detsamma gäller för din kod nedan. Det som är sist angivet gäller. Jag ger några kommentarer inom parentes:

td.newmembersbox
{
margin: 0px; (ställer att sidor till 0. Typ behöver inte anges)
padding: 0px; (här ställer du alla sidor till 0)
padding-top: 5px; (här ändrar du padding top från 0 till 5px)
padding-bottom: 5px; (här ändrar du padding bottom från 0 till 5px)
padding-left: 5px; (här ändrar du padding left från 0 till 5px)
border-style: solid;
border-color: #000000;
border-width: 1px;
background-color: #FFC700;
width: 116px;
}[COLOR=blue]

De attribut du använder för att ändra färg på skrollister m.m. är inte standard CSS. De är specifika för IE. Det medför att du troligen inte kan få din sida 100 % validerad.

Tack guran,

Men jag hittar fortfarande inte VART i min sajt som gör avståndet mellan alla olika boxar/tables till ca: 5px :(

och letar vidare efter problemen:

Sen alla saknade alt= taggar som W3C klagar på. (oftast på en massa spacer images) är det ok att bara göra alt="" för att slippa klagomålen?

Ja du kan (ska) ha en tom alt-property där, även ur accessabilitysynpunkt så ska du ha alt="" för bilder som saknar betydelse för den handikappade; detta tas det hänsyn till i de anpassade webläsarna.

Är det de här taggarn du menar (som finns lite här och var mellan dina boxar):

I begynnelsen var html en språk som beskrev texten. Med tiden ville folk skapa utseende. De började då att använda sig av beskrivningen för att skapa utseende. Därav att bl.a. table används till att bygga upp en sidans layout.

I princip borde man säga att table-design är ute. En table är ett sätt att beskriva data på, dvs. relationer mellan data. Ska en hemsida ha "total" användarvänlighet så ska html beskriva texten och CSS sidans layout.

Med tiden kommer detta krav att öka. I USA måste myndigheterna förja vissa föreskrifter för hur en hemisida ska fungera ur användarvänlighet. Det kravet finns inte i Sverige, men det kommer säkert att komma.

Det är ytterst få professionella företag som klarar av att göra en hemsida som verkligen lever upp till användarvänlighet enligt W3C. En orsak är säkert att deras kunder inte ställer det kravet vilket i sin tur säkert beror på okunskap om vad som menas med användarvänlighet. Kanske ordet tillgänglighet skulle användas.

Om man tittar på er hemsida, så är den vänlig för att överge table-designen och helt skapa alla spalter och boxar med CSS. Att skapa spalter och områden för text och få dessa att fungera bra vid olika skärmupplösningar och olika storlekar på en besökares webbläsarfönster är svårt. Det går att ta till lite javascript för att få allt ritat som man vill, men det är knappast en önskvärd metod.

Klarar ni av att få bort tabell-designen och få den validarad både på html och CSS, då kan ni vara mycket stolta. Då har ni gjort något som knappast någon myndighet eller storföretag i detta land har lyckats med.

Nej det finns inga sådana mellan några tables. Bara en under den övre menyn med Mat, Stränder osv.

Perkele......

Nu när man rensat vidare dyker NYA fel upp :(

och strängen ser ut så här:

<td style="background: url(/images/box2_border.gif); width:1px;">[img]/images/box2_border.gif[/img]</td>

WHATS GOING ON???

Det betyder att din <table> inte har någon </table>... (eller att den ligger felnästlad...beror lite på hur valideringsverktyget fungerar...)

Vet inte om det är språkförbistring här eller, men:

tillgänglighet = accessibility
användarvänlighet = usability

Myndigheter strävar efter (eller ska/bör sträva efter) tillgänglighet och det tror jag även de amerikanska gör (som enligt dig uppenbarligen har kommit längre). Tillgänglighet är ju ett demokratiskt verktyg för att inte utestänga vissa grupper av människor som inte har samma förutsättningar som andra i samhället (vi pratar främst om handikapp av olika slag). Även browserkompabilitet angränsar till detta att inte utestänga personer med andra webläsare.

Användarvänlighet däremot har aldrig varit på tapeten så vitt jag har förstått, främst pga av att accessibility och usability INTE går hand i hand (i de flesta fall). Användarvänlighet är en psykologisk lära (kognitiv vetenskap) som är sprungen ur hur gemene mans hjärnor och synintryck tolkas; hur en individ tänker och arbetar och hur man definerar förutsättningar för att detta ska underlättas eller upplevas som "enkelt", dvs användarvänligt. Detta upphör oftast att gälla för personer med handikapp.

Så jag förstår inte vad du menar med ditt inlägg. W3C definerar väl inte användarvänlighet, utan standarder (som innefattar Tillgänglighet). Lite roligt blir det ju när du skriver "okunskap om vad som menas med användarvänlighet"... :P

Jo, du har rätt. Jag har blandat ihop orden i hastigheten. Det upptäckte jag när jag hade skrivit en stor del av mitt inlägg.

Men på ett sätt måste tillgänglighet och användarvänlighet gå tillsammans. Om det finns tillgänglighet för t.ex. en handikapad så har du samtidigt skapat användarvänlighet. Nu stämmer inte detta på precis allt. Samtidigt så går det att skapa användarvänlighet utan att det därmed är tillgänglight.

Jag tror ordet användarvänlighet betyder olika för olika personer. För mig är användarvänlighet en mix av design och funktion i syfte att EJ förvilla; att vara logisk och att underlätta.

Usability innefattar ju bla
Färgval (tex på knappar, text mm)
Symbolik (att efterlikna redan existerande irl situationer)
Navigering och navigeringssstruktur/flöden
etc...

Mycket av detta är taget ur verkligheten och kan inte appliceras för handikappade personer då deras verklighet inte överensstämmer med "våran".

Ett klassiskt exempel är en röd och en grön knapp (ok & cancel)... hur blir detta för en färgblind?
Att "framåt" är åt "höger" är självklart i västvärlden iaf, men inte i arabvärlden... (ok, nu pratar vi inte handikapp men iaf). :)

CSS fråga

Kan man inte välja bort den övre linjen i border genom "border-top-style: none;"?

td.footer
{
border-width: 2px;
border-color: #FF0000;
border-top-style: none;
border-style: solid;
}

och varför fungerar inte CSS för denn tagg?

<table border="0" cellpadding="0" cellspacing="0" width="136">

som sen blir:

<table class='footer'>

Med CSS kod:

table.footer
{
margin: 0px;
border: 0px;
padding: 0px;
width: 136px;
}

Tillgänglighet behöver inte bara vara för handikapade. Om någon sitter på en långsam uppkoppling kan han eller hon välja att inte ladda bilder. I det läget kan det vara viktigt att varje <img ... har en bra alt-beskrivning.

Det skall gå bra. Dock måste du kasta om

border-top-style: none;
border-style: solid;

så att det blir

border-style: solid;
border-top-style: none;

Tänk på att det som anges sist är det som gäller. Vad du har gjort i din kod är att du först bestämmer att det inte ska vara någon ram på överdelen. I nästa sats bestämmer du att det ska vara ram på alla kanter.

Varför fungerar inte denna i Explorer utan bara Mozilla/Firefox/Safari:

table.loginbox
{
border-spacing: 0;
}

table.loginbox td
{
padding: 0;
}

td.loginbox
{
border-style: solid;
border-top-style: none;
border-color: #000000;
border-width: 1px;
background-color: #FA9309;

}

i Explorer blir det ett dumt mellanrum (border) som inte ska vara där. http://www.ayianapa.nu går det att se i "Logga in boxen".

Ändra följande i din kod

<table class='table.loginbox_form' align="center">

till

<table class='loginbox_form' align="center">

till att börja med.

Hej guran!
Har redan gjort/upptäckt det fast inte lagt upp det bara :)

Gosch vad jag letat på nätet efter border problemet. Utan resultat :(
Inte ens border-collapse: collapse; fungerar?