plaatje over meerder cellen in tabel: uitlijning

[Joostvdheijden]

ik ben nu al een tijdje bezig met het aanpassen van mijn internetportfolio. Maar zoals vaken blijkt een simpele idee niet altijd even gemakkelijk te realiseren. Om niet al te veel uit te leggen: kijk eerst hier even. Mijn probleem is dan vermoedelijk ook meteen duidelijk: er zit een paar pixels ruimte tussen de verschillende rijen. Afmetingen van cellen e.d. heb ik in html gedefinieerd en komen overeen met die van de plaatjes. Het probleem moet dus bijna wel in de padding zitten of zo. Maar ik krijg het niet gevonden. Misschien zie ik iets over het hoofd of ken ik het gewoonweg niet. Ik weet wel iets van html en css maar heb me er nooit structureel in verdiept. Dus als iemand me kan helpen, graag!

Alvast bedankt!

Joost

 

[That Guy]

Het helft altijd als je eerst eventjes de HTML en CSS (hoewel deze wel *bijna* helemaal goed is)

Ohja, waarom stop je de afmetingen van de tabel ook niet in CSS? Dat is ook het hele idee ervan! Geef de td's gewoon class.



:thumb:

 

[csshunter]

img { 
    vertical-align: top;
}

(Toelichting: images in een element staan uit zichzelf op de basislijn, d.w.z. de lijn waar bv. de letter A op staat. Maar daarbij wordt rekening gehouden met letters met staartjes, zoals de p of de q. Dat scheelt een pixel of drie bij normale lettergrootte. Dit gaat ook zo, als er in een cel helemaal geen letters staan. Door voor de images expliciet te vermelden wat de verticale positie is, ben je er van af. - Ook als je een image als achtergrond-afbeelding in een cel stopt, heb je er geen last van.)

Met vriendelijke groet,
CSShunter

PS: Eigenlijk praat ik voor mijn beurt, want in de html zitten nog 23 Errors, 16 warnings. Sorry That Guy!

 

[That Guy]

csshunter heeft een goed punt, daar had ik nog niet eens aan gedacht.


Wat overgens ook kan is de plaatjes als background-image van de tabel-td's zetten. Maar ja, dan kan je net zo goed een <div> maken en daar het plaatje als gehele background-image inzetten, heb je ook geen problemen met spacings.

 

[csshunter]

Ja, weg met die tabel voor de opmaak! :d

• www.developerscorner.nl/csshunter/tests/test-joost.htm
• Breedte #content op 980px gezet (en tel.-img op aangepast): dan bij 1024*768px resolutie geen horizontale scrollbalk.

Blijft misschien over: het probleem dat veel tekst (of tekst-vergroting door de bezoeker) een hogere pagina oplevert, waarbij de tekst niet allemaal in de achtergrondfiguur gepropt kan worden. Wat er dan nodig is:

• een vast bovenstuk van de figuur,
• een vast onderstuk van de figuur,
• en een middendeel dat automatisch net zo hoog kan worden als een pagina nodig heeft.

De afbeelding moet dan toch opgeknipt worden, alleen niet in 9 onderdelen zoals nu, maar in 3 partjes. Voor het middenstuk kan een stukje geleend worden van vlak onder het Home-knopje aan de rechterkant, want daar kan er ongestraft een naadloos tussenstuk in gezet worden:

(Zo'n tussenstuk telefoon-midden.gif hoeft maar bv. 50px hoog te zijn; dit kan met css herhaald worden.)

Met vriendelijke groet,
CSShunter

 

[Joostvdheijden]

bedankt!

Hoi that guy en csshunter,

Bedankt voor de tips en opmerkingen allemaal. Dat mijn html en css niet helemaal goed zijn dat verbaast me niks. Zoals gezegd heb ik me nooit structureel verdiept in html en css. Trail and error is meer mijn benadering ;-) En zo af en toe eens advies aan anderen vragen doet dan wonderen, dat blijkt maar weer.

Plaatjes als achtegond in de cel, plaatje als geheel achter de tabel,... Misschien is de laatste suggestie van csshunter nog wel de beste, al verandert daarmee natuurlijk wel de verhouding van het onderwerp, de telefoon. Maar da’s meer een grafische benadering...

Ik ga er in ieder geval mee aan de slag! En ik zal jullie laten weten als ik een stapje verder ben. Of als ik weer vastloop ;-)

Bedankt!

Groeten,

Joost

 

[csshunter]

O, sorry! Had het plaatje telefoon-midden.gif niet geüpload.
Nu wel.