|
| Mellemrum mellem linier Fra : Morten Snedker |
Dato : 30-10-06 16:37 |
| | |
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 |
| | |
tidemann (31-10-2006)
| Kommentar Fra : tidemann |
Dato : 31-10-06 00:32 |
| | |
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 |
| | |
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
| |
|
|