HTML/CSS kod lista och optimering

Matsaki · 2005-01-07, 04:26

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

hnn · 2005-01-07, 05:13

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:

Kod:

<body topmargin="0" leftmargin="0">

kan ersättas med CSS:

body
{
  margin-left: 0px;
  margin-top: 0px;
}

Kod:

<table cellpadding="0">

kan ersättas med CSS:

table
{
  padding: 0px;
}

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

Matsaki · 2005-01-07, 11:38

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.

Charlie · 2005-01-07, 19:56

Citat:

Originally posted by Matsaki@Jan 7 2005, 11:38
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 :-)

Matsaki · 2005-01-07, 20:17

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.

Matsaki · 2005-01-08, 03:54

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

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

zoran · 2005-01-08, 12:10

Citat:

Originally posted by Matsaki@Jan 8 2005, 03:54
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

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

Matsaki · 2005-01-08, 19:37

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

guran · 2005-01-10, 01:02

Citat:

Originally posted by Matsaki@Jan 8 2005, 03:54
Som ni ser så är "header image" en bit ovanför boxen och ser konstig ut... Detta är alltså den OPTIMERADE/RENSADE filen.

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:

Kod:

<td><img ....></td>

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.

Matsaki · 2005-01-10, 04:35

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

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

HTML/CSS kod lista och optimering