/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Spg. vedr. layout på webdesign 101
Fra : Jahirah


Dato : 18-01-10 00:24

Hejsa,

På Jørgens side Webdesign 101 er der et layout eksempel med 3
lige høje spalter. Adressen til artiklen er:
http://www.webdesign101.dk/csslayout/ex/eksempel_2.html

Jeg vil gerne undskylde hvis det er mig der ikke helt forstår
artiklen, men jeg kan ikke helt finde html'en og css'en for
eksempel 2 - eller er det meningen at man skal benytte "vis
kildekode"? :)
Jeg har forsøgt at læse artiklen igennem fra ende til anden, men
er stadig ikke helt sikker på at jeg har forstået det, da jeg
ikke rigtig synes at kunne få tingene til at fungere ordentligt
:)

Enhver hjælp eller råd er kærkommen :)
På forhand tak :)

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
jopa (18-01-2010)
Kommentar
Fra : jopa


Dato : 18-01-10 00:48

Jahirah skrev:

>
> Jeg vil gerne undskylde hvis det er mig der ikke helt forstår
> artiklen, men jeg kan ikke helt finde html'en og css'en for
> eksempel 2 - eller er det meningen at man skal benytte "vis
> kildekode"? :)

Ja det tror jeg.
CSS ligger sammen med HTML du kan så klippe CSS ud og lægge i en ekstern
fil og så linke til den, eller lade CSS blive hvor det er.

Kopier kildekoden til din puter og det skulle funke

--
Mvh. John Paulsen

www.johns-web.dk
www.jp-web.dk


Jørgen Farum Jensen (18-01-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 18-01-10 19:27

Jahirah skrev:
> Hejsa,
>
> På Jørgens side Webdesign 101 er der et layout eksempel med 3
> lige høje spalter. Adressen til artiklen er:
> http://www.webdesign101.dk/csslayout/ex/eksempel_2.html
>
> Jeg vil gerne undskylde hvis det er mig der ikke helt forstår
> artiklen, men jeg kan ikke helt finde html'en og css'en for
> eksempel 2 - eller er det meningen at man skal benytte "vis
> kildekode"? :)

Ja. Brug Vis kilde, tast CTRL-A for at
vælge alt, CTRL-C for at kopiere alt
og CTRL-V for at sætte det ind i din
editor. Det du nuu vil mangle er
baggrundsgrafikken:
http://www.webdesign101.dk/csslayout/ex/res/leftcolbg.png

Siden jeg skrev de arikler er jeg blevet
solgt påå en noget enklere metode, som
er beskrevet i artiklen
http://www.webdesign101.dk/www/layout/floatlayout.php
Det eksempel, der erstatter ovennævnte, er
http://www.webdesign101.dk/www/layout/eks/eksempel_6.html

Denne "nye" metode overflødiggør brugen af
grafiske elementer for at markere spaltehøjden.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

Jahirah (19-01-2010)
Kommentar
Fra : Jahirah


Dato : 19-01-10 01:44

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
> Siden jeg skrev de arikler er jeg blevet
> solgt påå en noget enklere metode, som
> er beskrevet i artiklen
> http://www.webdesign101.dk/www/layout/floatlayout.php
> Det eksempel, der erstatter ovennævnte, er
> http://www.webdesign101.dk/www/layout/eks/eksempel_6.html
>
-------------------------------------------------

Jeg er total tabt bag en vogn lige nu Oo
Jeg fulgte dine links men fandt igen mig selv fuldstændig
uforstående overfor artiklen.

Når jeg kopierede det såkaldte nye css ind i min cssfil blev
sidens struktur opløst. Jeg forsøgte at kopiere de nævnte klasser
ind som erstatning for de matchende klasser i det eksisterende
eksempel, men stadig uden resultat.
"Vis kildekode" gav dog en smule struktur men intet som lignede
det pågældende eksempel.
Jeg løber panden mod en mur lige nu, og jeg kan åbenbart ikke
rigtig gennemskue hvordan jeg skal finde den egentlige kode for
eksemplet :S

Jeg kan ikke gennemskue hvilket eksempel der indeholder den
korrekte html, eller hvad den nye css skal erstatte. Det ene
eksempel leder tilbage til det forrige, og igen...
Jeg er godt klar over at det nok er mig der fatter hat, men jeg
ville være taknemlig hvis der var nogen der havde mulighed for at
hjælpe mig lidt på vej :)

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jørgen Farum Jensen (19-01-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-01-10 12:32

Jahirah skrev:

> Når jeg kopierede det såkaldte nye css ind i min cssfil blev
> sidens struktur opløst. Jeg forsøgte at kopiere de nævnte klasser
> ind som erstatning for de matchende klasser i det eksisterende
> eksempel, men stadig uden resultat.
> "Vis kildekode" gav dog en smule struktur men intet som lignede
> det pågældende eksempel.
> Jeg løber panden mod en mur lige nu, og jeg kan åbenbart ikke
> rigtig gennemskue hvordan jeg skal finde den egentlige kode for
> eksemplet :S
Jeg er da ked af at høre, at det mislykkedes totalt for mig
at forklare det. Det kunne interessere mig at høre hvor det
er du "står af", hvis du kan præcisere det.

> Jeg kan ikke gennemskue hvilket eksempel der indeholder den
> korrekte html, eller hvad den nye css skal erstatte. Det ene
> eksempel leder tilbage til det forrige, og igen...
> Jeg er godt klar over at det nok er mig der fatter hat, men jeg
> ville være taknemlig hvis der var nogen der havde mulighed for at
> hjælpe mig lidt på vej :)

