---

Hej allesammen,

Jeg har siddet og læst lidt på W3 Schools hjemmeside for at
forstå en række attributer i CSS'en som jeg har måttet sande at
jeg ikke helt har forstået.
Det gør det tit overordentlig indviklet at opnå selv simple ting
med stylesheets, når jeg ikke ved at jeg via få værdier kan opnå
det samme som oftest tager et kæmpe overarbejde at klare på
"århusianske" manér...

/////////////////////////////////////////////////////////////

CSS/XHTML attributterne jeg gerne vil have en mere håndgribelig
forklaring af er:

-----------------------------
CSS "Display" attributen
-----------------------------
- display:inline;
- display:block;
- display:list-item;
- dislay:run-in;
- display:table-?

Har de forskellige tableværdier en fællesnævner?

-----------------------------
CSS "Clear" attributen
-----------------------------
- clear:left;
- clear:right;
- clear:both;

Jeg har oplevet ofte at have store problemer med at få ex. 2
billeder af 100x100px til at line up ved SIDEN af hinanden,
istedet for ovenpå hinanden. Jeg fandt, ved tilfælde, ud af at
"clear:both" afhjalp dette problem så længe wrapperen var bred
nok til at indeholde begge billeder.
Desværre forstår jeg stadig ikke HVORFOR det virker... :/

-----------------------------
CSS "Inherit" attributen
-----------------------------
Hvordan virker det egentlig? Jeg mener - hvor ved den fra hvilke
værdier og egenskaber den skal arve, og fra hvilken class eller
id?

-----------------------------
XHTML "Span" attributen
-----------------------------
Jeg tror i bund og grund ikke jeg har forstået hvad brugen af
span skal gøre godt for. Førhen brugte man f.eks. <font
color="black"></font>, men nu bruges span utrolig meget.
De ganske hvor jeg har forsøgt at bruge attributen er det gået
helt galt og det har rykket uhæmmet med indholdet uden at jeg
kunne gennemskue hvorfor og uden at tilknyttet hverken class
eller id.

/////////////////////////////////////////////////////////////

Jeg er klar over at jeg spørger om en frygtelig masse, som
muligvis kan være en MEGET lang forklaring. I er velkomne til
bare at svare på én eller to - al yderligere forståelse ville
være guld værd!

Jeg har som sagt nærlæst W3 School's sider og søgt rundt på
nettet efter andre forklaringer, men uden egentlig rigtig at
finde svar som har kunnet udmønte sig i forståelse.
Jeg ved ikke om jeg er sløv? Jeg har det bare ikke altid lige
nemt med teknisk engelske, eller tekniske danske ord - så går
"maskinen" lidt i baglås om du vil :)

På forhånd 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

---

Jahirah skrev:
> Hej allesammen,
>
> Jeg har siddet og læst lidt på W3 Schools hjemmeside for at
> forstå en række attributer i CSS'en som jeg har måttet sande at
> jeg ikke helt har forstået.
> Det gør det tit overordentlig indviklet at opnå selv simple ting
> med stylesheets, når jeg ikke ved at jeg via få værdier kan opnå
> det samme som oftest tager et kæmpe overarbejde at klare på
> "århusianske" manér...
>
> /////////////////////////////////////////////////////////////
>
> CSS/XHTML attributterne jeg gerne vil have en mere håndgribelig
> forklaring af er:
>
> -----------------------------
> CSS "Display" attributen
> -----------------------------
> - display:inline;
> - display:block;
> - display:list-item;
> - dislay:run-in;
> - display:table-?
>
Der er ikke tale om attributter men om
egenskab/værdi-par.

display:none fjerner et element fra
websiden, display:block formateret et
element som et blokelement.
Der er meget mere om display, det er
ikke muligt at forklare det hele i
en posting.
> Har de forskellige tableværdier en fællesnævner?

Ja, at de allesammen handler om egenskaber
der får elementer til at opføre sig som
tabelelemnter.

