/ 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
Mellemrum mellem linier
Fra : Morten Snedker


Dato : 30-10-06 16:37

For en div har jeg angivet

#inddata_vaerk_labels p{margin-bottom:1px;}

hvilket skulle gi' et mellemrum mellem linierne på 1px - de burde stå
oven i hinanden, ik'?

Problemet er på http://test.planprojekt.dk/vaerk.aspx, hvor jeg
forsøger at få tekst og input-felter til at flugte. På ovenstående
link er den sat til 1px.

Hva' gør jeg galt? Jeg benytter VS.Net.

mvh
--
Morten Snedker
www.planprojekt.dk | www.dbconsult.dk
Privat: www.vinthervej2.dk

 
 
Ukendt (30-10-2006)
Kommentar
Fra : Ukendt


Dato : 30-10-06 17:54


"Morten Snedker" <morten@nospam.dk> skrev i en meddelelse
news:4q6ck211ogj23m1nr3dclonu52vnm9nlu2@4ax.com...
> For en div har jeg angivet
>
> #inddata_vaerk_labels p{margin-bottom:1px;}
>
> hvilket skulle gi' et mellemrum mellem linierne på 1px - de burde stå
> oven i hinanden, ik'?

Nej de burde ikke stå oveni hinanden. Og marginen har i princippet intet med
linje afstanden at gøre. Her skal du have fat i line-height. Marginen
derimod indflydelse på afstenden mellem de enkelte afsnit eller andre
elementer på siden

> Problemet er på http://test.planprojekt.dk/vaerk.aspx, hvor jeg
> forsøger at få tekst og input-felter til at flugte. På ovenstående
> link er den sat til 1px.
>
> Hva' gør jeg galt? Jeg benytter VS.Net.

Du skal bruge <label> i stedet for <p> i det tilfælde

eksempel på forste linje
<label for "txtjournalnr">Journal Nr.:</label><input name="txtJournalNr"
type="text" id="txtJournalNr" /><br />God fornøjelse-- Med venlig hilsen -
Carsten SørensenGode råd til webdesigneren - http://csnet.dk/html/Nørholm
Forsamlingshus - http://forshus.dk



Ukendt (30-10-2006)
Kommentar
Fra : Ukendt


Dato : 30-10-06 17:57

Carsten Sørensen wrote:

> Du skal bruge <label> i stedet for <p> i det tilfælde

Det gik da helt galt

> eksempel på forste linje
> <label for "txtjournalnr">Journal Nr.:</label><input
> name="txtJournalNr" type="text" id="txtJournalNr" /><br />God

eksempel på første linje

<label for "txtjournalnr">Journal Nr.:</label><input name="txtJournalNr"
type="text" id="txtJournalNr" /><br />

Sådan der


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Morten Snedker (30-10-2006)
Kommentar
Fra : Morten Snedker


Dato : 30-10-06 19:27

On Mon, 30 Oct 2006 17:53:32 +0100, "Carsten Sørensen"
<askmeforanaddress> wrote:


>Du skal bruge <label> i stedet for <p> i det tilfælde

Tak for hjælpen - et lille tillægsspørgsmål:

Er det ét fedt, om jeg benytter line-height i stedet for <label> -
eller vil label være det korrekte at benytte (og hvorfor) ?

mvh
--
Morten Snedker
www.planprojekt.dk | www.dbconsult.dk
Privat: www.vinthervej2.dk

Morten Snedker (30-10-2006)
Kommentar
Fra : Morten Snedker


Dato : 30-10-06 19:45

On Mon, 30 Oct 2006 17:53:32 +0100, "Carsten Sørensen"
<askmeforanaddress> wrote:

Hvordan angiver jeg så afstanden mellem labels? Jeg har forsøgt med

   #inddata_vaerk_labels label{margin-bottom: 5px;}

, men det har ingen effekt?

mvh
--
Morten Snedker
www.planprojekt.dk | www.dbconsult.dk
Privat: www.vinthervej2.dk

Ukendt (30-10-2006)
Kommentar
Fra : Ukendt


Dato : 30-10-06 20:09


"Morten Snedker" <morten@nospam.dk> skrev i en meddelelse
news:rphck2h4bf8sioc6gum44rbp2uafrqmm4s@4ax.com...
> On Mon, 30 Oct 2006 17:53:32 +0100, "Carsten Sørensen"
> <askmeforanaddress> wrote:
>
> Hvordan angiver jeg så afstanden mellem labels? Jeg har forsøgt med
>
> #inddata_vaerk_labels label{margin-bottom: 5px;}
>
> , men det har ingen effekt?

prøv at sætte det på input i stedet for, og så burde label følge med.

Og ja det er det korrekte at bruge <label> her frem for <p>


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Morten Snedker (30-10-2006)
Kommentar
Fra : Morten Snedker


Dato : 30-10-06 22:09

On Mon, 30 Oct 2006 17:53:32 +0100, "Carsten Sørensen"
<askmeforanaddress> wrote:

<FNYS>

Jeg kan bare ik' få det skrammel til at spille. Det er såre simpelt:

Venstre-justeret labels, højre-justeret input-felter. De skal gerne
stå ud for hinanden.

Jeg vil bare gerne have hhv. labels og inputs til at flugte med
hinanden - måske det ikke er float jeg skal bruge?

Men på http://test.planprojekt.dk/vaerk.aspx ser det jo i hvertfald ud
ad h-til... >:-\

Labels og input er stylet med

#inddata_vaerk input{float:right; height:14px; font-size:0.8em;
width:100px;}
#inddata_vaerk label{float:left; height:14px;font-size:0.8em;}

Er der noget grundlæggende jeg ikke har fattet? Helst noget
html-relateret.


mvh
--
Morten Snedker
www.planprojekt.dk | www.dbconsult.dk
Privat: www.vinthervej2.dk

tidemann (30-10-2006)
Kommentar
Fra : tidemann


Dato : 30-10-06 22:54

Morten Snedker wrote:
>
> Men på http://test.planprojekt.dk/vaerk.aspx ser det jo i hvertfald ud
> ad h-til... >:-\
>
> Labels og input er stylet med
>


Jeg tror du skal floate alle, enten left eller right.

--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.formdinfremtid.dk - www.royalmontana.dk


tidemann (31-10-2006)
Kommentar
Fra : tidemann


Dato : 31-10-06 00:32

tidemann wrote:
>
> Jeg tror du skal floate alle, enten left eller right.

Sorry, der er gået ged i et eller andet da jeg testede!
Det virker ikke sådan!

--
Mvh Marianne
design af: www.dhejne.dk - www.ragdollys-cat-link.dk
www.singingwolfs.dk - www.formdinfremtid.dk - www.royalmontana.dk


Ukendt (31-10-2006)
Kommentar
Fra : Ukendt


Dato : 31-10-06 10:08


"Morten Snedker" <morten@nospam.dk> skrev i en meddelelse
news:k2qck29dd9h3aeq4p4bi28111r8549n3rd@4ax.com...

> Jeg vil bare gerne have hhv. labels og inputs til at flugte med
> hinanden - måske det ikke er float jeg skal bruge?

Jo floats kan sagtens bruges

> Men på http://test.planprojekt.dk/vaerk.aspx ser det jo i hvertfald ud
> ad h-til... >:-\
>
> Labels og input er stylet med
>
> #inddata_vaerk input{float:right; height:14px; font-size:0.8em;
> width:100px;}

Fjern float: right

> #inddata_vaerk label{float:left; height:14px;font-size:0.8em;}

Giv label en bredde. Height er i begge tilfælde i øvrigt overflødige, og
font-size på label skal vist også fjernes

Du kan så justere afstanden med margin på input.

> Er der noget grundlæggende jeg ikke har fattet? Helst noget
> html-relateret.

hmm.. du har i hvert fald glemt at knytte den enkelte label til inputfeltet
med for="idpåinputfelt"

Eksempel:

<label for="txtjournalnr">Journal Nr.:</label><input name="txtJournalNr"
type="text" id="txtJournalNr" /><br />


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Morten Snedker (31-10-2006)
Kommentar
Fra : Morten Snedker


Dato : 31-10-06 14:47

On Tue, 31 Oct 2006 10:07:58 +0100, "Carsten Sørensen"
<askmeforanaddress> wrote:


>> #inddata_vaerk label{float:left; height:14px;font-size:0.8em;}
>
>Giv label en bredde. Height er i begge tilfælde i øvrigt overflødige, og
>font-size på label skal vist også fjernes

Done:
#inddata_vaerk label{width:200px;}

Men det slår ikke igennem i browseren?

>> Er der noget grundlæggende jeg ikke har fattet? Helst noget
>> html-relateret.
>
>hmm.. du har i hvert fald glemt at knytte den enkelte label til inputfeltet
>med for="idpåinputfelt"

Korrekt - det manglede. Det gør det så ikke mere.

Ikke desto mindre står det stadig ad h-til på skærmen...

mvh
--
Morten Snedker
http://www.planprojekt.dk | http://www.dbconsult.dk
Privat: http://www.vinthervej2.dk

Ukendt (31-10-2006)
Kommentar
Fra : Ukendt


Dato : 31-10-06 15:32


"Morten Snedker" <morten.snedker@planprojekt.dk> skrev i en meddelelse
news:0rkek2hha0obmnas1ml8lstnsu2u9jh80h@4ax.com...
> On Tue, 31 Oct 2006 10:07:58 +0100, "Carsten Sørensen"
> <askmeforanaddress> wrote:
>
>
>>> #inddata_vaerk label{float:left; height:14px;font-size:0.8em;}
>>
>>Giv label en bredde. Height er i begge tilfælde i øvrigt overflødige, og
>>font-size på label skal vist også fjernes
>
> Done:
> #inddata_vaerk label{width:200px;}

Skal det virkelig skæres ud i pap, du skulle blot tilføje bredden, og ikke
slette det andet.

Det er også tilladt at prøve sig lidt frem

> Men det slår ikke igennem i browseren?

Nej fordi du har slettet float: left;

> Ikke desto mindre står det stadig ad h-til på skærmen...

Ja du gennemfører kun mine ændringer halvt


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Morten Snedker (31-10-2006)
Kommentar
Fra : Morten Snedker


Dato : 31-10-06 16:10

On Tue, 31 Oct 2006 15:32:05 +0100, "Carsten Sørensen"
<askmeforanaddress> wrote:

>> Done:
>> #inddata_vaerk label{width:200px;}
>
>Skal det virkelig skæres ud i pap, du skulle blot tilføje bredden, og ikke
>slette det andet.

Pap er mit favorit-materiale.

>> Men det slår ikke igennem i browseren?
>
>Nej fordi du har slettet float: left;

Ja - her er bevæggrunden:

Grunden til jeg lavede to div's, var at jeg ikke kunne få det til at
stå pænt. Så jeg ville lave en div med labels og en med inputs.

Men jeg er overbevist om, at det da for fa'en må kunne komme til at
stå pænt i den samme div.

Derfor har jeg nu kun min div #inddata_vaerk:

#inddata_vaerk
{ background-color:inherit;
width:650px;
font-size:0.8em;
}

#inddata_vaerk label{width:200px;}


Jeg håbede at min manglende parameter "for" til mine labels, var
årsagen, men det var det så desværre ikke.

Eksempelvis kan jeg ikke forstå at mine labels ikke bliver 200px i
bredden, når jeg nu be'r om det?

Jeg beklager min sejlen frem og tilbage, men jeg er stadig ikke så
stiv i css, som jeg kunne ønske - og mit temperament er på prøve i
øjeblikket.

