/ 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
Problemer med forsøg på elastisk design
Fra : Preben Nielsen


Dato : 28-11-10 14:17

Testdesignet http://vinsiderne.dk/test4/artikel_test.htm som
spørgsmålet drejer sig om, er fremstillet med henblik på at forsøge at
lave et elastisk design, hvor alt på nær den venstrestillede menu skal
blive smallere, hvis browservinduet er smallere end de 991 px, som
breddemæssigt er udganspunktet for designet. Der er dog sat en min-
width på 590px, så ved smallere bredder fixeres layoutet til denne
bredde.

Jeg tester i Firefox og Internet Explorer 7 (sidstnævnte for at sikre
i forbindelse med "gammeldags og underlige" browsere).

Problemet opstår i Firefox i forbindelse med den vandrette topmenu,
når vinduet gøres smallere end maximeret. Der sker to ting, som jeg
ikke ønsker:
1) Når vinduets bredde bliver mindre end ca. 800px, ombrydes teksten i
det venstre menupunkt ("Vinsidernes debatforum") til to linjer (det er
ok og kan dårligt være anderledes) og menupunktets højde øges
tilsvarende. De andre menupunktet beholder dog deres normale højde (i
modsætning til i IE7 hvor hele den røde, vandrette menubjælkes højde
øges, så alle menupunkter er lige høje). Herved flyttes den lodrette
venstre-menu i FF til højre for det venstre vandrette menupunkt.
2) Allerede ved en mindskelse af browservinduets bredde til ca. 1000px
ryger hele indholdsdelen (wrap_indhold) ned under venstre-menuen, mens
IE7 stadig viser hele siden som ønsket.

Jeg vil tro, at problem 1) kan løses ved at jeg kan få Firefox til at
øge højden af hele den vandrette "menu", når tekstombrydning (grundet
pladsmange)l finder sted i det venstre vandrette menupunkt i stedet
for som nu kun at øge højden af det venstre menupunkt.
Hvordan gør jeg det?

Hvad angår problem 2) forstår jeg slet ikke hvad der foregår. Hvordan
kan det løses?

(Farverne er naturligvis kun beregnet på at lette orienteringen.)

 
 
Allan Vebel (28-11-2010)
Kommentar
Fra : Allan Vebel


Dato : 28-11-10 22:57

Preben Nielsen skrev:

> fremstillet med henblik på at forsøge at lave
> et elastisk design.

Du vil altid skulle tilpasse et eller andet før det
hele passer sammen - selv menuen ombryder
her ved et smallere vindue, og så forrykkes det
hele.

Den slags ville jeg lave i en fast bredde, så er
det hele meget nemmere at tilpasse.

Du skal blot sørge for en printer.css, så det hele
kan udskrives på normal vis.

Her kan du pille menuer og andet fra, som man
ikke kan klikke på, på papiret:

#menu{
display:none;
}

Prøv lige med en fast bredde inden du går videre!

Det andet kan sagtens lade sig gøre, men det
kræver virkelig sin mand - og jeg har ikke indtryk
af at du vil gøre dig til den mand der kræves

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk



Dennis Munding (28-11-2010)
Kommentar
Fra : Dennis Munding


Dato : 28-11-10 23:32

Hej Preben.
"Preben Nielsen" <pn3@mail.dk> skrev i meddelelsen
news:2e326563-6839-4bbc-9a8f-97a73fa6e68e@w2g2000yqb.googlegroups.com...
Testdesignet http://vinsiderne.dk/test4/artikel_test.htm som
spørgsmålet drejer sig om, er fremstillet med henblik på at forsøge at
lave et elastisk design, hvor alt på nær den venstrestillede menu skal
blive smallere, hvis browservinduet er smallere end de 991 px, som
breddemæssigt er udganspunktet for designet. Der er dog sat en min-
width på 590px, så ved smallere bredder fixeres layoutet til denne
bredde.

Jeg tester i Firefox og Internet Explorer 7 (sidstnævnte for at sikre
i forbindelse med "gammeldags og underlige" browsere).

Du kan med fordel hente "Web Developer Toolbar" til FF - den er guld værd
under udviklingen.

Problemet opstår i Firefox i forbindelse med den vandrette topmenu,
når vinduet gøres smallere end maximeret. Der sker to ting, som jeg
ikke ønsker:
1) Når vinduets bredde bliver mindre end ca. 800px, ombrydes teksten i
det venstre menupunkt ("Vinsidernes debatforum") til to linjer (det er
ok og kan dårligt være anderledes) og menupunktets højde øges
tilsvarende. De andre menupunktet beholder dog deres normale højde (i
modsætning til i IE7 hvor hele den røde, vandrette menubjælkes højde
øges, så alle menupunkter er lige høje). Herved flyttes den lodrette
venstre-menu i FF til højre for det venstre vandrette menupunkt.

Dette problem har jeg ikke fundet løsningen på endnu...

2) Allerede ved en mindskelse af browservinduets bredde til ca. 1000px
ryger hele indholdsdelen (wrap_indhold) ned under venstre-menuen, mens
IE7 stadig viser hele siden som ønsket.

Løser du således:

1)
#wrap_indhold {
float: left;
max-width: 854px;
margin-top: 10px;
background: yellow;
}

ændres til:

#wrap_indhold {
margin-left:147px; <------
max-width: 854px;
margin-top:0; <---------
background: yellow;
}

2)
Tilføj
#wrap_stor {padding-top:10px;}

3)
..menu /* menukassernes inde i venstre kolonne m.m. */
{
margin-top: 10px;
margin-left: 8px;
font-size: 11px;
font-weight: normal;
border-top: 1px solid rgb(190,185,185);
}

ændres til:

..menu /* menukassernes inde i venstre kolonne m.m. */
{
margin-bottom: 10px; <---
margin-left: 8px;
font-size: 11px;
font-weight: normal;
border-top: 1px solid rgb(190,185,185);
}


Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye - Member of the PosseGrim Squad
http://pgsquad.com/
"When you hear the wind - you're already dead..."


Preben Nielsen (29-11-2010)
Kommentar
Fra : Preben Nielsen


Dato : 29-11-10 03:54

On 28 Nov., 22:56, "Allan Vebel" wrote:

> Den slags ville jeg lave i en fast bredde, s er
> det hele meget nemmere at tilpasse.

Ja, det er jeg klar over, og det kan jeg sagtens lave. Men forsøget er
at prøve at tage hensyn til læsere med 800px bredde skærme. Jeg har så
mange sider, hvor det med fast bredde (tilpasset 1024px bredde skærme)
vil være problematisk at læse dem på 800px skærme, at jeg synes det er
værd at bruge noget energi på at finde en acceptabel løsning.

On 28 Nov., 23:31, "Dennis Munding" wrote:
>
> 2) Allerede ved en mindskelse af browservinduets bredde til ca. 1000px
> ryger hele indholdsdelen (wrap_indhold) ned under venstre-menuen, mens
> IE7 stadig viser hele siden som nsket.
>
> L ser du s ledes:
>
> 1)
> #wrap_indhold {
> float: left;
> max-width: 854px;
> margin-top: 10px;
> background: yellow;
>
> }
>
> ndres til:
>
> #wrap_indhold {
> margin-left:147px; <------
> max-width: 854px;
> margin-top:0; <---------
> background: yellow;
>
> }
>
> 2)
> Tilf j
> #wrap_stor {padding-top:10px;}
>
> 3)
> .menu /* menukassernes inde i venstre kolonne m.m. */
> {
> margin-top: 10px;
> margin-left: 8px;
> font-size: 11px;
> font-weight: normal;
> border-top: 1px solid rgb(190,185,185);
>
> }
>
> ndres til:
>
> .menu /* menukassernes inde i venstre kolonne m.m. */
> {
> margin-bottom: 10px; <---
> margin-left: 8px;
> font-size: 11px;
> font-weight: normal;
> border-top: 1px solid rgb(190,185,185);
>
> }
>

Ja! Det virker perfekt. Tak skal du have, Dennis.

Vh
Preben

Allan Vebel (29-11-2010)
Kommentar
Fra : Allan Vebel


Dato : 29-11-10 12:32

Preben Nielsen skrev:

> vil være problematisk at læse dem på 800px
> skærme, at jeg synes det er værd at bruge
> noget energi på at finde en acceptabel løsning.

Så er det lige at vi skal have noget statistik ind
over:

http://fdim.dk/Statistik/teknik/skaermoploesning

Hvor meget energi vil du bruge på 0,406 procent
af brugerne?

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk



Kim Ludvigsen (29-11-2010)
Kommentar
Fra : Kim Ludvigsen


Dato : 29-11-10 12:39

Allan Vebel skrev:
> Preben Nielsen skrev:
>
>> vil være problematisk at læse dem på 800px
>> skærme, at jeg synes det er værd at bruge
>> noget energi på at finde en acceptabel løsning.
>
> Hvor meget energi vil du bruge på 0,406 procent
> af brugerne?

Hør, Allan, du plejer da godt at kunne skelne mellem
opløsning og tilgængelig plads. En sidebjælke med bogmærker,
og så er 1024-opløsningerne også nede på omkring 800px i
bredden.

--
Mvh. Kim Ludvigsen
Tips til hjemmesidesnedkeren:
http://kimludvigsen.dk/tips-internet-websnedker.php

Allan Vebel (29-11-2010)
Kommentar
Fra : Allan Vebel


Dato : 29-11-10 13:00

Kim Ludvigsen skrev:

> Hør, Allan, du plejer da godt at kunne skelne
> mellem opløsning og tilgængelig plads.

Ja, og statistikken går på opløsning - der er ikke
mange der i dag bruger 800 x 600.

> En sidebjælke med bogmærker

Sådan en sidebjælke kan lukkes med et enkelt
klik.

I Prebens design er der virkelig meget der kan
gå galt hvis det skal være fuldt elsatisk, og derfor
jeg anbefaler en fast bredde.

Fra en tidligere debat har jeg forstået at der er
tale om 1900 sider - og med det indhold han
ønsker, bliver det en lang og besværlig proces.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk



Preben Nielsen (29-11-2010)
Kommentar
Fra : Preben Nielsen


Dato : 29-11-10 05:44

On 29 Nov., 12:32, "Allan Vebel" wrote:
>
> S er det lige at vi skal have noget statistik ind
> over:
>
> http://fdim.dk/Statistik/teknik/skaermoploesning
>
> Hvor meget energi vil du bruge p 0,406 procent
> af brugerne?
>
Nej, ved så lav andel ville jeg ikke gøre noget. Jeg plejer at sige
1%. Men min aktuelle statistik siger 3,6%. Og da ulemperne vil være
markante, vil jeg stadig se om det kan løses. Og det gik jo meget godt
med problem 2). Jeg er spændt på, om nogen kan løse problem 1).

On 29 Nov., 12:59, "Allan Vebel" >
>
> Fra en tidligere debat har jeg forst et at der er
> tale om 1900 sider - og med det indhold han
> nsker, bliver det en lang og besv rlig proces.
>
Siderne skal under alle omstændigheder omkodes, og da forskellen
mellem fast bredde og elastisk deisgn for nogle siders vedkommende
blot vil være en forskel i stylesheet, altså i én fil, vil det ikke
gøre den store forskel arbejdsmæssigt, så vidt jeg kan se. Som jeg ser
det lige nu, er det muligvis kun forsiden jeg vil køre med fast
bredde.


Jeg har nu uploadet nyt stylesheet med de ændringer som Dennis anviste
vedr. problem 2).
Problem 1) kan i Firefox ses ved at teksombrydning i det første
menupunkt ved en vinduesbredde på ca. 790px. Yderligere ombrydes
menupunkt to fra venstre (stadig den vandrette menu) ved en
vinduesbredde på ca. 540px, hvilket gør at venstremenuen rykkes
yderligere til højre.

Allan Vebel (29-11-2010)
Kommentar
Fra : Allan Vebel


Dato : 29-11-10 14:06

Preben Nielsen skrev:

> teksombrydning i det første menupunkt

Den slags kan løses med en &nbsp; - altså

Vinsidernes&nbsp;debatforum
og
Om&nbsp;Vinsiderne.dk

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk



Leif Neland (29-11-2010)
Kommentar
Fra : Leif Neland


Dato : 29-11-10 14:42

> Jeg har nu uploadet nyt stylesheet med de ændringer som Dennis anviste
> vedr. problem 2).
> Problem 1) kan i Firefox ses ved at teksombrydning i det første
> menupunkt ved en vinduesbredde på ca. 790px. Yderligere ombrydes
> menupunkt to fra venstre (stadig den vandrette menu) ved en
> vinduesbredde på ca. 540px, hvilket gør at venstremenuen rykkes
> yderligere til højre.

Kan man ikke pakke topmenuen ind i en div, så der ikke er nogen kant,
venstemenuen kan "hænge fast på"?

Leif



Preben Nielsen (29-11-2010)
Kommentar
Fra : Preben Nielsen


Dato : 29-11-10 06:44

On 29 Nov., 14:06, "Allan Vebel" wrote:
>
> Den slags kan løses med en &nbsp; - altså
>
> Vinsidernes&nbsp;debatforum
> og
> Om&nbsp;Vinsiderne.dk

Så forsvinder tekstombrydningen, men det var ikke meningen. Teksten
kan jo ikke være der når vinduet gøres smallere, derfor er
tekstombrydningen hensigtsmæssig. Men det er ikke ok at det får
venstre-menuen til at flytte sig. Det er desuden ønskeligt, at hele
den vandrette menubjælke får samme højde - altså dobbelt - når venstre
menupunkters højde øges i højden som følge af tekstombrydningen. Altså
ligesom det sker i IE7.


Birger Sørensen (29-11-2010)
Kommentar
Fra : Birger Sørensen


Dato : 29-11-10 15:12

Preben Nielsen kom med følgende:
> On 29 Nov., 14:06, "Allan Vebel" wrote:
>>
>> Den slags kan løses med en &nbsp; - altså
>>
>> Vinsidernes&nbsp;debatforum
>> og
>> Om&nbsp;Vinsiderne.dk
>
> Så forsvinder tekstombrydningen, men det var ikke meningen. Teksten
> kan jo ikke være der når vinduet gøres smallere, derfor er
> tekstombrydningen hensigtsmæssig. Men det er ikke ok at det får
> venstre-menuen til at flytte sig. Det er desuden ønskeligt, at hele
> den vandrette menubjælke får samme højde - altså dobbelt - når venstre
> menupunkters højde øges i højden som følge af tekstombrydningen. Altså
> ligesom det sker i IE7.

Der er nogle muligheder.
Ændring af teksten, så den kan være der, også i den mindste størrelse
du vil understøtte.
Du sætter plads af til at teksten kan ombrydes, også når der ikke er
brug for det.
Ellers skal du have noget dynamik ind over - dvs. noget javascript, der
kan tilpasse de elementer der skal tilpasses, efter den beøgendes
vinduesstørrelse.
Der er vist nok mulighed for at få oplysninger baglæns, så der kan
vælges f.eks. stylesheet efter viduesstørrelse. Hvordan er jeg ikke
lige klar over, men jeg mener der tidligere har været eksempler - evt.
i serverside eller clientside grupperne, og det kan godt være det er
længe siden.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Preben Nielsen (29-11-2010)
Kommentar
Fra : Preben Nielsen


Dato : 29-11-10 06:47

On 29 Nov., 14:41, "Leif Neland" wrote:
>
> Kan man ikke pakke topmenuen ind i en div, så der ikke er nogen kant,
> venstemenuen kan "hænge fast på"?
>
Den er pakket ind endda i hele to div:

<div id="top_menu">
<div id="wrap_top_menu_center">
<div class="top_menupunkt"><a href="http://
vinsiderne.dk/debat/" target="_blank" class="top">Vinsidernes
debatforum</a></div>
            <div class="top_menupunkt"><a class="top" href="artikel.css">Om
Vinsiderne.dk</a></div>
<div class="top_menupunkt_16"><a class="top"
href="artikel.css">Symboler</a></div>
<div class="top_menupunkt_16"><a class="top"
href="artikel.css">Nyhedsbrev</a></div>
<div class="top_menupunkt_16"><a class="top"
href="artikel.css">Kontakt</a></div>
<div class="top_menupunkt_hoejre"><a class="top"
href="artikel.css">Sitemap</a></div>
</div>
</div>

Jørgen Farum Jensen (29-11-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 29-11-10 15:46

Preben Nielsen skrev:
> On 29 Nov., 14:41, "Leif Neland" wrote:
>> Kan man ikke pakke topmenuen ind i en div, så der ikke er nogen kant,
>> venstemenuen kan "hænge fast på"?
>>
> Den er pakket ind endda i hele to div:


Så vidt jeg lige kan se er det, der først og
fremmest din navigationsbjælke der volder
problemer.

Jeg kan ikke se noget problem ved at
lave en navigationsbjælke med en /fikseret/
bredde på for eksempel 980 pixel. Hvis browser-
vinduet bliver smallere end det vil siden fremkalde
en vandret rulleskakt, men menuen vil fortsat
være tilgængelig.

Det aktuelle problem skyldes at linkteksten
indeholder mellemrum. Det fjerner du ved at
skrive
Vinsidernes&nbsp;debatforum.
Men hvorfor ikke bare "Debatforum" - man
er vel ikke i tvivl om at disse sider
handler om vin?

I forhold til hvad "man plejer" er din
menukonstruktion lidt ejendommelig. Jeg
tror måske du stadig tænker "tabel". Her
et eksempel på en mere logisk konstruktion:
http://webdesign101.dk/www/cssmenu/eksempel3.html

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

Karl Erik Christense~ (29-11-2010)
Kommentar
Fra : Karl Erik Christense~


Dato : 29-11-10 16:59

On 29-11-2010 14:46, Preben Nielsen wrote:

> Den er pakket ind endda i hele to div:

Ja, og jeg fatter ikke hvorfor du absolut vil bruge sådan et omfattende
og overflødigt stylesheet.

Langt langt minder kan gøre det. Din side er jo ikke særlig speciel -
nærmest enkel.

Sidehoved;
Menu;
Venstre boks - Indhold box;
Sidefod;

Såre simpelt, dear Watson

Karl Erik.

--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign


Preben Nielsen (30-11-2010)
Kommentar
Fra : Preben Nielsen


Dato : 30-11-10 08:57

On 29 Nov., 15:46, Jørgen Farum Jensen wrote:
> Men hvorfor ikke bare "Debatforum" - man
> er vel ikke i tvivl om at disse sider
> handler om vin?

I betragtning af, at det åbenbart ikke er ligetil at løse problemet,
er det brugbart at nøjes med Debatforum, idet jeg så kan lave en min-
width på 680px, og det er acceptabelt.
>
> I forhold til hvad "man plejer" er din
> menukonstruktion lidt ejendommelig. Jeg
> tror m ske du stadig t nker "tabel". Her
> et eksempel p en mere logisk konstruktion:http://webdesign101.dk/www/cssmenu/eksempel3.html
>
Jo, det kan sagtens tænkes at jeg stadig tænker i tabeller, men da
løsningen som den er nu (med min-width) virker efter hensigten, da jeg
ikke der skal bruge dropdown men kun enkeltpunkter, og da koden er
valid, sålader jeg den nok være som den er nu.

On 29 Nov., 16:59, Karl Erik Christensen wrote:
> Ja, og jeg fatter ikke hvorfor du absolut vil bruge s dan et omfattende
> og overfl digt stylesheet.
>
> Langt langt minder kan g re det. Din side er jo ikke s rlig speciel -
> n rmest enkel.
>
> Sidehoved;
> Menu;
> Venstre boks - Indhold box;
> Sidefod;
>
Grunden til de to div'er både i sidehoved og topmenuen er, at jeg godt
ville have disse i en bredde på 981px centrereret på skærmen og
samtidig have baggrundsfarven for de to til at strække sig i hele
skærmens bredde med henblik på skærme breddere end 1024px. Det var så
på den måde jeg opnåede det. Om der findes en enklere løsning ved jeg
ikke. Men det virker, og koden er valid, og så lod jeg den være der.
Men jeg hører gerne, hvis jeg har overflødig kode.
Det kan sagtens tænkes at tingene kan laves enklere. For en måndes tid
siden havde jeg ikke prøvet at designe med div, så fremgangsmåden her
på skolebænken er at jeg prøver mig frem indtil det virker og
kontrollerer løbende kodens validitet. Og så rydder jeg op i koderne
som noget af det sidste.

Apropos oprydning/ordning, så henviser jeg nu i koden til "artiklen"
http://vinsiderne.dk/test5/artikel_test.html til to stylesheets, det
ene (startside3c.css) indeholder alle de grundlæggende koder + dem til
selve startsiden, det andet (startside3c_artikel_reduceret.css)
indeholder kun de koder der er specifikke for "artiklen". Men af en
eller anden grund, så sættes artiklens elastiitet herved ud af
spillet; koderne fra det overordnede stylesheet vinder altså. Jeg tror
ikke det skyldes en fejl under reduceringsarbejdet, idet samme fejl er
der med den ureducerede css-kode. Jeg har placeret
startside3c_artikel_reduceret.css til sidst, eller "nærmere" artiklen,
så der må være noget andet der er afgørende for at det første
stylesheet vinder. Men hvad?

Startsiden kan i øvrigt ses her: http://vinsiderne.dk/test5/startside3c_test.html.
Evt. stillingtagen til overflødig kode bør selvfølgelig tage
startsiden med i betragtning.

Det er i øvrigt meningen at teksten i artiklen skal være tospaltet. Og
det er også meningen at koderne til den røde vandrette menu skal være
ens for de to sider, så det ikke rykker sig, når man går fra den ene
side til den anden.

Jørgen Farum Jensen (30-11-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 30-11-10 18:32

Den 30-11-2010 16:56, Preben Nielsen skrev:
> On 29 Nov., 15:46, Jørgen Farum Jensen wrote:
>> Men hvorfor ikke bare "Debatforum" - man
>> er vel ikke i tvivl om at disse sider
>> handler om vin?
>
> I betragtning af, at det åbenbart ikke er ligetil at løse problemet,
> er det brugbart at nøjes med Debatforum, idet jeg så kan lave en min-
> width på 680px, og det er acceptabelt.
>>
>> I forhold til hvad "man plejer" er din
>> menukonstruktion lidt ejendommelig. Jeg
>> tror m ske du stadig t nker "tabel". Her
>> et eksempel p en mere logisk konstruktion:http://webdesign101.dk/www/cssmenu/eksempel3.html
>>
> Jo, det kan sagtens tænkes at jeg stadig tænker i tabeller, men da
> løsningen som den er nu (med min-width) virker efter hensigten, da jeg
> ikke der skal bruge dropdown men kun enkeltpunkter, og da koden er
> valid, sålader jeg den nok være som den er nu.

Bredden og menukonstruktionen er to forskellige ting.
Det jeg kommenterede på - og vistnok osse Karl Erik
- var den store mængde kode du skulle bruge til noget
meget enkelt.

Og den menu jeg henviser til er ikke en dropdown men,
men en uhyre simpel flad menu, som du kan bruge begge
steder ved simpelthen at give menucontaineren et klasse-
navn i stedet for en id.

> On 29 Nov., 16:59, Karl Erik Christensen wrote:
>> Ja, og jeg fatter ikke hvorfor du absolut vil bruge s dan et omfattende
>> og overfl digt stylesheet.
>>
>> Langt langt minder kan g re det. Din side er jo ikke s rlig speciel -
>> n rmest enkel.
>>
>> Sidehoved;
>> Menu;
>> Venstre boks - Indhold box;
>> Sidefod;
>>
> Grunden til de to div'er både i sidehoved og topmenuen er, at jeg godt
> ville have disse i en bredde på 981px centrereret på skærmen og
> samtidig have baggrundsfarven for de to til at strække sig i hele
> skærmens bredde med henblik på skærme breddere end 1024px. Det var så
> på den måde jeg opnåede det. Om der findes en enklere løsning ved jeg
> ikke. Men det virker, og koden er valid, og så lod jeg den være der.
> Men jeg hører gerne, hvis jeg har overflødig kode.
> Det kan sagtens tænkes at tingene kan laves enklere. For en måndes tid
> siden havde jeg ikke prøvet at designe med div, så fremgangsmåden her
> på skolebænken er at jeg prøver mig frem indtil det virker og
> kontrollerer løbende kodens validitet. Og så rydder jeg op i koderne
> som noget af det sidste.

Det er den omvendte orden at gøre det i. Hvis du
har 17 overflødige HTML-elementer, der øver indflydelse
på layoutet, er det et større arbejde end nødvendigt er
at få skik på sagerne.

Her er princippet for enkelt (lean & clean)
HTML-kode:

Layout er noget der /tilføjes/. Det tilføjes
efter KISS-princippet. Det betyder at du i
videst muligt omfang lader elementernes naturlige
omløb skabe layoutet.

Respekt for din beslutning om at sætte dig på
skolebænken. Og det er klogt af dig at bruge
netop denne skolestue. Men du bør
1) Beskrive dit mål klart - først i dag får
vi at vide at du vil have to spalter i artikeldelen.
2) fremstille problemerne et for et efterhånden
som du støder på dem, og
3) lytte til lærerne. Du behøver ikke at lytte til
deres råd, men hvis ikke bliver det jo svært at
forholde sig til de fejl du laver.

In casu er du fuldstændig problemløst at lave
din side sådan som du beskriver, fsv angår navigations-
bjælkerne: De skal rage ud i hele sidens bredde, men
selve menuen skal blot have indholdet bredde.

Hvis det er en korrekt beskrivelse af problemet,
hvorfor spørger du så ikke om hvordan du gør det,
i stedet for blankt at kassere et eksempel på
selve menu'en?


> Apropos oprydning/ordning, så henviser jeg nu i koden til "artiklen"
> http://vinsiderne.dk/test5/artikel_test.html til to stylesheets, det
> ene (startside3c.css) indeholder alle de grundlæggende koder + dem til
> selve startsiden, det andet (startside3c_artikel_reduceret.css)
> indeholder kun de koder der er specifikke for "artiklen". Men af en
> eller anden grund, så sættes artiklens elastiitet herved ud af
> spillet; koderne fra det overordnede stylesheet vinder altså. Jeg tror
> ikke det skyldes en fejl under reduceringsarbejdet, idet samme fejl er
> der med den ureducerede css-kode. Jeg har placeret
> startside3c_artikel_reduceret.css til sidst, eller "nærmere" artiklen,
> så der må være noget andet der er afgørende for at det første
> stylesheet vinder. Men hvad?

Jeg vil ikke gennemgå din kode, men nøje med at henvise
til artiklen
http://webdesign101.dk/www/css/specificitet.php

Kort fortalt så har div#menucontainer ul
end højere vægt (specificitet) end #menucontainer ul,
der igen har højere vægt end ul eller #menucontainer.

> Startsiden kan i øvrigt ses her: http://vinsiderne.dk/test5/startside3c_test.html.
> Evt. stillingtagen til overflødig kode bør selvfølgelig tage
> startsiden med i betragtning.
>
> Det er i øvrigt meningen at teksten i artiklen skal være tospaltet. Og
> det er også meningen at koderne til den røde vandrette menu skal være
> ens for de to sider, så det ikke rykker sig, når man går fra den ene
> side til den anden.

Jeg vil nødig lyde arrogant, men du må huske på,
at jo mere kompliceret din HTML-kode og CSS-kode
er, des vanskelige bliver det at forholde sig konstruktivt
til dine spørgsmål. Du har over 400 linjer i det
ene stylesheet jeg har kigget på. Hvis du ikke selv
kan hitte rede i det, hvordan kan du så forvente at
vi andre kan?

--

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

Preben Nielsen (01-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 01-12-10 09:57

On 30 Nov., 18:32, Jørgen Farum Jensen wrote:
> Bredden og menukonstruktionen er to forskellige ting.
> Det jeg kommenterede p� - og vistnok osse Karl Erik
> - var den store m�ngde kode du skulle bruge til noget
> meget enkelt.
> Og den menu jeg henviser til er ikke en dropdown men,
> men en uhyre simpel flad menu, som du kan bruge begge
> steder ved simpelthen at give menucontaineren et klasse-
> navn i stedet for en id.

Når jeg umiddelbart vægrer mig mod at skulle lave det om, så er det
som sagt, fordi det jeg har lavet virker som det skal og ser ud som
det skal. På den baggrund er det eneste formål jeg kan se med at lave
det om, at priorite kodens skønhed og enkelhed. Og da jeg har masser
af tidskrævende arbejde foran mig, og da hensigten med min hjemmeside
er at den skal virke som tiltænkt (samtidig med at kodevaliditet
overholdes), forekommer det ikke umiddelbart attraktivt at skulle kode
om alene for kodens skyld og uden at en eneste bruger nogensinde ville
mærke eller se forskel. Jeg har respekt for at andre kan have det
anderledes.
Hvis jeg imidlertid får en melding ala "Prøv at udskifte denne
kode ...med denne kode..." så er jeg med på at prøve. For jeg er
naturligvis bestemt ikke modstander af smuk kode. Alt andet lige vil
jeg da foretrække den fremfor det modsatte.
>
> Det er den omvendte orden at g�re det i. Hvis du
> har 17 overfl�dige HTML-elementer, der �ver indflydelse
> p� layoutet, er det et st�rre arbejde end n�dvendigt er
> at f� skik p� sagerne.
>
Det som jeg nævnte med at rydde op i koder til sidst skulle ikke
henvise til HTML-delen men CSS-delen. Jeg er ikke bekendt med
overflødig HTML-kode, idet jeg kun har lavet det, som jeg mente var
nødvendigt. Og mht. CSS mener jeg med "oprydning" mere at samskrive/
organisere mere overskueligt end at slette, idet jeg heller ikke her
har kode med som jeg anser for unødvendig.
Hvis andre mener – og det gør I jo – at der er overflødig kode, vil
jeg kunne forholde mig til det, hvis jeg får at vide præcis hvor.
>
> Her er princippet for enkelt (lean & clean)
> HTML-kode:
>
> Layout er noget der /tilf�jes/. Det tilf�jes
> efter KISS-princippet. Det betyder at du i
> videst muligt omfang lader elementernes naturlige
> oml�b skabe layoutet.

Kan du ved at eksemplificere fra min forside fortælle hvor jeg bryder
med dette princip, så jeg bedre kan forstå hvad du mener?
>
> ...du b�r
> 1) Beskrive dit m�l klart - f�rst i dag f�r
> vi at vide at du vil have to spalter i artikeldelen.
> 2) fremstille problemerne et for et efterh�nden
> som du st�der p� dem

Det er jo netop med begrundelse i 2) at jeg ikke begynder at blande
det med to spalter ind i det hele. Det bliver det næste jeg skal i
gang med. Og hvis jeg så støder på et problem der, så kommer der -
netop for at tage en ting ad gangen - et spørgsmål desangående. Men
det var fuldstændig uvedkommende i forhold til at få løst det problem
som er denne tråds emne. Jeg nævnte blot det med de to spalter for at
foregribe at nogle begyndte at kommentere på de lange linjelængder.
>
> 3) lytte til l�rerne. Du beh�ver ikke at lytte til
> deres r�d, men hvis ikke bliver det jo sv�rt at
> forholde sig til de fejl du laver.

Jeg ville aldrig sidde en kommentar, der retter en fejl el.lign.
overhørig. Men hvis jeg laver noget på en lidt anden måde, end "man"
typisk gør i dag, så kan der vel næppe være noget galt i det, hvis der
ikke er tale om noget, der udløser fejl.

> In casu er du fuldst�ndig probleml�st at lave
> din side s�dan som du beskriver, fsv ang�r navigations-
> bj�lkerne: De skal rage ud i hele sidens bredde, men
> selve menuen skal blot have indholdet bredde.
>
> Hvis det er en korrekt beskrivelse af problemet,
> hvorfor sp�rger du s� ikke om hvordan du g�r det,
> i stedet for blankt at kassere et eksempel p�
> selve menu'en?
>
Jeg forstår ikke spørgsmålet. Jeg havde jo, som nævnt ovenfor, lavet
noget, der fungerede og havde på den baggrund ikke behov for at
spørge. Til grund for det jeg skriver her ligger den antagelse, at det
ikke er den måde jeg har lavet det på, der har givet de problemer som
er denne tråds emne. Jeg ved ikke om du er enig i denne antagelse.

> > Apropos oprydning/ordning, s� henviser jeg nu i koden til "artiklen"
> >http://vinsiderne.dk/test5/artikel_test.htmltil to stylesheets, det
> > ene (startside3c.css) indeholder alle de grundl�ggende koder + dem til
> > selve startsiden, det andet (startside3c_artikel_reduceret.css)
> > indeholder kun de koder der er specifikke for "artiklen". Men af en
> > eller anden grund, s� s�ttes artiklens elastiitet herved ud af
> > spillet; koderne fra det overordnede stylesheet vinder alts�. Jeg tror
> > ikke det skyldes en fejl under reduceringsarbejdet, idet samme fejl er
> > der med den ureducerede css-kode. Jeg har placeret
> > startside3c_artikel_reduceret.css til sidst, eller "n�rmere" artiklen,
> > s� der m� v�re noget andet der er afg�rende for at det f�rste
> > stylesheet vinder. Men hvad?
>
> Jeg vil ikke gennemg� din kode, men n�je med at henvise
> til artiklenhttp://webdesign101.dk/www/css/specificitet.php
>
> Kort fortalt s� har div#menucontainer ul
> end h�jere v�gt (specificitet) end #menucontainer ul,
> der igen har h�jere v�gt end ul eller #menucontainer.
>
> > Startsiden kan i �vrigt ses her:http://vinsiderne.dk/test5/startside3c_test.html.
> > Evt. stillingtagen til overfl�dig kode b�r selvf�lgelig tage
> > startsiden med i betragtning.
>
> > Det er i �vrigt meningen at teksten i artiklen skal v�re tospaltet. Og
> > det er ogs� meningen at koderne til den r�de vandrette menu skal v�re
> > ens for de to sider, s� det ikke rykker sig, n�r man g�r fra den ene
> > side til den anden.
>
> Jeg vil n�dig lyde arrogant, men du m� huske p�,
> at jo mere kompliceret din HTML-kode og CSS-kode
> er, des vanskelige bliver det at forholde sig konstruktivt
> til dine sp�rgsm�l. Du har over 400 linjer i det
> ene stylesheet jeg har kigget p�. Hvis du ikke selv
> kan hitte rede i det, hvordan kan du s� forvente at
> vi andre kan?

