/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
CSS - overskrift med runde hjørner
Fra : scootergrisen


Dato : 14-06-10 17:12

Jeg vil have en overskrift med grafik med runde hjørner som automatisk
tilpasser sig i bredden når man ændre browserens størrelse.

Er der nogen der har et link til et godt eksempel eller kode ?

 
 
Birger Sørensen (15-06-2010)
Kommentar
Fra : Birger Sørensen


Dato : 15-06-10 08:05

scootergrisen har bragt dette til verden:
> Jeg vil have en overskrift med grafik med runde hjørner som automatisk
> tilpasser sig i bredden når man ændre browserens størrelse.
>
> Er der nogen der har et link til et godt eksempel eller kode ?

Grafik = border, baggrund, billede?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Ludvigsen (15-06-2010)
Kommentar
Fra : Kim Ludvigsen


Dato : 15-06-10 08:59

Den 15-06-2010 01:12, scootergrisen skrev:
> Jeg vil have en overskrift med grafik med runde hjørner som automatisk
> tilpasser sig i bredden når man ændre browserens størrelse.
>
> Er der nogen der har et link til et godt eksempel eller kode ?

Jeg har nogle skabeloner liggende her:
http://kimludvigsen.dk/libris/kompozer/skabeloner/index.php

--
Mvh. Kim Ludvigsen
Standardoverholdende multimedia på hjemmesiden:
http://kimludvigsen.dk/tips-internet-websnedker-multimedia.php

scootergrisen (15-06-2010)
Kommentar
Fra : scootergrisen


Dato : 15-06-10 20:12

> Grafik = border, baggrund, billede?

De runde hjørner skal være lavet af billeder.
Jeg forstiller mig 1 billed til venstre runde hjørne, 1 billed til
midten og 1 billed til højre runde hjørne.
3 billeder ialt.


> Jeg har nogle skabeloner liggende her:
> http://kimludvigsen.dk/libris/kompozer/skabeloner/index.php

Tak men det jeg søger skal være med automatisk bredde... altså når man
laver browser vinduet mindre/større så skal grafikken automatisk
tilpasse sig så det passer i bredden.

Jens Peter Karlsen (16-06-2010)
Kommentar
Fra : Jens Peter Karlsen


Dato : 16-06-10 12:14

Sæt bredden til 100% så vil det tilpasse sig.
Bemærk at grafik der scaleres i browseren som regel vil se
forfærdeligt ud.

Hvis du gav et eksempel på hvad præcis du ønsker er det muligt vi
kunne anbefale en alternativ løsning.

Regards Jens Peter Karlsen.

On Tue, 15 Jun 2010 19:11:57 -0700 (PDT), scootergrisen
<fedblindkat@yahoo.dk> wrote:

>Tak men det jeg søger skal være med automatisk bredde... altså når man
>laver browser vinduet mindre/større så skal grafikken automatisk
>tilpasse sig så det passer i bredden.

scootergrisen (30-06-2010)
Kommentar
Fra : scootergrisen


Dato : 30-06-10 19:54

Det skal være ligesom hvor der står "Overskrift eller logo" på :
http://kimludvigsen.dk/libris/kompozer/skabeloner/1-1-1-rund/index.php
Blot skal baggrundsgrafikken med de runde hjørner fylde 100% i bredden
og automatisk tilpasse sig når man ændre størrelsen på browser
vinduet.

Dennis Munding (01-07-2010)
Kommentar
Fra : Dennis Munding


Dato : 01-07-10 18:27

Hej scooter,
"scootergrisen" skrev...
> Det skal være ligesom hvor der står "Overskrift eller logo" på :
> http://kimludvigsen.dk/libris/kompozer/skabeloner/1-1-1-rund/index.php
> Blot skal baggrundsgrafikken med de runde hjørner fylde 100% i bredden
> og automatisk tilpasse sig når man ændre størrelsen på browser
> vinduet.

Det er _ikke_ grafik men farve.

Prøv at tage et kig på Jørgen Farum Jensens side:
http://webdesign101.dk/css/roundcorners/eksempel_1.html

Du kan sagten sætte det på den boks, som skal fylde hele bredden.

Men! Vær opmærksom på, at koden som står på siden ikke validerer!
Det kan du få den til, hvis du indsætter &nbsp; imellem <b class...> og
</b> - således:
<b class="b1">&nbsp;</b>
o.s.v...

