14. november 2008 - 09:18Der er
11 kommentarer og 1 løsning
hjemmeside tilpasses mobil
Hej, hvis jeg skulle have mine sider der ligger under 3xw.flachau-ski.dk tilpasse sig til mobilt indhold hvad og hvor skirver jeg hvad, jeg fatter ikke ret meget med mindre at een eller anden skærer det ud i pap. nu er min side adr med så hvis den venlige hjælper gider at skrive/kopiere den ind i koden så er jeg en glad lille kvinde... det er siderne index.html prices.html udstyr.html eng.html og de.html der er vigtigst Jeg kan godt finde ud af at sætte ind i html men hvor og er det på hver enkel side... (*)(*) kan være med tungen lige i munden, og som man nok kan fornemme af siden så er jeg lidt tidspresset.
Teknologi, AI og forretning er i centrum på Computerworlds Cloud og AI Festival i København d. 18. og 19. september. Se hele programmet for den store konference om strategisk brug af Cloud og AI på: www.cloud-festival.dk
Altså, på din side har du en rimelig stor venstremargin, og det røde felt fylder meget. Desuden er afstanden fra det røde felts kant ind til teksten i det hvide felt stor. Alle disse afstande er jo sat til faste størrelser, der ikke varierer med browserbredden.
Du skal i stedet få angivet afstandene til at variere, så de altid passer. Altså, afstandene (boksenes bredder) skal være en bestemt procentdel af vinduet og ikke en fast bredde i pixels. Det kan du så gøre i CSS. Og skriftstørrelsen skal også være noget mindre, så den ikke fylder hele skærmen.
Altså, når man skriver
@media ...
så angiver man, at den følgende formatering hører til en bestemt type medie. Du kan dermed skrive
@media handheld .boks1 { width: 40% }
Og så sætte en bestemt tabelcelle (eller div-boks, eller hvad du nu bruger) til class="boks1". Så vil den kun i det pågældende medie blive vist med den pågældende formatering.
Så.. bøv her spørger; når der står @media handheld .boks1 { width: 40% }
så får besøgende uanset om det er på computerskærm eller handheld, en passende skræmstørrelse?
Som du sikkert kan læse af mit startindlæg så er jeg ikke superuser eller noget der nærmer sig, men jeg syntes det er sjovt med dette projekt. Derfor er css jo ikke lige et begreb jeg husmor opererer med, og jeg er ikke sikker på om css bare er en kode der lægges ind på alle sider, eller om det er et enkelt dokument som et etellerandet.html :?)
Hej Steeven, jeg har nu haft lidt mere tid til at kigge på css. link som du sendte mig. Det er en super god hjemmeside, med logiske forklaringer. Jeg må tygge mig igennem den, og jeg kan helt sikkert bruge den skridt for skridt. Har du tid at besvare ovenstående, så smider jeg lige de 200 p til dig. god weekend nina
Synes godt om
Slettet bruger
15. november 2008 - 13:58#7
Hej Nina
Ja, det er bare med at sætte sig lidt ind i det - CSS er yderst simpelt.
Dine spørgsmål handler generelt om, hvordan CSS bruges, så her kommer en kort forklaring...
Adskil formatering fra selve din HTML-side for at få overblik og meget bedre styr på det hele. Det bruger du CSS til. Vi kan lige lave et eksempel... Hvis du i din HTML-fil fx vil placere en <div>-boks med noget indhold, så kan du skrive fx:
<div> Tekst tekst tekst </div>
Her er der overhovedet ikke angiver nogen form for formatering, og tekstens farve, skrift osv. og boksens størrelse mm. er derfor standard. Hvis jeg nu vil formatere teksten, så kan jeg bruge CSS. Vi kan sige, at jeg vil sørge for, at div-boksen fylder 50% af skærmen, at teksten centreres, at skriften sættes til Arial, samt at tekstfarven gøres blå. Det kan gøres på tre forskellige måder - og her mener jeg, at CSS'en kan placeres tre forskellige steder:
Placering 1 - Inde i tagget (Inline Styles):
<div style="width: 50%; text-align: center; font-family:arial; color: blue;"> Tekst tekst tekst </div>
Her er formateringen placeret inde i tagget, ved at der er indsat en style=" "-atribut. Så gælder formateringen KUN for det pågældende tag.
Se, her har vi tilføjet præcis samme formatering til div-boksen. Men vi har skrevet formateringen i CSS i toppen af dokumentet, og så kobler vi div-boksen til CSS'en ved at tilføje en class=" "-atribut. Formateringen gælder netop for hele HTML-filen nu, og hvis vi tilføjer class="boks1"-atributten til andre div-elementer, så får de samme formatering :) Det er smart!
Placering 3 - Eksterne CSS-dokument (External Styles):
Her har vi igen angivet præcis samme formatering til div-boksen, men det kan bare ikke ses i HTML-filen. I stedet for at lave et internt CSS i toppen af dokumentet, så laver vi et eksternt CSS-dokument, som indeholder formateringen. Og så henviser vi blot til dette dokument.
I dette eksempel hedder CSS'dokumentet så "formatering.css", og det eneste det behøver indeholde nu er:
Det er alt, hvad der skal stå i CSS-dokumentet. Så kan du henvise til dette dokument fra mange andre sider også, og dermed sørge for at de alle har samme formatering. Så kan du også ændre formateringen ét sted, nemlig i dette dokument, hvis der skal ske ændringer, i stedet for at åbne hver enkel HTML-fil. Det er da smart! :)
// Steeven
Synes godt om
Slettet bruger
15. november 2008 - 14:04#8
I et eksternt CSS-dokument kan du så skrive din formatering, som du ønsker.
Hvis du blot skriver formateringen som jeg har vist, så er det dét, der vises på skærmen og det, der vises på andre medier og på udprint (så godt som).
Hvis du skal have en særlig formatering til handheld-medier, så skal du blot tilføje det nedenunder i CSS'en - så overskriver det alt tidligere. Altså, i CSS-dokumentet skriv fx:
Så har du sørget for at fastslå, at på håndholdte medier, der skal bokse med class="boks1"-atributten have en width på kun 30% og ikke 50%, og skriftstørrelsen er desuden mindre.
// Steeven
Synes godt om
Slettet bruger
15. november 2008 - 14:10#9
Og lige én ting til...
Nu snakker jeg hele tiden om class-atributter. Du kan se, at jeg har skrevet ".boks1" i CSS'en, og det henviser netop til class-atributter.
Skriver du:
<div class="boks1">
så skal man i CSS'en skrive ".boks1". Og skriver du:
<div id="boks1">
så skal man i CSS'en skrive "#boks1". Altså, man henviser til henholdsvis id (og dermed et bestemt element, da id'er bør være entydige) eller til class.
Og så ved du så godt som alt, hvad der er værd at vide om CSS :) Så skal du bare lige søge lidt for at finde ud af, hvad de forskellige kommandoer hedder; fx angiver "font-family" skrifttype, "color" angiver tekstfarve, "padding" angiver afstand mellem tekst og boksens kanter osv. Men det lærer man hurtigt.
Hej Steeven, Super mange gange tak. Jeg skal nok læse det 40 gange, men det er en meget stor hjælp. Så skal jeg bare finde tiden til at ændre det hele eftehånden.
mvh Nina
Synes godt om
Slettet bruger
15. november 2008 - 17:33#11
Mange tak for point'ene.
Efter min mening er CSS noget af det simpleste at lære. Det kræver måske lidt mere overblik, at kunne skrue det ordentligt sammen, så HTML-filer og CSS-filer virker sammen mest optimalt. Men ikke desto mindre, så bliver det en hel del lettere at have med at gøre, hvis man bruger eksterne CSS-dokumenter, selvom man ikke er særlig meget inde i emnet endnu.
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.