Fortsat 1000 tak for hjælpen, der er stort påskønnet!

mvh
--
Morten Snedker
http://www.planprojekt.dk | http://www.dbconsult.dk
Privat: http://www.vinthervej2.dk

Jørn Andersen (01-11-2006)
Kommentar
Fra : Jørn Andersen


Dato : 01-11-06 04:06

On Tue, 31 Oct 2006 16:10:10 +0100, Morten Snedker
<morten.snedker@planprojekt.dk> wrote:

>Ja - her er bevæggrunden:
>
>Grunden til jeg lavede to div's, var at jeg ikke kunne få det til at
>stå pænt. Så jeg ville lave en div med labels og en med inputs.
<snip>
>Jeg håbede at min manglende parameter "for" til mine labels, var
>årsagen, men det var det så desværre ikke.
>
>Eksempelvis kan jeg ikke forstå at mine labels ikke bliver 200px i
>bredden, når jeg nu be'r om det?

Problemet er nok, at label (og input) er inline elementer (i
modsætning til block elementer).
Det har normalt været rimeligt smart, fordi man så kan bruge HTML
elementer til at formattere formularen.

Men det giver så det problem, du er røget ind i, nemlig at de ikke
uden videre kan placeres "pænt" på siden. Width på inline-elementer
dur ikke.


Så vidt jeg kan se, har du i hvert fald flg. muligheder:
1. Du kan bruge en tabel - se fx:
<url: http://gyros.dk/usenet/html/label.shtml>

2. Du kan pakke hver af dem (input og label) ind i hver sin <p> eller
<div> og så floate dem.

3. Du kan give float og input CSS-egenskaben
display:block;
og så floate dem.

Jeg har et eksempel på den sidste her:
<url: http://www.marxisme.dk/test/formcss.htm>
Jeg har satte nogle borders på, så du kan se, hvad der sker med de
enkelte elementer, når du fx ændrer skriftstørrelse.
Du kan se, at de opfører sig ret forskellig i IE kontra Opera og FF.
Så af hensyn til IE ville jeg bruge eks. 2, hvor hvert label/input par
er pakket ind i en <div>.

NB: Er ikke testet i IE7!

Floats er - som du sikkert har opdaget - ikke helt intuitive at
arbejde med, men Jørgen Farum Jensen har en god forklaring her:
<url: http://www.webdesign101.dk/csslayout/float_layout.php>


Good luck!

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

Morten Snedker (01-11-2006)
Kommentar
Fra : Morten Snedker


Dato : 01-11-06 07:34

On Wed, 01 Nov 2006 04:05:32 +0100, Jørn Andersen <jorn@jorna.dk>
wrote:


--snip--

>Jeg har et eksempel på den sidste her:
><url: http://www.marxisme.dk/test/formcss.htm>

>Floats er - som du sikkert har opdaget - ikke helt intuitive at
>arbejde med, men Jørgen Farum Jensen har en god forklaring her:
><url: http://www.webdesign101.dk/csslayout/float_layout.php>

Nej, ikke helt intuitive.

Tak for hjælpen. Jeg vil kigge på links i løbet af dagen. Også tak for
øvrig hjælp i tråden.

mvh
--
Morten Snedker
www.planprojekt.dk | www.dbconsult.dk
Privat: www.vinthervej2.dk

Ukendt (01-11-2006)
Kommentar
Fra : Ukendt


Dato : 01-11-06 10:24


"Jørn Andersen" <jorn@jorna.dk> skrev i en meddelelse
news:lrtfk2lsapgdkbtqhmidgqg650uva7jgom@4ax.com...

> Men det giver så det problem, du er røget ind i, nemlig at de ikke
> uden videre kan placeres "pænt" på siden. Width på inline-elementer
> dur ikke.

Nej, men det virker fint, bare labelen også får en float egenskab.