Her er koden til et tabellayout uden tabeller:

..kolonne {display:table;}
..kolonne div {display:table-cell;}
..left {width:20%; background-color:#aaa;}
..center {width:50%; background-color:#eee;
border-width:0 1px;border-style:solid;border-color:black;}
..right {width:30%;}
> -----------------------------
> CSS "Clear" attributen
> -----------------------------
> - clear:left;
> - clear:right;
> - clear:both;
>

<snip-snip>
> -----------------------------
> XHTML "Span" attributen
> -----------------------------
> Jeg tror i bund og grund ikke jeg har forstået hvad brugen af
> span skal gøre godt for. Førhen brugte man f.eks. <font
> color="black"></font>, men nu bruges span utrolig meget.
> De ganske hvor jeg har forsøgt at bruge attributen er det gået
> helt galt og det har rykket uhæmmet med indholdet uden at jeg
> kunne gennemskue hvorfor og uden at tilknyttet hverken class
> eller id.

span er ikke en attribut, men et element, samme som div,
blot inline.
p span {color:gray;} vil gøre tekst i et span-element
gråt, hvis det står inde i et p-element.
> /////////////////////////////////////////////////////////////
>
> Jeg er klar over at jeg spørger om en frygtelig masse, som
> muligvis kan være en MEGET lang forklaring. I er velkomne til
> bare at svare på én eller to - al yderligere forståelse ville
> være guld værd!

Det er jo hele apparatet, du skal have forklaret - det
er der vist ingender kan overkomme her.

> Jeg har som sagt nærlæst W3 School's sider og søgt rundt på
> nettet efter andre forklaringer, men uden egentlig rigtig at
> finde svar som har kunnet udmønte sig i forståelse.
> Jeg ved ikke om jeg er sløv? Jeg har det bare ikke altid lige
> nemt med teknisk engelske, eller tekniske danske ord - så går
> "maskinen" lidt i baglås om du vil :)

Du er ikke alene - tusinder af andre har fået
hjælp til præcis disse ting i de bøger, jeg nævner
i min signatur. Kan lånes på bibloteket.

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

---

Jørgen Farum Jensen wrote in dk.edb.internet.webdesign.html:

> Der er ikke tale om attributter men om
> egenskab/værdi-par.
> --------------
> display:none fjerner et element fra
> websiden, display:block formateret et
> element som et blokelement.
> Der er meget mere om display, det er
> ikke muligt at forklare det hele i
> en posting.
> --------------
> Ja, at de allesammen handler om egenskaber
> der får elementer til at opføre sig som
> tabelelemnter.
> --------------
> Her er koden til et tabellayout uden tabeller:
> --------------
> ..kolonne {display:table;}
> ..kolonne div {display:table-cell;}
> ..left {width:20%; background-color:#aaa;}
> ..center {width:50%; background-color:#eee;
> ..border-width:0 1px;border-style:solid;border-color:black;}
> ..right {width:30%;}
> --------------
> span er ikke en attribut, men et element, samme som div,
> blot inline.
> p span {color:gray;} vil gøre tekst i et span-element
> gråt, hvis det står inde i et p-element.
> --------------
> Det er jo hele apparatet, du skal have forklaret - det
> er der vist ingen der kan overkomme her.
> --------------
> Du er ikke alene - tusinder af andre har fået
> hjælp til præcis disse ting i de bøger, jeg nævner
> i min signatur. Kan lånes på bibloteket.

Tusind tak fordi du ville tage tiden til at løbe mine spørgsmål
igennem. Godt nok fik jeg ikke alt serveret på et sølvfad, men din
redegørelse af bl.a. forskellen på attributter og elementerne alene
hjalp mig til at forstå nogle (kan jeg se nu) temmelig tydelige
faldgrupper som jeg simpelthen ingen anelse havde om...

Dit svar har yderligere ledt mig på sporet til at forstå endnu en
del af CSS classes og ID's som jeg tidligere har måttet gætte mig
meget til, nemlig når der er angivet et class eller ID navn med
flere mellemrum uden at der nødvendigvis optræder kommaer eller
yderligere class/ID tegn - altså så én class eller et ID er delt i
ex. tre uforbundende ord eller mere...

Endnu engang, tusind tak. Jeg vil tage mig sammen og smutte forbi
biblioteket imorgen!

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

---

On 27 Nov., 00:00, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:
> Jahirah skrev:

> > Jeg har som sagt nærlæst W3 School's sider og søgt rundt på
> > nettet efter andre forklaringer, men uden egentlig rigtig at
> > finde svar som har kunnet udmønte sig i forståelse.
> > Jeg ved ikke om jeg er sløv? Jeg har det bare ikke altid lige
> > nemt med teknisk engelske, eller tekniske danske ord - så går
> > "maskinen" lidt i baglås om du vil :)
>
> Du er ikke alene