Jeg kommer til at gentage mig selv: Jeg har lavet både HTML og CSS
kode så godt jeg kunne og laver naturligvis ikke noget, som jeg mener
er overflødigt. Hvis der er noget overflødigt, så er jeg bare aktuelt
ganske enkelt ikke bedre til det. Jeg synger med mit næb så godt det
nu engang kan der hvor jeg er i min udvikling.
Mht. stylesheet mener jeg faktisk godt jeg kan hitte rede i det. Det
betyder ikke at jeg forventer at andre kan. Jeg stiller et spørgsmål
på baggrund af et oplevet problem og håber så på at nogen ser sig i
stand til og har lyst til at hjælpe.
Mit sidste spørgsmål (hvor et layout er blevet stift efter at jeg
reducerede CSS koderne og lavede to stylesheets) handlede altså ikke
om at jeg ikke kunne overskue koderne, men at der ting vedr. koderne,
som jeg ikke forstod. Selv på baggrund af at jeg faktisk før jeg
spurgte havde læst din artikel om specifitet, kunne jeg ikke forstå
hvad der var sket. Og så spørger jeg selvfølgelig.
Men nu har jeg lige selv fundet svaret: Det handlede om, at jeg havde
brugt samme id i forbindelse med de to sider og tildelt dem
forskellige egenskaber på de to sider. Ren tanketorsk.

Det følgende adresserer jeg generelt i håb om at det vil blive
modtaget i den konstruktive og positive ånd det er ment:
Jeg modtager bedst og fokuserer lettest på det saglige og faglige
indhold i jeres indlæg og får lyst til at arbejde videre, hvis indlæg
formuleres konstruktivt og i en venlig tone. Hvis der sniger sig ironi
og antydninger af nedladenhed ind i forhold til det jeg gør, virker
det demotiverende og forstemmende på mig. Min hjemmeside er en glad
hobby, og sådan vil jeg gerne fortsat have det med den.

Preben

Allan Vebel (01-12-2010)
Kommentar
Fra : Allan Vebel


Dato : 01-12-10 22:57

Preben Nielsen skrev:

> Når jeg umiddelbart vægrer mig mod at skulle
> lave det om, så er det som sagt, fordi det jeg
> har lavet virker som det skal og ser ud som det
> skal. På den baggrund er det eneste formål jeg
> kan se med at lave det om, at priorite kodens
> skønhed og enkelhed.

Ja, det er vel også det vigtigste.

> Og da jeg har masser af tidskrævende arbejde
> foran mig, og da hensigten med min hjemmeside
> er at den skal virke som tiltænkt (samtidig med
> at kodevaliditet overholdes), forekommer det ikke
> umiddelbart attraktivt at skulle kode om alene for
> kodens skyld og uden at en eneste bruger
> nogensinde ville mærke eller se forskel.

Vi prøver kun på at give dig de bedste redskaber
inden du skal i gang med dine 1900 sider.

Siger Jørgen at du har overflødige elementer, så
lyt til ham - han skriver bøger om emnet - og er en
af det mest erfarne her.

Når du har fået lavet den endelige skabelon (eller
flere, til forskellige formål), kan du endelig gå i gang
med at hælde indhold i.

Lige nu er der vist fortsat lidt med skalerbarhed?

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk



Jørgen Farum Jensen (02-12-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 02-12-10 12:21

Den 01-12-2010 17:56, Preben Nielsen skrev:




> Jeg kommer til at gentage mig selv: Jeg har lavet både HTML og CSS
> kode så godt jeg kunne og laver naturligvis ikke noget, som jeg mener
> er overflødigt. Hvis der er noget overflødigt, så er jeg bare aktuelt
> ganske enkelt ikke bedre til det. Jeg synger med mit næb så godt det
> nu engang kan der hvor jeg er i min udvikling.
> Mht. stylesheet mener jeg faktisk godt jeg kan hitte rede i det. Det
> betyder ikke at jeg forventer at andre kan. Jeg stiller et spørgsmål
> på baggrund af et oplevet problem og håber så på at nogen ser sig i
> stand til og har lyst til at hjælpe.
> Mit sidste spørgsmål (hvor et layout er blevet stift efter at jeg
> reducerede CSS koderne og lavede to stylesheets) handlede altså ikke
> om at jeg ikke kunne overskue koderne, men at der ting vedr. koderne,
> som jeg ikke forstod. Selv på baggrund af at jeg faktisk før jeg
> spurgte havde læst din artikel om specifitet, kunne jeg ikke forstå
> hvad der var sket. Og så spørger jeg selvfølgelig.
> Men nu har jeg lige selv fundet svaret: Det handlede om, at jeg havde
> brugt samme id i forbindelse med de to sider og tildelt dem
> forskellige egenskaber på de to sider. Ren tanketorsk.
>
> Det følgende adresserer jeg generelt i håb om at det vil blive
> modtaget i den konstruktive og positive ånd det er ment:
> Jeg modtager bedst og fokuserer lettest på det saglige og faglige
> indhold i jeres indlæg og får lyst til at arbejde videre, hvis indlæg
> formuleres konstruktivt og i en venlig tone. Hvis der sniger sig ironi
> og antydninger af nedladenhed ind i forhold til det jeg gør, virker
> det demotiverende og forstemmende på mig. Min hjemmeside er en glad
> hobby, og sådan vil jeg gerne fortsat have det med den.

1. Jeg trækker tilbage hvad jeg har skrevet om at
der skulle være overflødig kode på den side, jeg
skriver om, ie. http://vinsiderne.dk/test4/artikel_test.htm
Det er der, men det er i småtingsafdelingen (3 br'er efter
footeren) efter hvad jeg lige kunne se.

2. Det, jeg ikke fik sagt er at kode der virker i de
browsere, man tilfældigvis tester i, ikke nødvendigvis
virker i enhver anden browser. Den bedste sikkerhed for
dette ligge i validiteten af HTML og CSS kode, som
du også er opmærksom på.

3. Men validering er kun dette - konstatering af syntaktisk
korrekt kode. Valideringen siger intet om hvorvidt en
side er semantisk og logisk korrekt, eller om hvorvidt
dette eller hint element bruges på rette sted.

4. Jeg lever selv med mange fejltagelser, jeg har
lavet i tidernes morgen, fordi jeg alt for sent er
blevet opmærksom på at denne eller hin udfordring ikke
løses ved at hælde mere kode på - det være sig HTML eller
CSS - men ved at bruge det absolut minimale.

5. I det konkrete vil jeg påpege følgende:

a. Du har forsat et problem med at Vinsidernes debatforum
bryde som i to linjer og derved skubber menupanelet
til højre. Sådan som float-mekanismen virker er dette
helt korrekt. Løsningen på det mener jeg du har afvist,
men det er altså fortsat: fikserede bredder på denne
navigationsbjælkes menupunkter. Er summen af bredderne
så stor at du får vandret rulleskakt ved vinduesbredder
på mindre end 1024 pixel er det vel bedre end at hele
menageriet går i stykker?

b. Du har et potentielt problem med at din artikel-div
rager ind i menupanelet. Det er synligt i Web
Developer Toolbar. Det skyldes antagelig at artikel-div'en
ikke har tilstrækkelig venstre margin.

c. Et eller andet sted har du regnet forkert, for jeg får
fortsat vandret rulleskakt uanset vinduesbredden.

--

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

Preben Nielsen (02-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 02-12-10 08:11

On 2 Dec., 12:21, Jørgen Farum Jensen wrote:
>
> 5. I det konkrete vil jeg p pege f lgende:
>
> a. Du har forsat et problem med at Vinsidernes debatforum
> bryde som i to linjer og derved skubber menupanelet
> til h jre. S dan som float-mekanismen virker er dette
> helt korrekt. L sningen p det mener jeg du har afvist,
> men det er alts fortsat: fikserede bredder p denne
> navigationsbj lkes menupunkter. Er summen af bredderne
> s stor at du f r vandret rulleskakt ved vinduesbredder
> p mindre end 1024 pixel er det vel bedre end at hele
> menageriet g r i stykker?
>
> b. Du har et potentielt problem med at din artikel-div
> rager ind i menupanelet. Det er synligt i Web
> Developer Toolbar. Det skyldes antagelig at artikel-div'en
> ikke har tilstr kkelig venstre margin.
>
> c. Et eller andet sted har du regnet forkert, for jeg f r
> fortsat vandret rulleskakt uanset vinduesbredden.
>
Tak for kommentarer. Blot lige ganske kort til ang. ovenstående. Jeg
har ikke uploadet rettelser, så det er den urettede kode, du ser på.
Men jeg melder tilbage så snart den er klar og uploadet. Jeg vælger at
vente indtil jeg lige har foretaget en "oprydning", så koden
forhåbentlig er så klar som muligt.

Preben Nielsen (03-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 03-12-10 05:31

On 2 Dec., 12:21, Jørgen Farum Jensen wrote:
>
> 1. Jeg tr kker tilbage hvad jeg har skrevet om at
> der skulle v re overfl dig kode p den side, jeg
> skriver om, ie.http://vinsiderne.dk/test4/artikel_test.htm
> Det er der, men det er i sm tingsafdelingen  (3 br'er efter
> footeren) efter hvad jeg lige kunne se.
>
De ekstra br'er efter footeren tjener faktisk et formål (jeg ved ikke
om det er efter bogen, men det virker): I Firefox placeres mine sider
forskelligt afhængigt af om der er indhold nok til at udløse en lodret
scrollbar eller ej. Hvis man kommer fra en side, hvor der er scrollbar
til en hvor der ikke er, så hopper siden lidt udad mod højre. I IE er
der afsat plads til scrollbaren uanset om den er der eller ej, dvs.
den disponible bredde er den samme i alle situationer, så der er det
ikke noget problem.
>
> 3. Men validering er kun dette - konstatering af syntaktisk
> korrekt kode. Valideringen siger intet om hvorvidt en
> side er semantisk og logisk korrekt, eller om hvorvidt
> dette eller hint element bruges p rette sted.
>
Hvis du gider, må du godt fortælle mig, om der er noget jeg gør
forkert her - jeg er ikke sikker på at jeg helt forstår hvad du mener.
Jeg tilstræber at mine HTML koder står i "læserækkefølge", dvs.
ovenfra og nedefter og fra venstre mod højre. Er det det du mener?
>
> 5. I det konkrete vil jeg p pege f lgende:
>
> a. Du har forsat et problem med at Vinsidernes debatforum
> bryde som i to linjer og derved skubber menupanelet
> til h jre. S dan som float-mekanismen virker er dette
> helt korrekt. L sningen p det mener jeg du har afvist,
> men det er alts fortsat: fikserede bredder p denne
> navigationsbj lkes menupunkter. Er summen af bredderne
> s stor at du f r vandret rulleskakt ved vinduesbredder
> p mindre end 1024 pixel er det vel bedre end at hele
> menageriet g r i stykker?
>
> b. Du har et potentielt problem med at din artikel-div
> rager ind i menupanelet. Det er synligt i Web
> Developer Toolbar. Det skyldes antagelig at artikel-div'en
> ikke har tilstr kkelig venstre margin.
>
> c. Et eller andet sted har du regnet forkert, for jeg f r
> fortsat vandret rulleskakt uanset vinduesbredden.
>
Nu har jeg - i modsætning til da du konstaterede ovenstående -
uploadet de rettede og ordnede koder, som virker hos mig i IE7 og
Firefox. Oplever du stadig problemer hos dig?
Det nye kan ses her: http://vinsiderne.dk/test5/startside_4a.htm og
http://vinsiderne.dk/test5/artikel_4a.htm
startsiden er med faste bredder, og artiklen er med elastisk design,
når vi er over 680px. Jeg har nu opdelt css i 3 sheets, som - i det
mindste for mig - øger overskueligheden.

For lige at foregribe protester ang. tabellerne på artikel-siden, så
gør jeg opmærksom på at spalterne er lavet med helt u-layoutede
tabeller, ikke fordi jeg har lagt mig fast på tabeller, men for at
have noget at se på, som jeg ved er elastisk. Det næste bliver så at
eksperimentere med metoder til to-spaltet layout.

Preben

Jørgen Farum Jensen (04-12-2010)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 04-12-10 16:10

Den 03-12-2010 13:30, Preben Nielsen skrev:

> De ekstra br'er efter footeren tjener faktisk et formål (jeg ved ikke
> om det er efter bogen, men det virker): I Firefox placeres mine sider
> forskelligt afhængigt af om der er indhold nok til at udløse en lodret
> scrollbar eller ej. Hvis man kommer fra en side, hvor der er scrollbar
> til en hvor der ikke er, så hopper siden lidt udad mod højre. I IE er
> der afsat plads til scrollbaren uanset om den er der eller ej, dvs.
> den disponible bredde er den samme i alle situationer, så der er det
> ikke noget problem.

Ja, men det er ikke det br er beregnet til. Om problemet
i Firefox kan du læse her:
http://www.webdesign101.dk/csslayout/ex/eksempel_2_a.html

>> 3. Men validering er kun dette - konstatering af syntaktisk
>> korrekt kode. Valideringen siger intet om hvorvidt en
>> side er semantisk og logisk korrekt, eller om hvorvidt
>> dette eller hint element bruges p rette sted.
>>
> Hvis du gider, må du godt fortælle mig, om der er noget jeg gør
> forkert her - jeg er ikke sikker på at jeg helt forstår hvad du mener.
> Jeg tilstræber at mine HTML koder står i "læserækkefølge", dvs.
> ovenfra og nedefter og fra venstre mod højre. Er det det du mener?

Nej, det er jo ret indlysende, skulle jeg mene.

Du har selv leveret et eksempel på en fejlagtig
anvendelse (semantisk ukorrekt) af br.

Et andet eksempel leverer du på din side. Du indleder
artiklen med en h4, som visuelt er større end den
h2, du bruger som mellemrubrik.

Semantikken for overskrifter er, at h1 er den
mest betydende overskrift, og derfor sædvanligvis kun
anvendes én gang til en artikels overskrift. h2 er
den næstmest betydende, og anvendes som overskrift,
når der sker et tekstmæssigt emneskift - fra bordeaux til
bourgogne for eksempel. h3 anvendes til mellemrubrikker
osv.

Der er delte meninger om dette, nogle mener for eksempel
at h2 rettelig bør anvendes til en artikels manchet. Det
mener jeg for eksempel om torsdagen. Om fredagen tænker
jeg at både logotype og overskrift bør være h1

Pointen er her at h1-h6 skal bruges med omtanke for deres
betydning.

Et eksempel på ukorrekt anvendelse af h1 ser man desværre
lidt for ofte: Brugen af h1 i stedet for p, ud fra en
forestilling om at hvis Google tillægger en h1 større
betydning end et p, så er det smart at gøre al teksten
til h1.

Et eksempel på logisk ukorrekt CSS men
valid CSS er følgende:

div#sidebar {vertical-align:bottom;}

Et andet og lige så hyppigt drilsk er
manglende hensyn til specificitet. I
min artikel
http://webdesign101.dk/css/css_selektorer.pdf

har jeg eksemplet:
div#navbar ul.topmenu li a {
color:black; background-color:white; }
ul.topmenu li a:hover {
background-color:#dddddd; }
ul.topmenu li a#link3 {
background-color:#dddddd;}

Det er fuldstændig korrekt CSS, men det
virker bare ikke. Det er logisk forkert.

--

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

Preben Nielsen (03-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 03-12-10 14:53

On 2 Dec., 12:21, Jørgen Farum Jensen wrote:

> 1. Jeg tr kker tilbage hvad jeg har skrevet om at
> der skulle v re overfl dig kode p den side, jeg
> skriver om, ie.http://vinsiderne.dk/test4/artikel_test.htm
> Det er der, men det er i sm tingsafdelingen (3 br'er efter
> footeren) efter hvad jeg lige kunne se.

De ekstra br'er efter footeren tjener faktisk et formål (jeg ved ikke
om det er efter bogen, men det virker): I Firefox placeres mine sider
forskelligt afhængigt af om der er indhold nok til at udløse en
lodret
scrollbar eller ej. Hvis man kommer fra en side, hvor der er
scrollbar
til en hvor der ikke er, så hopper siden lidt udad mod højre, hvis
ikke de omtalte br'er sørger for en scrollbar. I IE er der afsat plads
til scrollbaren uanset om den er der eller ej, dvs.
den disponible bredde er den samme i alle situationer, så der er det
ikke noget problem.

> 3. Men validering er kun dette - konstatering af syntaktisk
> korrekt kode. Valideringen siger intet om hvorvidt en
> side er semantisk og logisk korrekt, eller om hvorvidt
> dette eller hint element bruges p rette sted.

Hvis du gider, må du godt fortælle mig, om der er noget jeg gør
forkert her - jeg er ikke sikker på at jeg helt forstår hvad du
mener.
Jeg tilstræber at mine HTML koder står i "læserækkefølge", dvs.
ovenfra og nedefter og fra venstre mod højre. Er det det du mener?

- Skjul tekst i anførselstegn -
- Vis tekst i anførselstegn -

> 5. I det konkrete vil jeg p pege f lgende:

> a. Du har forsat et problem med at Vinsidernes debatforum
> bryde som i to linjer og derved skubber menupanelet
> til h jre. S dan som float-mekanismen virker er dette
> helt korrekt. L sningen p det mener jeg du har afvist,
> men det er alts fortsat: fikserede bredder p denne
> navigationsbj lkes menupunkter. Er summen af bredderne
> s stor at du f r vandret rulleskakt ved vinduesbredder
> p mindre end 1024 pixel er det vel bedre end at hele
> menageriet g r i stykker?

> b. Du har et potentielt problem med at din artikel-div
> rager ind i menupanelet. Det er synligt i Web
> Developer Toolbar. Det skyldes antagelig at artikel-div'en
> ikke har tilstr kkelig venstre margin.

> c. Et eller andet sted har du regnet forkert, for jeg f r
> fortsat vandret rulleskakt uanset vinduesbredden.

Nu har jeg - i modsætning til da du konstaterede ovenstående -
uploadet de rettede og ordnede koder, som virker hos mig i IE7 og
Firefox. Oplever du stadig problemer hos dig?
Det nye kan ses her: http://vinsiderne.dk/test5/startside_4a.htm og
http://vinsiderne.dk/test5/artikel_4a.htm
startsiden er med faste bredder, og artiklen er med elastisk design,
når vi er over 680px. Jeg har nu opdelt css i 3 sheets, som - i det
mindste for mig - øger overskueligheden.

For lige at foregribe protester ang. tabellerne på artikel-siden, så
gør jeg opmærksom på at spalterne er lavet med helt u-layoutede
tabeller, ikke fordi jeg har lagt mig fast på tabeller, men for at
have noget at se på, som jeg ved er elastisk. Det næste bliver så at
eksperimentere med metoder til to-spaltet layout.

Preben

Karl Erik Christense~ (04-12-2010)
Kommentar
Fra : Karl Erik Christense~


Dato : 04-12-10 02:26

On 03-12-2010 22:53, Preben Nielsen wrote:

> De ekstra br'er efter footeren tjener faktisk et formål (jeg ved ikke
> om det er efter bogen, men det virker): I Firefox placeres mine sider
> forskelligt afhængigt af om der er indhold nok til at udløse en
> lodret
> scrollbar eller ej. Hvis man kommer fra en side, hvor der er
> scrollbar
> til en hvor der ikke er, så hopper siden lidt udad mod højre, hvis
> ikke de omtalte br'er sørger for en scrollbar. I IE er der afsat plads
> til scrollbaren uanset om den er der eller ej, dvs.
> den disponible bredde er den samme i alle situationer, så der er det
> ikke noget problem.
>
> Preben

I disse DM i Webdesign tider, synes jeg alligevel du skal have løsningen

html, body {
height: 100%;
margin: 0 0 1px;
padding: 0;
}

Ovenstående fremtvinger en vertical scrollbar pga. den ene pixel i margin.

Karl Erik.

--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign


Birger Sørensen (04-12-2010)
Kommentar
Fra : Birger Sørensen


Dato : 04-12-10 08:52

Karl Erik Christensen forklarede den 04-12-2010:
> On 03-12-2010 22:53, Preben Nielsen wrote:
>
>> De ekstra br'er efter footeren tjener faktisk et formål (jeg ved ikke
>> om det er efter bogen, men det virker): I Firefox placeres mine sider
>> forskelligt afhængigt af om der er indhold nok til at udløse en
>> lodret
>> scrollbar eller ej. Hvis man kommer fra en side, hvor der er
>> scrollbar
>> til en hvor der ikke er, så hopper siden lidt udad mod højre, hvis
>> ikke de omtalte br'er sørger for en scrollbar. I IE er der afsat plads
>> til scrollbaren uanset om den er der eller ej, dvs.
>> den disponible bredde er den samme i alle situationer, så der er det
>> ikke noget problem.
>>
>> Preben
>
> I disse DM i Webdesign tider, synes jeg alligevel du skal have løsningen
>
> html, body {
> height: 100%;
> margin: 0 0 1px;
> padding: 0;
> }
>
> Ovenstående fremtvinger en vertical scrollbar pga. den ene pixel i margin.
>
> Karl Erik.

html elementet har ingen style.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Arvid Mærsk (04-12-2010)
Kommentar
Fra : Arvid Mærsk


Dato : 04-12-10 14:47

Hej, du skrev bl.a.:

> html elementet har ingen style.
>
> Birger
>

Jeg havde samme irriterende problem som Preben, men inspireret af JFJ
indsatte jeg denne:

html { /*FF rulleskakt fiks */ overflow-y:scroll; }

og det virker perfekt for mig.

--
AM

Karl Erik Christense~ (04-12-2010)
Kommentar
Fra : Karl Erik Christense~


Dato : 04-12-10 16:34

On 04-12-2010 08:52, Birger Sørensen wrote:

> html elementet har ingen style.
>
> Birger
>

Hej Birger.

Ja jeg tænkte faktisk på dig da jeg skrev det
For jeg har set dig sige sådan før.

IE forstår styling på elementet html - det gør f.eks. FireFox ikke. Og
så alligevel - den forstår nemlig hvad der nedarves, både fra html og body.
Det er i al fald den forklaring jeg har læst et sted.

"If it ain't broke, don't fix it" - altså, det virker jo altså

Karl Erik.

--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign


Birger Sørensen (04-12-2010)
Kommentar
Fra : Birger Sørensen


Dato : 04-12-10 16:52

Karl Erik Christensen skrev:
> On 04-12-2010 08:52, Birger Sørensen wrote:
>
>> html elementet har ingen style.
>>
>> Birger
>>
>
> Hej Birger.
>
> Ja jeg tænkte faktisk på dig da jeg skrev det
> For jeg har set dig sige sådan før.
>
> IE forstår styling på elementet html - det gør f.eks. FireFox ikke. Og så
> alligevel - den forstår nemlig hvad der nedarves, både fra html og body.
> Det er i al fald den forklaring jeg har læst et sted.
>
> "If it ain't broke, don't fix it" - altså, det virker jo altså
>
> Karl Erik.

body { overflow-y:scroll;}
er simplere.
Det er CSS3 og altså lige så valid som dine 4 liner, og vil jeg tro
uden at have testet, virker i lige så mange browsere.
Hvorfor så anbefale noget der aldrig bliver valid kode?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Preben Nielsen (03-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 03-12-10 14:55

On 2 Dec., 12:21, Jørgen Farum Jensen wrote:


> 1. Jeg tr kker tilbage hvad jeg har skrevet om at
> der skulle v re overfl dig kode p den side, jeg
> skriver om, ie.http://vinsiderne.dk/test4/artikel_test.htm
> Det er der, men det er i sm tingsafdelingen (3 br'er efter
> footeren) efter hvad jeg lige kunne se.


De ekstra br'er efter footeren tjener faktisk et formål (jeg ved ikke
om det er efter bogen, men det virker): I Firefox placeres mine sider
forskelligt afhængigt af om der er indhold nok til at udløse en
lodret
scrollbar eller ej. Hvis man kommer fra en side, hvor der er
scrollbar
til en hvor der ikke er, så hopper siden lidt udad mod højre, hvis
ikke de omtalte br'er sørger for en scrollbar. I IE er der afsat
plads
til scrollbaren uanset om den er der eller ej, dvs.
den disponible bredde er den samme i alle situationer, så der er det
ikke noget problem.


> 3. Men validering er kun dette - konstatering af syntaktisk
> korrekt kode. Valideringen siger intet om hvorvidt en
> side er semantisk og logisk korrekt, eller om hvorvidt
> dette eller hint element bruges p rette sted.


Hvis du gider, må du godt fortælle mig, om der er noget jeg gør
forkert her - jeg er ikke sikker på at jeg helt forstår hvad du
mener.
Jeg tilstræber at mine HTML koder står i "læserækkefølge", dvs.
ovenfra og nedefter og fra venstre mod højre. Er det det du mener?

- Skjul tekst i anførselstegn -
- Vis tekst i anførselstegn -

