Avatar billede jesper-moeller Nybegynder
14. november 2005 - 16:18 Der er 8 kommentarer og
1 løsning

style DIV vs. SPAN

<div id="mainmenu">
<span id="mmenuspace"></span>
Hvis jeg i føgende kode ikke ønsker at bruge div, kan jeg så evnt bruge et span istede
<div id="mmenu100">
<a href="#" id="mmenulink" onclick="MenuControler(nr=100)">Main MenuLink 1</a>
<span id="smenutop"></span>
<a href="#">SubLink</a><br>
<a href="#">SubLink</a><br>
<a href="#">SubLink</a>
<span id="smenubot"></span>
</div>
Med følgende css
#mmenu100 { background-image: url(graphic/submenubg-8.gif); text-align: right; margin: 0px 10px 0px 0px; width: 100%; height: 16px; overflow: hidden }

Altså hvis jeg ændre <div id="mmenu100"> til feks <span id="mmenu100">  (eller andet)
vil stylen så stadigt virke som på en div
Avatar billede hanne_e Nybegynder
14. november 2005 - 16:33 #1
så vidt jeg husker er den eneste forskel på div og span, at div laver linieskift - span kan fx bruges inde i en sætning. så det kan sagtens udskiftes.

når du kalder det id kan det kun bruges én gang pr side - ellers skal du bruge class - men det skal nok også kun bruges én gang.

i øvrigt er der noget med at man blot skal bruge "background" istedet for "background-image"
Avatar billede hanne_e Nybegynder
14. november 2005 - 16:46 #2
Hej igen
jeg fandt lige nogle gamle noter frem:

<div> og <span> er såkaldte container-tags, der bruges til at indkapsle noget. Derfor er de gode at knytte en class eller lign. til.

I sig selv har <div> og <span> ingen funktion.

<div> Kan bruges i alle situationer, men egner sig bedst til store spænd. Laver dog et linieskift, hvis den placeres inde i tekster.

<span> Kan kun bruges i mindre spænd og ikke udover en <p>, <div>, <ol>, <ul> eller andre tags, der laver linieskift.

Man kan altså placere <span> inde i <div>, men ikke omvendt.
Avatar billede skovenborg Nybegynder
14. november 2005 - 16:54 #3
div er et såkaldt block-element, hvilket gør at den fylder hele bredden af det omkransende element. span er derimod et inline-element, som kan ligge på en linie på samme måde som fx almindelig tekst.

En væsentlig forskel er også at span-elementer ikke kan ændre deres bredde og højde ligesom div-elementerne kan (okay, i IE virker det vist fint alligevel, men tænk dog også på alle de andre browsere derude ;-) Så dit stylesheet vil ikke virke helt på samme måde hvis du erstattet div'en med et span-element. Så vidt jeg husker virker margin heller ikke - men du kan jo prøve og se efter.

Du kan selvfølgelig ordne det ved at skrive:
#mmenu100 {display:block;...}

Kommandoen background er en slags genvej, som giver dig mulighed for at indstille alle de forskellige background-egenskaber på én gang. Det virker dog også selvom du kun vælger fx at indstille background-image, hvilket er grunden til du kan bruge background istedet.
Avatar billede olebole Juniormester
14. november 2005 - 18:45 #4
<ole>

padding og margin virker kun horisontalt på et inline-element ... hvilket vel også er ganske logisk med betegnelsen 'inline'  :)

Man _kan_ ændre et span ved at sætte 'display' til 'block', men så taber man en del af logikken i koden.
At ændre display-værdien bør man (i min verden) kun gøre, når der er gode grunde ... og man kan jo bare bruge et div. I den situation, synes jeg ikke, man bør ændre 'display'.

NB: Mine bemærkninger om, hvad man 'bør' gøre, er i dette tilfælde udtryk for en personlig holdning  :)

/mvh
</bole>
Avatar billede roenving Novice
14. november 2005 - 19:42 #5
-- altså kan du ikke i det viste eksempel uden fejl skifte mellem spans og divs !-)
Avatar billede jesper-moeller Nybegynder
16. maj 2006 - 10:00 #6
takker

Læg venligst svar så jeg kan lukke
Avatar billede olebole Juniormester
16. maj 2006 - 15:37 #7
- hvem?  :)
Avatar billede jesper-moeller Nybegynder
16. maj 2006 - 16:47 #8
*S* ... jame i må da gerne alle lægge et ... så kan i dele ...*S*
Avatar billede jesper-moeller Nybegynder
13. juni 2006 - 11:48 #9
nå... hvis igen vil ha point tager jeg dem da selv :-P
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester