CSS til WAPFORUM//DTD XHTML Mobile

Kom med et link så vi kan teste det.

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/

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?

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.

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.

<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>

- 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?"

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 ?

Hvad ville du anvende i stedet for BR ?

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

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%,

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  =)

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/> )

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  =)

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 ?

ja, sagtens og det vil også være det mest korrekte.

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

du kan bruge mediaqueries i CSS.

Tak - Kan du fortælle mig hvordan jeg sætter det op. ?

http://www.w3.org/TR/css3-mediaqueries/

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.

Du skal ikke skrive noget HTML - det er ren CSS. Kig på eksempel 26.

Hvor i min css fil skal jeg indsætte det. ?
Ikke flere link, men løsninger vil jeg blive glad for. Takker

Hvad har du selv forsøgt?

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.

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.

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?

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

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

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.

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.

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.

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/

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.