14 svar · 619 visningar · startad av ade
Med denna kod kan jag få sidan 100% hög utan att scrolla oavsett vilken upplösning jag har. Iaf i internet explorer. Någon som vet något om det inte fungerar i andra webbläsrae?
#container{
height:100%;
width:537px;
margin:0;
padding:0;
background-color:#6B8FB3;
border-left:1px #666 solid;
border-right:1px #666 solid;
}
Hmm...
Det bör fungera, men det är beroende på
om du deklarerar höjden på html och body till 100% såhär
html,body {height:100%;margin:0;padding:0}
i det fall väljer en <!DOCTYPE som ger dig "Standards mode"
om #container verkligen är det "yttersta blocket" i koden (vilket väl är troligt, men iallafall... det kan påverka om den inte är det ;) )...
Okej! Tackar. Jag får testa!
Det fungerar inte och jag kör med
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Någon som kan hjälpa mig?
http://www.direktdesign.se/osf << Där kan ni se sidan.
Stilmallen ser ut så här:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
container{
height:100%;
width:705px;
margin:0;
padding:0;
}
om jag bara kör med
container{
height:100%;
width:705px;
margin:0;
padding:0;
så blir designen helt fel placerad.
Nu blir den rätt placerad men man lär scrolla för att se hela sidan!
Tack på Förhand!
Jadu - det kanske beror på att den sidan du refererar till (via en framesetsida) har en layout baserad på en tabell med fasta värden på <td height="..."> och helt saknar någon form av element som har id="container" :birp
Njae... vänta nu... nu är jag inte helt med på noterna längre...
Du sade i ditt första inlägg att du fått det att funka i MSIE - hur såg koden ut då (dvs var hade du id="container" då ? )
jag har fått koden va en annan kille som haft det. och då fungerade det i ie!
Yep.
Och jag antog automagiskt att det var div:ar inblandade när du frågade sådär - men det är inga problem nu när vi pratar om samma sak ;)
För det du kan göra, är att du kan sätta
style="height:100%"
på din "yttersta" tabelltagg, och sedan ta bort height från "den där stora" tabellcellen...
Testa koden i den bifogade filen (jag tog mig friheten att meka till din kod så att den borde funka både i Mozilla och MSIE på Windows... ;)
Vill du sedan ha layouten centrerad i sidled, lägger du bara till
align="center"
i den "yttersta" <table>-taggen ;)
Och, som någon säkert kommer att påpeka, kan man göra den här layouten utan tabeller också ganska enkelt, men det är en helt annan historia det :e )
Lycka till!
Tack för din hjälp men main:en (där texten är) går ju inte ända till botten. Inte för mej iaf. Det är ju det också jag vill uppnå.
Vad beror det på?
Edit: Testade att läggain height: 100%;" si style strängen men det funkade inte!
Index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Osf</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body,html {height:100%;margin:0;padding:0}
</style>
</head>
<body background="bg_fade.gif">
<table width="705" border="0" cellpadding="0" cellspacing="0" height="100%">
<!--DWLayoutTable-->
<tr>
<td width="705" height="85" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="705" height="85" valign="top" background="toppbild.gif"><!--DWLayoutEmptyCell--> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="705" height="32" valign="middle" background="menu_bg.gif"><p align="center"><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong><font color="CCC1AC">Hem</font><font color="8F7156">
|</font> <font color="CCC1AC">Produkter</font> <font color="8F7156">|</font>
<font color="CCC1AC">Webbshopp</font> <font color="8F7156">|</font>
<font color="CCC1AC">Företaget</font> <font color="8F7156">|</font>
<font color="CCC1AC">Kontakta oss</font></strong></font></p></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="705" height="446" valign="top" bgcolor="f8f8f8" style="border-right: 1px solid grey; height:100%;">
<blockquote>
<p><br>
<font color="#666666" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Välkommen
till vår webbsida </strong><font color="#CCCCCC" size="1">>></font></font></p>
<p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </font></p>
<p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </font></p>
<p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </font></p>
<p> </p>
<p align="right"> </p>
</blockquote></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Hmm...
Att få till en 100% hög tabell inuti en tabellcell är alltid knepigt...
Men å andra sidan så kan man ju nästan alltid ta bort en tabell med bara en rad och en kolumn (som du har i main) när den ligger inuti en tabellcell...
För tabellcellen har ju redan de dimensioner du vill ha på main...
Testa:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Osf</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body,html {height:100%;margin:0;padding:0}
</style>
</head>
<body background="bg_fade.gif">
<table width="705" border="0" cellpadding="0" cellspacing="0" height="100%">
<!--DWLayoutTable-->
<tr>
<td width="705" height="85" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="705" height="85" valign="top" background="toppbild.gif"><!--DWLayoutEmptyCell--> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="705" height="32" valign="middle" background="menu_bg.gif"><p align="center"><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong><font color="CCC1AC">Hem</font><font color="8F7156">
|</font> <font color="CCC1AC">Produkter</font> <font color="8F7156">|</font>
<font color="CCC1AC">Webbshopp</font> <font color="8F7156">|</font>
<font color="CCC1AC">Företaget</font> <font color="8F7156">|</font>
<font color="CCC1AC">Kontakta oss</font></strong></font></p></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" bgcolor="f8f8f8" style="border-right: 1px solid grey;">
<blockquote>
<p><br>
<font color="#666666" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Välkommen
till vår webbsida </strong><font color="#CCCCCC" size="1">>></font></font></p>
<p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </font></p>
<p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </font></p>
<p><font color="#666666" size="2" face="Lucida Sans Unicode">Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </font></p>
<p> </p>
<p align="right"> </p>
</blockquote>
</td>
</tr>
</table>
</body>
</html>