Bilder och text bredvid varandra

En hemsida blir mer levande och lättare om den har mycket bilder i sig och inte bara text. Därför är det bra att lägga in bilder lite här och var, och överallt på hemsidan. Växla gärna på platser också så att de ibland ligger till vänster och ibland till höger. Små bilder, avlånga bilder, breda bilder, alla sorters möjliga tänkbara bilder.

För att placera dessa bilder så är det ofta enklast att använda sig av tabeller för att lättare kunna kontrollera att de hamnar på rätt plats och att det ska se lika ut i alla webbläsare. Det är nämligen så här (till alla webbutvecklares fasa) att alla webbläsare gör lite olika saker och tolkar den bakomliggande koden lite olika och därför kan en hemsida se helt olika ut i Internet Explorer 7 jämfört med Internet Explorer 8. Har man Internet Explorer 6 så är det hög tid att uppgradera den. Internet har ändrat sig så mycket över åren att den klarar inte riktigt av Internet så som det ser ut idag. Sen har vi Firefox, Safari, Chrome och Opera och ett gäng till.
De vanligaste webbläsarna just nu är Internet Explorer 8 (men 9:an är på stark frammarsch) och Firefox. Där kan man säga att det är Firefox som kör hårt på HTML-standard och Internet Explorer kan hitta på lite egna saker ibland. Men om man placerar bilder och text i tabeller så brukar resultatet blir lika i båda.

Enklast brukar vara att göra flera små tabeller och lägga in dem där bilden kommer.
När det är dags för bild så infoga en tabell med 3 kolumner och 1 rad. Den kolumn som är i mitten ska bara vara till för att få ett lagom utrymme mellan text och bild. Sen växlar du mellan att ha bilden till vänster eller till höger.

Nedan är ett exempel på text och bild där det ligger en liten grå ram på tabellcellerna så du ser hur tabellerna 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.



Nu kommer samma exempeltext som ovanstående men utan ramen runt cellerna så att du ser mer tydligt hur det smälter ihop. Det här är ett jättebra trick för att få hjärnan och ögat att orka läsa mycket text. Om det inte finns några bilder och man kommer till en sida med bara text, då blir hjärnan direkt trött och man klickar vidare till nästa sida utan att ha läst någonting. Om det finns någon bild så kan det väcka en nyfikenhet och ögat blir glad och vill vara kvar och vips så kan man ha läst texten också.


 

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.