[next][previous][contents]

12. Tables till mer avancerad layout

Efter att ha klippt upp en bild i atomer ska man förstås sedan klippa ihop den igen, bästa verktyget för det här är att kunna hantera sina tabeller ordentligt. Jag ger några tips genom att gå igenom hur jag klipper ihop bilden som användes i förra kapitlet.

12.1 Ta kontroll över din tabell

Det tar en stund att lära sig hantera tables effektivt, och det är främsta anledningen till att jag föredrar att skriva sidorna helt för hand, då har man kontroll på vad som händer. Viktigast för att få allt att fungera är att man hela tiden använder BORDER=0 CELLPADDING=0 CELLSPACING=0, vill man använda tables för att klippa ihop bilder finns inte stort mycket mer alternativ.

12.2 Nesta tabeller

Att starta en ny tabell innan man avslutat den förra, alltså lägga dem inuti varandra, kallas att "nesta" dem. Ett smidigt sätt att få en kant runt sin text är t.ex. att nesta en vanlig tabell inuti en helsvart med CELLPADDING=2, den vanliga kommer att fylla upp den svarta förutom precis de två yttersta pixlarna vid varje kant. Irriterar man sig över att inte kunna använda marginaler i layout-tabellen kan man nesta en mer normal tabell inuti den större. Se dock upp med att nesta för många nivåer inuti varandra, aldrig mer än fyra, då garanterar man sig själv problem. Varken netscape eller explorer, och speciellt inte någon mer amatörmässig browser, är perfekt på att hantera tables. Diverse konstiga kollisioner kan uppkomma, och problemen ökar ju fler tabeller som ska interagera med varandra.

12.3 Klippa ihop bilden

Vi börjar med att plocka in bilderna i en enkel tabell. Eftersom menyknapparna är lika breda allihop fungerar det att bara avskilja dem med BR. Därefter passar vi på att fylla i bildstorlekarna, enligt nedan. Fortfarande gäller det som stod i avsnittet om tables, en cell ska antingen avslutas på samma rad som sin senaste bild, eller ha en BR i slutet.

<TABLE BORDER=3 BGCOLOR="#0a079b" CELLPADDING=3><TR>

<TD><IMG SRC="bilder-layout1.gif"></TD>

<TD VALIGN=TOP><IMG SRC="bilder-layout2.gif" WIDTH=336 HEIGHT=42><BR>
<IMG SRC="bilder-layout3.gif" WIDTH=336 HEIGHT=44><BR>
<IMG SRC="bilder-layout4.gif" WIDTH=336 HEIGHT=43><BR>
<IMG SRC="bilder-layout5.gif" WIDTH=336 HEIGHT=44></TD>

</TR></TABLE>



Nu fortsätter vi med att lägga till länkar, plita ihop JavaScript o.s.v. för att få bilden lite aktivare. Enligt nedan:

<SCRIPT LANGUAGE="Javascript">
<!--
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion); 

if (browser_name == "Netscape" && browser_version >= 3.0) { brow = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0) { brow = 'true'; }
else { brow = 'false'; }

function bytbild(status, location) {
        if (brow == 'true') {
        
                if (location == '2') name = "two";
                else if (location == '3') name = "three";
                else if (location == '4') name = "four";
                else if (location == '5') name = "five";
                
                if (status == "on") {
                        document.images['main'].src = "bilder-layout1-" + location + ".gif";
                        document.images[name].src = "bilder-layout" + location + "-on.gif";
                }
                else {
                        document.images['main'].src = "bilder-layout1.gif";
                        document.images[name].src = "bilder-layout" + location + ".gif";
                }

        }
}
//-->
</SCRIPT>

<TABLE BORDER=0 BGCOLOR="#0a079b" CELLPADDING=0 CELLSPACING=0><TR>

<TD><IMG SRC="bilder-layout1.gif" NAME="main"></TD>

<TD VALIGN=TOP><A HREF="HTML-HOWTO-12.html" OnMouseOver="bytbild('on','2'); return true;" OnMouseOut="bytbild('off','2'); return true;"><IMG SRC="bilder-layout2.gif" WIDTH=336 HEIGHT=42 BORDER=0 NAME="two"></A><BR>
<A HREF="HTML-HOWTO-12.html" OnMouseOver="bytbild('on','3'); return true;" OnMouseOut="bytbild('off','3'); return true;"><IMG SRC="bilder-layout3.gif" WIDTH=336 HEIGHT=44 BORDER=0 NAME="three"></A><BR>
<A HREF="HTML-HOWTO-12.html" OnMouseOver="bytbild('on','4'); return true;" OnMouseOut="bytbild('off','4'); return true;"><IMG SRC="bilder-layout4.gif" WIDTH=336 HEIGHT=43 BORDER=0 NAME="four"></A><BR>
<A HREF="HTML-HOWTO-12.html" OnMouseOver="bytbild('on','5'); return true;" OnMouseOut="bytbild('off','5'); return true;"><IMG SRC="bilder-layout5.gif" WIDTH=336 HEIGHT=44 BORDER=0 NAME="five"></A></TD>

</TR></TABLE>




Sådär fungerar det, saken ovan kan om man inte är alldeles för kräsen fungera på en förstasida, med lite fantasi blir det inte så svårt att t.e.x lägga en meny till vänster om en textyta eller vad man nu vill göra.

Tables kan förresten få för sig att expandera på bredden utan anledning, det löser man bäst genom att avsätta en rad längst upp eller ned i tabellen med tomma celler förutom fyllbilder, där man sätter alla WIDTH, det övertalar browsern om var skåpet ska stå (credits till IKEA för skåpet) och saker fungerar förhoppningsvis.

Får du problem i layouten, saknas nåt i det här avsnittet eller det är något som är för kryptiskt skrivet, hör gärna av dig.

[next][previous][contents]