tabellcelle vil ikke forsvinne

[ojorus]

Hei! Noen som kan hjelpe meg med dette?

 

Jeg har en tabell med én rad, og tre celler. Den midterste cellen har en gitt innhold med en gitt bredde (900px), og de to andre cellene på hver side har ikke noe innhold, kun en bakgrunnsfarge.

 

Når en bruker har et browservindu oppe på mer enn 900 px i bredden, fungerer alt som det skal, men dersom browservinduet krympes til under 900px i bredden, så synes fortsatt et par pixler av den venstre tabellcellen, uansett hvor smalt browservinduet er.

 

Er dette mulig å unngå?

 

Jeg har lagt ut eksempel her: http://www.ojorus.net/test.html

 

ojorus

[semafor]

Browsere bruker en algoritme når de beregner høyde og bredde på celler i en tabell. Jeg går ut i fra de fleste nettlesere følger spesifikasjonen.

 

Det er ikke lett å vite hva som skal skje, men det ser ut til at bredden på en celle aldri kan bli 0 når den beregnes automatisk av nettleser.

 

--

 

1) Hvorfor bruker du tabeller til en slik layout? Tabeller er kun for tabulære data.

2) Hvorfor skal de to ytterste cellene forsvinne?

[ojorus]

Browsere bruker en algoritme når de beregner høyde og bredde på celler i en tabell. Jeg går ut i fra de fleste nettlesere følger spesifikasjonen.

 

Det er ikke lett å vite hva som skal skje, men det ser ut til at bredden på en celle aldri kan bli 0 når den beregnes automatisk av nettleser.

 

--

 

1) Hvorfor bruker du tabeller til en slik layout? Tabeller er kun for tabulære data.

2) Hvorfor skal de to ytterste cellene forsvinne?

 

Takk for svar. For å ta dine to punkter først:

1) Det er sikkert mulig å gjøre dette på en annen måte enn med tabeller. (div-er?) Er veldig interessert i konkrete eksempler på alternative måter å gjøre det på

2) Jeg lager en webside hvor hovedinnholdet skal midtstilles (turkis felt, 900px), og hvor det skal ligge noe grafikk på hver side (rødt felt). Grafikken på hver side skal kun synes når nettleseren er bredere enn 900px. Grunnen til at det er dumt at tabellcellene ikke forsvinner, er rett og slett at det vil se dumt ut når nettleresen feks er 800px bred, og noe av ytterste tabellcellen synes, når ikke hele hovedinnholdet synes.

 

Er som sagt veldig interessert i alternative løsninger.

[semafor]

1) Les før du poster har noen gode eksempler. Les litt rundt.

2) Hvorfor tar du hensyn til at nettleseren blir mindre enn 900px? Som oftest er den større enn 1000px, og hvem forandrer størrelsen på nettleseren uten å godta litt svinn?

 

Ting det er mye viktigere å bekymre seg for:

• Er siden min semantisk?
  
• Er siden fortsatt brukervennlig når besøkende øker skriftstørrelsen i nettleseren?
  
• Er siden lett å navigere?
  
• Er siden lett å lese?
  

[ojorus]

1) Les før du poster har noen gode eksempler. Les litt rundt.

2) Hvorfor tar du hensyn til at nettleseren blir mindre enn 900px? Som oftest er den større enn 1000px, og hvem forandrer størrelsen på nettleseren uten å godta litt svinn?

 

Ting det er mye viktigere å bekymre seg for:

• Er siden min semantisk?
  
• Er siden fortsatt brukervennlig når besøkende øker skriftstørrelsen i nettleseren?
  
• Er siden lett å navigere?
  
• Er siden lett å lese?
  

 

1) Bra eksempler! Skal kikke litt mer på dem, selv om ingen av dem dekket akkurat mitt case.

 

2) Det er riktig at de fleste brukere har bredere skjerm enn 900px. Men jeg forenklet casen min noe, for å fokusere på det tekniske problemet. Mitt reelle case ser mer slik ut: http://www.ojorus.net/test4.html, med fem kollonner, hvorav midtkollonnen er 1000px, de to utenfor der er max 100px hver, og resten vises med en én px repetitiv bakgrunn.

I denne versjonen oppstår problemet når browservinduet er mindre enn 1200px, noe som ofte er tilfelle. Da ligger det en én px stripe helt til venstre som ikke skal være der. (og en én px stripe til høyre, når skjermen er mellom 1000 og 1200 px)

 

Nå kan det godt hende at det faktisk ikke er mulig å løse dette problemet med å bruke tabeller, som jeg bruker akkurat nå. Håper det er mulig å få til dette på annet vis. Skal kikke litt mer på det, men hvis noen har en konkret løsning på denne spesifikke problemstillingen, er jeg glad for det :-)

 

ojorus

[Skagen]

Bruk denne metoden

 

<html>
<head>
</head>
<body>

<div style="margin-left:auto; margin-right:auto; width:900px; background:#808080; padding:1em;">Her putter du innholdet ditt</div>

</body>
</html>

 

Det beste her hadde også vært å lage en CSS for å håndtere presentasjonen. F.eks:

 