Men meget af forvirringen skyldes også, at man har testet det i IE,
som er fejlfyldt, og så har det ikke virket. F.eks. deres underlige
idé om, at first-letter skal have mellemrum inden { for at virke.
Derfor kan man med fordel tjekke i først FF, alternativt Opera,
dernæst se, om det findes i den (desværre stadig) markedsledende
browser IE.

Til det formål, der fandt jeg denne til at tjekke understøttelse af
CSS generelt (der er også en anden, men den blev slettet af foretrukne
ved uheld):
http://www.westciv.com/style_master/academy/browser_support/index.html

Og så er der alle browserbugsne, som jeg plejede at bruge denne til:
http://www.positioniseverything.net/

Noget af det omhandler IE6, og hvorvidt man bør tage det med eller ej,
må snart være en diskussion værd. IE6 er så fejlfyldt og usikker, at
det at man ikke kan se en hjemmeside 100% som tænkt, vil være det
mindste problem for brugeren.


MVH
Rune

---

Rune Jensen skrev:

> Til det formål, der fandt jeg denne til at tjekke understøttelse af
> CSS generelt (der er også en anden, men den blev slettet af foretrukne
> ved uheld):
> http://www.westciv.com/style_master/academy/browser_support/index.html

Godt link. Sådanne tabeller skal
dog læses med et gran salt - tjek
lige understøttelsen af background-
attachment i IE .

Derfor foretrækker jeg at bruge
Eric Meyers
http://meyerweb.com/eric/css/tests/css2/index.html

Her kan du direkte se, om den egenskab
eller værdi der er på tale virker i
/din/ browser.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/

---

Rune Jensen wrote in dk.edb.internet.webdesign.html:

> Men meget af forvirringen skyldes også, at man har testet det i IE,
> som er fejlfyldt, og så har det ikke virket. F.eks. deres underlige
> idé om, at first-letter skal have mellemrum inden { for at virke.
> Derfor kan man med fordel tjekke i først FF, alternativt Opera,
> dernæst se, om det findes i den (desværre stadig) markedsledende
> browser IE.
>
> Til det formål, der fandt jeg denne til at tjekke understøttelse af
> CSS generelt (der er også en anden, men den blev slettet af foretrukne
> ved uheld):
> http://www.westciv.com/style_master/academy/browser_support/index.html
>
> Og så er der alle browserbugsne, som jeg plejede at bruge denne til:
> http://www.positioniseverything.net/
>
> Noget af det omhandler IE6, og hvorvidt man bør tage det med eller ej,
> må snart være en diskussion værd. IE6 er så fejlfyldt og usikker, at
> det at man ikke kan se en hjemmeside 100% som tænkt, vil være det
> mindste problem for brugeren.

Min favorit, og standard browser er FireFox, og har været det i godt 2
år, men jeg vil bestemt stemme i med at IE har været temmelig besværlig
mht. til fejl og bugs i forbindelse med de første gange jeg stiftede
bekendtskab med CSS.

Ud over at have FireFix installeret som primary browser, har jeg
installeret IE 5.5 (ligger dog ikke meget vægt på fejl i denne da den
f.eks. heller ikke kan finde ud af transparency i PNG formattet) IE 6,
Opera9 og Safari 2.

Jeg plejer at lave én side, validere den - derefter bruge den som
skabelon og så validere hver enkelt side for ny kode efterfølgende. Når
en side er "færdig"-lavet i FireFox, checker jeg den i de resterende
browsere.
Når det samlede projekt så er færdigt følger jeg samme procedure. Jeg
synes det er nemmest sådan :)

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

---

On 27 Nov., 10:32, Jørgen Farum Jensen <jfjen...@yahoo.dk> wrote:

> Derfor foretrækker jeg at bruge
> Eric Meyershttp://meyerweb.com/eric/css/tests/css2/index.html
>
> Her kan du direkte se, om den egenskab
> eller værdi der er på tale virker i
> /din/ browser.

OK, ja jeg kan godt se den går lidt dybere;) Den er bogmærket.

