/ 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
Definer "DIV"
Fra : Lars Bjarne Christen~


Dato : 22-01-11 14:14

Da jeg har gode erfaringer med dette forum, drister jeg mig til
en nyt indlæg. Jeg kan dog godt se på de aktuelle indlæg, at jeg
stadig befinder mig i bunden af "jyllands serien".

Jeg er blevet bidt af CSS og vil gerne vide om man kan definer en
"DIV" således at den ikke fremstår som en firkantet kasse, men
f.eks. med afrundede hjørner.
Jeg er klar over at det måske er et dumt spørgsmål, men jeg
drister mig alligevel!

På forhånd tak!

Mvh. Lars

--
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

 
 
jopa (22-01-2011)
Kommentar
Fra : jopa


Dato : 22-01-11 14:37

Lars Bjarne Christensen forklarede:
>vil gerne vide om
> man kan definer en "DIV" således at den ikke
> fremstår som en firkantet kasse, men f.eks. med
> afrundede hjørner.

http://jp-web.dk/rund.htm

kopier kildekode

--
Mvh John
www.wordpresstema.dk



Kurt Hansen (22-01-2011)
Kommentar
Fra : Kurt Hansen


Dato : 22-01-11 15:16

On Sat, 22 Jan 2011 14:36:52 +0100, jopa <admin@jp-web.invalid> wrote:

>Lars Bjarne Christensen forklarede:
>>vil gerne vide om
>> man kan definer en "DIV" således at den ikke
>> fremstår som en firkantet kasse, men f.eks. med
>> afrundede hjørner.
>
>http://jp-web.dk/rund.htm
>
>kopier kildekode

Ikke så meget værd, med mindre eksemplet er præcist som man gerne vil
have det. At forstå teknikken gør det nemmere at tilrette til eget
brug.

Mere pædagogisk: http://www.webdesign101.dk/css/roundcorners/
--
Venlig hilsen
Kurt Hansen
-
Man bliver forfremmet til man har nået en stilling hvor man er maksimalt uduelig. Der bliver man så siddende.

jopa (22-01-2011)
Kommentar
Fra : jopa


Dato : 22-01-11 15:51

Følgende er skrevet af Kurt Hansen:

>
> Ikke så meget værd, med mindre eksemplet er
> præcist som man gerne vil have det. At forstå
> teknikken gør det nemmere at tilrette til eget
> brug.

Jeg har nu selv haft meget glæde af at snuppe en
hel side og lege med koden.

Hvad sker der hvis baggrundsfarven ændres, og der
nu ikke mere er runde hjørner osv, så syntes jeg
personligt at det er fint at have noget at rode
med, men klart Jørgen side er som sædvanlig
perfekt som tut

--
Mvh John
www.wordpresstema.dk