Modellen laver runder hjørner og tilpasser sig så ellers sidens bredde, hvis
ikke du sætter den ind i en omsluttende boks med fast bredde.


Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye - Member of the PosseGrim Squad
http://pgsquad.com/
"When you hear the wind - you're already dead..."


Dennis Munding (01-07-2010)
Kommentar
Fra : Dennis Munding


Dato : 01-07-10 18:31

Hej igen!

"Dennis Munding" skrev...
> Hej scooter,
> "scootergrisen" skrev...
>> Det skal være ligesom hvor der står "Overskrift eller logo" på :
>> http://kimludvigsen.dk/libris/kompozer/skabeloner/1-1-1-rund/index.php
>> Blot skal baggrundsgrafikken med de runde hjørner fylde 100% i bredden
>> og automatisk tilpasse sig når man ændre størrelsen på browser
>> vinduet.
>
> Det er _ikke_ grafik men farve.
>
> Prøv at tage et kig på Jørgen Farum Jensens side:
> http://webdesign101.dk/css/roundcorners/eksempel_1.html
>
> Du kan sagten sætte det på den boks, som skal fylde hele bredden.
>
> Men! Vær opmærksom på, at koden som står på siden ikke validerer!
> Det kan du få den til, hvis du indsætter &nbsp; imellem <b class...> og
> </b> - således:
> <b class="b1">&nbsp;</b>
> o.s.v...
>
> Modellen laver runder hjørner og tilpasser sig så ellers sidens bredde,
> hvis ikke du sætter den ind i en omsluttende boks med fast bredde.


Jeg glemte lige at sætte FUT til html- og webdesign-grupperne - men det
skulle være løst nu...


Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye - Member of the PosseGrim Squad
http://pgsquad.com/
"When you hear the wind - you're already dead..."


scootergrisen (01-07-2010)
Kommentar
Fra : scootergrisen


Dato : 01-07-10 19:32

> Det er _ikke_ grafik men farve.
>
> Pr v at tage et kig p J rgen Farum Jensens side:http://webdesign101.dk/css/roundcorners/eksempel_1.html

Ja det er ligesom det men det skal bare være med grafik så jeg kan
ændre på billederne.

