11 svar · 685 visningar · startad av rittfeldt
Jo, jag vill gärna veta hur dom har gjort knapparna på Mozilla.org . Det gäller alltså dom som ändrar färg när man "hoovrar" (Products, Support, Store, Devlopers, About).
Har dom använt sig av javascript lr vad? Lyckades inte lista ut det :l . Vill helst inte använda javascript och behöva göra 2 olia bilder som man skiftar emellan. Vet inte vad jag har emot javascript, så fråga inte:OO .
Vet inte heller hur de lyckats göra rundningarna utav flikarna, det är väl inga bilder i kanterna lr? :q En bakrundsbild lr hur faen fungear det. Avskyr o behöva luska ut hur andra har kodat.
Kort o gott, jag vill veta ALLT om hur de gjort flikarna :)
Du använder en lista för menyn. <ul><li>Länk 1</li> <li>Länk 2</li> </ul>
Sen använder du css för att bestämma hur den ska se ut. Nu har jag inte hunnit kolla exakt hur dem gjort, men jag antar (om dem är smarta) att dem har en bakgrundsbild. När du drar över länken har dem bestämt med css att bakgrundsbilden ska flytta sig x antal pixlar åt sedan och då visa hover-färgen.
Svårt att förklara men jag ska se om jag kan hitta någon guide.
Dem använder en ul, li tag.
Du kanske kan få lite inspiration eller ideér om du kollar in alistaparts artikel i ämnet
http://www.alistapart.com/articles/slidingdoors/
annars kan du kolla in källan och css:en på sidan ...
mv icaaq
Listamatic kan också vara interessant att titta på:
http://css.maxdesign.com.au/listamatic/
tack för svaren.
Ja har gjort några sidor som ja faktiskt tycker ja lyckats rätt bra med, men aldirig har jag använt taggarna <ul> och <li>. Vet inte alls hur man använder dom... Har löst det där med skiftningen av bakgrundsfägen på andra sätt tidigare.
Ska kolla länken ja fick nu med (läsa lite nogrannare alltså). Lite kul är ju att jag hade den sidan på mina favoriter, men det var av en annan anledning. Tyckte den var förbannat snygg och den kanske kunde ge lite inspiration nån gång tänkte ja
:)
När vi ändå är inne på ämnet..
Hur har de gjort på alistapart.com ? Till synes kan man ju tro att det är 2 tabeller. En med själva innehållet (till vänster) och en med lite länkar (till höger). Men det är det tydligen inte. Är det de där 2 taggarna igen ja måste lära mig??:OO
icaaq skrev:
lägger på minnet
rittfeldt skrev:
Hur har de gjort på alistapart.com ? Till synes kan man ju tro att det är 2 tabeller. En med själva innehållet (till vänster) och en med lite länkar (till höger). Men det är det tydligen inte. Är det de där 2 taggarna igen ja måste lära mig??:OO
Både ja och nej - det är såhär:
Om du tittar på källkoden på alistapart.com så ser du att de har två "vanliga" punklistor (ul/li) med menylänkar instoppade i en "definitionslista (dl/dt/dd)" såhär: (och ja - koden är fri på så sätt att de uppmanar folk att lära sig av dem, så jag begår inget copyright-brott nu ;) ).
<dl>
<dt>Departments</dt>
<dd>
<ul>
<li><a href="/contact/">Contact</a></li>
<li><a href="/contribute/">Contribute</a></li>
<li><a href="/credits/">Credits</a></li>
<li><a href="/copyright/">Permissions</a></li>
<li><a href="/qa/">Q & A</a></li>
</ul>
</dd>
<dt>Hot Topics</dt>
<dd>
<ul>
<li><a href="/topics/accessibility/">Accessibility</a> 38</li>
<li><a href="/topics/browsers/">Browsers | X-Platform</a> 31</li>
<li><a href="/topics/business/">Business</a> 42</li>
<li><a href="/topics/content/">Content</a> 44</li>
<li><a href="/topics/css/">CSS</a> 55</li>
<li><a href="/topics/culture/">Culture</a> 41</li>
<li><a href="/topics/design/">Design</a> 76</li>
<li><a href="/topics/dom/">DOM | Scripting</a> 23</li>
<li><a href="/topics/flash/">Flash</a> 9</li>
<li><a href="/topics/html/">HTML | XHTML</a> 46</li>
<li><a href="/topics/process/">Process</a> 23</li>
<li><a href="/topics/server-side/">Server-Side</a> 24</li>
<li><a href="/topics/tools/">Tools</a> 24</li>
<li><a href="/topics/typography/">Typography</a> 11</li>
<li><a href="/topics/usability/">Usability</a> 23</li>
<li><a href="/topics/xml/">XML & Pals</a> 12</li>
</ul>
</dd>
</dl>
Detta är alltså två helt vanliga varianter av HTML-listor instoppade i varandra, men det alistapart sedan gör är att ändra listan/listornas utseende mha CSS så att de ser ut på samma sätt som om de vore utlagda mha "tabeller" utan att vara det.
Varför? - Tja, förutom att sidan blir helt läsbar även i "mobila enheter" (typ AvantGo i en Palm osv) så finns det en del funktionshindrade människor därute som surfar med avslaget CSS-stöd, och sidan blir "mer läsbar" även för dessa (och en del andra) kategorier besökare om man gör på detta sätt (iaf anses så vara fallet just nu ;) )
En bra beskrivning av principen finns här: http://www.alistapart.com/articles/taminglists/
/red Rättat stavfelet :r
Vad är en definitionalista?
"Defin ition List" ( <dl> )
En "tredje" sorts lista där man omväxlande definierar "termer" (<dt>) och "data om termer" (<dd>) - jfr en ordlista eller en referenslista i en bok.
För varje <dt> kan man ha noll eller flera <dd> - vilket framgår av exemplet (testa så ser du hur det är tänkt att fungera ;) )
<dl>
<dt>Term ("Definition Term")</dt>
<dd>Information om termen ("Definition Data")</dd>
<dt>Fiat</dt>
<dd>Italienskt bilmärke</dd>
<dd>Inte alltid högsta kvalitet kanske</dd>
<dt>Volvo</dt>
<dd>Svenskt bilmärke, kanske lite trist i sin framtoning</dd>
<dt>Vaz</dt>
</dl>
Definitionslistor måste vara bland det mest underskattade som finns, perfekt för tex FAQ:ar.