MVH
Rune Jensen

---

On 26 Nov 2008 21:39:11 GMT, Jahirah <jahirah@gmail.com> wrote:


>-----------------------------
>CSS "Inherit" attributen
>-----------------------------
>Hvordan virker det egentlig? Jeg mener - hvor ved den fra hvilke
>værdier og egenskaber den skal arve, og fra hvilken class eller
>id?

Den arver fra forældre-elementet. Bruges oftest til baggrunds-farve.

Hvis du fx har:
<p>Dette er <em>en</em> tekst.</p>
- og
em {
color: red;
background-color:inherit;
}
- så arver den baggrunds-farven fra P-elementet.


>-----------------------------
>XHTML "Span" attributen
>-----------------------------
>Jeg tror i bund og grund ikke jeg har forstået hvad brugen af
>span skal gøre godt for. Førhen brugte man f.eks. <font
>color="black"></font>, men nu bruges span utrolig meget.

De fleste HTML-elementer har en default opførsel - fx er overskrifter
(H1, H2 osv.) større (og oftest federe) end brødtekst (afsnits-tekst,
p-element.
De har altså en bestemt opførsel, som browser-konstruktøren beslutter.

SPAN og DIV er "generiske elementer", dvs. de har i princippet ingen
egenskaber (bortset fra, at SPAN er generisk inline, og DIV er generisk
blok).

Dvs. hvis du har:
<p>Dette er <span>en</span> tekst.</p>
- så bør SPAN ikke påvirke overhovedet - indtil du sætter nogle
egenskaber med CSS.

Skrev du derimod:
<p>Dette er <strong>en</strong> tekst.</p>
- så har STRONG en default opførsel, typisk at den gør teksten federe
eller fremhæver på anden måde.

De generiske elementer kombineret med CSS giver en enorm magt, men man
bør kun bruge de generiske tags, når der ikke er meningsfulde
ikke-generiske elementer.

<snip>

>Jeg har som sagt nærlæst W3 School's sider og søgt rundt på
>nettet efter andre forklaringer, men uden egentlig rigtig at
>finde svar som har kunnet udmønte sig i forståelse.

Jeg synes W3Schools kan være udmærkede som opslag, men faktisk synes jeg
tit W3C har flere forklaringer med. Eftersom de beskriver en standard,
er der meget som er holdt i et lidt formelt sprog, men faktisk er der
mange gode forklaringer.

<url: http://www.w3.org/TR/1999/REC-html401-19991224/>
<url: http://www.w3.org/TR/CSS21/>


En vigtig ting for at forstå forholdet mellem HTML og CSS er, at HTML
bruges til at *strukturere* indholdet på en side, mens CSS bruges til
give den form.
Dvs. *indhold* er beskrevet i HTML-sprog, *form* i CSS.

Og sådan bør man også tænke, når man laver sin side. Er strukturen
logisk? Understøtter strukturen det budskab, man vil sende? osv.
Når den del så er på plads, kan man understøtte strukturen ved at vælge
en passende form - farve, størrelse, skrifttype etc.

(Det er i øvrigt det samme, man gør, når man sætter tekst op i et
DTP-program: Først markerer man de forskellige elementer på siden/i
bogen osv. som brødtekst, overskrift, mellemrubrik, billedtekst, citat
osv. Bagefter vælger man så, hvilke egenskaber, de forskellige elementer
skal have. På den måde får man konsistens i sit layout.)

Det var ulempen før HTML4 og CSS, at form og indhold blev blandet sammen
i en grød. Og ofte er det også det, der sker, når begyndere bruger en
WYSIWYG-editor.


Mvh. Jørn

--
Jørn Andersen,
Brønshøj

---

> Den arver fra forældre-elementet. Bruges oftest til baggrunds-farve.

Eller font fra body, så udvikleren slipper for at sætte sin skrifttype mere
end et sted på siden.

Når jeg skal forklare om CSS så plejer jeg at tage mine blå plastkasser
frem.
Sætter en dymo label med et navn på, på hver som id og som class.
Og så leger vi ellers byggemand bob.

Når det hele er færdig så skriver vi hvilke farver vi vil have på en blok,
og efterfølgende så finder jeg alle de andre farvede plastkasser frem og
bytter ud.

Det er for de mindste, men jeg har lade mig fortælle af de forældre / voksne
der har hørt mig vise dette at de meget nemmere forstår det.

Christian

---

Jahirah skrev:

> -----------------------------
> CSS "Clear" attributen
> -----------------------------
> - clear:left;
> - clear:right;
> - clear:both;

Clear bestemmer hvordan et floatet element lægger sig i forhold
til dem der allerede er anbragt på siden. Normalt hvis der er
plads, følger det sit flow - lægger an med venstre side hvis det
er floatet left.

Hvis der ydermere er specificeret clear, ændres den opførsel.
Clear left vil f.eks. sige at det hopper ned under
venstreelementer, men floater normalt hvis der ingen er og vice
versa.

Tænk på clear som en slags ny linje. Det er faktisk hvad clear
both bevirker.

--
Bertel
http://bertel.lundhansen.dk/      FIDUSO: http://fiduso.dk/

---

Bertel Lund Hansen wrote in dk.edb.internet.webdesign.html:

> Clear bestemmer hvordan et floatet element lægger sig i
> forhold til dem der allerede er anbragt på siden. Normalt
> hvis der er plads, følger det sit flow - lægger an med venstre
> side hvis det er floatet left.
>
> Hvis der ydermere er specificeret clear, ændres den opførsel.
> Clear left vil f.eks. sige at det hopper ned under
> venstreelementer, men floater normalt hvis der ingen er
> og vice versa.
>
> Tænk på clear som en slags ny linje. Det er faktisk hvad clear
> both bevirker.

Christian Kragh wrote in dk.edb.internet.webdesign.html:

> Når jeg skal forklare om CSS så plejer jeg at tage mine blå >
plastkasser frem.
> Sætter en dymo label med et navn på, på hver som id og som
> class. Og så leger vi ellers byggemand bob.

> Når det hele er færdig så skriver vi hvilke farver vi vil have
> på en blok, og efterfølgende så finder jeg alle de andre >
farvede plastkasser frem og bytter ud.

> Det er for de mindste, men jeg har lade mig fortælle af de
> forældre / voksne der har hørt mig vise dette at de meget
> nemmere forstår det.

@Bertel & Rune
Jeg ved slet ikke hvordan jeg skal få sagt tak for jeres måde at
forklare det hele på. Jeg tror jeg kunne skrive tak mange gange
uden at synes det var nok!

I har formået at forklare kodens funktion og sågar dens form, i
billeder eller på en måde så ord kan omsættes til noget visuelt
håndgribeligt! Det har hjulpet gevaldigt på min forståelse af
imponerende mange ting! Hvor er jeg glad for jeg rendte ind i jer
allesammen!

Og mht. til byggemand Bob Christian, så hold endelig fast i den
måde at forklare det på! Det er meget nemmere at forholde sig til
en farvet plastik kasse, end et ord. Hvis du har lyst skal du
være velkommen til at fortælle mere om byggemand bob og hans
fremgangsmåder :)