Birger Sørensen (02-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 02-07-10 08:25

Den 02-07-2010, skrev scootergrisen:
>> Det er _ikke_ grafik men farve.
>>
>> Pr v at tage et kig p J rgen Farum Jensens
>> side:http://webdesign101.dk/css/roundcorners/eksempel_1.html
>
> Ja det er ligesom det men det skal bare være med grafik så jeg kan
> ændre på billederne.

Hvad er det for noget grafik, der kan ændre størrelse?
Eller har du forskellige grafikker, der skal (og kan) passe sammen,
uanset størrelsen?
Hvis du vil bruge grafik, er det vel grafikken der skal have runde
hjørner?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Dennis Munding (02-07-2010)
Kommentar
Fra : Dennis Munding


Dato : 02-07-10 09:02

Hej scooter,

"scootergrisen" skrev...
> Det er _ikke_ grafik men farve.
>
> Pr v at tage et kig p J rgen Farum Jensens
> side:http://webdesign101.dk/css/roundcorners/eksempel_1.html

Ja det er ligesom det men det skal bare være med grafik så jeg kan
ændre på billederne.

Der er flere aspekter i det du ønsker.
Du skriver, at du "vil have en overskrift med grafik med runde hjørner som
automatisk
tilpasser sig i bredden når man ændre browserens størrelse".

Ønsker du en overskrift lavet af grafik, eller er det en tekst-overskrift
med grafik som baggrund, du ønsker??

Hvis det er det første, er det vel blot et spørgsmål om selv at lave de
grafiske elementer...?
Hvis det er det andet, så skal du - som Jens Peter pointerer - være
opmærksom på, at grafik ikke kan skaleres uden forringende effekt.
Og som Birger er inde på - hvilken type grafik er der tale om/har du i
tankerne?

Man kan godt bruge den model, jeg henviste til og så kombinere den med noget
baggrundsgrafik.
Men så vil jeg anbefale grafik som er skåret ud i "byggebare fliser" - som
kan sættes sammen til én stor plade uden synlige aftegninger.

Men uanset hvad, vil det kræve flere oplysninger fra dig, hvis du ønsker
korrekt hjælp.

FUT til dk.edb.internet.webdesign og dk.edb.internet.webdesign.html, da det
i bund og grund ikke har noget med javascript at gøre.


Med venlig hilsen
--
Dennis Munding
a.k.a. The Eye - Member of the PosseGrim Squad
http://pgsquad.com/
"When you hear the wind - you're already dead..."


Rune Jensen (02-07-2010)
Kommentar
Fra : Rune Jensen


Dato : 02-07-10 09:35

On 1 Jul., 19:27, "Dennis Munding" <inva...@unvalid.org> wrote:
> Hej scooter,
> "scootergrisen" skrev...
>
> > Det skal v re ligesom hvor der st r "Overskrift eller logo" p :
> >http://kimludvigsen.dk/libris/kompozer/skabeloner/1-1-1-rund/index.php
> > Blot skal baggrundsgrafikken med de runde hj rner fylde 100% i bredden
> > og automatisk tilpasse sig n r man ndre st rrelsen p browser
> > vinduet.
>
> Det er _ikke_ grafik men farve.
>
> Pr v at tage et kig p J rgen Farum Jensens side:http://webdesign101.dk/css/roundcorners/eksempel_1.html
>
> Du kan sagten s tte det p den boks, som skal fylde hele bredden.
>
> Men! V r opm rksom p , at koden som st r p siden ikke validerer!
> Det kan du f den til, hvis du inds tter &nbsp; imellem <b class...> og
> </b> - s ledes:
> <b class="b1">&nbsp;</b>
> o.s.v...

Er det bedre at det validerer, og så er lavet med gammeldags kodning
fra før anden verdenskrig?

Vil du også anbefale, man koder i tabeller i stedet for DIVer?

Hvad er forskellen på at bruge mark up til effekter som runde hjørner
og så tabeller til design? For mig at se er det stadig misbrug af
HTMLen i dén grad.

CSS3 er den måde man gør det på i dag, når man skal lave runde
hjørner. Det er fleksibelt, det fylder intet, det tilfører ikke ekstra
mark up.

Runde hjørner er pynt. Pynt skal gradere, ikke være pixelnært ens
imellem browserne.

Pixelnært design var noget man gjorde i forrige århundrede.

Det eneste sted jeg kan forestille mig det nødvendigt det er ens, er
med et logo, men så er det heller ikke pynt.


MVH
Rune Jensen

scootergrisen (05-07-2010)
Kommentar
Fra : scootergrisen


Dato : 05-07-10 18:42

Jeg ønsker en overskrift lavet af tekst.
Og baggrunden skal være lavet af grafik (for eksempel 3 PNG billeder).
Grafikken skal ikke skaleres. Det er ikke nødvendigt når man bruger 3
billeder.

Jeg ville egentligt høre om i har set det nogen steder men det lader
ikke til det.
Det er ikke fordi jeg vil forklare hvordan det skal laves fordi det
har jeg prøvet og det virker men ikke optimalt så derfor vil jeg gerne
se andre eksempel så jeg kan få en bedre løsning.

Birger Sørensen (06-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 06-07-10 10:19

scootergrisen formulerede tirsdag:
> Jeg ønsker en overskrift lavet af tekst.
> Og baggrunden skal være lavet af grafik (for eksempel 3 PNG billeder).
> Grafikken skal ikke skaleres. Det er ikke nødvendigt når man bruger 3
> billeder.
>
> Jeg ville egentligt høre om i har set det nogen steder men det lader
> ikke til det.
> Det er ikke fordi jeg vil forklare hvordan det skal laves fordi det
> har jeg prøvet og det virker men ikke optimalt så derfor vil jeg gerne
> se andre eksempel så jeg kan få en bedre løsning.

Hvad er det for noget grafik der passer sammen, så det kan ændre
størrelse uden at blive scaleret?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Birger Sørensen (06-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 06-07-10 10:59

scootergrisen har bragt dette til verden:
> Jeg ønsker en overskrift lavet af tekst.
> Og baggrunden skal være lavet af grafik (for eksempel 3 PNG billeder).
> Grafikken skal ikke skaleres. Det er ikke nødvendigt når man bruger 3
> billeder.
>
> Jeg ville egentligt høre om i har set det nogen steder men det lader
> ikke til det.
> Det er ikke fordi jeg vil forklare hvordan det skal laves fordi det
> har jeg prøvet og det virker men ikke optimalt så derfor vil jeg gerne
> se andre eksempel så jeg kan få en bedre løsning.

Et gæt :
http://bbsorensen.com/test/sg/

Alternativet er et billede med det runde hjørne til venstre og et med
det andet runde hjørne til højre, og midterdelen, der kan ændre bredde.
Det er ikke specielt besværligt eller uoverskueligt. Det er bare ret
meget arbejde, for at tækkes IE.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



scootergrisen (08-07-2010)
Kommentar
Fra : scootergrisen


Dato : 08-07-10 13:34

Det skal være en tekst overskrift med grafik som baggrund.
Ja det er grafikken der skal have runde hjørner.

Og ja jeg vil gerne bruge CSS men det skal stadig være grafik.

Jeg tænkte i måske havde set det jeg beskriver på en hjemmeside et
sted.
Jeg har det på min egen hjemmeside men det fungere ikke helt som jeg
vil ha det så ville gerne se et andet eksempel/måde at gøre det på.

Birger Sørensen (08-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 08-07-10 20:50

Den 08-07-2010, skrev scootergrisen:
> Det skal være en tekst overskrift med grafik som baggrund.
> Ja det er grafikken der skal have runde hjørner.
>
> Og ja jeg vil gerne bruge CSS men det skal stadig være grafik.
>
> Jeg tænkte i måske havde set det jeg beskriver på en hjemmeside et
> sted.
> Jeg har det på min egen hjemmeside men det fungere ikke helt som jeg
> vil ha det så ville gerne se et andet eksempel/måde at gøre det på.

Prøver igen så...
http://bbsorensen.com/test/sg/
Har (din egen) grafik baggrund og tekst overskrift.
Runde hjørner med CSS(3) - hvilket betyder firkantet i IE - i hvert
fald indtil 9'eren.

Alternativet er et billede med det runde hjørne til venstre og et med
det andet runde hjørne til højre, og midterdelen, der kan ændre bredde.
Det er ikke specielt besværligt eller uoverskueligt. Det er bare ret
meget arbejde, for at tækkes IE.
Og det vil så *ikke* give de runde hjørner i bunden.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



scootergrisen (08-07-2010)
Kommentar
Fra : scootergrisen


Dato : 08-07-10 16:21

> Prøver igen så...http://bbsorensen.com/test/sg/
> Har (din egen) grafik baggrund og tekst overskrift.
> Runde hjørner med CSS(3) - hvilket betyder firkantet i IE - i hvert
> fald indtil 9'eren.

Tak men jeg vil ikke bruge browser specifik kode på min hjemmeside.
Jeg vil hellere have at det ser ens ud fremfor at nogle af mine
brugere for det på en måde og andre på en anden måde.

> Alternativet er et billede med det runde hjørne til venstre og et med
> det andet runde hjørne til højre, og midterdelen, der kan ændre bredde.
> Det er ikke specielt besværligt eller uoverskueligt.

Det er også sådan jeg har prøvet på min hjemmeside med 3 billeder men
det virker ikke optimalt så ville se om i kunne komme med nogen links/
forslag til en god løsninger.

Nu har jeg prøvet lidt forskelligt og er kommet frem til dette :
http://scootergrisen.dk/test/overskriftmedrundehjorner.html

Jeg får 3 forskellige resultater i 3 forskellige browsere (firefox,
opera og ie):
http://scootergrisen.dk/test/overskriftmedrundehjorner.jpg

I ie viser den det perfekt. Der er ikke noget der hopper ned på næste
linie når vinduet gøres smallere.
Jeg vil gerne have det til at se sådan ud i andre browsere også.

Allan Vebel (08-07-2010)
Kommentar
Fra : Allan Vebel


Dato : 08-07-10 23:48

scootergrisen skrev:

> Jeg får 3 forskellige resultater i 3 forskellige browsere

http://vebel.dk/test får et ensartet resultat i alle browsere,
her har jeg bare brugt float af elementer i <h1> - det er
ganske enkelt.

Naturligvis falder det sidste billede ned ved et for smalt
browservindue - det er her man lærer at lave korte og
præsise overskrifter,o)

Det kan sikkert laves anderledes - her er det min måde
at gøre det på.

--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk



Birger Sørensen (09-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 09-07-10 01:17

scootergrisen formulerede spørgsmålet:
>> Prøver igen så...http://bbsorensen.com/test/sg/
>> Har (din egen) grafik baggrund og tekst overskrift.
>> Runde hjørner med CSS(3) - hvilket betyder firkantet i IE - i hvert
>> fald indtil 9'eren.
>
> Tak men jeg vil ikke bruge browser specifik kode på min hjemmeside.
> Jeg vil hellere have at det ser ens ud fremfor at nogle af mine
> brugere for det på en måde og andre på en anden måde.
>
>> Alternativet er et billede med det runde hjørne til venstre og et med
>> det andet runde hjørne til højre, og midterdelen, der kan ændre bredde.
>> Det er ikke specielt besværligt eller uoverskueligt.
>
> Det er også sådan jeg har prøvet på min hjemmeside med 3 billeder men
> det virker ikke optimalt så ville se om i kunne komme med nogen links/
> forslag til en god løsninger.
>
> Nu har jeg prøvet lidt forskelligt og er kommet frem til dette :
> http://scootergrisen.dk/test/overskriftmedrundehjorner.html
>
> Jeg får 3 forskellige resultater i 3 forskellige browsere (firefox,
> opera og ie):
> http://scootergrisen.dk/test/overskriftmedrundehjorner.jpg
>
> I ie viser den det perfekt. Der er ikke noget der hopper ned på næste
> linie når vinduet gøres smallere.
> Jeg vil gerne have det til at se sådan ud i andre browsere også.

Se igen på http://bbsorensen.com/test/sg/ - den nederste.
De 4 divs - som du selv har benævnt klasserne -:
#overskriftholder skal være relativt positioneret, så der kan anbringes
absolut positionerede elementer inde i dem. Bredde 100% - men sat med
en min-width, der skal passe til dit design. Gøres vinduet mindre, fås
scrollbarer. Så det er din opgave at skrive teksterne så det ser
fornuftigt ud, med en ikke for stor min-width. Jeg har sat 450px, som
passer til den tekst der er, men hele designet skal tages med i
betragtning.
#overskriftleft og #overskriftright er absolut positioneret i
#overskriftholder, til venstre og højre med left=0px; hhv right=0px;,
og givet dimensioner som passer til grafikken. Bemærk at grafikken er
som baggrund - ikke <img>.
#overskriftcenter er også absolut positioneret, men rykket ind fra
siderne, så det passer til grafikken - igen med left=4px; og
right=4px;.

Jeg har beholdt så meget som muligt af din oprindelige css - selv om
det vist bærer præg af at være forsøgs-programmering - ved ikke
hvor meget der skal anvendes i det egentlige design.

Det validerer, og virker i FF og IE8 - har ikke testet andre.

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Birger Sørensen (09-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 09-07-10 08:22

Birger Sørensen forklarede den 09-07-2010:
> scootergrisen formulerede spørgsmålet:
>>> Prøver igen så...http://bbsorensen.com/test/sg/
>>> Har (din egen) grafik baggrund og tekst overskrift.
>>> Runde hjørner med CSS(3) - hvilket betyder firkantet i IE - i hvert
>>> fald indtil 9'eren.
>>
>> Tak men jeg vil ikke bruge browser specifik kode på min hjemmeside.
>> Jeg vil hellere have at det ser ens ud fremfor at nogle af mine
>> brugere for det på en måde og andre på en anden måde.
>>
>>> Alternativet er et billede med det runde hjørne til venstre og et med
>>> det andet runde hjørne til højre, og midterdelen, der kan ændre bredde.
>>> Det er ikke specielt besværligt eller uoverskueligt.
>>
>> Det er også sådan jeg har prøvet på min hjemmeside med 3 billeder men
>> det virker ikke optimalt så ville se om i kunne komme med nogen links/
>> forslag til en god løsninger.
>>
>> Nu har jeg prøvet lidt forskelligt og er kommet frem til dette :
>> http://scootergrisen.dk/test/overskriftmedrundehjorner.html
>>
>> Jeg får 3 forskellige resultater i 3 forskellige browsere (firefox,
>> opera og ie):
>> http://scootergrisen.dk/test/overskriftmedrundehjorner.jpg
>>
>> I ie viser den det perfekt. Der er ikke noget der hopper ned på næste
>> linie når vinduet gøres smallere.
>> Jeg vil gerne have det til at se sådan ud i andre browsere også.
>
> Se igen på http://bbsorensen.com/test/sg/ - den nederste.
> De 4 divs - som du selv har benævnt klasserne -:
> #overskriftholder skal være relativt positioneret, så der kan anbringes
> absolut positionerede elementer inde i dem. Bredde 100% - men sat med en
> min-width, der skal passe til dit design. Gøres vinduet mindre, fås
> scrollbarer. Så det er din opgave at skrive teksterne så det ser fornuftigt
> ud, med en ikke for stor min-width. Jeg har sat 450px, som passer til den
> tekst der er, men hele designet skal tages med i betragtning.
> #overskriftleft og #overskriftright er absolut positioneret i
> #overskriftholder, til venstre og højre med left=0px; hhv right=0px;, og
> givet dimensioner som passer til grafikken. Bemærk at grafikken er som
> baggrund - ikke <img>.
> #overskriftcenter er også absolut positioneret, men rykket ind fra siderne,
> så det passer til grafikken - igen med left=4px; og right=4px;.
>
> Jeg har beholdt så meget som muligt af din oprindelige css - selv om det vist
> bærer præg af at være forsøgs-programmering - ved ikke hvor meget der
> skal anvendes i det egentlige design.
>
> Det validerer, og virker i FF og IE8 - har ikke testet andre.

Testede lige i Opera og Chrome, og det kommer rigtigt ud der også.

Mht. mine bemærkninger om min-width, skal du nok overveje at sætte den
på din midterspalte i dit design i stedet, hvis du ikke allerede har
den der.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



scootergrisen (09-07-2010)
Kommentar
Fra : scootergrisen


Dato : 09-07-10 15:25

Jeg har indsat noget ekstra kode så nu ser det ud til at være
acceptabelt men ikke helt perfekt.

Jeg prøvede lidt med position: og selvom jeg ikke helt forstår det med
absolute og relative så kom jeg frem til at følgende virker men spørg
mig ikke hvorfor.
Der er sat nye 5 linier med kode ind som er markeret med /* ny kode */
i filen.
http://scootergrisen.dk/test/overskriftmedrundehjorner.html

Kunne være jeg skulle læse lidt mere om position fordi jeg forstår det
ikke helt.

Birger Sørensen (10-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 10-07-10 01:00

scootergrisen kom med følgende:
> Jeg har indsat noget ekstra kode så nu ser det ud til at være
> acceptabelt men ikke helt perfekt.
>
> Jeg prøvede lidt med position: og selvom jeg ikke helt forstår det med
> absolute og relative så kom jeg frem til at følgende virker men spørg
> mig ikke hvorfor.
> Der er sat nye 5 linier med kode ind som er markeret med /* ny kode */
> i filen.
> http://scootergrisen.dk/test/overskriftmedrundehjorner.html
>
> Kunne være jeg skulle læse lidt mere om position fordi jeg forstår det
> ikke helt.

Lidt af fidusen ved at have grafikken i baggrunden i sidestykkerne, er
at det kun står eet sted. Din kode bliver mindre, mere overskuelig,
nemmere at rette når du engang vil have et andet billede, og der skal
færre requestst til, når siden hentes.

Der er meget overflødigt i din CSS.

Absolut positionerede elementer, tages ud af det normale flow, og
anbringes i stedet i det element opad i hierakiet, der har, det der i
gamle dage og vist stadig i IE hedder "Layout" - tænk på det, som det
er positioneret anderledes end det almindelige flow.
Relativt positionerede elementer, har layout. De flyttes i forhold til
der hvor de ville have været i det normale flow, med værdier i top,
left, right og bottom. Disse er pr. default 0, så når man ikke angiver
nogen i et relativt positioneret elemnt, opnår man altså blot, at man
kan absolut positionere (og floate) andre elementer inde i dem.
Derfor skal det element der indeholder alle de andre være relativt
positioneret.
Sidestykkerne har jeg så positioneret absolut i hver sin side, og
midterstykket i midten.

Det kan være svært at vænne sig til at arbejde med absolut
positionerede elementer. Og det koster tit mange eksperimenter, at få
tingene til at gøre som man vil have dem til. Og generelt er det ikke
noget man skal kaste sig ud i, uden man ved hvad man gør, og har en god
grund til at gøre det. Så det er ikke nogen dum ide at studere lidt

Jeg har tilføjet et eksempel (igen på http://bbsorensen.com/test/sg/ ),
der laver din grafiske overskrift, men med floatede elementer, i stedet
for absolut positionerede. Og med en tilhørende CSS, der ikke har andet
end det der er nødvendigt.
Virker også efter hensigten i IE8, FF, Opera og Chrome.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



scootergrisen (10-07-2010)
Kommentar
Fra : scootergrisen


Dato : 10-07-10 17:11

Tak for svar.

> Lidt af fidusen ved at have grafikken i baggrunden i sidestykkerne, er
> at det kun står eet sted. Din kode bliver mindre, mere overskuelig,
> nemmere at rette når du engang vil have et andet billede, og der skal
> færre requestst til, når siden hentes.

Ja jeg vil også hellere have billederne som baggrundsbilled fordi så
når man markere noget tekst så kan man ikke komme til at markere eller
hive i billedet.
Men selv jeg ikke har dem som baggrundsbilled så har jeg kun filnavnet
til billedet 1 sted fordi jeg bruger PHP til at lave XHTML filen.

Angående dit eksempel : http://bbsorensen.com/test/sg/
Er der nogen grund til at du har sat rækkefølgen som left, right,
center.
Jeg kan godt se resultatet bliver anderledes hvis man skrive left,
center, right som jeg jo egentligt helst ville bruge fordi det virker
mere logisk for mig at have det i den rækkefølge.

Nu prøver jeg og køre noget tid med den kode du/i har hjulpet med og
se om det ikke er godt nok. Jeg tror faktisk det er perfekt nu ligesom
jeg gerne ville have. Nu mangler jeg så bare at forstå koden. Men det
kommer vel.

Birger Sørensen (11-07-2010)
Kommentar
Fra : Birger Sørensen


Dato : 11-07-10 00:44

scootergrisen sendte dette med sin computer:
> Angående dit eksempel : http://bbsorensen.com/test/sg/
> Er der nogen grund til at du har sat rækkefølgen som left, right,
> center.
> Jeg kan godt se resultatet bliver anderledes hvis man skrive left,
> center, right som jeg jo egentligt helst ville bruge fordi det virker
> mere logisk for mig at have det i den rækkefølge.
>
> Nu prøver jeg og køre noget tid med den kode du/i har hjulpet med og
> se om det ikke er godt nok. Jeg tror faktisk det er perfekt nu ligesom
> jeg gerne ville have. Nu mangler jeg så bare at forstå koden. Men det
> kommer vel.

Du taler her om eksemplet med floatede elementer - det sidste.
Og det er vel egentlig ulempen ved den metode - at de floatede
elementer skal komme før de ikke floatede, og kildekoden kommer ikke
til at stå i den rækkefølge det faktisk vises på skærmen (og vel skal
læses, hvis der er tekst i alle de floatede).
Hvis man ikke gør det på den måde, starter man en ny "float-afdeling"
efter ikke floatede elementer, og den højre falder ned under de øvrige.
På et tidspunkt (IE7?) var det faktisk sådan, at man skulle have float
til højre først, så float til ventre og sidst det midterste/ikke
floatede.
Man kan godt gøre den midterste til en float også, og derved få
kildekoden til at stå i den rigtige rækkefølge. Forskellen er vel
egentlig, at størrelserne på midterdelen bliver mere kritisk, og der
skal lidt mere css til.
Hvis rækkefølgen i kildekoden er kritisk eller vigtig, ville jeg
foretrække at bruge absolut positionering - den er uafhængig af
rækkefølgen i kildekoden.

Nu er det vel dine besøgende der skal være tilfredse med og bedømme
resultatet? Men at du selv er det, må vel være et første skridt på
vejen.
Hvis du støder på spørgsmål til koden, du ikke selv kan klare, skal jeg
da gerne prøve at svare. Og andre med, er jeg sikker på. ^^

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



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

Månedens bedste
Årets bedste
Sidste års bedste