Fylle hel celle med bakgrunnsbilde?

8. november 2011

Jobber med en hjemmeside i dreamweaver CS5.5 hvor jeg har delt inn indexen i 5 deler. Når jeg prøver å endre background image på en av cellene gjennom Page Properties blir bildet jeg velger mindre enn cellen og midtstilt, uansett om bildet er i rett størrelse.. Hvordan får jeg fylt hele cellen med bildet? Må nesten ha det som bakgrunnsbilde ettersom at jeg skal på med tekst over.

Det går såvidt jeg vet ikke ann å skrivetekst over vanlige bilder i dreamweaver?

Altså en slags stretch/fill funksjon til bakgrunnsbilde i en enkelt celle jeg trenger hjelp til..

Sist endret av Teddybe4r; 8. november 2011 kl. 20:38.

drittunge

3.238 1.767

8. november 2011

Du kan jo gi cellen en id og sette det som bakgrunnsbilde med CSS. Jeg regner med det er padding i tabellen også, så du må fjerne den i id-en.
Edit: Hvis det er flere celler i tabellen du skal ha bakgrunnsbildet i, så lag en class og legg den til i de cellene som skal ha bildet som bakgrunn.

Sist endret av drittunge; 8. november 2011 kl. 20:58.

Butterfly

Evil Panda

551 218

8. november 2011

CSS vil vel se ca. sånn her ut:

Kode

#id{
     background-image:url("bildenavn.jpg");
}

i html'en må du da ha

Kode

...
<td id="unikID">
...

på den cellen som skal ha "bildenavn.jpg" som bakgrunnsbilde.

drittunge

3.238 1.767

8. november 2011

Det blir ikke "background-image", men bare "background". Bortsett fra det er det riktig, selv om det er en fordel å si om det skal repeteres eller ikke. Man burde uansett definere om den skal repeteres alle veier, langs x-aksen, langs y-aksen eller ikke i det hele tatt. Dette gjøres med enten "repeat-x", "repeat-y" eller "no-repeat". Det repeteres i alle retninger fra før av, så det blir egentlig bare unødvendig å definere.

Hvis du laster opp koden her burde det ikke være umulig å få fikset det hvis du sier hvordan mappe-strukturen er osv. og litt mer detaljert hva du hadde tenkt.

Edit: Innlegg nr 3000!

Sist endret av drittunge; 8. november 2011 kl. 21:15.

Teddybe4r

Trådstarter

448 102

8. november 2011

Litt Bedre Forklart:
Har enkelt og greit laget en index i photoshop med en menytopplinje. Oppgaven går ut på å se for seg at man skal lage en side som skal sendes til arbeidsgiver. Jeg har delt inn menyen i tre slices, så er alt det hvite under en stor slice. Dette er den cella jeg visker ut innholdet fra når jeg skal lage et nytt htmldokument til for eksempel "Informasjon"linken i menyen, så jeg kan fylle på med ny tekst. Da kommer problemet mitt med å beholde splattereffekten min i bakgrunn... Laster jeg opp cella i JPG form midtstilles bare bilde i liten størrelse, å prøver jeg å lime inn kun splatterlaget fra photoshop så legger det seg helt til venstre i nettleservinduet i stede for å legge seg på rett linje med menyen.

Forklarte jeg dårlig så får dere bare spørre mer, å hvis dere skal forklare meg hva jeg skal gjøre så må dere huske at jeg er så si helt blank på område..

Sist endret av Teddybe4r; 8. november 2011 kl. 21:45.

Butterfly

Evil Panda

551 218

8. november 2011

Er usikker på hvilke html-tagger dreamweaver bruker for å opprette "slices", men antar det er tables. Da vil det når du åpner "index.html" i notisblokk være flere <td> tagger, èn av disse definerer området hvor du vil ha "splatter"-bildet. Så hvis du identifiserer denne og endrer den fra: <td> til <td id="unikID"> , så kan du skrive inn CSS koden jeg skrev tidligere i tråden i Dreamweaver (mener å huske at Dreamweaver støtter direkte css koding).

...eller du kan laste opp koden her så blir det lettere å hjelpe deg.

Edit: nå skal det sies at jeg ikke har brukt DW på mange år så det kan jo godt hende det er en lettere måte å gjøre det her på, men har ikke DW selv så kan ikke hjelpe deg med det.

Sist endret av Butterfly; 8. november 2011 kl. 22:04.

Teddybe4r

Trådstarter

448 102

8. november 2011

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/Informasjon_01.png" width="533" height="159" alt=""></td>
<td>
<img src="images/Informasjon_02.png" width="274" height="159" alt=""></td>
<td>
<img src="images/Informasjon_03.png" width="217" height="159" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Informasjon_04.png" width="1024" height="609" alt=""></td>
</tr>
</table>

</body>

Slik ser bodyen min ut. Informasjon_04 er bildet som må bort så jeg kan skrive en tekst i cella, men bildet må legges tilbake igjen som bakgrunn å se akkurat lik ut. BildeURL'er kan jeg sette inn selv, men om dere vil så heter bildet som skal inn som bakgrunn "background.jpg"

Butterfly

Evil Panda

551 218

9. november 2011

Sitat av Teddybe4r

Vis hele sitatet...

Problemet ditt er at du har satt bildene som "innhold" i tabellen istedenfor som bakgrunn, så når du setter inn tekst vil denne naturlig nok forsyve bildene.

Dette er langt fra den beste måten å gjøre det på, men hvis du ikke har planer om å sette deg inn i html og css, så kan du bruke dette:

Kode

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Htmlindex.psd) -->
<table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="background-image:url('Informasjon_01.png');"width="533px"height="159px"></td>
        <td style="background-image:url('Informasjon_02.png');"width="274px"height="159px"></td>
        <td style="background-image:url('Informasjon_03.png');"width="217px"height="159px"></td>
    </tr>
    <tr>
        <td style="background-image:url('Informasjon_04.png');"width="1024px"height="609px" colspan="3"></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>

Butterfly

Evil Panda

551 218

12. november 2011

BTW: Ble det noe ordnings på det hele?

atomet

Reklamehore

6.439 2.363

12. november 2011

du gjør deg selv en kjempetjeneste hvis du dropper tabeller og heller bruker divs/css til layouten, det blir vanvittig mye enklere i lengden

Teddybe4r

Trådstarter

448 102

17. november 2011

Det ble ordnings til slutt, men desverre ikke ved hjelp av koden ovenfor. Fikk hjelp av lærer, å det var rett og slett av bakgrunnsbilde mitt var hvitt i store deler av kantene, så jeg fikk ikke til å se at bildet ble plassert opp i venstre hjørne istede for i cellen jeg skulle ha det i. Fikk sett det når jeg skiftet farge på bakgrunnsbildet, å fikk straks fylt inn bildet som background i cella istede.
Er forsatt ikke så klok på dette, men <td height="654" colspan="6" align="center" valign="top" background="background.jpg"> ble løsningen i allefall.

Judaz

721 313

17. november 2011

Sitat av Teddybe4r

Vis hele sitatet...

Det fungerer nok, men er ikke noen god måte å gjøre det på. Jeg er ganske sikker på¨at Dreamweaver støtter å legge all formatering i css, formateringer av typen "height=" og "background=" i html-tagen er ganske utdatert.

▼ ... noen uker senere ... ▼

cmoen11

Utvikler

507 174

7. desember 2011

Du gir deg selv en fordel når du IKKE bruker photoshop eller illustrator til å lage sidene dine.