#bodyContent {
margin-left: auto;
margin-right: auto;
width: 900px;
background: #808080;
padding: 1em;
}

 

Også gjør du det heller slik:

 

<div ID="bodyContent">Her putter du innholdet</div>

Endret 8. april 2008 av Skagen

[semafor]

1) Bra eksempler! Skal kikke litt mer på dem, selv om ingen av dem dekket akkurat mitt case.

Det gjorde de. Kikk mer på dem.

 

2) Det er riktig at de fleste brukere har bredere skjerm enn 900px. Men jeg forenklet casen min noe, for å fokusere på det tekniske problemet. Mitt reelle case ser mer slik ut: http://www.ojorus.net/test4.html, med fem kollonner, hvorav midtkollonnen er 1000px, de to utenfor der er max 100px hver, og resten vises med en én px repetitiv bakgrunn.

I denne versjonen oppstår problemet når browservinduet er mindre enn 1200px, noe som ofte er tilfelle. Da ligger det en én px stripe helt til venstre som ikke skal være der. (og en én px stripe til høyre, når skjermen er mellom 1000 og 1200 px)

Fem kolonner? Det er tre kolonner. Og så er det du som må tilpasse deg. Enten bruker du flytende layout, eller fixed.

 

Den 1px må du ikke henge deg opp i. Den forsvinner når du bruker skikkelig HTML/CSS.

[ojorus]

Kan ikke si jeg fant et eksakt eksempel på sidene du nevnte, med sentrert del med fast størrelse, og flytende celler på hver side, og totalbredde 100%. Men skriv gjerne opp lenka hvis du mener jeg tar feil :-)

 

Det er fem kollonner ja: http://www.ojorus.net/test5.html (må ha bredde på over 1200 for å se de to ytterste kolonnene)

De to ytterste kollonnene er riktignok tomme for innhold; har kun en bakgrunn.

 

Jeg er veldig nær å få til det jeg ønsker å få til nå; det eneste problemet er altså den én px streken fra ytterste kolonnen som også ligger der, selv om skjermen er mindre enn 1200.

 

Uansett, jeg skal vel finne ut av det.. takker for innsatsen :-)

Skal poste løsningen her om jeg finner den.

[semafor]

Du skal trekke fra de to ytterste kolonnene.

De to ytterste kollonnene er riktignok tomme for innhold; har kun en bakgrunn.

Eksakt. Tomme for innhold, ikke celler. Ikke noe annet enn bodyelementet.

 

Jeg ville lest mer og endre stilling til tabeller ASAP.

[ojorus]

Eksakt. Tomme for innhold, ikke celler. Ikke noe annet enn bodyelementet.

 

Jeg ville lest mer og endre stilling til tabeller ASAP.

 

Vel, de er ikke helt tomme, for å være presis. De inneholder en space (nbsp;) for at tabelcellen (med bakgrunn) skal vises i alle browsere. Uten spacen ville bakgrunnen nemlig ikke vises i en del browsere.

 

Personlig har jeg ikke så mye i mot å bruke tabeller på denne måten, men hvis jeg ikke får til det jeg vil med tabeller, får jeg vel heller tenke nytt :-)

[Akerbak]

Vel, de er ikke helt tomme, for å være presis. De inneholder en space (nbsp;) for at tabelcellen (med bakgrunn) skal vises i alle browsere. Uten spacen ville bakgrunnen nemlig ikke vises i en del browsere.

 

Personlig har jeg ikke så mye i mot å bruke tabeller på denne måten, men hvis jeg ikke får til det jeg vil med tabeller, får jeg vel heller tenke nytt :-)

 

Og der har du problemet du nevner tidligere med at kolonnene på siden som kun inneholder bakgrunnsfarge ikke forsvinner helt når browservinduet forminskes... Når du har hardkodet inn en space vil den være "synlig" uansett hvor stort/lite browservinduet er.

 

Og jeg må henge meg på semafor og de andre her; dropp tabellene som strukturelement, så slipper du dette problemet i det hele tatt! Ta deg en ettermiddag, les litt på HTMLDog og W3Schools, eller rot litt i dette forumet, så lærer du deg kjapt det du trenger av HTML og CSS for å løse dette Det er verdt det!

[ojorus]

Hei igjen;

har kikket en del rundt på generell side-layout nå, og det er ingen tvil om at layout ved bruk av tabeller er UT! :-)

 

Dette eksemplet er laget utelukkende med div-er og css, ingen tabeller: http://www.ojorus.net/test7.html (Se kildekode). Eksempelet gjør akkurat det jeg ønsker å få til, MED ETT UNNTAK: Hvis man resizer browservinduet, vil jeg at den horizontale scrollbaren skal vises kun når det er hovedinnholdet som er synlig, med andre ord akkurat i det begge de røde bildene er forsvunnet ut av skjermen, og ikke før!

 

Det må jo være mulig å trikse til css-en slik at dette er mulig å få til, men hvordan får man det til, helt konkret?

 

EDIT: har klart å få dette til nå i Internet Explerer: http://www.ojorus.net/test8.html, men scrollbaren dukker fremdeles opp i firefox og opera. Triks for å få til det samme her som i IE?

 

ojorus

Endret 15. april 2008 av ojorus