> Så vidt jeg kan se, har du i hvert fald flg. muligheder:
> 1. Du kan bruge en tabel - se fx:

Jep og dermed bruge en masse overflødig markup

> 2. Du kan pakke hver af dem (input og label) ind i hver sin <p> eller
> <div> og så floate dem.

Så hellere en tabel, hvis man skal til at lave sådan noget rod

> 3. Du kan give float og input CSS-egenskaben
> display:block;
> og så floate dem.

Display: block er ikke nødvendig, kan dog ikke helt gennemskue hvorfor.
Se dette eksempel fra html.dk
http://www.html.dk/scripts/css/00005/eksempel.asp


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Jørn Andersen (01-11-2006)
Kommentar
Fra : Jørn Andersen


Dato : 01-11-06 15:05

On Wed, 1 Nov 2006 10:24:11 +0100, "Carsten Sørensen"
<askmeforanaddress> wrote:

>Display: block er ikke nødvendig, kan dog ikke helt gennemskue hvorfor.
>Se dette eksempel fra html.dk
>http://www.html.dk/scripts/css/00005/eksempel.asp

Som dog vises forskelligt i IE6 kontra FF1.5 og Opera 8.5.
I IE floater de to "hovedbokse", mens de i de to andre står under
hinanden.
Har ikke lige tid til at finde ud af hvorfor.


Mvh. Jørn

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

Ukendt (01-11-2006)
Kommentar
Fra : Ukendt


Dato : 01-11-06 17:54


"Jørn Andersen" <jorn@jorna.dk> skrev i en meddelelse
news:49ahk21kbsq6mbr4qb5fdhct59smdve8lm@4ax.com...
> On Wed, 1 Nov 2006 10:24:11 +0100, "Carsten Sørensen"
> <askmeforanaddress> wrote:
>
>>Display: block er ikke nødvendig, kan dog ikke helt gennemskue hvorfor.
>>Se dette eksempel fra html.dk
>>http://www.html.dk/scripts/css/00005/eksempel.asp
>
> Som dog vises forskelligt i IE6 kontra FF1.5 og Opera 8.5.
> I IE floater de to "hovedbokse", mens de i de to andre står under
> hinanden.
> Har ikke lige tid til at finde ud af hvorfor.

Det afhænger af browservinduets størrelse, men så vidt jeg kan se
fejlfortolker IE her

Sætter man display: block på fieldset, ja så står de to fieldsets nedenunder
hinanden unanset hvad i alle browsere
Sætter man display: inline på fieldset, ja så står de to fieldsets ved siden
af hinanden i alle browsere når der er plads nok.

Altså det virker som IE opfatter fieldsettet som et inline element som
standard, mens firefox mener det er et block element


--
Med venlig hilsen - Carsten Sørensen

Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk



Morten Snedker (02-11-2006)
Kommentar
Fra : Morten Snedker


Dato : 02-11-06 12:14

On Wed, 1 Nov 2006 17:54:23 +0100, "Carsten Sørensen"
<askmeforanaddress> wrote:

>Altså det virker som IE opfatter fieldsettet som et inline element som
>standard, mens firefox mener det er et block element

Nu er jeg ikke så stiv ud i dét der, som du, men jeg synes jeg har set
mange eksempler på, at ting der ser korrekte ud i IE6/7, ser forkert
ud i FF og Opera.

Til gengæld ser det ens "forkert ud" i FF og Opera, og hælder derfor
som tommefingerregel til at det er FF og Opera, der tolker korrekt -
og at jeg derfor skal have korrigeret noget.

Bortset fra det, så er din betragtning jo pudsig, når Microsoft selv i
Visual Studio om Fieldset angiver: "This element is a block element".

Men ét er jo hvad der prædikes...

mvh
--
Morten Snedker
http://www.planprojekt.dk | http://www.dbconsult.dk
Privat: http://www.vinthervej2.dk

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

Månedens bedste
Årets bedste
Sidste års bedste