Avatar billede neoman Novice
22. maj 2007 - 00:47 Der er 7 kommentarer og
1 løsning

Positionere en div + nogle span i en celle

Jeg har en tabelcelle TD i hvilken jeg ønsker at vise en lille firkant samt et eller flere bogstaver.

Roenving har i spørgsmål http://www.eksperten.dk/spm/778979 været så venlig at vise mig hvordan jeg kan lave en lille firkant:

<div id ="div25" runat="server" style="width:8px;height:8px;background:#17f;line-height:8px;font-size:0px;float:left; "></div>

Uden float:left, så sidder den midt i cellen, og alt hvad jeg tilføjer derefter er under den.

Med float left, så farer den hen til cellens øverste venstre hjørne.

Jeg ønsker, at den skal være i centrum af cellen, i de tilfælde hvor jeg ikke tilføjer flere elementer.

I de tilfælde hvor jeg tilføjer et eller flere span, så ønsker jeg at alle elementerne skal være på en linje, og centreret både vertikalt og horizontalt.
Span-elementerne indeholder hvert et stort eller et lille bogstav, og der kan være 0,1,2 eller 3 span-elementer.  (Bogstaverne kan have forskellig farve og/eller tekst-decoration, og derfor sidder hvert bogstav i sit eget span element).


Jeg har nu bakset med det i 2 timer, og uanset hvad jeg laver af postion, margin, blabla, så kan jeg ikke få det på en linje.

En sidste detalje : tabelcellen har ikke noget fast bredde, ej heller højde, men det kunnne få en fast højde, hvis det er havd der skal til.

Bemærk venligst, at jeg laver det på denne måde, fordi jeg ikke ved bedre. Hvis det er noget som skal strikkes sammen med diver, eller andre elementer - sig frem, jeg famler mig frem i blinde her.


Heeeeeeelp :-)
Avatar billede roenving Novice
22. maj 2007 - 00:54 #1
Hvad skal du bruge det til, for jeg er simpelthen ikke med på, hvad det skal ende med ?-)
Avatar billede neoman Novice
22. maj 2007 - 01:14 #2
Det er et element i en aktivitetsplan - datoer udaf x-aksen, medarbejdere nedad -y-aksen, og en celle viser vha bogstaver de forskellige aktiviteter som medarbejderen er involveret i, på den pågældende dag.

Min firkant er til at vise om man er på eller ej den vagt som aktuelt er under behandling + nogle andre ting som er lidt lange at udrede her:). Tænk på den som en checkbox med 3 tilstande.

Så, med x som står for min firkant, og f.eks. AbC som mine bogstaver, så vil jeg gerne se :
xAbC i en linje og centreret i min tabelcelle. Lige nu kan jeg enten få x centreret og AbC skrevet UNDER x'et, eller x'et er i cellens øverste venstre hjørne.

Fik leget lidt med position:relative og top/left udtrykt i procent, men det er lidt trælst fordi jeg har et varierede antal bogstaver.
Avatar billede roenving Novice
22. maj 2007 - 01:24 #3
Hrm, så tror jeg, at det nemmeste netop vil være et image ...

-- inline-elementer kan umiddelbart centreres, det kan block-level-elementer ikke, heller ikke hvis de floates, til gengæld kan inline-elementer ikke tildeles en størrelse uafhængigt af deres indhold ...

-- men du kan også skabe et inline-element med en 'kunstigt' defineret størrelse, f.eks.

<span style="font-size:2px;line-height:1em;padding:3px;background:#17f;">&nbsp;</span>

-- prøv selv at eksperimentere med font-size og padding, til du får det ønskede resultat (evt. skal line-height fjernes eller også inddrages i eksperimenterne !-)
Avatar billede roenving Novice
22. maj 2007 - 01:25 #4
Hrm, der skulle selvfølgelig stå:

-- inline-elementer kan umiddelbart centreres, det kan block-level-elementer ikke, hvis de skal stå sammen med andre elementer, heller ikke hvis de floates, til gengæld kan inline-elementer ikke tildeles en størrelse uafhængigt af deres indhold ...
Avatar billede neoman Novice
22. maj 2007 - 01:33 #5
Jeg havde faktisk et image derinde for en 14 dage siden, og har siden vandret hen over en button, og nu til din div , hehe:) Men jo, jeg har stadig mine images liggende, så kunne bruge dem - troede blot det ville være mest effektivt at  lave noget i css. Nu prøver jeg lige dit span element, for jeg er umiddelbart ikke helt sikker på hvad alle ordene  betyder her i denne kontekst.

I'll be back:)
Avatar billede neoman Novice
22. maj 2007 - 01:52 #6
Ok - tak for det. Løsningen blev :
  <span style="font-size:8px;line-height:1em;padding-left:4px;background:#17f;">                  &nbsp</span>

for det var den eneste måde jeg kunne få det hele i een linje.

Læg venligst et svar.
Avatar billede roenving Novice
22. maj 2007 - 01:59 #7
Velbekomme '-)
Avatar billede roenving Novice
22. maj 2007 - 13:07 #8
-- og tak for point ;~}
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