/ 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
"negativ" border med CSS
Fra : Don G.


Dato : 30-04-02 14:44

Hejsa NG,

Jeg har et problem med at definere en border som skal lægge sig
over et IMG-tag.
Normalt lægger en border sig uden på et element, men jeg vil
gerne have den til at ligge sig 1 pixel inde i elementet, således
at jeg kan styre "kant-farven" i forhold til den som oprindeligt
er defineret i selve billedet. -og nej - man kan desværre ikke
skrive en negativ værdi i style-tagget...

Hjælp er meget kærkommen!


vh. Don G.

http://don-g.dk


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Allan Vebel (30-04-2002)
Kommentar
Fra : Allan Vebel


Dato : 30-04-02 23:08

Don G. <nerd@NOSPAMBAMALAMdon-g.dk> skrev:

> Normalt lægger en border sig uden på et element, men jeg vil
> gerne have den til at ligge sig 1 pixel inde i elementet, således
> at jeg kan styre "kant-farven" i forhold til den som oprindeligt
> er defineret i selve billedet.

Efter at have læst debatten er mit bud at du skal ændre kantfarven i dit
grafikprogram. På den måde er du også sikker på at det vil fungere i
alle browsere - det er jo ikke alle der kan finde ud af negative værdier
i border - og NN4 vil da flippe helt ud over det - den har svært nok ved
border i forvejen. Ændrer du billedet vil det også fungere her.

--
Allan


Don G. (01-05-2002)
Kommentar
Fra : Don G.


Dato : 01-05-02 00:02

Allan Vebel wrote in dk.edb.internet.webdesign.html:
> > Normalt lægger en border sig uden på et element, men jeg vil
> > gerne have den til at ligge sig 1 pixel inde i elementet, således
> > at jeg kan styre "kant-farven" i forhold til den som oprindeligt
> > er defineret i selve billedet.
> Efter at have læst debatten er mit bud at du skal ændre kantfarven i dit
> grafikprogram. På den måde er du også sikker på at det vil fungere i
> alle browsere - det er jo ikke alle der kan finde ud af negative værdier
> i border - og NN4 vil da flippe helt ud over det - den har svært nok ved
> border i forvejen. Ændrer du billedet vil det også fungere her.

Tak for indlægget.
Jeg har overvejet den løsning, men tricket er netop at lave det som en
mouseover effekt - uden at browseren skal loade ekstra billeder = god
performance og det kræver kun det ½ at vedligeholde.
Mht. NN4 o.lign., så har jeg droppet den. Jeg ønsker ikke at udvikle
dobbelt eller være hæmmet for at under 2% af de besøgende kan se siden uden
problemer. -De må venligst opgradere.

NOTE: jeg behøver ingen tips omkring mouseover på billeder - det har jeg
helt styr på, og det er ikke aktuelt


vh. Don G.

http://don-g.dk


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Allan Vebel (01-05-2002)
Kommentar
Fra : Allan Vebel


Dato : 01-05-02 22:37

Don G. <nerd@NOSPAMBAMALAMdon-g.dk> skrev:

> Jeg har overvejet den løsning, men tricket er netop at lave det som en
> mouseover effekt - uden at browseren skal loade ekstra billeder

Problemet ligger jo i at du har en oprindelig border på billedet - og den vil
du forsøge at dække med en negativ værdi - sådan har jeg forstået det.

Hvis du i dit grafikprogram fjerner den oprindelige border - og kun bruger
den der er defineret med css - så er det meget nemmere at styre.

> Mht. NN4 o.lign., så har jeg droppet den.

Glem NN4 - den må sejle i sin egen sø. Slet den fra din harddisk så du ikke
er i stand til at teste i den

> NOTE: jeg behøver ingen tips omkring mouseover på billeder - det har
> jeg helt styr på, og det er ikke aktuelt

¡Muy bien!

Der er jo også:

onmouseover="this.className='ramme2'"
onmouseout="this.className='ramme1'"

du kan bruge på billeder.

--
Allan


Michael Kjeldsen (30-04-2002)
Kommentar
Fra : Michael Kjeldsen


Dato : 30-04-02 14:57

