Avatar billede futte850 Nybegynder
22. februar 2012 - 18:09 Der er 19 kommentarer og
1 løsning

tekst oven på tekst vandret

Mit spørgsmål går på, "hvad er den korrekte måde, at lave to linier tekst som ligger vandret oven på hinanden" ??

Jeg er meget i tvivt om man bruger <p> eller <span> eller noget andet..
Det skal siges at jeg har behov for at hver linie tekst skal designes forskelligt...

Hvis jeg går ud fra span så er der vist kun en vej og det er at bruge line-height...eller ?

<div id="footer">
  <span class="">tekst</span>
  <span class="">tekst</span>
</div>
Avatar billede futte850 Nybegynder
22. februar 2012 - 18:20 #1
Har lavet en lille fejl...
Det er selvfølgelig ikke ovenpå hinanden, men ovenover..
Avatar billede danco Nybegynder
22. februar 2012 - 18:53 #2
Jeg er ikke sikker på jeg forstår hvad du gerne vil. Du har problemer med at lave et linjeskift eller hvordan?

I princippet kan du bruge både p og span, det kommer an på behovet da de ophører sig forskelligt.

Kan du evt. lave et billede i paint eller lign der illustrere hvordan det skal ende op.
Avatar billede Blueeyez Mester
22. februar 2012 - 18:54 #3
Altså du mener ovenover som fx:

Linje 1

Linje 2

Men hver skal "css'es" på hver sin måde?
Avatar billede olebole Juniormester
22. februar 2012 - 18:54 #4
<ole>

Den naturlige løsning må vel være:

<div id="footer">
  <div class="">tekst</div>
  <div class="">tekst</div>
</div>

/mvh
</bole>
Avatar billede olebole Juniormester
22. februar 2012 - 18:58 #5
- og med tilhørende CSS:

<style type="text/css">
#footer .top {
    color: #c00;
}
#footer .bottom {
    color: #0c0;
}
</style>

<div id="footer">
  <div class="top">tekst</div>
  <div class="bottom">tekst</div>
</div>
Avatar billede olebole Juniormester
22. februar 2012 - 19:04 #6
SPAN er inline elementer. Den slags lægger sig ved siden af hinanden på én linje. Inline elementer kan kun indeholde andre inline elementer.

DIV er block elementer. Den slags danner en blok af linjer med et linjeskift før og efter blokken. De kan indeholde både inline elementer og andre block elementer

P er en slags block elementer, men danner et afsnit. Dvs, at de danner (cirka) et dobbelt linjeskift før og efter blokken. Dog kan de kun indeholde inline elementer og andre P elementer - ikke 'almindelige' block elementer.
Avatar billede futte850 Nybegynder
22. februar 2012 - 19:07 #7
Linje 1
Linje 2

De skal have hvert deres style...

Linje 1 skal være stor og fed.
Linje 2 skal være småt.

Mit spørgsmål er så om man bruger span eller p ??
Hvis jeg bruger span vil den ikke automatisk smide linje 1 og linje 2 på hvert deres linje.
Hvis jeg i stedet bruger p så vil den gerne. Dog skal der nok bruges til line-height, da jeg gerne selv vil bestemme hvor meget mellemrum der er imellem linje 1 og linje 2
Avatar billede olebole Juniormester
22. februar 2012 - 19:12 #8
Jeg kan forstå, du ikke har prøvet #5. Prøv det
Avatar billede olebole Juniormester
22. februar 2012 - 19:12 #9
- og hverken SPAN eller P giver særlig god mening. De elementer bruges som allerede beskrevet til andre ting
Avatar billede Blueeyez Mester
22. februar 2012 - 19:12 #10
#7 Jeg gør sådan her:

Html koden:

<div id="overskrift">tekst</div>

Css koden:

}
#overskrift
    color: #0c0;
}

Håber det er det du søger, du kan sagtens lave flere på følgende måde :) Har selv på min side :)
Avatar billede futte850 Nybegynder
22. februar 2012 - 19:15 #11
Vil jeg også meget gerne synes bare, at jeg har hørt før at man ikke bare skal bruge divs, men istedet bruge f.eks. <p> eller <h1> eller hvad der nu er beregnet til tekst. Skal dog ikke gøre mig klog på den påstand.
Avatar billede olebole Juniormester
22. februar 2012 - 19:17 #12
Jaja, man hører så meget, men at du ikke skal bruge DIV til denne opgave, er noget vrøvl. Det er præcis, hvad de er beregnet til
Avatar billede Blueeyez Mester
22. februar 2012 - 19:17 #13
#11

De funktioner bruges til andre ting, det er hvis du har mange H1 og de skal være identiske så kan du godt, men ellers så skal du selv give navne, samt så bruger du ikke en bestemt funktion, <p> og <h1> har jo hver deres funktioner :)
Avatar billede Blueeyez Mester
22. februar 2012 - 19:19 #14
#11

Evt tjek kildekoden ud på http://dtmp.dk, så kan du se hvor jeg bruger det flere gange :)
Avatar billede olebole Juniormester
22. februar 2012 - 19:24 #15
@Blueeyez: Det er et rigtig skidt eksempel, du linker til! At bruge BR til at skabe dobbelt linjeskift er misforstået. Det er præcis, hvad P elementet er beregnet til
Avatar billede Blueeyez Mester
22. februar 2012 - 19:31 #16
#15 Vidste ikke lige at <p> var til den funktion, men nu er det rettet så meget som jeg lige kan se det kan bruges? :)

Ud over det, så er det nok ikke det bedste eksempel, men nu snakkede vi om en helt anden funktion end følgende, men takker for endnu mere viden fra din side :P
Avatar billede olebole Juniormester
22. februar 2012 - 19:47 #17
Sorry, jeg begik en fejl i #6. Jeg skrev:

"Dog kan de kun indeholde inline elementer og andre P elementer - ikke 'almindelige' block elementer."

Men det er i ikke korrekt! P elementer kan kun indeholde inline elementer. De kan ikke indeholde block elementer - og heller ikke andre P elementer.
Avatar billede futte850 Nybegynder
26. februar 2012 - 14:50 #18
smid et svar olebole..
Brugte bare div.. virker ganske fint!
Avatar billede olebole Juniormester
26. februar 2012 - 16:46 #19
Ellers tak, jeg samler ikke point. Spørg evt. en af de andre, og ellers lægger du selv et svar og accepterer det  =)
Avatar billede futte850 Nybegynder
29. februar 2012 - 23:24 #20
oki
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