Og jeg er en lille smule forvirret over din besked.
Der er ikke noget der skal "erstattes". Hvis du i din
browser har indlæst
http://www.webdesign101.dk/csslayout/ex/eksempel_2.html
skal du bruge Vis kilde til at se *hele den kildekode*
der skaber eksemplet. Det eneste der er eksternt i forhold
til den side er den baggrundsgrafik der skal markere
de lige store højder på kolonnerne. Jeg indsatte et link til
denne grafik i min foregående posting.

Når du kigger på kildekoden i browseren taster du
CTRL-A for at vælge alt, CTRL-C for at kopiere til
klippebordet.

Nu starter du Windows notesblok op og taster CTRL-V.
Nu er alt den HTML og CSS der er nødvendig for at
tegne den pågældende side indsat i Notesblok.

Gem nu dokumentet som "miteksempel.html" i en mappe
på din computer. Download
http://www.webdesign101.dk/csslayout/ex/res/leftcolbg.png
til samme mappe, som du har brugt til miteksempel.html.
Ret linjerne
background-image: url(res/leftcolbg.png);
til
background-image: url(leftcolbg.png);

Indlæs nu dokumentet i din browser (Åbn fil).

Så vil du (forhåbentligt) se nøjagtigt det
samme skærmbillede som det originale eksempel.

Hvis det mod forventning ikke lykkes er der
næsten kun tilbage at bede dig oploade dit
resultat, så jeg eller andre kan se, hvor det
er det går galt.

Dette eksempel er som de fleste af de andre
lavet så de kan stå alene, det vil sige uden
at det er nødvendigt at læse hele artiklen.

Det er ikke tilfældet med de nyere eksempler,
som jeg omtale i min forrige posting. Til gengæld
udmærker de sig ved at alle eksemplerne bruger
den samme HTML-kildekode, og at princippet for
at skabe udseende af lige høje kolonner i praksis
er noget lettere at gennemføre uden en hel masse
ekstra HTML-kode, som det ovenfor nævnte eksempel
kræver.
--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Jahirah (19-01-2010)
Kommentar
Fra : Jahirah


Dato : 19-01-10 13:43

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>
> Jeg er da ked af at høre, at det mislykkedes totalt for mig
> at forklare det. Det kunne interessere mig at høre hvor det
> er du "står af", hvis du kan præcisere det.
>
> Og jeg er en lille smule forvirret over din besked.
> Der er ikke noget der skal "erstattes"...
>
-----------------------------------------------------------

Mange tak forklaringen :)
Jeg tror bestemt ikke det er dig det er mislykkedes for - det er nu
nok nærmere mig for hvem der gik en sort klap ned :) Det er ikke et
uhørt fænomen for mig :D

Selvfølgelig vil jeg gerne forsøge at forklare præcis hvor jeg tabte
tråden. Det er da det mindste jeg kan gøre.

Efter jopa svarede, gik jeg ind på eksempel 2, viste kildekode og
kopierede hele molevitten over i mine egne filer (seperat stylesheet).
Dette producerede et identisk resultat i forhold til eksempel på din
side.

Derefter svarede du, og da du fortalte om den "opdaterede udgave" at
layoutet blev jeg enig med mig selv om at jeg lige så godt kunne
forsøge at opgradere, bl.a også fordi jeg ikke bryder mig rasende
meget om negative marginer og/eller kæmpe-borders. Jeg foretrækker når
en konstruktion styres af floatede DIV's. Jeg fulgte dit første link
og klikkede mig videre ind på eksempel 6.

Inde på denne side læser jeg artiklen, og da jeg kommer til det nye
stylesheet synes jeg der bestemt måtte mangles en masse? men prøver
alligevel at kopiere det over. Jeg bliver dog hurtigt klar over at der
MÅ mangle noget, for hele strukturen går i opløsning. Jeg prøver så at
erstatte de individuelle klasser i mit eksisterende stylesheet, med
dem listet på siden, men det virker heller ikke helt efter hensigten.
Jeg navigere tilbage til eksempel 5 via notebox'en i toppen for at
sikre mig jeg har den korrekte html, og derfra tilbage til eksempel 4.