"Don G." <nerd@NOSPAMBAMALAMdon-g.dk> skrev i en meddelelse
news:aam73t$7lf$1@sunsite.dk...
> Hejsa NG,
>
> Jeg har et problem med at definere en border som skal lægge sig
> over et IMG-tag.
> Normalt lægger en border sig uden på et element, men jeg vil
> gerne have den til at ligge sig 1 pixel inde i elementet, således
> at jeg kan styre "kant-farven" i forhold til den som oprindeligt
> er defineret i selve billedet. -og nej - man kan desværre ikke
> skrive en negativ værdi i style-tagget...

Noget lignende:

..style {
position: relative;
left-border: -1px
}

(Lige hentet frem fra hjernebarken her fem minutter inden fyraften, ved ikke
om det virker

se mere på http://www30.brinkster.com/criteriu/index.asp?page=css

--
Mangler du inspiration?
http://www30.brinkster.com/criteriu/index.asp?page=cool
Savner du spræl på skrivebordet?
http://www30.brinkster.com/criteriu/index.asp?page=wallpaper



Don G. (30-04-2002)
Kommentar
Fra : Don G.


Dato : 30-04-02 15:39

> Michael Kjeldsen wrote in dk.edb.internet.webdesign.html:
>
> Noget lignende:
>
> ..style {
> position: relative;
> left-border: -1px
> }
>
> (Lige hentet frem fra hjernebarken her fem minutter inden fyraften, ved ikke
> om det virker


Tak for tippet, men jeg kan ikke få det til at virke!? Se min kode herunder.


<html>
<head>
<title>Negativ border med CSS</title>
<style type="text/css">
negativeborder {
border: 1px solid;
border-color: #FFFFFF;
position: relative;
border: -1px;
}
</style>
</head>
<body>
<img src="http://goerlitz.dk/test.gif" class="negativeborder">
</body>
</html>

Prøv evt at paste den ind i en editor. Tricket er at fjerne den sorte kant i
test.gif vha CSS. Beats me...


vh. Don G.

http://don-g.dk



--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Kasper Kyndsberg (30-04-2002)
Kommentar
Fra : Kasper Kyndsberg


Dato : 30-04-02 17:48

"Don G." <nerd@don-gNOSPAMBAMALAM.dk> skrev
[SNIP]
> Tak for tippet, men jeg kan ikke få det til at virke!? Se min kode
herunder.
[SNIP]> <style type="text/css">
> negativeborder {
> border: 1px solid;
> border-color: #FFFFFF;
> position: relative;
> border: -1px;
> }
[SNIP]

Du må ikke angive border to gange - kun en. Jeg har ikke testet forslaget,
men hvis du følger forslaget skal dit stylesheet se således ud:

negativeborder {
border: -1px solid #FFFFFF;
position: relative;
}

(Har i øvrigt lige fjernet din borderfarve op i border. Saml dit css eller
skil det - det kan forvirre at gøre begge dele...)

> vh. Don G.

--
/Kasper
http://www.kyndsberg.dk



Don G. (30-04-2002)
Kommentar
Fra : Don G.


Dato : 30-04-02 22:14

Kasper Kyndsberg wrote in dk.edb.internet.webdesign.html:
> Du må ikke angive border to gange - kun en. Jeg har ikke testet forslaget,
> men hvis du følger forslaget skal dit stylesheet se således ud:
> .negativeborder {
> border: -1px solid #FFFFFF;
> position: relative;
> }


Ok, selvfølgelig kan man ikke angive border 2 gange - my bad. Jeg har fulgt
din guideline og du kan se koden herunder:

<html>
<head>
<title>Negativ border med CSS</title>
<style type="text/css">
negativeborder {
border: -1px solid #FFFFFF;
position: relative;
}
</style>
</head>
<body>
<img src="http://goerlitz.dk/test.gif" class="negativeborder">
</body>
</html>


MEN MEN MEN - det virker stadig ikke... -så meget for teori

Er der nogen der har flere alternativer der kan prøves af???


vh. Don G.

http://don-g.dk


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Kasper Kyndsberg (01-05-2002)
Kommentar
Fra : Kasper Kyndsberg


Dato : 01-05-02 16:52

"Don G." <nerd@don-gNOSPAMBAMALAM.dk> skrev
> Kasper Kyndsberg wrote in dk.edb.internet.webdesign.html:
> > Du må ikke angive border to gange - kun en. Jeg har ikke testet
forslaget,
> > men hvis du følger forslaget skal dit stylesheet se således ud:
> > .negativeborder {
> > border: -1px solid #FFFFFF;
> > position: relative;
> > }
>
> Ok, selvfølgelig kan man ikke angive border 2 gange - my bad. Jeg har
fulgt
> din guideline og du kan se koden herunder:
> [SNIP]
> MEN MEN MEN - det virker stadig ikke... -så meget for teori
>
> Er der nogen der har flere alternativer der kan prøves af???

Jeg holder på, dit ønske selvfølgelig kan lade sig gøre. Jeg har ikke
gennemtestet følgende, men håber du kan bruge det til inspiration...
http://www.kyndsberg.dk/eksempler/boks_i_boks.html

> vh. Don G.


--
/Kasper
http://www.kyndsberg.dk



Don G. (01-05-2002)
Kommentar
Fra : Don G.


Dato : 01-05-02 19:25

Kasper Kyndsberg wrote in dk.edb.internet.webdesign.html:
> > MEN MEN MEN - det virker stadig ikke... -så meget for teori
> > Er der nogen der har flere alternativer der kan prøves af???
> Jeg holder på, dit ønske selvfølgelig kan lade sig gøre. Jeg har ikke
> gennemtestet følgende, men håber du kan bruge det til inspiration...
> http://www.kyndsberg.dk/eksempler/boks_i_boks.html


ok - det ser spændende ud! Men hvorledes kan man gøre det på en række
billeder på samme side uden at:
1. sætte billedet som baggrund
2. uden at skulle definere positionen for hvert enkelt billede
???
-Kan du gøre det samme på min kode (se tidligere indlæg), uden at angive
koordinater, samt ved at lægge et class-name på IMG-tagget?


Ja, jeg ved godt at jeg er umulig og at der meget vel ikke findes nogen
nem løsning på det konkrete problem, men jeg synes bare ikke at have
fundet den rigtige endnu.


vh. Don G.

http://don-g.dk




--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Kasper Kyndsberg (01-05-2002)
Kommentar
Fra : Kasper Kyndsberg


Dato : 01-05-02 20:00

"Don G." <nerd@NOSPAMBAMALAMdon-g.dk> skrev
> Kasper Kyndsberg wrote in dk.edb.internet.webdesign.html:
> > > MEN MEN MEN - det virker stadig ikke... -så meget for teori
> > > Er der nogen der har flere alternativer der kan prøves af???
> > Jeg holder på, dit ønske selvfølgelig kan lade sig gøre. Jeg har ikke
> > gennemtestet følgende, men håber du kan bruge det til inspiration...
> > http://www.kyndsberg.dk/eksempler/boks_i_boks.html
>
>
> ok - det ser spændende ud! Men hvorledes kan man gøre det på en række
> billeder på samme side uden at:
> 1. sætte billedet som baggrund
> 2. uden at skulle definere positionen for hvert enkelt billede
> ???

Problem to der vi kommet forbi - Det er ikke noget problem. Hvis du kigger i
koden igen, så bruges der relativ positioneren - altså kan du nøjes med at
positionere et enkelt div element i din css og sætte den ind i en række blok
elementer uden at skulle positionere dem heller. Det er dit krav 1. jeg
simpelthen ikke kan opfylde med mine beskedne evner. Hvordan kan man lægge
et gennesigtigt lag oven på et billede uden at positionere det ved jeg ikke.

Om man kan opnå det ønskede via JavaScript eller vbs ved jeg ikke. Der kan
du prøve at spørge i klientsidegruppen.

Alternatuvt kunne du bruge den metode jeg har anvist dig, og generere siden
via noget script - serverside eller klientside, hvis dit problem er, det er
mange billeder det drejer sig om.

> vh. Don G.

--
/Kasper
http://www.kyndsberg.dk



Don G. (02-05-2002)
Kommentar
Fra : Don G.


Dato : 02-05-02 17:48

Jeg takker ydmygt for de mange gode forslag til at løse problemet,
men desværre har jeg set mig slået i praksis hver gang. Kernen i
selve problematikken ligger jo nok der som Hr. Kyndsberg påpeger -
nemlig at man vha CSS ikke kan løse problemet, uden at man definerer
et lag ovenpå billedet - hvilket ikke er praktisk muligt. Hr.
Vebel's forslag er ligeledes fint, men fungerer desværre heller ikke
denne case.

Tak for jeres gode input!


vh. Don G.

http://don-g.dk


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Søg
Reklame
Statistik
Spørgsmål : 177508
Tips : 31968
Nyheder : 719565
Indlæg : 6408578
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste