|
|
 | Mellemrum mellem billeder
Fra : Johnny Kristensen |
Dato : 10-09-08 12:42 |
|
Jeg prøver at lave et ny design til vores private hjemmeside.
ny.jamweb.dk
Som det kan ses, så er der et mellemrum mellem billederne samt et
mellemrum mellem billederne og den øvre og nedre grænse af den
"blå" div (med runde kanter) de ligger inde i. Jeg har prøvet så
godt jeg kan at definere margin og padding til "0px", men der er
stadig mellemrum, hvor jeg ikke ønsker det.
Hvordan kommer jeg mellemrumene til livs ?
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
 Philip Nunnegaard (10-09-2008)
| Kommentar
Fra : Philip Nunnegaard |
Dato : 10-09-08 12:59 |
|
"Johnny Kristensen" <johnny@jamweb.dk> skrev
> Som det kan ses, så er der et mellemrum mellem billederne samt et
> mellemrum mellem billederne
Mellemrummet mellem billederne skulle være lige til.
Du har jo mellemrum foran img-koderne.
Jeg har selv ladet mig irritere over den slags "sideeffekter", da det giver
en grim kode at skrive alle img-koder på én linje. 
Måske kan det klares smukkere ved at sætte en negativ margin på billederne?
> og den øvre og nedre grænse af den
> "blå" div (med runde kanter) de ligger inde i.
Den er lidt sværere.
Jeg gætter på at det er de runde hjørner der gør det. Prøv at lægge mærke
til billedernes øvre- og nedre kant og sammenlign med hvor hjørnerne på
banneret begynder at runde.
Jeg har prøvet så
> godt jeg kan at definere margin og padding til "0px", men der er
> stadig mellemrum, hvor jeg ikke ønsker det.
>
> Hvordan kommer jeg mellemrumene til livs ?
>
> --
> Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
> - Pædagogiske tutorials på dansk
> - Kom godt i gang med koderne
> KLIK HER! => http://www.html.dk/tutorials
| |
Birger Sørensen (10-09-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 10-09-08 13:12 |
|
Philip Nunnegaard kom med følgende:
> "Johnny Kristensen" <johnny@jamweb.dk> skrev
>
>> Som det kan ses, så er der et mellemrum mellem billederne samt et
>> mellemrum mellem billederne
>
> Mellemrummet mellem billederne skulle være lige til.
> Du har jo mellemrum foran img-koderne.
>
> Jeg har selv ladet mig irritere over den slags "sideeffekter", da det giver
> en grim kode at skrive alle img-koder på én linje.
>
> Måske kan det klares smukkere ved at sætte en negativ margin på billederne?
>
>> og den øvre og nedre grænse af den
>> "blå" div (med runde kanter) de ligger inde i.
>
> Den er lidt sværere.
> Jeg gætter på at det er de runde hjørner der gør det. Prøv at lægge mærke til
> billedernes øvre- og nedre kant og sammenlign med hvor hjørnerne på banneret
> begynder at runde.
>
> Jeg har prøvet så
>> godt jeg kan at definere margin og padding til "0px", men der er
>> stadig mellemrum, hvor jeg ikke ønsker det.
>>
>> Hvordan kommer jeg mellemrumene til livs ?
>>
>> -- Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
>> - Pædagogiske tutorials på dansk
>> - Kom godt i gang med koderne
>> KLIK HER! => http://www.html.dk/tutorials
Jeg tror også det har med de rundede hjørner at gøre.
Undrer mig en hel del over anvendelse at XHTML1.1 sammen med <b>
elementet, som er deprecated - eller i hvert fald ikke anbefales.
Og under alle omstændigheder, er det et besynderligt element at vælge
som container til billeder. <b> er et inline element, der brugtes til
bold fremhævning af font.
Svjv, kan hverken padding eller margin anvendes på inline-elementer, og
det er måske også derfra dit problem stammer.
Prøv med et element der er beregnet til at indeholde andre elemnter -
en div. f.eks.
Birger
| |
 Birger Sørensen (10-09-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 10-09-08 13:16 |
|
Birger Sørensen tastede følgende:
> Philip Nunnegaard kom med følgende:
>> "Johnny Kristensen" <johnny@jamweb.dk> skrev
>>
>>> Som det kan ses, så er der et mellemrum mellem billederne samt et
>>> mellemrum mellem billederne
>>
>> Mellemrummet mellem billederne skulle være lige til.
>> Du har jo mellemrum foran img-koderne.
>>
>> Jeg har selv ladet mig irritere over den slags "sideeffekter", da det giver
>> en grim kode at skrive alle img-koder på én linje.
>>
>> Måske kan det klares smukkere ved at sætte en negativ margin på billederne?
>>
>>> og den øvre og nedre grænse af den
>>> "blå" div (med runde kanter) de ligger inde i.
>>
>> Den er lidt sværere.
>> Jeg gætter på at det er de runde hjørner der gør det. Prøv at lægge mærke
>> til billedernes øvre- og nedre kant og sammenlign med hvor hjørnerne på
>> banneret begynder at runde.
>>
>> Jeg har prøvet så
>>> godt jeg kan at definere margin og padding til "0px", men der er
>>> stadig mellemrum, hvor jeg ikke ønsker det.
>>>
>>> Hvordan kommer jeg mellemrumene til livs ?
>>>
>>> -- Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
>>> - Pædagogiske tutorials på dansk
>>> - Kom godt i gang med koderne
>>> KLIK HER! => http://www.html.dk/tutorials
>
> Jeg tror også det har med de rundede hjørner at gøre.
>
> Undrer mig en hel del over anvendelse at XHTML1.1 sammen med <b> elementet,
> som er deprecated - eller i hvert fald ikke anbefales.
> Og under alle omstændigheder, er det et besynderligt element at vælge som
> container til billeder. <b> er et inline element, der brugtes til bold
> fremhævning af font.
> Svjv, kan hverken padding eller margin anvendes på inline-elementer, og det
> er måske også derfra dit problem stammer.
> Prøv med et element der er beregnet til at indeholde andre elemnter - en div.
> f.eks.
>
> Birger
:D
Gemte helt i forvirringen, at det jeg ville sige egentlig var, at du
skal sætte padding på container elementet til 0 også. Ellers vil det
give afsand over og under billederne, og også i siden.
Men vælg noget andet end <b> som container først...
Birger
| |
Johnny Kristensen (10-09-2008)
| Kommentar
Fra : Johnny Kristensen |
Dato : 10-09-08 14:08 |
|
Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> :D
> Gemte helt i forvirringen, at det jeg ville sige egentlig var, at du
> skal sætte padding på container elementet til 0 også. Ellers vil det
> give afsand over og under billederne, og også i siden.
> Men vælg noget andet end <b> som container først...
Kender godt det der med at blive revet lidt med...he he 
Det er jo netop det jeg har gjort. Containeren er den blå div, hvor jeg har lavet
runde hjørner på. både margin og pading er sat til 0 på den.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Johnny Kristensen (10-09-2008)
| Kommentar
Fra : Johnny Kristensen |
Dato : 10-09-08 14:05 |
|
Birger Sørensen wrote in dk.edb.internet.webdesign.html:
> Jeg tror også det har med de rundede hjørner at gøre.
Godt vi giver de runde hjørner skylden, indtil andet er bevist !!!
> Undrer mig en hel del over anvendelse at XHTML1.1 sammen med <b>
> elementet, som er deprecated - eller i hvert fald ikke anbefales.
> Og under alle omstændigheder, er det et besynderligt element at vælge
> som container til billeder. <b> er et inline element, der brugtes til
> bold fremhævning af font.
> Svjv, kan hverken padding eller margin anvendes på inline-elementer, og
> det er måske også derfra dit problem stammer.
> Prøv med et element der er beregnet til at indeholde andre elemnter -
> en div. f.eks.
Birger er det den samme kode vi sidder og kigger på? Jeg kan ikke se at jeg har
brugt <b> nogle steder? Desuden validerer siden helt fint.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Erik Ginnerskov (10-09-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 10-09-08 17:21 |
|
Birger Sørensen <sdc@bbsorensen.com> skrev:
>Undrer mig en hel del over anvendelse
>at XHTML1.1
Ja, hvis der ikke bruges østasiatiske skriftsprog, giver det ingen
mening at
definere XHTML 1.1
> sammen med <b>
>elementet, som er deprecated - eller i
>hvert fald ikke anbefales.
I stedet anbefales at bruge <strong></strong> til at lave fed tekst -
bl.a.
fordi skærmlæsere så forstå at der skal lægges tryk på ordet.
>Svjv, kan hverken padding eller margin
>anvendes på inline-elementer,
Jo, det er der ikke noget i vejen for - det er endda validt.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk - http://vestfynswebdesign.dk
| |
Stig Johansen (10-09-2008)
| Kommentar
Fra : Stig Johansen |
Dato : 10-09-08 18:24 |
|
slet NRB1T wrote:
> Ja, hvis der ikke bruges østasiatiske skriftsprog, giver det ingen
> mening at
> definere XHTML 1.1
WTF ?
--
Med venlig hilsen
Stig Johansen
| |
Erik Ginnerskov (10-09-2008)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 10-09-08 18:58 |
| | |
Stig Johansen (10-09-2008)
| Kommentar
Fra : Stig Johansen |
Dato : 10-09-08 19:44 |
|
Erik Ginnerskov wrote:
> Forskellen på XHTML 1.0 og XHTML 1.1 er 1.1's understøttelse for
> østasiatiske sprog.
Interessant, her gik man og troede at unicode/utf8/utf16 m.v. dækkede de
østasiatiske 'sprog'.
Eller taler vi om noget forskelligt - 'sprog' kontra 'codepoints' ?
--
Med venlig hilsen
Stig Johansen
| |
Johnny Kristensen (10-09-2008)
| Kommentar
Fra : Johnny Kristensen |
Dato : 10-09-08 14:02 |
|
Philip Nunnegaard wrote in dk.edb.internet.webdesign.html:
> Mellemrummet mellem billederne skulle være lige til.
> Du har jo mellemrum foran img-koderne.
Ja, det har du jo ganske ret i, havde ikke overvejet at det kunne have
betydning.
> Jeg har selv ladet mig irritere over den slags "sideeffekter", da det giver
> en grim kode at skrive alle img-koder på én linje.
Jeg er straks begyndt at dele din irritation på dette område, men jeg ender nu
nok med at skulle have mellemrum mellem billederne alligevel. Så det mellemrum
vil jeg ikke bekymre mig mere om.
> Måske kan det klares smukkere ved at sætte en negativ margin på billederne?
Syntes det er ærgeligt når man skal ud i sådanne løsninger !
> Den er lidt sværere.
> Jeg gætter på at det er de runde hjørner der gør det. Prøv at lægge mærke
> til billedernes øvre- og nedre kant og sammenlign med hvor hjørnerne på
> banneret begynder at runde.
Jeg må prøve mig lidt frem. Det er muligt det er de runde hjørner. Noget jeg
har lagt mærke til siden hen er at der er større mellemrum for neden end der er
for oven ???
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Lasse Reichstein Nie~ (10-09-2008)
| Kommentar
Fra : Lasse Reichstein Nie~ |
Dato : 10-09-08 22:13 |
| | |
Stig Johansen (11-09-2008)
| Kommentar
Fra : Stig Johansen |
Dato : 11-09-08 05:37 |
|
Lasse Reichstein Nielsen wrote:
> Stig Johansen <wopr.dk@gmaill.com> writes:
>
>> Interessant, her gik man og troede at unicode/utf8/utf16 m.v. dækkede de
>> østasiatiske 'sprog'.
>> Eller taler vi om noget forskelligt - 'sprog' kontra 'codepoints' ?
>
> Skriftsprog. Det er "ruby annotations" der er understøttet - en annotering
> til den egentlige glyf som angiver hvordan den skal udtales.
Tak, så giver det mening.
Det må være besværligt at lave tekster, hvor man først skriver det man
skriver, og derefter forklarer hvad man mener man skriver.
På en eller anden måde dukker Viktor Borge op i mit hovede med hans
Fonetiske tegnsætning :)
--
Med venlig hilsen
Stig Johansen
| |
Johnny Kristensen (10-09-2008)
| Kommentar
Fra : Johnny Kristensen |
Dato : 10-09-08 15:08 |
|
Johnny Kristensen wrote in dk.edb.internet.webdesign.html:
> Som det kan ses, så er der et mellemrum mellem billederne samt et
> mellemrum mellem billederne og den øvre og nedre grænse af den
> "blå" div (med runde kanter) de ligger inde i. Jeg har prøvet så
> godt jeg kan at definere margin og padding til "0px", men der er
> stadig mellemrum, hvor jeg ikke ønsker det.
OK, jeg har experimenteret lidt videre. Prøv lige at tag et kig på
http://ny.jamweb.dk/ igen. Nu har jeg smidt billederne ind i en div
for at sikre at de har en container. Denne div har jeg givet en sort
ramme, så man tydeligt kan se den. Desuden har jeg givet hver enkelt
billede en sort ramme, så man tydeligt kan se deres afgrænsning (kun
midlertidigt, for at nå frem til en løsning).
Nu fremkommer det tydeligt at det øverste og nederste mellemrum
mellem container div'en (med den sorte ramme) og den blå div skyldes
de runde kanter. No problem det kan jeg leve med.
Min hovedpine er nu det mellemrum der er under billederne og ned til
container div'en. Den giver ingen mening for mig....HJÆLP MIG AF MED
DEN....PLEASE
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Bertel Lund Hansen (10-09-2008)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 10-09-08 16:20 |
|
Johnny Kristensen skrev:
> Min hovedpine er nu det mellemrum der er under billederne og ned til
> container div'en. Den giver ingen mening for mig....HJÆLP MIG AF MED
> DEN....PLEASE
Højden på img_cont er tilfældig. Det kan du se ved at give den en
højde på f.eks. 2px.
Hvis du floater containeren left og img right, bestemmer
billederne højden på div'en og flyder helt til højre uden
mellemrum. Me dmargin kan du så selv bestemme bredden på
mellemrummene hvis den ikke skal være 0.
div#img_cont {
float: left;
width: 100%;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px;
}
div#img_cont img{
float: right;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px;
}
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Birger Sørensen (10-09-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 10-09-08 17:53 |
|
Bertel Lund Hansen har bragt dette til os:
> Johnny Kristensen skrev:
>
>> Min hovedpine er nu det mellemrum der er under billederne og ned til
>> container div'en. Den giver ingen mening for mig....HJÆLP MIG AF MED
>> DEN....PLEASE
>
> Højden på img_cont er tilfældig. Det kan du se ved at give den en
> højde på f.eks. 2px.
>
> Hvis du floater containeren left og img right, bestemmer
> billederne højden på div'en og flyder helt til højre uden
> mellemrum. Me dmargin kan du så selv bestemme bredden på
> mellemrummene hvis den ikke skal være 0.
>
> div#img_cont {
> float: left;
> width: 100%;
> margin: 0;
> padding: 0;
> border-style: solid;
> border-width: 1px;
> }
>
> div#img_cont img{
> float: right;
> margin: 0;
> padding: 0;
> border-style: solid;
> border-width: 1px;
> }
Det er lidt det samme som mellemrummet mellem billederne.
Prøv at sætte font-size : 0px i img_cont. Det bude faktisk ordne begge
mellemrumsproblemer.
Ser man din side med Firebug i FF2.0.0.16, er alle de elementer der
bruges til opbygning <b> elementer. Ufikst.
Birger
| |
Philip Nunnegaard (10-09-2008)
| Kommentar
Fra : Philip Nunnegaard |
Dato : 10-09-08 17:57 |
|
"Birger Sørensen" <sdc@bbsorensen.com> skrev
> Ser man din side med Firebug i FF2.0.0.16, er alle de elementer der bruges
> til opbygning <b> elementer. Ufikst.
Hvor ser du de <b>'er?
| |
Jørn Andersen (10-09-2008)
| Kommentar
Fra : Jørn Andersen |
Dato : 10-09-08 18:17 |
|
On Wed, 10 Sep 2008 18:57:29 +0200, "Philip Nunnegaard"
<nunnenospam@hitsurf.dk> wrote:
>"Birger Sørensen" <sdc@bbsorensen.com> skrev
>
>> Ser man din side med Firebug i FF2.0.0.16, er alle de elementer der bruges
>> til opbygning <b> elementer. Ufikst.
>
>Hvor ser du de <b>'er?
De bliver genereret af dit JavaScript - med klasserne: .artop og .rtop
Mvh. Jørn
--
Jørn Andersen,
Brønshøj
| |
Philip Nunnegaard (10-09-2008)
| Kommentar
Fra : Philip Nunnegaard |
Dato : 10-09-08 20:57 |
|
"Jørn Andersen" <jorn@jorna.dk> skrev
>>Hvor ser du de <b>'er?
>
> De bliver genereret af dit JavaScript - med klasserne: .artop og .rtop
Nu var det ikke min side, men anyway...
Jeg havde ikke lige tjekket hvordan koden så ud med tilhørende javascript,
da jeg syntes at det javascript er lige lovlig langt til så lidt.
| |
Johnny Kristensen (10-09-2008)
| Kommentar
Fra : Johnny Kristensen |
Dato : 10-09-08 22:04 |
|
Philip Nunnegaard wrote in dk.edb.internet.webdesign.html:
> Nu var det ikke min side, men anyway...
> Jeg havde ikke lige tjekket hvordan koden så ud med tilhørende javascript,
> da jeg syntes at det javascript er lige lovlig langt til så lidt.
Det er min side. Scriptet er NIFTY, som laver runde hjørner (som I sikkert har
opdaget ), men jeg kan se på jeres kommentarer at jeg måske burde overveje
en anden løsning for at lave runde hjørner. Jeg har ikke taget stilling til
NIFTY koden, da den blev rost af så mange på nettet, så jeg tog det bare
"blindt" som en god og solid kode.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Bertel Lund Hansen (10-09-2008)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 10-09-08 22:36 |
| | |
Jørn Andersen (11-09-2008)
| Kommentar
Fra : Jørn Andersen |
Dato : 11-09-08 01:01 |
|
On Wed, 10 Sep 2008 23:35:50 +0200, Bertel Lund Hansen
<unospamo@lundhansen.dk> wrote:
>Johnny Kristensen skrev:
>
>> opdaget ), men jeg kan se på jeres kommentarer at jeg måske burde overveje
>> en anden løsning for at lave runde hjørner.
>
> http://webdesign101.dk/css/roundcorners/eksempel_1.html
<div id="container">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="b4"></b>
- men i det mindste ikke i JavaScript.
Mvh. Jørn
--
Jørn Andersen,
Brønshøj
| |
Philip Nunnegaard (11-09-2008)
| Kommentar
Fra : Philip Nunnegaard |
Dato : 11-09-08 03:12 |
|
"Jørn Andersen" <jorn@jorna.dk> skrev
> <b class="b1"></b>
> <b class="b2"></b>
> (...)
> - men i det mindste ikke i JavaScript.
Det er også den løsning jeg har taget til mig.
Man kunne måske skifte <b> ud med <span>, selv om det også er inline?
Argumentet for <b> er besparelse af båndbredde for slutbrugeren. Jeg har så
ikke afprøvet hvordan det ville virke med <p> i stedet.
| |
Bertel Lund Hansen (11-09-2008)
| Kommentar
Fra : Bertel Lund Hansen |
Dato : 11-09-08 10:39 |
|
Philip Nunnegaard skrev:
> Argumentet for <b> er besparelse af båndbredde for slutbrugeren.
Det er i dag et latterligt argument. Det var gyldigt da vi sad
med telefonmodemmer.
--
Bertel
http://bertel.lundhansen.dk/ FIDUSO: http://fiduso.dk/
| |
Birger Sørensen (10-09-2008)
| Kommentar
Fra : Birger Sørensen |
Dato : 10-09-08 18:29 |
|
Den 10-09-2008, skrev Philip Nunnegaard:
> "Birger Sørensen" <sdc@bbsorensen.com> skrev
>
>> Ser man din side med , er alle de elementer der bruges
>> til opbygning <b> elementer. Ufikst.
>
> Hvor ser du de <b>'er?
Som der står : i Firebug i FF2.0.0.16. Visning af HTML.
Feks. øverst i <div id="banner"....
Der er et <b class="artop"... som indeholder 4 andre <b elementer med
class rx1, rx2, rx3 og rx4, som sammensætter det runde hjørne.
Birger
| |
Johnny Kristensen (10-09-2008)
| Kommentar
Fra : Johnny Kristensen |
Dato : 10-09-08 22:00 |
|
Bertel Lund Hansen wrote in dk.edb.internet.webdesign.html:
> Højden på img_cont er tilfældig. Det kan du se ved at give den en
> højde på f.eks. 2px.
>
> Hvis du floater containeren left og img right, bestemmer
> billederne højden på div'en og flyder helt til højre uden
> mellemrum. Me dmargin kan du så selv bestemme bredden på
> mellemrummene hvis den ikke skal være 0.
Bertel, du er dagens helt 
Din løsning holder, tak for det.
Jeg har dog også fundet ud af at hvis jeg sætter en fast højde på
img_cont, så kan jeg også nå frem til det jeg ønsker, men jeg kan bedre
lide din løsning, da jeg syntes indholdet skal definere højden på denne
div.
Men jeg er lidt nysgerrig, hvorfor bliver der blot tildelt en tilfældig
højde på div medmindre den bliver floated og width til 100% ? Troede at
div's højde naturligt ville blive defineret af indholdet medmindre den
var fast defineret i CSS?
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
|
|