Karl Erik Christense~ (22-01-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 22-01-11 15:10

On 22-01-2011 14:14, Lars Bjarne Christensen wrote:
> Da jeg har gode erfaringer med dette forum, drister jeg mig til
> en nyt indlæg. Jeg kan dog godt se på de aktuelle indlæg, at jeg
> stadig befinder mig i bunden af "jyllands serien".
>
> Jeg er blevet bidt af CSS og vil gerne vide om man kan definer en
> "DIV" således at den ikke fremstår som en firkantet kasse, men
> f.eks. med afrundede hjørner.
> Jeg er klar over at det måske er et dumt spørgsmål, men jeg
> drister mig alligevel!
>
> På forhånd tak!
>
> Mvh. Lars
>

Hej Lars.

Glimrende - der findes ingen dumme spørgsmål, kun dumme svar

En div med runde hjørner er meget lærerigt beskrevet her:
http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/

En anden metode, som kræver at browseren kan vise runde hjørner (det kan
de fleste, bare ikke Internet Explorer før version 9), er at lave en
class i css:

..rundehjorner {
   width: XXXpx;
   font-size: XXpx;
   color: #XXX;
   padding: XXpx;
   border: 1px solid #000;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomleft: 10px;
   -moz-border-radius-bottomright: 10px;
}
(Udskift XX med det antal pixel og farver du ønsker. Eksperimenter med
radius, det lærer du også en hel del ved.)

Der er 2 typer af browsere, derfor er det nødvendigt at definere de
runde hjørner på 2 måder.

De runde hjørner fås ved, i din html-fil at definere:

<div class="rundehjorner">
   <h1>Runde hjørner</h1>
   <p>Dit indhold ..................... </p>
</div>

God fornøjelse.

Karl Erik.

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


Lars Bjarne Christen~ (22-01-2011)
Kommentar
Fra : Lars Bjarne Christen~


Dato : 22-01-11 15:35

Karl Erik Christensen wrote in dk.edb.internet.webdesign.html:
> On 22-01-2011 14:14, Lars Bjarne Christensen wrote:
> > Da jeg har gode erfaringer med dette forum, drister jeg mig til
> > en nyt indlæg. Jeg kan dog godt se på de aktuelle indlæg, at jeg
> > stadig befinder mig i bunden af "jyllands serien".
> >
> > Jeg er blevet bidt af CSS og vil gerne vide om man kan definer en
> > "DIV" således at den ikke fremstår som en firkantet kasse, men
> > f.eks. med afrundede hjørner.
> > Jeg er klar over at det måske er et dumt spørgsmål, men jeg
> > drister mig alligevel!
> >
> > På forhånd tak!
> >
> > Mvh. Lars
> >
>
> Hej Lars.
>
> Glimrende - der findes ingen dumme spørgsmål, kun dumme svar
>
> En div med runde hjørner er meget lærerigt beskrevet her:
> http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/
>
> En anden metode, som kræver at browseren kan vise runde hjørner (det kan
> de fleste, bare ikke Internet Explorer før version 9), er at lave en
> class i css:
>
> ..rundehjorner {
>    width: XXXpx;
>    font-size: XXpx;
>    color: #XXX;
>    padding: XXpx;
>    border: 1px solid #000;
>    border-top-left-radius: 10px;
>    border-top-right-radius: 10px;
>    border-bottom-left-radius: 10px;
>    border-bottom-right-radius: 10px;
>    -moz-border-radius-topleft: 10px;
>    -moz-border-radius-topright: 10px;
>    -moz-border-radius-bottomleft: 10px;
>    -moz-border-radius-bottomright: 10px;
> }
> (Udskift XX med det antal pixel og farver du ønsker. Eksperimenter med
> radius, det lærer du også en hel del ved.)
>
> Der er 2 typer af browsere, derfor er det nødvendigt at definere de
> runde hjørner på 2 måder.
>
> De runde hjørner fås ved, i din html-fil at definere:
>
> <div class="rundehjorner">
>    <h1>Runde hjørner</h1>
>    <p>Dit indhold ..................... </p>
> </div>
>
> God fornøjelse.
>
> Karl Erik.
Hej Karl Erik!

Det gik bedre end jeg turde håbe. Jeg er i den grad blevet grebet af CSS, at jeg ligefrem
drømmer om det om natten. Tak for dit svar som ser meget interessant ud og er nu gemt i min
videntank. Jeg er en årgang 1952 og har brug for lidt tid til at fordøje nye ting af denne
kaliber. Sagen er at jeg har lavet et forslag til en ny side på www.lbc-webtest.dk og gerne
ville lave den nederste bundlinie med runde kanter. Jeg har set det på andre sider og ville
gerne selv lære fidusen. Det svære for mig er hvordan jeg implementer koden i den lavede
"DIV" bund. Jeg har lavet en template og vil gerne implementer den, således at alle nye sider
ser ens ud med runde kanter på bunden.

Endnu en gang tak for din interesse og hjælp!

Mvh. Lars
>
> --
> http://dmwebdesign.dk - DM i Webdesign
> http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
> http://webdesign.ranunkelvej.com - Artikler om webdesign
>


--
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

Karl Erik Christense~ (22-01-2011)
Kommentar
Fra : Karl Erik Christense~


Dato : 22-01-11 16:18

On 22-01-2011 15:35, Lars Bjarne Christensen wrote:

> Hej Karl Erik!
>
> Det gik bedre end jeg turde håbe. Jeg er i den grad blevet grebet af CSS, at jeg ligefrem
> drømmer om det om natten. Tak for dit svar som ser meget interessant ud og er nu gemt i min
> videntank. Jeg er en årgang 1952 og har brug for lidt tid til at fordøje nye ting af denne
> kaliber. Sagen er at jeg har lavet et forslag til en ny side på www.lbc-webtest.dk og gerne
> ville lave den nederste bundlinie med runde kanter. Jeg har set det på andre sider og ville
> gerne selv lære fidusen. Det svære for mig er hvordan jeg implementer koden i den lavede
> "DIV" bund. Jeg har lavet en template og vil gerne implementer den, således at alle nye sider
> ser ens ud med runde kanter på bunden.
>
> Endnu en gang tak for din interesse og hjælp!
>
> Mvh. Lars

Årgang 1952 burde stadig have andre "hede" drømme

<div id="bundtekst" class="rundehjorner">
   <p id="kontakttekst" class="kontakttekst" style="WIDTH: 901px">
   Murer-og Kloakmester Kurt Sørensen Overmarkvej 91, 7840 Højslev.Tlf.:
97 53 57 12 Mobil: 29 44 78 44</p>
</div>

Din side validerer - det sgu fint af "bunden af Jyllandsserien"

PS. Brug ikke ID'er til <p>-formatering, men class.
Class kan genbruges på samme side, det kan ID ikke.

Karl Erik.

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


Lars Bjarne Christen~ (22-01-2011)
Kommentar
Fra : Lars Bjarne Christen~


Dato : 22-01-11 17:15

Karl Erik Christensen wrote in dk.edb.internet.webdesign.html:
> On 22-01-2011 15:35, Lars Bjarne Christensen wrote:
>
> > Hej Karl Erik!
> >
> > Det gik bedre end jeg turde håbe. Jeg er i den grad blevet grebet af CSS, at jeg ligefrem
> > drømmer om det om natten. Tak for dit svar som ser meget interessant ud og er nu gemt i min
> > videntank. Jeg er en årgang 1952 og har brug for lidt tid til at fordøje nye ting af denne
> > kaliber. Sagen er at jeg har lavet et forslag til en ny side på www.lbc-webtest.dk og gerne
> > ville lave den nederste bundlinie med runde kanter. Jeg har set det på andre sider og ville
> > gerne selv lære fidusen. Det svære for mig er hvordan jeg implementer koden i den lavede
> > "DIV" bund. Jeg har lavet en template og vil gerne implementer den, således at alle nye sider
> > ser ens ud med runde kanter på bunden.
> >
> > Endnu en gang tak for din interesse og hjælp!
> >
> > Mvh. Lars
>
> Årgang 1952 burde stadig have andre "hede" drømme
>
> <div id="bundtekst" class="rundehjorner">
>    <p id="kontakttekst" class="kontakttekst" style="WIDTH: 901px">
>    Murer-og Kloakmester Kurt Sørensen Overmarkvej 91, 7840 Højslev.Tlf.:
> 97 53 57 12 Mobil: 29 44 78 44</p>
> </div>
>
> Din side validerer - det sgu fint af "bunden af Jyllandsserien"
>
> PS. Brug ikke ID'er til <p>-formatering, men class.
> Class kan genbruges på samme side, det kan ID ikke.
>
> Karl Erik. <
Hej igen!

Tak for råd og dåd! Jeg har brugt din råd, men jeg synes de runde kanter udebliver og jeg har
forsøgt i forskellige browsere. Jeg suger alt til mig du anbefaler og når jeg prewiever ser jeg
ingen runde kanter??? Nå men konen har meldt social samværd fra nu og resten af aftenen, så tak
for nu, jeg vender tilbage, - kan næsten ikke vente! NB! "de hede drømmer er der stadig, men med
større mellemrum end tidligere!

Mvh. Lars >
> --
> http://dmwebdesign.dk - DM i Webdesign
> http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
> http://webdesign.ranunkelvej.com - Artikler om webdesign
>


--
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

scootergrisen (22-01-2011)
Kommentar
Fra : scootergrisen


Dato : 22-01-11 15:15

> Jeg er blevet bidt af CSS og vil gerne vide om man kan definer en
> "DIV" således at den ikke fremstår som en firkantet kasse, men
> f.eks. med afrundede hjørner.
> Jeg er klar over at det måske er et dumt spørgsmål, men jeg
> drister mig alligevel!

En <div>indhold</div> laver ikke nogen kant.

Der kommer først en kant når du tilføjer en kant.
For eksempel : <div style="border:10px solid #000;">indhold</div>

Der findes en CSS kode kaldet border-radius som kan lave runde kanter:
<div style="border:10px solid #000; border-radius: 10px;">indhold</div>

Problemet er bare at de forskellige browsere og specielt ældre versioner
ikke viser de afrundede kanten men så viser de bare de almindelige
skarpe kanter hvis de ikke understøtter det.

Da border-radius er rimelig ny i CSS så kan man bruge nogle specielle
koder som kun gælder i bestemte browsere.

-moz-border-radius > firefox
-webkit-border-radius > safari og chrome

Man kan skrive flere koder for at få det ens i flere browsere.

div{

border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;

}

Jeg har lavet en side så du kan teste det :
http://scootergrisen.dk/test/test0045.html

Men hvis du ikke kan vente til at det virker i alle browsere så brug
jopas link.

Jeg bruger ikke selv border-radius da jeg netop gerne vil have min
hjemmeside ser ens ud i alle browsere.

Lars Bjarne Christen~ (22-01-2011)
Kommentar
Fra : Lars Bjarne Christen~


Dato : 22-01-11 15:46

scootergrisen wrote in dk.edb.internet.webdesign.html:
> > Jeg er blevet bidt af CSS og vil gerne vide om man kan definer en
> > "DIV" således at den ikke fremstår som en firkantet kasse, men
> > f.eks. med afrundede hjørner.
> > Jeg er klar over at det måske er et dumt spørgsmål, men jeg
> > drister mig alligevel!
>
> En <div>indhold</div> laver ikke nogen kant.
>
> Der kommer først en kant når du tilføjer en kant.
> For eksempel : <div style="border:10px solid #000;">indhold</div>
>
> Der findes en CSS kode kaldet border-radius som kan lave runde kanter:
> <div style="border:10px solid #000; border-radius: 10px;">indhold</div>
>
> Problemet er bare at de forskellige browsere og specielt ældre versioner
> ikke viser de afrundede kanten men så viser de bare de almindelige
> skarpe kanter hvis de ikke understøtter det.
>
> Da border-radius er rimelig ny i CSS så kan man bruge nogle specielle
> koder som kun gælder i bestemte browsere.
>
> -moz-border-radius > firefox
> -webkit-border-radius > safari og chrome
>
> Man kan skrive flere koder for at få det ens i flere browsere.
>
> div{
>
> border-radius:10px;
> -moz-border-radius:10px;
> -o-border-radius:10px;
> -webkit-border-radius:10px;
>
> }
>
> Jeg har lavet en side så du kan teste det :
> http://scootergrisen.dk/test/test0045.html
>
> Men hvis du ikke kan vente til at det virker i alle browsere så brug
> jopas link.
>
> Jeg bruger ikke selv border-radius da jeg netop gerne vil have min
> hjemmeside ser ens ud i alle browsere.
Hej (jeg har lidt svær ved at skrive "scootergrisen" men der må jo være en
flink og behjælpelig person bag navnet. Jeg er en årgang 1952, så jeg har
brug for at læse og prøve flere gange før den sidder i "skabet". Men du er
super god til at forklare og tydeliggøre hvad du mener, - tak for hjælpen!
Jeg bruger Expresion Web 4 og starte i sin tid med Frontpage, videre med
Expresion Web, Expression Web 2, 3 og nu 4eren. Jeg har set i
redigeringsmulighederne for "border" og har ingen mulighed der for at lave
runde hjørne. Så hvordan implementer jeg nu koden som du foreslår og som for
mig ser rigtig og logisk ud?

Tak for din interesse for mit problem og tak for hjælpen!

Mvh. Lars


--
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

scootergrisen (22-01-2011)
Kommentar
Fra : scootergrisen


Dato : 22-01-11 16:56

Du skal bare redigere direkte i koden i stedet for at bruge et program
til at lave koden for dig.

Du kan bruge et hvert tekste redigeringsprogram til det.
Men mon ikke du også kan gøre det i de programmer du bruger hvis du
kigger efter "Rediger kilde" eller "Edit source" eller noget i den stil.

Jeg bruger selv Notepad++ som er et tekste redigerings program også
skriver jeg selv koden.

Men grunden til at border-radius ikke er med i dine programmerne er nok
fordi koden er så ny og der ikke virker i alle browsere.

Søg
Reklame
Statistik
Spørgsmål : 177428
Tips : 31962
Nyheder : 719565
Indlæg : 6407943
Brugere : 218877

Månedens bedste
Årets bedste
Sidste års bedste