Avatar billede Jimmi_andersen Nybegynder
01. april 2013 - 00:36 Der er 34 kommentarer

CSS til WAPFORUM//DTD XHTML Mobile

Hejsa

Hvordan anvender jeg CSS på denne dok type - Altså til mobilhjemmeside ?

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

Hvis jeg laver SCC på normalvis for jeg mange W3c fejl i ovennævnte dok type.

Jeg har dog godt nok lavet nogle test mobilsider i almindelig html 5 tilpasses min egen Nokia, men da jeg så læste siden ind på en iphone var det alt for småt, og SCC blev ikke indlæst rigtigt.

Hjælp ?
Avatar billede scootergrisen Nybegynder
01. april 2013 - 04:01 #1
Kom med et link så vi kan teste det.
Avatar billede Jimmi_andersen Nybegynder
01. april 2013 - 12:07 #2
Her er et link på den mobilhjemmeside jeg er i gang med.
Den er lavet med alm html5 og CSS men vises forkert på for eks iphone

http://www.mobil.jalightandsound.dk/
Avatar billede keysersoze Guru
01. april 2013 - 23:32 #3
Hvis siden er lavet i html5 er det i hvert fald en forkert doctype, for det er xhtml - og i ingen af tilfældende er din kode valid så tilret de ting først.

Når det er tilrettet hvad er det så der ikke vises korrekt?
Avatar billede Jimmi_andersen Nybegynder
01. april 2013 - 23:46 #4
Okay, jeg laver en anden doctype
Men
Laves CSS på samme måde som i html5 ?
eller gøres det anderledes i xhtml

Jeg anvender Dreamweaver

Det som vises forkert er at når "mobilsiden indlæses på en iPhone, så er det meget småt.
Avatar billede keysersoze Guru
02. april 2013 - 00:00 #5
CSS er ikke afhængig af dit valg af (x)html - men som med html er der også forskellige versioner CSS.

Jeg har ikke umiddelbart noget sikkert bud på dit font-problem, men prøv evt at kig på viewport meta.
Avatar billede olebole Juniormester
02. april 2013 - 01:27 #6
<ole>

Jeg ville også undgå alle de BR-elementer. Et BR-element er kun til at lave en ny linje i noget tekst. Det har ikke noget at gøre mellem andre elementer - og det er også en misforståelse at bruge to efter hinanden.

Er problemet med skriftstørrelsen det velkendte, at teksten bliver for lille, når man drejer den til 'landscape' - eller er det et generelt problem?

/mvh
</bole>
Avatar billede olebole Juniormester
02. april 2013 - 01:28 #7
- og der skulle stå: "Er problemet med skriftstørrelsen på iPhone det velkendte, at teksten bliver for lille, når man drejer den til 'landscape' - eller er det et generelt problem?"
Avatar billede Jimmi_andersen Nybegynder
02. april 2013 - 05:54 #8
BR tegene er ikke noget problem i html5, men i xhtml kommer der fejl.
Jeg kan lave en div med tilsvarende højde i stedet for BR

Da jeg læste siden ind på en iPhone var det med forkert doctype, så måske det har noget at sige. ?

Ellers måske noget med automatisk skærmopløsning ?
Avatar billede Jimmi_andersen Nybegynder
02. april 2013 - 06:04 #9
Hvad ville du anvende i stedet for BR ?
Avatar billede olebole Juniormester
02. april 2013 - 12:06 #10
Doctype betyder enormt meget, og en forkert kan disable store dele af CSS på dokumentniveau.

P-elementer bruges til at lave afsnit med - stort linjeskift før/efter. Det ville jeg bruge de steder, hvor du bruger to BR.

Afstand mellem elementer bør aldrig laves med BR - men med margin
Avatar billede Jimmi_andersen Nybegynder
02. april 2013 - 15:56 #11
Okay, jeg prøver at ændre lidt. Så vender jeg lige tilbage.
Normalt plejer jeg at lave en div med høje som adskiller ellementerne.
Er det ikke fint nok ?

Jeg har da set mange kildekoder hvor der anvendes mange BR, men langt fra mange website er valid 100%

Jeg har for eks nogle script som jeg kan ikke validere 100%,
Avatar billede olebole Juniormester
02. april 2013 - 16:34 #12
I princippet kan du godt bruge en højde, men hvis brugeren ændrer sin tekststørrelse, er der sat vand over til ballade  *o)

Det er dog langt bedre at bruge padding/margin. Du skal så heller ikke til at rode med CSS blot for at tilføje en linje i et DIV/P.

Det er vigtigt at huske, at: Valid kode er ikke nødvendigvis god kode - men god kode er altid valid.

Det er ikke ulovligt at bruge BR mellem elementer, men det er ikke klogt, og det frarådes af W3C. Det gør flere på hinanden følgende BR elementer også.

Kode kan altid skrives valid - hvad enten der er tale om scripts eller markup kode  =)
Avatar billede Jimmi_andersen Nybegynder
02. april 2013 - 20:24 #13
Nu har jeg lavet en XHTML mobile doctype af forsiden på min mobilhjemmeside, og rettet fejl, og lavet en Wc3 De sidste 2 fejl ved jeg ikke hvordan jeg skal rette.

Med hensyn til BR så vælger jeg at beholde dem. De funger fint nok.
De skal dog afsluttes anderledes i mobile doc ( <BR/> )
Avatar billede olebole Juniormester
02. april 2013 - 21:49 #14
Jeg tror nu, jeg ville bruge HTML5, der jo er som skabt til mobil platforme. Så vidt, jeg kan se, har du ikke noget at bruge XHTML til.

XHTML anvendes, hvis man ønsker at blande XML direkte ind i markup koden. I så fald skal dokumenterne serves specielt som XML, hvis det skal give mening. Men som sagt har du ingen grund til at ligge og bokse med den slags  =)
Avatar billede Jimmi_andersen Nybegynder
02. april 2013 - 21:54 #15
Vil det sige at jeg alligevel godt kan anvende HTML5 doctype til min mobilside ? og jeg ikke behøver at ændre mine HTML5 mobilsider til XHTML mobile ?
Avatar billede keysersoze Guru
02. april 2013 - 22:04 #16
ja, sagtens og det vil også være det mest korrekte.
Avatar billede Jimmi_andersen Nybegynder
02. april 2013 - 22:08 #17
Nå fedt.

Kan jeg indsætte en kode som tjekker mobiltelefonens skræmstørrelse
Problemet var nemlig at alt er mega småt på en iPhone i forhold til min Nokia
Avatar billede keysersoze Guru
04. april 2013 - 11:31 #18
du kan bruge mediaqueries i CSS.
Avatar billede Jimmi_andersen Nybegynder
04. april 2013 - 16:49 #19
Tak - Kan du fortælle mig hvordan jeg sætter det op. ?
Avatar billede keysersoze Guru
04. april 2013 - 18:22 #20
Avatar billede Jimmi_andersen Nybegynder
04. april 2013 - 19:07 #21
Tak for linket med opsætnings mulighederne. Dog ville
jeg blive rigtig glad hvis jeg præsis ved hvad jeg skal skrive i mit html dokument og hvad jeg skal skrive i min CSS.
Avatar billede keysersoze Guru
05. april 2013 - 09:42 #22
Du skal ikke skrive noget HTML - det er ren CSS. Kig på eksempel 26.
Avatar billede Jimmi_andersen Nybegynder
06. april 2013 - 16:10 #23
Hvor i min css fil skal jeg indsætte det. ?
Ikke flere link, men løsninger vil jeg blive glad for. Takker
Avatar billede keysersoze Guru
06. april 2013 - 23:03 #24
Hvad har du selv forsøgt?
Avatar billede Jimmi_andersen Nybegynder
06. april 2013 - 23:21 #25
Nu har jeg indsat det der stod i punkt 26 i min css øverst.
Nu virker min CSS fil bare ikke. Dvs ingen css bliver indlæst.
Avatar billede Jimmi_andersen Nybegynder
06. april 2013 - 23:38 #26
Nu starter min css med følgende

@charset "utf-8";
{
@media screen and (device-width: 800px)
}

Jeg måtte sætte det sidste tegn ind for at den indlæste css normalt.
Ved dog ikke om det virker på media screen virker nu.
Avatar billede keysersoze Guru
06. april 2013 - 23:40 #27
Det lyder som om at du ikke engang forsøger men bare forventer en færdig løsning til copy/paste - og det får du mig ikke til at give.

Læs denne artikel http://css-tricks.com/css-media-queries/ og kom så med et link til dit resultat så vi kan se hvad der sker.

Gjorde du nogensinde noget ud af kommentaren i #5?
Avatar billede Jimmi_andersen Nybegynder
06. april 2013 - 23:56 #28
Naturligvis forsøger jeg rigtig mange ting, og jeg søger også mange løsninger. Dog er det bare ikke altid lige let at forstå hvad man skal fordi mange skriver virkelige dårlige forklaringer.

Når jeg spørger herinde, forventer jeg at få et svar, og ikke et link på noget jeg selv kunne ha fremsøgt.

De link du sender forstår jeg ikke noget af alligevel wievport ved jeg ikke hvad er.

Hvis du forklarede mig hvad det var og betyder, ville det være nemmere
Avatar billede keysersoze Guru
07. april 2013 - 00:23 #29
Hvis ikke de folk standarderne kommer fra kan forklare det kan jeg nok heller ikke - men det du har skrevet i #26 er jo ikke engang alt som i eksemplet ligesom det selvfølgelig også skal tilpasses det behov du har som jeg ikke kan opfinde for dig.

viewport kan du læse om her https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Avatar billede Jimmi_andersen Nybegynder
07. april 2013 - 00:38 #30
Det som stod i punkt 26 var
@media screen and (device-width: 800px) { ... }
Og det virker ikke.

Det står ikke hvad man skal, eller hvor det skal indsættes.
Du behøver jo heller ikke hjælpe med en løsning, så venter jeg bare til der er nogle andre som vil.

Jeg ved godt det er for nemt bare at få en copy/paste men det kan jeg godt lære noget af efterfølgende, og det er det jeg har brug for nu for at komme videre. Du ved garanteret hvad jeg skal.
Avatar billede keysersoze Guru
07. april 2013 - 00:59 #31
Så kig på linket i #27 i stedet. Du skal selvfølgelig udskifte ... Med de styles du vil have til at gælde ligesom det skal tilpasses til den eller de bredder det skal gælde for. Men løser du det på den måde vil andre enheder,  fx android, jo også rammes. Og nej, jeg ved ikke hvad du vil præcist nok til at give et svar.

Men tag det nu fra en ende af og kig på viewport.
Avatar billede Jimmi_andersen Nybegynder
07. april 2013 - 01:08 #32
Det er søger er en code HTML/CSS what ever som automatisk finder ud af hvilken skærmstørelse mobiltelefonen har, så indholdet tilpasses til den aktuelle skærm.
Avatar billede keysersoze Guru
07. april 2013 - 10:16 #33
så indsæt den viewport meta du finder bedst passende fra linket i #29 og ligeledes CSS fra linket i #27.

hvis du ikke forstår artiklerne så byg din side om ud fra et standard responsive framework, fx http://twitter.github.io/bootstrap/
Avatar billede Jimmi_andersen Nybegynder
07. april 2013 - 17:30 #34
Nu har læst denne http://softlearn.dk/?page_id=1346 ( jeg foretrækker sider på dansk )og det forstår jeg godt sammenhængen af, men det er ikke problemet med bredde på elementerne. De tilpasse automatisk. Problemet er at teksten er meget mindre når jeg indlæser siden på en Iphone i forhold til min egen nokia mobil, og skrifttyperne vises heller ikke korrekt.
Avatar billede Ny bruger Nybegynder

Din løsning...

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.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester