Dålig --> bra kod

Jag har nyligen "blivit klar" med http://www.gozinto.org/ och är ganska nöjd med resultatet, bortsett från en sak: kodstrukturen.

Jag jobbade lite under press och valde därför att bygga upp sidan med tabeller (döda mig inte än), eftersom jag ännu inte blivit nån fena på CSS-baserad layout. Tyvärr tänker jag fortfarande i tabeller, kolumner och celler när jag ska göra en hemsidelayout. Måste bli ändring på det ...

Ganska snart fick jag bita i det sura äpplet, då en Mac-användare hörde av sig och sa att sidan såg ut som skit både i Internet Explorer och Safari.

I stället för att göra nödlösning på nödlösning, tänkte jag därför försöka strukturera om sidan i enlighet med XHTML 1.1 Transitional och god CSS-användning. Om detta finns det ju massor med information, i mitt tycke för mycket -- jag har sökt i forumet och läst lite artiklar, men det jag behöver är någon som säger till mig var jag ska börja.

Målet är alltså:

• Att "ersätta tabellstrukturen med CSS".
• Eventuellt låta alla rubriker och menyobjekt bli textbaserade i stället för bilder. Vad tycker ni?
• Gå igenom HTML-koden och validera den enligt XHTML 1.1 Transitional

Tack på förhand!

Jag anser väl att du ska följa XHTML 1.0 Strict istället. När man kör transitional tvingas man inte använda CSS på samma sätt som man måste när man följer en strict DOCTYPE.
Sen så är det ingen vits att följa XHTML 1.1 då IE inte stödjer standardens rekommendationer.

Det är väl bra att låta menyn bli textbaserad. Den blir ju enklare att generera dynamiskt då. Mera tillgänglig, osv.

Det hela är ganska simpelt (men himla värdelöst enligt mitt tycke och grundar det på att man inte har samma frihet när man gör en layout med divs istället för tabeller). För att lägga en div bredvid en annan så sätter du float: left; på båda. Du sätter en width på båda divarna och det är fördelaktigt att använda samma enhet för att sätta bredden på divarna, jag föreslår att du använder procent. För att centrera en div så sätter du margin-left och margin-right till auto. För att förhindra att en div hamnar till höger om en annan så sätter du clear: left; som betyder att inget element kan floata till vänster om elementet med clear: left;. Du kan kolla på min sida, http://wangelin.org/ och se hur jag har gjort. Jag vet inte om den är klockren men jag tror att den funkar bra och jag antar att det går att förstå principen lite bättre genom att kolla på koden. Jag uppmanar er andra att även kolla in koden på den och ge mig förslag på förbättringar om ni tycker att något är kasst i den. Tack på förhand, och lycka till, jepsO!

jepsO: Eftersom din sida är väldigt enkelt uppbyggd så är det lätt att göra om sajten och följa XHTML 1.0 Strict. Du kommer säkert att få färdiga kodmallar av hjälpsamma personer här på forumet snart. :)

Cheguelin: Jag lustläste inte koden, men jag läste vad du hade skrivit på sidan, angående att du inte ser nån nytta med CSS-designer. Jag kan förstå att du känner så när du bara jobbar med din egen privata sida(?) men en stor fördel med att köra på CSS-spåret är att man väldigt lätt och väldigt snabbt kan göra om designen på en hel sajt, genom att bara ändra i en enda fil. Fundera på det innan jag förklarar mer. ;)

Insider skrev:

Du kommer säkert att få färdiga kodmallar av hjälpsamma personer här på forumet snart.

Låter alldeles utmärkt :).

Strict låter absolut som rätt väg att gå. Att föra fram en standard i dagsläget är sannerligen inte lätt, men det är väl bara att gå med i rörelsen ;).

Jag vill ge dig ett exempel på något jag tycker är himla värdelöst med css-designer.

På min sida har jag en header som består av två bilder: en logo och en text kan man säga. Jag behöver ha ena bilden längst till vänster och den andra bilden längst till höger. Detta är omöjligt att åstadkomma på ett elegant sätt. Man kan ju tänka sig att det ska gå att floata ena bilden till vänster och den andra till höger, men så lätt är det. Visserligen hamnar bilderna på de ställen man avser, men istället så är diven som de båda bilderna ligger i 0 pixlar hög. Kan någon förklara hur man kan lägga två bilder bredvid varandra? Det är alldeles som att elementen hamnar i ett helt annat lager än de andra på en sida när man floatar.

Cheguelin skrev:

Kan någon förklara hur man kan lägga två bilder bredvid varandra? Det är alldeles som att elementen hamnar i ett helt annat lager än de andra på en sida när man floatar.

Cheguelin>> :i Skapa dig en egen tråd med den frågan och håll dig till ämnet i den här som är hjälp med en specifik layout är du snäll !

JepO: http://css.maxdesign.com.au/listamatic/horizontal03.htm har en massa bra tips om hur du kan göra om menyn med hjälp av CSS. Sen resten av din design är ju inget krångligt att åstadkomma med lite css. :) Lycka till.

jepsO: Jag har gjort ett exempel på hur du kan göra. Jag tog mig friheten att låna bilderna från din sida.
http://member.webforum.nu/151/gozinto.html

Menyn kommer från http://css.maxdesign.com.au/listamatic2/horizontal02.htm

Cheguelin skrev:

Visserligen hamnar bilderna på de ställen man avser, men istället så är diven som de båda bilderna ligger i 0 pixlar hög. Kan någon förklara hur man kan lägga två bilder bredvid varandra? Det är alldeles som att elementen hamnar i ett helt annat lager än de andra på en sida när man floatar.

Omslut med fler <div>ar. Se exempel på http://www.voodoofilm.org - alltså loggan till vänster och bannern till höger.

silfver skrev:

JepO: http://css.maxdesign.com.au/listamatic/horizontal03.htm har en massa bra tips om hur du kan göra om menyn med hjälp av CSS. Sen resten av din design är ju inget krångligt att åstadkomma med lite css. :) Lycka till.

För att inte glömma Zen Garden.

Nu har jag börjat försöka få till designen med CSS, men det är små saker som ständigt irriterar mig. Testadressen är http://www.gozinto.org/v3.

Först och främst får jag inte till menyn, som jag gjort till en lista med display: inline; (betyder?) och list-style: none;. Som ni ser ligger bilderna inte tätt emot varandra. Varför?

Sen lyckas jag heller inte med centreringen. Har försökt lägga in (text-)align: center; i #wrapper-div:en och left i #menu och #submenu (eftersom jag inte vill ha allt centrerat), men det går inte så bra.

Summa sumarum kan man säga att jag är kass på CSS :(.

Om ni vill hjälpa till med grundbegreppen: Ta gärna en titt på den inte-så-snygga bifogade filen för att se vad jag försöker åstadkomma.

(Jag jobbar kontinuerligt med sidan, så det är möjligt att jag har gjort framsteg efter att det här inlägget skrevs.)

Display:inline gör om listan till ett s.k. inline element. Enkelt förklarat betyder det att elementet följer med den löpande texten på sidan, ungefär som <a>, <span> och <img />.
Motsatsen, ett Block-element tar upp en hel rad och lite marginaler runtom. (ex: <div>, <p> och <form>)

Listan lägger sig då på en rad istället för som en vanlig lista.

Lägg till: text-align:left i #container så behöver du inte lägga in det nån annanstans.

Ta bort loggan från listan. Annars tycker jag att menyn ser OK ut. Men du kan ju säkert göra den snyggare, det kommer inte gå att få den exakt likadan som den befintliga, så du kan nog lika gärna göra helt annorlunda.

Exempellistor:
http://www.imaputz.com/uportal/tabstyles.html
http://css.maxdesign.com.au/listamatic/index.htm

Nu har jag målat in mig i ett hörn, känns det som.

Helst skulle jag vilja behålla den nuvarande menyn med bildlänkar. Annars måste jag göra om hela designen för att det ska se vettigt ut, och det är inte önskvärt ur tidssynpunkt (även om många varianter på Zen Garden var monstersnygga). Jag använder följande kod för menyn:

<ul>
	<li><a href="#"><img src="../images/menu/hem_over.png" alt="" /></a></li>
	<li><a href="#"><img src="../images/menu/tjanster_over.png" alt="" /></a></li>
	<li><a href="#"><img src="../images/menu/student_over.png" alt="" /></a></li>
	<li><a href="#"><img src="../images/menu/om_gozinto_over.png" alt="" /></a></li>
	<li><a href="#"><img src="../images/menu/kontakt_over.png" alt="" /></a></li>
</ul>

Tillhörande CSS:

#menu {
	background-color: #000066;
}
#menu ul {
	margin: 0;
	padding: 0;
}
#menu ul li {
	display: inline;
	list-style: none;
}

Problemet är mellanrummet som skapas mellan varje bild i horisontell led och under listan (se bilden mellanrum.png).

Enligt tidigare trådar löser man bildproblemet med display: block, men då visas ju listan i vertikal led = värdelöst. Några tips?

Okej, efter mycket pillande -- och framför allt wF-sökande -- är jag nästan klar med min Strict-validerade kod. La ut den nya versionen skarpt på http://www.gozinto.org/. Måste säga att det här forumet är fantastiskt -- stort tack! :bire

Det som nu återstår är hur jag i enlighet med Strict kan ersätta <img align="right" src=".... Det fina i kråksången med just den koden är att bilden blir högerjusterad och "inbakad" i texten (se http://www.gozinto.org/index.php?rubId=2). Har försökt med text-align:right, men det ger inte samma resultat.

Sen lär ni också kunna se hur bilden går utanför #container-div:en på länken ovan. Inte heller det har jag lyckats lösa.

Om ni undrar hur jag löste mina tidigare problem föreslår jag en titt i källkoden och CSS-filen.

OT: jag kommer inte ens in på din sida med firefox... den bara står och laddar och blinkar... händer inget.

Oj, tack för att du sa det. Det var följande kod som ställde till det:

<script  type="text/javascript">
   window.location.href = "index.php?width=" + screen.width + "[b]&amp;amp;[/b]height=" + screen.height;
</script>

Man är ju tvungen att ersätta & med &amp; i Strict-validerad kod, men i fallet ovan konverterades inte &amp; till &. Konstigt ...

<img style="float:right;" src="bild.jpg" alt="Bild" />

Tack Gislaved, det löste align-problemet. Nu återstår bara hur jag får #content-div:en att påverkas av bildstorleken (se återigen http://www.gozinto.org/index.php?rubId=2).

I W3C:s defintion av float beskrivs fenomenet, även med bildillustrationer, men ingenstans tar man upp hur det aktuella lagret ska kunna påverkas av bildstorleken.

Ber om ursäkt att tråden blivit så lång, men det har samtidigt hänt mycket med mina CSS-kunskaper mellan inläggen :).

Lägg till:

#bottom {
	clear:right
}

Det står faktiskt på sidan du länkade till hur man löser problemet. Den 3:de bilden illustrerar lösningen.

Ah, missuppfattade den bilden. Desutom tror jag att jag försökte med clear:left i stället för right.

Återigen: Jättestort tack till er alla! :bire Utan wF hade den här uppdateringsprocessen varit helt körd.