@Jørgen
Jeg var på biblioteket idag for at se om de evt. havde de bøger
hjemme som du henviser til.
Da jeg kom derind gik det op for mig at det eneste jeg havde at
gå efter var bogens navn hvilket jeg i al sandhed også var lidt i
tvivl om. Har du mulighed for at oplyse navn og forfatter på CSS
og WWW bogen?

Bliv endelig ved med at tilføje mere info til tråden, eller
redegøre for andre relevante ting i forbindelse med :D Jeg kan
slet ikke få nok hehe...

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

---

On 26 Nov., 22:39, Jahirah <jahi...@gmail.com> wrote:

> -----------------------------
> XHTML "Span" attributen
> -----------------------------
> Jeg tror i bund og grund ikke jeg har forstået hvad brugen af
> span skal gøre godt for. Førhen brugte man f.eks. <font
> color="black"></font>, men nu bruges span utrolig meget.

Njah. Hvis du ser en side, som er overfyldt med spans, så er det højst
sandsynligt lavet med en WYSIWYG-editor. Som hard-coder, altså f.eks.
i Notepad, der bør man kunne minimere dem og tildele egenskaber
direkte på elementer, eller bruge indbyggede elementer i stedet.

> De ganske hvor jeg har forsøgt at bruge attributen er det gået
> helt galt og det har rykket uhæmmet med indholdet uden at jeg
> kunne gennemskue hvorfor og uden at tilknyttet hverken class
> eller id.

