- bassdude
- Medlem ●
hej gubbar och gummor.
jag är en ny snubbe här på forumet och jag hoppas att ni kan hjälpa mig med ett problem jag stött på. jag håller på med hemsidor och har upptäckt att det skiljer sig som fan mellan pc och mac gällande bakgrunder som ska fylla ut till 100% i height.
på en pc blir det utfyllt hela vägen och på mac så blir det bara vitt där bakgrunden ska finnas. måttligt störande eftersom jag vill att sidorna ska funka på båda systemen.
nån hacker som har koll på html-kodning för detta får gärna höra av sig så att jag kan få en lösning på problemet!
ett exempel på hur det är kodat nu är:
<td height="100%" background="img/bg.jpg">
tacksam för snabbt svar...
Det har aldrig varit accepterad kod (W3C standard) att ge en cell höjd-attribut i procent, bara i pixlar:
http://www.w3schools.com/tags/tag_td.asp
En del webbläsare har dock varit bussiga att rendera koden ändå, andra har följt W3C specarna och renderar INTE koden.
Detta har absolut inget med PLATTFORMEN (Mac eller Win eller Solaris eller Unix eller va 17 som helst) att göra, utan om vilken WEBBLÄSARE det gäller.
tack. najs länk
men,
hur ska jag lösa problemet? jag vet att det där med procent aldrig varit en höjdare i webbläsare. jag hade några andra problem tidigare mellan IE och netscape men det var bara att grejsa till lite i kodningen så var saken klar.
är det samma sak här? finns det nån lösning på det bara man lägger till/tar bort lite kodning?
en sida måste väl kunna funka i alla webläsare och i alla upplösningar till sist, bara man kodar rätt... eller?
tack. najs länk
men,
hur ska jag lösa problemet? jag vet att det där med procent aldrig varit en höjdare i webbläsare. jag hade några andra problem tidigare mellan IE och netscape men det var bara att grejsa till lite i kodningen så var saken klar.
är det samma sak här? finns det nån lösning på det bara man lägger till/tar bort lite kodning?
en sida måste väl kunna funka i alla webläsare och i alla upplösningar till sist, bara man kodar rätt... eller?
Först det där med procenten i tabeller och celler: Av nån outgrundlig anledning så har W3C bestämt att man inte ska ha det så (på bredden går däremot bra, tycker dom). Jag har läst de mest häpnadsväckande och invecklade förklaringar till varför dom har den uppfattningen. Men allt är ju faktiskt nonsens eftersom höjd i procent funkar galant i IE.
Jo, första förutsättningen för att en sajt ska funka i alla (eller i vart fall i W3C DOM kompatibla läsare, dvs såna som kommit de senaste 4-5 åren) är att koden "validerar", dvs stämmer med W3Cs standard. Du kan ladda upp sidor eller lägga i en URL för koll allteftersom du jobbar här: http://validator.w3.org/
Men sen gäller de att kolla i så många läsare som möjligt under arbetets gång ändå: Även om koden är korrekt, så kan olika läsare rendera den olika. Ett element på sidan kan t.ex. påverkas av ett annat som i sin tur påverkas av ett tredje. Om varje sånt litet element renderas lite, lite annorlunda i webbläsarna, så kan skillnaden till slut bli ganska stor. Så kolla alltså i olika läsare med mycket jämna mellanrum...
Skärmupplösning har i princip inget med saken att göra. Även om folk har hög upplösning, så har man sällan eller aldrig dragit ut webbläsarfönstret till full skärmbredd. Vill man köra med fast bredd på en sajt och riktar sig till folk med datorer (och inte t.ex. mobiltelefoner, etc) så bör man inte överskrida 750 pixlar, eftersom en användare med 800 px bred skärmupplösning har plats för t.ex. scroll och lite annat lull-lull bredvid.
Men det användarvänligaste anses vara att göra sajten flexibel, dvs att den passar i (nästan) varje browser-bredd. Kolla t.ex. denna:
http://www.dwfaq.com/Tutorials/Tables/flexible_tables.asp
Du ska givetvis antingen ge cellerna en fast höjd i pixels, eller ingen höjd alls. Det första alternativet funkar bara om du har bilder i cellen. Om du har text och användaren ökar browserns fontstorlek, så ökar höjden trots att du begränsat den. I det andra alternativet (som brukar rekommenderas) så "kollapsar" cellen/tabellen runt innehållet.
Här är en sida som kan ge lite förklaringar till hur man bygger en sida med tabeller: http://proformica.com/en/nested_table_demo.shtml
Kör hårt...
ow, tack som fan! ska ta till mig det där, helt klart.
om vi säger som så här... ska försöka beskriva problemet mer i detalj:
tex:
jag har en frame (F1) som är 200 pix i höjd. i denna så ligger en bild som är 150 pix i höjd från toppen. resterande 50 pix vill jag fylla ut.
fyller jag i med ett färgvärde så är det inga problem, men så fort det handlar om en bg-bild så skiter det sig. det blir bara tomt där.
bredvid denna frame så har jag en annan frame (F2) som det ska ligga text i. och om det blir mer text än 200 pix i F2 så kommer F1 att följa med. då blir det problem...
detta verkar bara krångla i safari, eftersom det funkar perfa med kommandot background="bg.jpg" i td-taggen i IE, mozilla och netscape.
så det jag undrar är om det finns nån speciell kodning för just detta i safari som man kan "komplettera" den andra kodningen. för det måste väl funka att ha en sida på det sättet i safari också, tycker jag?
tack för dina svar, danne... du är grym
ow, tack som fan! ska ta till mig det där, helt klart.
om vi säger som så här... ska försöka beskriva problemet mer i detalj:
tex:
jag har en frame (F1) som är 200 pix i höjd. i denna så ligger en bild som är 150 pix i höjd från toppen. resterande 50 pix vill jag fylla ut.
fyller jag i med ett färgvärde så är det inga problem, men så fort det handlar om en bg-bild så skiter det sig. det blir bara tomt där.
bredvid denna frame så har jag en annan frame (F2) som det ska ligga text i. och om det blir mer text än 200 pix i F2 så kommer F1 att följa med. då blir det problem...
detta verkar bara krångla i safari, eftersom det funkar perfa med kommandot background="bg.jpg" i td-taggen i IE, mozilla och netscape.
så det jag undrar är om det finns nån speciell kodning för just detta i safari som man kan "komplettera" den andra kodningen. för det måste väl funka att ha en sida på det sättet i safari också, tycker jag?
tack för dina svar, danne... du är grym
Grym? Man tackar. Men jämfört med en del andra här, t.ex. Johan Dansk o Scooterbabe, så kan jag nog bara det mest grundläggande html.
Du skriver om "frames" vilket är nåt helt annat. Jag tror att du menar "tabeller" eller "tables" (engelska). I så fall hade länken som gick till en sida som beskrev "nested tables" hjälpt dig: För att den högra cellen inte ska dra med sig den vänstra när texten växer, så måste du skapa ett "parent table" med två celler (som du redan har) och sedan lägga in en tabell (med bara en column och en row vardera) i varje cell och sedan fylla dom med bilder/texter. Se koden längst ned.
Vad gäller bakgrundsbilden, så vet jag varför det inte skulle funka. Om du kan ladda upp sidan och ge oss en URL, så blir det lättare än att bara sitta o gissa.
Men det KAN vara så att du måste använda CSS, Cascading Style Sheets för att lägga in bilden. Attributet "background" i td-taggen är nämligen inte längre giltig kod - även om de flesta webbläsare accepterar det.
I vart fall, så tror jag att du skulle må bättre om du skaffade dig en relativt ny bok om HTML och CSS. Detta är definitivt inte illa menat. Tvärtom. Om du spenderar några veckor med en bra bok, testar övningarna och lär dig lite om CSS (som alltså är det sättet man SKA kontrollera en sidas alla olika element nuförtiden), så kommer det att gå avsevärt fortare att göra färdigt din sajt på RÄTT sätt. Dessutom blir det fan så mycket roligare.
Så kolla in vad som finns i din närmaste databutik, bokhandel eller varför inte biblioteket?
<table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>F1</td> </tr> </table> </td> <td width="50%"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>F2</td> </tr> </table> </td> </tr> </table>
Har inte läst alla inlägg men tror ditt problem kan vara MYCKET enkelt.
Många browers hanterar tomt cell-innehåll på ett litet underligt sätt. Om cellen inte har någon innehåll (t.ex text eller bild) väljer man helt enkelt att inte visa cell bakgrund (i ditt fall tabell-bakgrund).
Det enda du behöver göra är att lägga något i cellen/tabellen. T.ex en "none breaking space" (nbsb) eller en genomskinlig GIF-bild.
Misstänker att detta hjälper dig.
¨
oj, frame skulle givetvis vara en tabell
så här ska det se ut:
dvs, på de webbläsare jag tidigare nämnt så funkar detta perfa med bild som bakgrund och 100% i höjd.
på safari ser det tydligen ut såhär:
här blir det istället helt vitt där bakgrundsbilden ska ligga och fylla ut. hade det varit enfärgat och det hade räckt med att jag fyllt i ett #000000-värde (om jag vill ha svart som exempel) så hade allt funkat. men nu är kruxet att jag måste ha en BILD som bakgrund.
vi kan säga såhär:
som bilden visar så är allt uppdelat i en tabell med 3 st td. den till vänster som faller bort som ni ser på bilden, den vita i mitten och den mörkblå till höger.
i det vita fältet kommer mängden text att variera och därav kommer det bli olika höjd på sidorna. då måste vänster- och höger-kolumnen följa med i höjd. då faller bakgrundsbilden bort och det blir alltså i detta fallet helt vitt.
och vad jag vet så är det bara i safari som det fuckar upp...
jag är väldigt tacksam att ni hjälper mig med detta. ni verkar ju ha lite koll ändå
Kolla mitt tidigare inlägg.
Jag är rätt säker på att om du lägger något i tabellen, en text (lägg en punkt) eller vad som helst så kommer det lösa sig.
Om det funkar, så kan jag visa dig hur du lägger saker som inte syns i en tabell.
¨
Kolla mitt tidigare inlägg.
Jag är rätt säker på att om du lägger något i tabellen, en text (lägg en punkt) eller vad som helst så kommer det lösa sig.
Om det funkar, så kan jag visa dig hur du lägger saker som inte syns i en tabell.
¨
jo, men blir det ändå inte samma problem? den genomskinliga GIF-bilden måste väl anges i storlek också, tex width="50" height="50", och då kan jag ju lika gärna ha bakgrundsbilden som en "riktig" bild ändå. och då faller fortfarande det där med den varierande höjden som kommer att uppstå då det blir mer text i main-tabellen...
jo, men blir det ändå inte samma problem? den genomskinliga GIF-bilden måste väl anges i storlek också, tex width="50" height="50", och då kan jag ju lika gärna ha bakgrundsbilden som en "riktig" bild ändå. och då faller fortfarande det där med den varierande höjden som kommer att uppstå då det blir mer text i main-tabellen...
Nej. Det spelar inge roll hur litet det är som ligger i cellen. Det viktiga är att det är NÅGOT. Jag har gjort detta massa gånger (om jag förstår ditt problem rätt vill säga). Funkar utmärkt i alla browsers. Så varför inte prova och se om det funkar så kan vi gå vidare därifrån.
Lite meningslöst att utbyta erfarenhet genom att diskutera om det kan funka eller ej. Prova istället. Lägg en punkt (.) i varje cell bara för att testa. Nästan säker att det löser problemet. Om det funkar, så kan jag ta dig vidare.
¨
jo, men blir det ändå inte samma problem? den genomskinliga GIF-bilden måste väl anges i storlek också, tex width="50" height="50", och då kan jag ju lika gärna ha bakgrundsbilden som en "riktig" bild ändå. och då faller fortfarande det där med den varierande höjden som kommer att uppstå då det blir mer text i main-tabellen...
Jag tror också på Bods idé. Bara skriv nåt.
Men, i nästan samtliga fall, så ligger problemen i KODEN.
Därför hjälper det i princip aldrig att glo på en skärmdump av sidan. Vi MÅSTE SE KODEN.
Därför bad jag dig att ladda upp sdian tillen server och ge oss en URL. Då kan vi nämligen testa själva också. istället för att ödsla tid på en massa "om och men" här.
Alltså: Ladda upp sidan och ge oss en URL!!!!
Först vad menar du med frame?
Sen gjorde jag ett litet test med bakgrundsbild i td tag å det verkar funkar hur bra som helst i Safari.
<table border="1"> <tr> <td>test</td> <td background="bg.jpg" width="300">test2</td> </tr> </table>
Annars är ett tips att använda style sheets (CSS) istället, så brukar det fungera mycket smidigare.
Eftersom background till td inte riktigt är rätt så testa å kör med CSS istället.
<td style="background-image: url(bilden.jpg)"> </td>
Fast iofs. bättre å lägga style i en .css fil eller inom <style> uppe i huvudet på sidan och sen använda class="" istället för style="".