Bilder og tekst ved siden av hverandre

Hjemmesiden blir mer levende og "lettere" hvis den inneholder mange bilder og ikke bare tekst. Derfor er det lurt å legge inn bilder her og der på hjemmesiden. Det er også bra å variere plasseringen slik at bildene av og til ligger på venstre side, og av og til på høyre side. Små bilder, avlange bilder, brede bilder – alle slags bilder.

Når du skal plassere bildene, er det ofte enklest å bruke tabeller slik at du kan kontrollere bildenes plassering og at resultatet ser like bra ut i alle nettlesere. Det er nemlig slik at alle nettlesere gjør forskjellige ting og tolker koden i bakgrunnen forskjellig (til alle nettutvikleres fortvilelse). Derfor kan én hjemmeside få helt forskjellig utseende i Internet Explorer 7 og i Internet Explorer 8. Hvis du har Internet Explorer 6, er det på tide å oppgradere! Det har skjedd så mange forandringer på Internett de siste årene at den versjonen ikke lenger kan håndtere nettet slik det ser ut i dag. Dessuten finnes Firefox, Safari, Chrome og Opera, og enda noen til.
De vanligste nettleserne akkurat nå er Internet Explorer 8 (men versjon 9 er også på frammarsj) og Firefox. Om disse finnes det å si at Firefox alltid bruker HTML-standard, mens Internet Explorer finner på egne løsninger innimellom. Men hvis du legger bilder og tekst i tabeller, pleier resultatet bli like bra i begge nettleserne.

Den enkleste framgangsmåten er vanligvis å lage flere små tabeller og legge dem inn der bildet skal være. Når du skal plassere bildet, setter du inn en tabell med 3 kolonner og 1 rad. Den midterste kolonnen er bare til for at det skal bli nok plass mellom teksten og bildet. Og så er det som sagt penest å plassere noen bilder på venstre og noen bilder på høyre side.

Under ser du et eksempel på tekst og bilde, der vi har satt en tynn grå ramme rundt tabellcellene, slik at det skal være enkelt å se hvordan tabellene ligger. 


 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut eros sit amet neque egestas vehicula quis eu lacus. Vivamus quam magna, ornare sit amet feugiat in, eleifend non dui. Suspendisse potenti. Pellentesque ut tellus no eros quis rhoncus eu tortor imperdiet commodo.

  Maecenas sit amet dolor leo. Pellentesque vel nibh nulla, at mollis neque. Nulla sem augue, hendrerit vitae molestie rhoncus, malesuada sed ante. Proin orci elit, vestibulum tempus luctus eget, tempor sed tellus. Mauris placerat est non purus porta feugiat. Nunc sapien leo, mattis quis rhoncus eu, hendrerit non mi. Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat tempor quis. Sed aliquet fringilla eros, a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant morbi sit tristique senectus et netus et malesuada fames tempus amet sollicitudin ac turpis egestas malesuada.
Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat temp sollicitudin tempor quis habitant morbi tristique senectus.
Sed aliquet fringilla sed eros , a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant netus morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel augue eleifend est tempus velit sollicitudin. Curabitur porttitor cursus sem sit sagittis purus porta feugiat.  

Etiam porta auctor egestas. Aliquam id quam et justo iaculis porta. Integer non ante lobortis sem feugiat tempor. Sed vehicula lacus ut ligula pellentesque vitae hendrerit ipsum porta. Fusce fringilla lorem quis mauris pharetra imperdiet. Aenean sit amet justo ante, in purus consectetur metus. Donec in ligula sit quis ligula mattis faucibus  praesent id lobortis magna.



Her kommer den samme eksempelteksten en gang til, men uten ramme rundt cellene, slik at du ser hvordan teksten smelter sammen. Dette er et kjempebra triks man kan bruke for at hjernen og øynene skal orke å lese mye tekst. Hvis man skal lese sider helt uten bilder, som bare består av tekst, blir hjernen fort trøtt og man klikker videre til neste side uten å lese noenting. Hvis siden inneholder en blanding av tekst og bilder, kan det vekke leserens nysgjerrighet: øynene stimuleres på en annen måte, og vips så har han eller hun kanskje lest teksten også.


 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut eros sit amet neque egestas vehicula quis eu lacus. Vivamus quam magna, ornare sit amet feugiat in, eleifend non dui. Suspendisse potenti. Pellentesque ut tellus no eros quis rhoncus eu tortor imperdiet commodo.

  Maecenas sit amet dolor leo. Pellentesque vel nibh nulla, at mollis neque. Nulla sem augue, hendrerit vitae molestie rhoncus, malesuada sed ante. Proin orci elit, vestibulum tempus luctus eget, tempor sed tellus. Mauris placerat est non purus porta feugiat. Nunc sapien leo, mattis quis rhoncus eu, hendrerit non mi. Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat tempor quis. Sed aliquet fringilla eros, a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant morbi sit tristique senectus et netus et malesuada fames tempus amet sollicitudin ac turpis egestas malesuada.
Praesent id lobortis magna. Nam non velit at eros pellentesque pretium. Nunc vel lorem sit amet tortor imperdiet commodo eget ac velit. Morbi a arcu mi, in semper augue. In molestie congue nibh, a interdum erat temp sollicitudin tempor quis habitant morbi tristique senectus.
Sed aliquet fringilla sed eros , a vestibulum lorem aliquet at. Nam tellus nisi, venenatis ut bibendum sed, consectetur vel sapien. Pellentesque habitant netus morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel augue eleifend est tempus velit sollicitudin. Curabitur porttitor cursus sem sit sagittis purus porta feugiat.  

Etiam porta auctor egestas. Aliquam id quam et justo iaculis porta. Integer non ante lobortis sem feugiat tempor. Sed vehicula lacus ut ligula pellentesque vitae hendrerit ipsum porta. Fusce fringilla lorem quis mauris pharetra imperdiet. Aenean sit amet justo ante, in purus consectetur metus. Donec in ligula sit quis ligula mattis faucibus  praesent id lobortis magna.