Span har ikke nogen egenskaber som udgangspunkt, andet end at være der
og indhegne del af eller hele et element. Hvis det indhegner et helt
element, skal det være inline, f.eks. en <b>. Det, som har betydning
er, hvilke egenskaber, evt. funktioner, man selv tildeler det.

Hvis du sætter en span ind, uden der er defineret egenskaber for den,
må der derfor ikke være forskel med og uden span.

Som regel bruges span til at at definere egenskaber for dele af et
element, som ikke kan gøres med alm. HTML-tags. Og for at gøre det
smartest, vil man normalt tildele den en class. Det er gerne
gentagelser af egenskaber, man vil opnå med span.

Du kan sætte display: block på en span, men det er i mine øjne
forkert, for der vil være forskel med og uden CSS i opførsel så.

Et eksempel på brug:

<p><b>fed tekst</b> her</p>

Læg mærke til, <b> er i et block-element, <p>

med span i stedet:

<p><span style="font-weight: bold">fed tekst</span> her</p>

Igen, så vil man ikke bruge span sådan, da der allerede er et HTML-
element til det formål at sætte fed. Og alt efter tekst-indhold og
mening vil man måske bruge et helt andet HTML-element end <b>, det er
bare eksempel. Du skal her igen være meget opmærksom på, at uden CSS
vil span ikke have betydning, derfor altid bruge rigtige HTML-tags,
hvor du kan.

Du kan udnytte JavaScript på en span også, som du kan med andre
elementer, husk igen, at span ikke i sig selv har betydning, andet end
at indhegne, så man kan tilgå det indhegnede:

<p>denne tekst er <span onclick="javascript:alert('du trykkede på
teksten')">klikbar</span></p>

Se testside her:
http://runejensen.dk/temp/nyhedsgrupper/deiwh/spantest.htm

MVH
Rune Jensen

---

Rune Jensen skrev:

> Span har ikke nogen egenskaber som udgangspunkt, andet end at være der
> og indhegne del af eller hele et element.

Det primære ved span er at det er et inline-element. <div> og <p>
afgrænser store blokke henholdsvis afsnit, mens <span> omkranser
elementer i den løbende tekst.

--
Bertel
http://bertel.lundhansen.dk/      FIDUSO: http://fiduso.dk/