> 5. I det konkrete vil jeg p pege f lgende:
> a. Du har forsat et problem med at Vinsidernes debatforum
> bryde som i to linjer og derved skubber menupanelet
> til h jre. S dan som float-mekanismen virker er dette
> helt korrekt. L sningen p det mener jeg du har afvist,
> men det er alts fortsat: fikserede bredder p denne
> navigationsbj lkes menupunkter. Er summen af bredderne
> s stor at du f r vandret rulleskakt ved vinduesbredder
> p mindre end 1024 pixel er det vel bedre end at hele
> menageriet g r i stykker?
> b. Du har et potentielt problem med at din artikel-div
> rager ind i menupanelet. Det er synligt i Web
> Developer Toolbar. Det skyldes antagelig at artikel-div'en
> ikke har tilstr kkelig venstre margin.
> c. Et eller andet sted har du regnet forkert, for jeg f r
> fortsat vandret rulleskakt uanset vinduesbredden.


Nu har jeg - i modsætning til da du konstaterede ovenstående -
uploadet de rettede og ordnede koder, som virker hos mig i IE7 og
Firefox. Oplever du stadig problemer hos dig?
Det nye kan ses her: http://vinsiderne.dk/test5/startside_4a.htm og
http://vinsiderne.dk/test5/artikel_4a.htm
startsiden er med faste bredder, og artiklen er med elastisk design,
når vi er over 680px. Jeg har nu opdelt css i 3 sheets, som - i det
mindste for mig - øger overskueligheden.

For lige at foregribe protester ang. tabellerne på artikel-siden, så
gør jeg opmærksom på at spalterne er lavet med helt u-layoutede
tabeller, ikke fordi jeg har lagt mig fast på tabeller, men for at
have noget at se på, som jeg ved er elastisk. Det næste bliver så at
eksperimentere med metoder til to-spaltet layout.

Preben

Preben Nielsen (04-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 04-12-10 07:08

On 4 Dec., 02:26, Karl Erik Christensen wrote:
>
> I disse DM i Webdesign tider, synes jeg alligevel du skal have l sningen
>
> html, body {
> height: 100%;
> margin: 0 0 1px;
> padding: 0;
>
> }
>
> Ovenst ende fremtvinger en vertical scrollbar pga. den ene pixel i margin..
>
Tak for tippet, som gør præcis det du siger.
Jeg undrer mig dog over - også i forlængelse af det som Birger skriver
ovenfor, og som vel er korrekt - at html skal tildeles styles. Men i
praksis virker det kun hvis html kommer med. Og stylesheetet valideres
faktisk.
Hvis html ikke kommer med, og det kun er body der styles, er man nødt
til at tillægge en større bundmargen (med deraf følgende højere
scrollbar), idet der så åbenbart regnes fra footerens bundkant.

/Preben

Preben Nielsen (04-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 04-12-10 07:17

On 4 Dec., 14:46, Arvid Mærsk wrote:
>
> Jeg havde samme irriterende problem som Preben, men inspireret af JFJ
> indsatte jeg denne:
>
> html { /*FF rulleskakt fiks */  overflow-y:scroll;  }
>
> og det virker perfekt for mig.
>
Jeg testede også lige din model, Arvid. Og den virker også. Og så er
den faktisk kønnere, idet der ikke kommer en reelt unødvendig
scrollbar men blot afsættes plads til den. Men valideringen
protesterer: "html Property overflow-y doesn't exist in CSS level 2.1
but exists in : scroll scroll "

/Preben

Birger Sørensen (04-12-2010)
Kommentar
Fra : Birger Sørensen


Dato : 04-12-10 15:37

Preben Nielsen skrev den 04-12-2010:
> On 4 Dec., 14:46, Arvid Mærsk wrote:
>>
>> Jeg havde samme irriterende problem som Preben, men inspireret af JFJ
>> indsatte jeg denne:
>>
>> html { /*FF rulleskakt fiks */  overflow-y:scroll;  }
>>
>> og det virker perfekt for mig.
>>
> Jeg testede også lige din model, Arvid. Og den virker også. Og så er
> den faktisk kønnere, idet der ikke kommer en reelt unødvendig
> scrollbar men blot afsættes plads til den. Men valideringen
> protesterer: "html Property overflow-y doesn't exist in CSS level 2.1
> but exists in : scroll scroll "
>
> /Preben

overflow-x og overflow-y er vist nok CSS3 - der p.t. understøttes af
nogen ikke af andre.
Der er vist et sted du kan finde ud af hvilke der understøtter hvad -
men det er nok nemmere at teste i dem man vil understøtte.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Arvid Mærsk (04-12-2010)
Kommentar
Fra : Arvid Mærsk


Dato : 04-12-10 15:56

Hej, du skrev bl.a.:

> Jeg testede også lige din model, Arvid. Og den virker også. Og så er
> den faktisk kønnere, idet der ikke kommer en reelt unødvendig
> scrollbar men blot afsættes plads til den. Men valideringen
> protesterer: "html Property overflow-y doesn't exist in CSS level 2.1
> but exists in : scroll scroll "

Jeg prøvede at fjerne -y:

html { /*FF rulleskakt fiks */ overflow:scroll; }

det virker også og så validerer den.

Lidt forklaring fra http://www.w3schools.com/css/pr_pos_overflow.asp

Property Values

scroll:    The overflow is clipped, but a scroll-bar is added to see the
rest of the content

--
AM

Birger Sørensen (04-12-2010)
Kommentar
Fra : Birger Sørensen


Dato : 04-12-10 16:04

Arvid Mærsk kom med denne ide:
> Hej, du skrev bl.a.:
>
>> Jeg testede også lige din model, Arvid. Og den virker også. Og så er
>> den faktisk kønnere, idet der ikke kommer en reelt unødvendig
>> scrollbar men blot afsættes plads til den. Men valideringen
>> protesterer: "html Property overflow-y doesn't exist in CSS level 2.1
>> but exists in : scroll scroll "
>
> Jeg prøvede at fjerne -y:
>
> html { /*FF rulleskakt fiks */ overflow:scroll; }
>
> det virker også og så validerer den.
>
> Lidt forklaring fra http://www.w3schools.com/css/pr_pos_overflow.asp
>
> Property Values
>
> scroll:    The overflow is clipped, but a scroll-bar is added to see the rest
> of the content

Det skal så anbringes på body. html har ingen style, og den grafiske
repræsentation er body.
Og dit forslag med at fjerne -y, giver ikke samme resultat. Der skal
være scrollbar i bunden (vandet) også.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Preben Nielsen (04-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 04-12-10 08:05

On 4 Dec., 15:55, Arvid Mærsk wrote:
>
> Jeg pr vede at fjerne -y:
>
> html { /*FF rulleskakt fiks */  overflow:scroll; }
>
> det virker ogs og s validerer den.
>
Til gengæld afsættes der også plads til vandret rulleskakt. Personligt
synes jeg ikke det er så kønt, men det er jo en smags sag. Jeg
foretrækker
html, body {
height: 100%;
margin: 0 0 1px;
padding: 0;

/Preben

Preben Nielsen (04-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 04-12-10 09:18

On 4 Dec., 16:52, Birger Sørensen wrote:
>
> body { overflow-y:scroll;}
> er simplere.
> Det er CSS3 og alts lige s valid som dine 4 liner, og vil jeg tro
> uden at have testet, virker i lige s mange browsere.
>
Det går helt galt. Der bliver afsat plads til endnu en lodret
scrollbar, så der er to tomme scrollbar-hylstre, både i IE7 og FF. Da
der herved bliver mindre plads til sidens indhold i bredden, kommer
der ydermere end vandret scrollbar.

/Preben

Birger Sørensen (04-12-2010)
Kommentar
Fra : Birger Sørensen


Dato : 04-12-10 17:33

Følgende er skrevet af Preben Nielsen:
> On 4 Dec., 16:52, Birger Sørensen wrote:
>>
>> body { overflow-y:scroll;}
>> er simplere.
>> Det er CSS3 og alts lige s valid som dine 4 liner, og vil jeg tro
>> uden at have testet, virker i lige s mange browsere.
>>
> Det går helt galt. Der bliver afsat plads til endnu en lodret
> scrollbar, så der er to tomme scrollbar-hylstre, både i IE7 og FF. Da
> der herved bliver mindre plads til sidens indhold i bredden, kommer
> der ydermere end vandret scrollbar.
>
> /Preben

Hvis der kommer to scrollbarer, er der vist noget andet galt...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Preben Nielsen (04-12-2010)
Kommentar
Fra : Preben Nielsen


Dato : 04-12-10 09:56

On 4 Dec., 17:33, Birger Sørensen wrote:
>
> Hvis der kommer to scrollbarer, er der vist noget andet galt...
>
Jeg prøvede lige en gang til, og jo, der var i hvert fald det galt, at
jeg havde glemt at fjerne html fra html, body { }. Herefter virkede
det perfekt i FF. Men der kommer stadig en ekstra tom rulleskakt i
IE7. Der er jo - i modsætning til i FF - sådan en som standard i
forvejen helt uanset indholdets højde. Det kunne vel være
forklaringen.

/Preben

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