13 svar · 540 visningar · startad av haider
Hej
I dreamweaver tycks detta ge perfekt resultat, men när jag kör en preview så funkar det inte alls.
Är det nåt som jag gör fel, eller bör man lösa det på annat sätt?
Tacksam för svar :r
Ja det ska fungera. Vad använder du för webläsare för att kolla?
Testade faktiskt med både IE o Firefox.
Kan det vara så att jag gör en miss?
Dreamweaver borde ju inte "hitta på" så att säga, så nåt kanske inte stämmer.
Kan det var Doctype - ett fenomen som kan påverka mycket, men som jag inte begriper ett smack av?
Knepigt. Kan du visa lite kod så vore det bra.
Doctypen ska nog inte påverka det.
Här kommer rubbet
Detta är nästan allting, rensade bort lite script o css i början.
Kanske är det nån bugg som smygit sig igenom?
Kika gärna på det, så ska jag själv göra tester i form av en enkel sida med en tabell o height=100% - bara för att se om det funkar under de enklaste omständigheterna eller ej.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>blah blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#DFDDD9" background="images/intro_bg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-repeat:repeat-y; background-position:center; ">
<table width="980" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" background="images/intro_bg.gif">
<img src="produktion/bilder/spacer.gif" width="10" height="50">
<br>
<table width="980" border="0" align="center" cellpadding="0" cellspacing="0" id="Contence_table">
<tr>
<td rowspan="5"><img src="images/intro_01.gif" width="15" height="191" alt=""></td>
<td colspan="2"><img src="images/intro_02.gif" width="233" height="111" alt=""></td>
<td rowspan="2"><img src="images/intro_logoleft.gif" alt="" name="logo_left" width="242" height="143" id="logo_left"></td>
<td rowspan="2"><img src="images/intro_logoright.gif" alt="" name="logo_right" width="242" height="143" id="logo_right" onMouseOver="MM_swapImage('logo_right','','images/intro_logoright_over.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
<td colspan="2"><img src="images/intro_05.gif" width="233" height="111" alt=""></td>
<td rowspan="5"><img src="images/intro_06.gif" width="15" height="191" alt=""></td>
</tr>
<tr>
<td><img src="images/intro_07.gif" width="13" height="32" alt=""></td>
<td bgcolor="#EEEEEE"><img src="produktion/bilder/spacer.gif" width="220" height="32" alt=""></td>
<td bgcolor="#EDEDED"><img src="produktion/bilder/spacer.gif" width="220" height="32" alt=""></td>
<td><img src="images/intro_10.gif" width="13" height="32" alt=""></td>
</tr>
<tr>
<td><img src="images/intro_07.gif" width="13" height="38" alt=""></td>
<td bgcolor="#EEEEEE"><img src="produktion/bilder/spacer.gif" width="220" height="38" alt=""></td>
<td><a href="produktion/index.html"><img src="images/intro_produktion.gif" alt="Produktion av 2d och 3d animeringar, reklamfilm, visuallisering" width="242" height="38" border="0" onMouseOver="MM_swapImage('logo_left','','images/intro_logoleft_over.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td><a href="distribution/index.html"><img src="images/intro_distribution.gif" alt="Distribution av mediaspelare, hårddiskspelare, divx, xvid & HD stöd." width="242" height="38" border="0" onMouseOver="MM_swapImage('logo_right','','images/intro_logoright_over.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td bgcolor="#EEEEEE"><img src="produktion/bilder/spacer.gif" width="220" height="38" alt=""></td>
<td><img src="images/intro_10.gif" width="13" height="38" alt=""></td>
</tr>
<tr>
<td><img src="images/intro_17.gif" width="13" height="10" alt=""></td>
<td colspan="4"><img src="images/intro_18.gif" width="924" height="10" alt=""></td>
<td><img src="images/intro_19.gif" width="13" height="10" alt=""></td>
</tr>
<tr>
<td><img src="images/intro_07.gif" width="13" height="38" alt=""></td>
<td bgcolor="#EEEEEE"><img src="images/intro_12.gif" width="220" height="38" alt=""></td>
<td align="right" valign="top"style="padding-right:10px"><p>datorgrafik, animation, visualisation<br>
produktion & utbildning</p>
</td>
<td align="left" valign="top" style="padding-left:10px"><p>mediaspelare, hemmabionöje<br>
distributör & grossist </p>
</td>
<td bgcolor="#EEEEEE"><img src="images/intro_15.gif" width="220" height="38" alt=""></td>
<td><img src="images/intro_10.gif" width="13" height="38" alt=""></td>
</tr>
</table>
<br>
<img src="produktion/bilder/spacer.gif" width="10" height="50">
</td>
</tr>
</table>
</body>
</html>
Hmm..
När du ställer webbläsaren i "Standards mode" (vilket du gör iom att du valt just den där <!DOCTYPE deklarationen) så ges höjden på html och body "per default" värdet "auto".
När du sätter höjden på tabellen till 100% - beräknas det som 100% av "auto", och per definition är det då inte det man kanske förväntar sig utan höjden av tabellens faktiska innehåll!
Lösning: Ställ in höjderna på html och body till 100% - så att de relaterar till visningsareans höjd istället för "auto" :) - detta kan du t.ex. göra genom att lägga till
<style type="text/css">html,body {height: 100%; margin: 0; padding: 0}</style>
i "head-delen" av din sida...
Om det är någon tröst är du inte ensam över att snubbla över fenomenet (och nej - man kan inte lita på att det ser likadant ut i designläget i DW somi "verkliga webbläsare" i alla lägen ) :birp
O fan, jag visste inte att det kunde ställa till det. Man lär sig något nytt varje dag :)
jo Joel, visst lära man sig nåt nytt varje dag :-) Tur att jag inte trodde på dig om att doctypen inte har med saken att göra, *hehe* ;)
En sak till förresten. Betyder det att man kan ha en iframe inne i en tabell, där iframens höjd också är 100%?
Jarvklo: Vilken doctype ska man använda då? Eller ska jag låta bli at bry mig om det och bara köra med css-lösningen?
Hmm...
Nu tänker jag inte predika, men... :)
Tabeller är inte avsedda för layout... I varje fall inte om du frågar W3C... Även om det är "så man gjort webblayout sedan urminnes tider" och oavsett att det finns (bra :) ) stöd för tabell-layouter i princip varje verktyg med "designläge" :) samtidigt som jag personligen tycker att det saknas (lika bra) verktyg för att skapa webbläsaroberoende CSS-layouter i dessa verktyg. (men jag kan ha missat något - jag har inte letat på några månader) :)
Vara hur det vill med det...
Jag tycker mig märka att följande funkar:
Kör du tabeller - Lägg dig i "quirks mode" (ta samma <!DOCTYPE du använder nu, men stryk "http:// ....." - delen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Kör du CSS-baserade layouter, kör i "Standards mode"...
Testa att ta en tabell med några rowspans och kör dem i de olika moderna genom att välja olika <!DOCTYPE så ser du vad jag menar...
Men det jag beskrivit här är åsikter !!! - och det finns flera andra sätt att se på saken också :)
. :birp
Jarvklo: Den här enradig doctypelösninge, gäller den iframesfrågan eller bara tables.
Ifråga om din predika, bara kör på. Vilka alternativ har man? Hur mycket kan man göra med CSS egentligen, som man av tradition presterar med tabeller?
Om vi tänker oss en layout, som man styckar i fyrkanter. Vet inte om jag uttrycker mig tydligt. I photoshop kan man ju slica och exportera till tabeller
För mig känns detta som den mest logiska lösningen. Men gärna för mig om det finns fler lösningar. Men hur?
Jag håller med om att program med layoutläge hjälper en hel del, för jag tar över materialet som slicats i photoshop och in i dreamweaver för behandling.
Men återigen, hur skulle jag kunna göra nåt liknande eller bättre i CSS?
Snackar vi om div-taggar då?
haider skrev:
Om vi tänker oss en layout, som man styckar i fyrkanter. Vet inte om jag uttrycker mig tydligt. I photoshop kan man ju slica och exportera till tabeller
...
För mig känns detta som den mest logiska lösningen. Men gärna för mig om det finns fler lösningar. Men hur?
Jag gillar inte tanken på att man ser på en websida som en samling med "boxar" utplacerade med exakta avstånd hit och dit, och med följden att man måste missbruka tabeller och slicade bilder som du beskriver. Bättre att låta innehållet flöda. Använd rätt elementtyp för rätt innehåll. Styr inte utseendet med html-attribut. Använd css hela vägen.
Text och bilder med innehåll är det viktiga och ska ligga i fokus.
Här är ett exempel på hur man kan få ett vanligt html-dokument att bli snyggt och stajlat utan att frångå principerna jag var inne på:
http://www.markboulton.co.uk/journal/comments/semantic_typography_bridging_the_xhtml_gap/
Insider: jag håller med dig att det faktiskt är jobbigt. Men vad är alternativet?
Jag såg sidan du länkade till, mycket fin o stilren. Men ibland kan man behöva andra kombinationer.
Fast i skrivandets stud kom jag fram till att div:ar skulle kunna avlösa en hel del problem. Observera dock att så som jag ser det lär jag inte klara mig utan "samligen boxar", mest pga sättet jag designar mina sidor. (Mkt grafik).
Så problemet för mig som inte kan se kod och se resultat, är att det inte finns bra editors som har bra CSS stöd.
För hittills har jag känt att det varit svårt att skapa ett system för att hålla reda på alla "CSS-namn". Jag råkar jämt ut för att skapa dupletter, när jag hade kunnat återanvända vissa CSS namn. En automatisering av något slag skulle hjälpa mig en hel del.
haider skrev:
Jag såg sidan du länkade till, mycket fin o stilren. Men ibland kan man behöva andra kombinationer.
Jag syftade på artikeln och inte själva sidan i sig. Bl a visas exempelbilder som illustrerar hur strukturen i koden kan se ut och hur det stajlade resultatet blir. (själva csskoden visas aldrig, men det är inga konstigheter)