Jeg tror jeg taber tråden meget nemt, fordi jeg ikke har helt styr på,
hvilke eksemplers kode man skal kaste sammen, for at opnå et layout
fra et helt tredje eksempel?... Og i eksempel 6 kan den foreviste CSS
kode aldrig nogensinde give en struktur - eller? Som før nævnt, når du
alligevel tillader copy/paste, så savner jeg muligheden for at kunne
finde den pågældende kode pr. eksempel, også selvom html koden evt.
gentager sig selv.
Jeg har svært ved at gennemskue eksemplerne når de hver især kun
indeholder brudstykker :)

Alt i alt synes jeg dog du har en rigtig god side i Webdesign 101, jeg
benytter den ofte og har før brugt den som skabelon.
Mit problem ang. dette specielle eksempel bygger nok delvist på
manglende forståelse for konstruktionens html, men også CSS.

//Jahirah

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jørgen Farum Jensen (19-01-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 19-01-10 21:43

Jahirah skrev:
> Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:
>> Jeg er da ked af at høre, at det mislykkedes totalt for mig
>> at forklare det. Det kunne interessere mig at høre hvor det
>> er du "står af", hvis du kan præcisere det.
>>
>> Og jeg er en lille smule forvirret over din besked.
>> Der er ikke noget der skal "erstattes"...
>>
> -----------------------------------------------------------
>
> Mange tak forklaringen :)
> Jeg tror bestemt ikke det er dig det er mislykkedes for - det er nu
> nok nærmere mig for hvem der gik en sort klap ned :) Det er ikke et
> uhørt fænomen for mig :D
>
> Selvfølgelig vil jeg gerne forsøge at forklare præcis hvor jeg tabte
> tråden. Det er da det mindste jeg kan gøre.
>
> Efter jopa svarede, gik jeg ind på eksempel 2, viste kildekode og
> kopierede hele molevitten over i mine egne filer (seperat stylesheet).
> Dette producerede et identisk resultat i forhold til eksempel på din
> side.

Så vidt så godt, må man vel sige...
> Derefter svarede du, og da du fortalte om den "opdaterede udgave" at
> layoutet blev jeg enig med mig selv om at jeg lige så godt kunne
> forsøge at opgradere, bl.a også fordi jeg ikke bryder mig rasende
> meget om negative marginer og/eller kæmpe-borders. Jeg foretrækker når
> en konstruktion styres af floatede DIV's. Jeg fulgte dit første link
> og klikkede mig videre ind på eksempel 6.

Der er ikke tale om nogen "opgradering", men om en alternativ
udformning af såvel HTML-kode som CSS-kode.
> Inde på denne side læser jeg artiklen, og da jeg kommer til det nye
> stylesheet synes jeg der bestemt måtte mangles en masse? men prøver
> alligevel at kopiere det over. Jeg bliver dog hurtigt klar over at der
> MÅ mangle noget, for hele strukturen går i opløsning. Jeg prøver så at

Det der "mangler" i disse eksempler er to CSS-filer, som jeg
påpeger i såvel selve den introducerende artikel som i
venstre spalte i eksempel 6. Forskellen på disse eksempler
er i det dokumentindlejrede stylesheet.

Og jeg har lavet det på den måde, fordi tekstformatering
og menuformatering i og for sig ikke vedrører layoutet.
De mange linjer CSS-kode gentaget på hver side ville
efter min opfattelse vanskeliggøre overblikket.

> Jeg tror jeg taber tråden meget nemt, fordi jeg ikke har helt styr på,
> hvilke eksemplers kode man skal kaste sammen, for at opnå et layout
> fra et helt tredje eksempel?... Og i eksempel 6 kan den foreviste CSS
> kode aldrig nogensinde give en struktur - eller?

Man kan ikke bare sådan "kaste [kode] sammen". Jeg prøver
at tilrettelægge mine eksempler sådan at de udgør helheder
omkring det omhandlede emne.
Når jeg selv finder et eksempel på nettet som jeg synes
er interessant, kopierer jeg det nøjagtigt som jeg
har foreslået, og ser til at eventuelle eksterne filer
også er downloadet. Når mit eksempel ser ud som
originalen, begynder jeg at file på det ud fra mine
egne forestillinger om hvordan geden skal barberes.

Hvis jeg så støder ind i vanskeligheder, uploader jeg
problemsiden og skriver jeg en posting i denne gruppe.

> Alt i alt synes jeg dog du har en rigtig god side i Webdesign 101, jeg
> benytter den ofte og har før brugt den som skabelon.
> Mit problem ang. dette specielle eksempel bygger nok delvist på
> manglende forståelse for konstruktionens html, men også CSS.

Tak for de pæne ord. Forståelsen kommer med øvelsen.

--
Med venlig hilsen
Jørgen Farum Jensen
http://webdesign101.dk
..

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste