byt lankar med html-skolan

Google gbghtml.se
index Bodytaggen Logotype Lowsrc Gimp Photoshop Table Picasa PicNic Bilder i Forum Videotaggen i HTML 5

Billigare än så här blir det inte. Beställ webbhotell här

 

 

 

 

 

 

Bilder som bakgrund i tabeller

Du kan använda bilder som bakgrunder även i tabeller. I nästa sekvens skall vi använda en bild som bakgrund i den vänstra kolumnen av en tabell plus i en meny på ovansidan. Vi använder även här bilder för att få det att fungera i Internet Explorer. Vad vi gör då är att använda photoshop eller paint shop pro för att göra en smalare bild. Bilden repeterar sig själv över hela cellen. Till den vänstra kolumnen(eller cellen) har vi använt en 120 pixels bred och 4 pixels hög bild och på den kört med "gradient tool"(i photoshop). Till menyn på ovansidan har vi använt en längre smal bild. Närmare 800 pixels bred och 4 pixels hög. Denna repeterar sig själv nedåt. Vi har använt "gradient tool" även på denna för att få ett lite tuffare utseende. Koden till denna tabell ser ut så här:

<table border="1" width="80%">
<tr><td colspan="2" background="top.jpg"><a href="http://www.drivrutiner.net"><img src="knapp1.gif" width="200" height="66" alt="knapp1" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp2.gif" width="200" height="66" alt="knapp 2" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp3.gif" width="200" height="66" alt="knapp 3" border="0" /></a><a href="http://www.drivrutiner.net"><img src="knapp4.gif" width="200" height="66" alt="knapp 4" border="0" /></a></td></tr>
<tr>
<td width="12%" background="left.jpg" valign="top"><a href="http://www.drivrutiner.net">&ouml;versta
l&auml;nken </a>
<br/>
<a href="http://www.gbghtml.se">HTML-skolan</a>
<br/>
<a href="http://www.webbgbg.se">Webbhotell</a>
<br/>
<a href="http://www.drivrutiner.net">Drivrutiner</a>
<br/>
<a href="http://www.drivrutiner.net/host/money/index.php">Inkomster</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/books/index.php">B&ouml;cker</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/antivirus.php">Antivirus</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/dlink.php">N&auml;tverk</a>
<br/>
<a href="http://www.drivrutiner.net/program/gratis.php">Gratis program</a>
<br/>
<a href="http://www.drivrutiner.net/program/download.php">Download</a>
<br/>
<a href="http://www.drivrutiner.net/program/bil/spel.php">Colin McRae</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/cfs.php">MS CFS</a>
<br/>
<a href="http://www.drivrutiner.net/program/flyg/red.php">Red Baron</a>
<br/>
<a href="http://www.drivrutiner.net/program/online/spel.php">Online spel</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/datorbygg/index.php">Bygg dator</a>
<br/>
<a href="http://www.drivrutiner.net/program/kontor/office/index.php">Officemallar</a>
<br/>
<a href="http://www.drivrutiner.net/drivrutiner/sok.php">Spr&aring;klexikon</a></td>
<td><img src="kodtabell.gif" width="601" height="768" alt="" /></td></tr>
</table>

I bodytaggen har jag nu använt en annan bild. Bodytaggen ser ut så här:

<body background="BirdsSAThumb.jpg"> . Du hämtar gratis bilder på http://www.atpm.com/

Kolla resultatet här

Som du ser har vi med width="80%" på tabellen gjort bredden till 80% av fönstret. I den vänstra kolumnen har vi skrivit width="12%" som background bilden left.jpg. Vi tittar på detta med bredd på celler i tabell på denna sidan. . Till knappar har jag använt en genomskinlig gif-bild som du enkelt fixar i photoshop.

Vi har även gjort bilden till bodytaggen större för att täcka hela sidan. Enklast gör du detta genom att öppna photoshop eller paint shop pro och göra bilden 1024x860 pixels stor. Texten ser lite underlig på vissa ställen. Exempelvis ett ä ser ut så här: &auml; . Detta för att göra bokstäverna synliga för alla webbläsare. Det är inte helt nödvändigt att var så här noga om sidan bara skall användas för enskilt bruk eller svenska besökare.

Prova att kopiera hela koden och lägg den mellan body-taggarna på din html-fil. Du kan själv ändra vilken bild du vill ha som bakgrund. Vill du använda dem som vi använder här så ladda gärna ner dem här>>> Prova dig gärna fram med olika bilder.

Detta med att använda bilder som bakgrund i tabeller går även att ordna med stylesheets. Vi går igenom stylesheets för tabell på denna sidan.

Du kan läsa lite mer om gradient tool på http://www.loriswebs.com

sxc.hu har bakgrundsbilder eller foton du kan ladda ner gratis

gratis bilder
stockvault.net

Gratis bilder i alla genrer

mayang.com free textures
ca 3400 gratis bakgrunder att ladda ner.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

eXTReMe Tracker