Avatar billede jannikf Nybegynder
08. juli 2005 - 16:01 Der er 15 kommentarer og
1 løsning

Position problemer

Jeg er forholdsvis ny med CSS og er nu løbet ind i et problem:

I forsøget på at omdanne min hjemmeside lavet i tabeller om til ren CSS kan jeg ikke finde ud af at lave layers der følger hinanden nedad siden. Som i kan se på linket så vil jeg gerne have at det skal se sådan ud:

(første post)
overskrift
[billede] Tekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst tesk

(anden post)
overskrift
[billede] Tekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst teskTekst tesk

osv., men når jeg prøver med henholdsvis at lægge de 3 layers ind i et relative layer så laver den helt rod i det. Som det er nu har jeg sat den relative layer der omgiver de andre til at være 100% i height, men det skulle jo gerne være sådan at den er fleksibel alt afhængig af hvor stor posten er.


Link: http://jblog.dk/index1.asp

Håber virkelig at I kan hjælpe mig, for jeg står sgu på bar bund.
Skriv lige hvis i ikke forstår problemet.
Avatar billede ysubhi Nybegynder
08. juli 2005 - 16:07 #1
jeg har lidt svært ved at forstå problemet. du kunne vel ikke lave en tegning? :)
Avatar billede jannikf Nybegynder
08. juli 2005 - 16:12 #2
Avatar billede jannikf Nybegynder
08. juli 2005 - 16:16 #3
Avatar billede roenving Novice
08. juli 2005 - 16:17 #4
Ren css ?-)

-- det ser ud til, at du bare skal benytte tabeller, som er det html-element, som kan præcis det, du ønsker !-)

-- og jeg har også set en masse, som totalt har misforstået css, og begynder at snakke om tabeller kontra css, hvilket slet ikke giver mening, fordi tabeller er et af de html-elementer, man kan benytte sig af, mens css er en mulighed for at style html-elementer, deriblandt tabeller ...

-- en analogi kunne være at udskifte bilen med autolak, når man skulle i byen !o]
Avatar billede jannikf Nybegynder
08. juli 2005 - 16:21 #5
Jamen, efter hvad jeg har hørt på adskillige sider, så er det fremtiden at skifte sine tabeller ud med layers og dermed sikre en langt større frihed:

http://webmaster.hephey.dk/guide/45/
http://www.devarticles.com/c/a/Web-Style-Sheets/Designing-Web-Pages-without-http://csszengarden.com/ (nok den største fortaler for at skifte sine tabeller ud)
Avatar billede jannikf Nybegynder
08. juli 2005 - 16:22 #6
Avatar billede roenving Novice
08. juli 2005 - 16:30 #7
Ja, men uanset havd, så anbefaler w3c at du til den slags opgaver benytter det element, som de fastholder er velegnet til det: tabellen !-)

-- det er ikke svært at forstå, at en hel del har jublet, da der kom andre muligheder for at styre designet end tabeller, for der har tidligere været brugt nogle vilde tabel-helveder med tabeller nestet i 17 lag, hvor en hulens af cellerne blev spændt ud af spacer.gif'fer ...

Men har man en opgave, som kræver, at man holder elementer ved siden af hinanden synkroniseret i højden, er det langt det nemmeste at benytte sig af tabeller ...

-- og så lagde jeg mærke til den underlighed, at du har angivet flere elementer med samme id, hvilket jo er klart ulovligt, selvom browsere, som kan fortolke old-html jo aldrig vil brokke sig !o]
Avatar billede roenving Novice
08. juli 2005 - 16:34 #8
-- men du kan vel egentlig også:

<div style="position:relative;width:300px;border:1px dotted red;padding:0;">
  <div style="font-size:18px;">Overskrift</div>
  <img src="../billede.jpg" style="width:100px;height:100px;border:0;margin:-3;float:left;">
  <div style="float:left;width:198px;border:1px dotted green;">
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
    tekst tekst<br>
  </div>
</div>
Avatar billede jannikf Nybegynder
08. juli 2005 - 16:46 #9
Ja det var præcis det jeg efterspurgte. Mht. brugen af tables, ja så ved jeg godt at dette problem kunne løses lettere med dem, men jeg har sat mig for kun af bruge CSS. At det er "ulovligt" at anvende det samme id på flere elementer er helt klart noget jeg vil se nærmere på. Jeg er stadig ret ny i det. Skal man så benytte class i stedet for? Og hvordan ser den så ud i CSS, når nu id ser sådan ud:

#id {
position: absolute;
}

Men indryk lige et svar så du kan få dine point. Jeg siger mange tak.
Avatar billede roenving Novice
08. juli 2005 - 16:56 #10
-- men det er en misforståelse, at man ikke kan bruge css sammen med tables !-)

F.eks. ser koden til at sørge for, at man kontrollerer celle-borders således ud:

table#minTabel{border:0;border-colaapse;}
#minTabel td{margin:0;border: 2px inset red;padding:3px;}

-- og den sidste ser sådan ud:

.className{}

-- iøvrigt tror jeg nok, at du i så høj grad som muligt bør undgå absolut positionerede elementer, da det, at de ikke optager plads, har en tendens til at skulle kræve mærkværdige hacks ...

-- els velbekomme '-)
Avatar billede jannikf Nybegynder
08. juli 2005 - 16:59 #11
Ok. Jamen så fik jeg det på plads. Jeg siger endnu en gang tak. Sgu dejligt med så hurtige problemløsninger.
Avatar billede roenving Novice
08. juli 2005 - 16:59 #12
Hov ...

#minTabel{border:0;border-collapse;}
Avatar billede roenving Novice
08. juli 2005 - 16:59 #13
Gaab ...

#minTabel{border:0;border-collapse:collapse;}

-- og tak for point ;~}
Avatar billede olebole Juniormester
08. juli 2005 - 21:34 #14
<ole>

jannikf >> men det virker ikke, somom det gik op for dig, at det at bruge divs i stedet for tabeller resulterer i dårligere kode, end hvis du bruger tabeller.
Lytter du til de tutorials, der citerer hinanden for at mene, tabeller principielt er noget skidt, lytter du til folk, der ikke har forstand på HTML/CSS. Det er en komplet misforståelse, der helt og aldeles mangler begavet argumenter - og som er i rygende modstrid med W3C.

http://webmaster.hephey.dk/guide/45/ er et fortrinligt eksempel på en forvrøvlet tutorial, fyldt med misforståelser og fejl.
devarticles.com's tabel-o-fobi artikler orker jeg ikke at lede efter, men det skulle undre, om de var mere korrekte  :)




/mvh
</bole>
Avatar billede jannikf Nybegynder
08. juli 2005 - 21:41 #15
OK, jamen det kunne være at jeg skulle bruge at tabeller til de mere indviklede ting så. Tror jeg faktisk at jeg gør.
Avatar billede olebole Juniormester
09. juli 2005 - 15:15 #16
- i hvert fald er det en rigtig god idé at bruge tabeller, hvor du skal bruge søjler med ens højde.

At bruge tabeller, som det blev gjort op gennem 90'erne, hvor der kun var begrænsede muligheder for at style elementer med CSS, er til gengæld ikke ønskværdigt. De store, nestede tabelhelveder, der blev hold på plads af bunker af transparente giffer, er det W3C advarer imod.
Fornuftig brug af tabeller - hvor kun dette element har de nødvendige, medfødte egenskaber til løsning af den pågældende opgave - er det helt i orden at bruge dem ;o)
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