Hur tryggt är css? + lite andra frågor...

Uääh, jag håller på att så smått fördjupa mig lite mer i css som tydligen erbjuder fler möjligheter än att ta bort underline på länkar ;)

Men hur tryggt är det att använda css? Jag har ett projekt på G som måste funka för den breda massan. Att, gud förbjude, använda tabeller för att designa en hemsida är ju en sådan gammal metod att det fungerar i alla läger och en metod jag alltid använt mig av. Pallar alla webbläsare sedan några år tillbaka den senaste versionen av css (2.0?)? Att designa hemsidor med css är inte heller något jag kan och jag fattar inte riktigt hur man gör, trots att jag läser sida hit och sida dit med diverse guider. Enklare ting som att färglägga texter och bakgrunder fattar jag men hur bestämmer jag var texten skall hamna, t.ex. om jag vill ha tre kolumner med text på hemsidan. Med tabeller blir det ju <table width="100%"><tr><td widht="33%">kol1</td><td width="33%">kol2</td><td width="33%">kol3</td></tr></table> men hur gör jag en sådan här fördelning med hjälp av css?'

Sedan började jag ju i all hast skriva <br /> istället för <br> men det här med att alla taggar måste avslutas är väl xhtml 1 och inte html 4.01 som jag tänkte fokusera på.

Tänk på att den vanligaste läsaren, IE6, är en gammal läsare som inte klarar hela CSS2.

Så vill du att det skall se bra ut i IE och FF så måste du test dina sidor i bägge läsarna och läsa på vad som fungerar och inte fungerar i resp. läsare.

Angående din fråga hur man gör en 3 kolumns layout så rekomenderar jag att du tittar och följer denna tutorial som går igenom det relativt lättfattat: http://css.maxdesign.com.au/selectutorial/ i " Selectors in action - a step by step tutorial" bygger han upp en layout som liknar den du frågar om.

Att IE6 inte klarar hela CSS2.1 betyder inte att det inte går att få en layout att fungera perfekt i den.

Att alla taggar ska avslutas är xhtml 1.0 transitional och alla doctypes över detta. Det är ett generellt krav för xml. Html 4.01 behöver inte ha sina taggar avslutade, men det är ändå att rekommendera för att få samma resultat i alla läsare samt för att det ska vara lättläst.

<div id="w">
<div id="col">&nbsp;</div><div id="col2">&nbsp;</div><div id="col3">&nbsp;</div>
</div>

/*css*/
#col{float:left; width: 33%;
/* ie-float-bug-hack */ _margin: 0 -3px;
}
#col2{margin: 0 33%;}
#col3{float:right; width:33%;
/* ie-float-bug-hack */ _margin: 0 -3px;
}

float-bug är IE6 som fular sig när man flyter element åt något håll genom att lägga på en marginal på dem.

understrecket före margin är också en bug i IE som jag utnyttjar för att enbart IE ska dra bort 3 px på både höger och vänsterkanten på elementet.

Det är som att lära sig cykla. När du väl har lärt dig det så är det inga problem.

Vad är skillnaden på <div class="col"> och <div id="col">? Vilken är att föredra?

Oputres skrev:

Vad är skillnaden på <div class="col"> och <div id="col">? Vilken är att föredra?

http://www.webforum.nu/showthread.php?t=141862

Oputres skrev:

Vad är skillnaden på <div class="col"> och <div id="col">? Vilken är att föredra?

id är unikt och ska para finnas en gång på samma sida. Väldigt bra att ha om man jobbar med javaskript för att komma åt vissa dear av sidan. Bra att ha om du ska stajla unika objekt (t ex vid absolut positionering).

class är mer allmänt och kan sättas hur många som helst på en sida. Bra att ha till det mesta av stilmallshanteringen.

Tilläggas kan att id väger tyngre än class om det blir konflikter mellan dem.

Ok nice!

En till fråga som dykt upp, när skall man använda <span> och när skall man använda <div>? Vad jag kan förstå är de ganska lika, alltså två namn att använda till nästan vad som helst.

Div är block-level. Det är automatiskt 100% brett, och har display: block.
Span är inline och har display:inline. Det kramar innehållet, om man säger så.

Hmm, det där förstod jag inte riktigt. Är span alltså inte bredare än vad innehållet kräver medan div då tar upp hela sidan, även om innehållet bara kanske kräver halva sidans utrymme?

Det är inte riktigt så enkelt. Du får inte stoppa t.ex. <p>-element inuti ett <span>-element.
SPAN är ett inline-element och DIV ett block-element:
http://www.autisticcuckoo.net/arkiv.php?id=2005/01/11/block-och-inline-1

Div är ett block-element precis som t.ex <p> och <ul>. Det visas s.a.s.med en automatisk "radbrytning" före och efter. Med <div> kan man stajla större delar av sin sida. Det är nämligen ok att i en "div" placera andra block-element.

<span> är ett inline-element. Visas alltså utan "radbrytning". En <span> ska placeras inom ett block-element och du kan inte placera ngt block-element inom <span>. Det används främst för att stajla ett mindre avsnitt med till exempel en speciell färg eller dylikt.

Så här liksom:

<div class="?">
<p>Text text text text text <span class="?">text text text</span></p>
</div>

För ett tag sen plitade jag ihop en liten länkfaq. Där kan finnas en del svar på frågor jag har hört rätt ofta http://stilmall.se/css-faq/

/ m a r t i n