Avatar billede mik28 Seniormester
07. marts 2013 - 22:40 Der er 14 kommentarer og
1 løsning

linieskrift i et <span>

Hej Eksperter

Jeg har en <header> hvor jeg har en række <span>s i. Er det muligt at få 2 tallet til at stå oven på feb i date feltet sådan som jeg har sat det op? Det ses her http://mikbis.dk
Avatar billede olebole Juniormester
07. marts 2013 - 22:49 #1
<ole>

<span>2<br>feb</span>

- og så skal du nok fiddle med din line-height for at få tingene til at passe

/mvh
</bole>
Avatar billede mik28 Seniormester
07. marts 2013 - 22:57 #2
Hvis jeg sætter et <br /> ind så rykker resten af mine spans jo ned på næste linie
Avatar billede olebole Juniormester
07. marts 2013 - 23:01 #3
For det første: Hvad er begrundelsen for ' />'? Det er en lukning, der hører hjemme under XML, og så længe du ikke har helt specielle årsager til at blande XML ind i koden, har du ingen somhelst brug for den lukning.

For det andet skrev jeg, at du naturligvis er nødt til at fiddle lidt rundt med line-height i SPAN'et for at få tingene til at passe
Avatar billede mik28 Seniormester
07. marts 2013 - 23:36 #4
http://mikbis.dk/images/header.PNG er det tætteste jeg synes at kunne komme på.
Avatar billede olebole Juniormester
07. marts 2013 - 23:49 #5
Ja, det ser ud som forventet
Avatar billede danco Nybegynder
08. marts 2013 - 15:54 #6
<span>1</span>
  <span>2 </span>
  <span>Jan</span>
  <span>Feb</span>

så må det kunne klares i css, med display:block; min-width:150px; float:left;

Du kan evt. overveje at lave en container udenom det hele for at holde lidt styr på det.
Avatar billede olebole Juniormester
08. marts 2013 - 16:03 #7
#6: Det giver vist ikke megen mening. Hvorfor bruge et inline element - og 'kunstigt' gøre det til et block element? Så ville det være mere logisk at anvende DIV elementer.

Desuden er float:left beregnet til at lave tekstomløb omkring f.eks. et billede. Ønsker man at lægge block elementer ved siden af hinanden, bruger man display:inline-block, som er sjabt til lige netop dét.

Containeren er der allerede, som du kan se bag linket i spørgsmålet. Den er et HEADER element (HTML5)
Avatar billede mik28 Seniormester
08. marts 2013 - 21:22 #8
Jeg er sådan set enig med olebole. Jeg mangler bare stadig at forstå hvordan jeg opnår det jeg gerne vil :-)
Avatar billede olebole Juniormester
08. marts 2013 - 21:51 #9
Da du jo i virkeligheden gerne vil have HEADER elementet til at opføre sig som en tabel, kan du også bruge display:table-cell:

<style type="text/css">
header {
    height: 45px;
    padding-top: 10px;
    background: #ccc;
}
header div {
    height: 30px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#year {
    width: 50px;
    background: yellow;
}
#date {
    width: 60px;
    background: orange;
}
#headertext {
    width: 400px;
    background: green;
}
#headerbutton {
    width: 70px;
    background: blue;
}
</style>

<header>
    <div id="year">2013</div>
    <div id="date">2<br>feb</div>
    <div id="headertext">headertext</div>
    <div id="headerbutton">Knap</div>
</header>

- men vær opmærksom på, at dette først virker fra og med IE8
Avatar billede mik28 Seniormester
09. marts 2013 - 12:35 #10
Kan jeg ikke sige at header div'et skal være 100% af article og at de fire divs i header skal være f.x  15% 15% 50% 20% ? Skal jeg angive det i px. Grunden til jeg gerne vil angive det i % er fordi det gerne skulle passe til forskellige opløsninger. Ellers skal jeg jo have et forskelligt stylesheet til hver opløsning. I øvrigt tak for hjælpen.
Avatar billede olebole Juniormester
09. marts 2013 - 15:49 #11
Jo, det kan du godt - men pas nu på læsevenligheden og sørg for, at ingen tekster bliver mere end 600-650px i bredden  =)
Avatar billede mik28 Seniormester
09. marts 2013 - 19:14 #12
Hmmmmmm. Hvorfor virker det ikke?
Avatar billede olebole Juniormester
09. marts 2013 - 19:34 #13
Ahhh ... det er HEADER elementet, som selvfølgelig skal have display:table - og dermed lidt andre smårettelser  =)

header {
    display: table;
    width: 100%;
    height: 35px;
    padding: 10px 0;
    background: #ccc;
}
Avatar billede mik28 Seniormester
18. marts 2013 - 21:00 #14
Tak for hjælpen
Avatar billede olebole Juniormester
18. marts 2013 - 21:17 #15
Selvtak  =)
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