Kolla på den bifogade skärmdumpen eller på länken (funkar bara i IE).
https://www.tor.nu/wf/table.html
Finns det verkligen inget sätt att lösa detta utan tabeller?
Layout utan tabeller
17 svar · 1 462 visningar · startad av Web-Tor
lösa vad ?
Lösa följande:
- Den övre delen av sidan skall vara lika hög som dess innehåll.
- Den under delen av sidan skall ta upp resten av höjden.
- Den under delen av sidan skall gå att scrolla.
jag får ingen scroll
Vilken webbläsare?
Du kanske inte har förminskat fönstret tillräckligt?
Detta fungerar med FF 3.6.3, Opera 10.51, Safari 4.0.5, Google Chrome 5.0.375 och Exploder 8.0 under Windows 7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="language" content="swedish" />
<title>Web Tor</title>
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
html, body
{
font-size: 75%;
color: #333333;
font-family: verdana, arial, sans-serif;
padding: 0;
margin: 0;
height: 100%;
overflow:hidden;
}
p
{
font-size: 1.4em;
margin: 5px;
}
#wrapper
{
height: 100%;
position: relative;
}
#top
{
position: relative;
border: 2px solid #888888;
}
#content
{
height: 100%;
position: relative;
border: 2px solid #888888;
margin-top: 2px;
overflow: auto;
}
/*]]>*/--></style>
</head>
<body>
<div id="wrapper">
<div id="top">
<p>Topp (anpassar höjden efter innehållet i cellen)</p>
</div>
<div id="content">
<p>
Scroll (tar automatiskt resten av höjden)<br />
Scroll (blir scroll om man minskar fönstret)<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />
</p>
</div>
</div>
</body>
</html>
Har dock problem med nedre border i alla :/
Tack för att du försöker!
Men problemet (i både IE8 och Firefox) är att scrollen i botten inte kommer fram när innehållet i toppen blir högre.
Jag har lagt in 6 rader i toppen och 13 i den under delen. Som du ser på bilden så blir det ingen scroll i den under delen.
/r Jag skulle tro att problemet är att #content, som är satt till height:100%, verkligen tar upp 100% av skärmen och inte 100% av det som finns kvar efter att #top tagit sitt utrymme.
ska du ha scroll i övre delen också ? då måste du ju mått anpassa den också.. skum design...
mja.. nu ger jag upp..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="language" content="swedish" />
<title>Web-Tor</title>
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
html, body
{
font-size: 75%;
color: #333333;
font-family: verdana, arial, sans-serif;
padding: 0;
margin: 0;
height: 100%;
overflow:hidden;
}
p
{
font-size: 1.4em;
margin: 5px;
}
#wrapper
{
height: 100%;
position: relative;
}
#top
{
position: relative;
overflow: hidden;
height: 10%;
background: #c0c0c0;
}
#content
{
height: 90%;
position: relative;
overflow: hidden;
background: #c0c0c0;
padding-bottom: 8px !important;
}
.inner
{
background: #ffffff;
height: 100%;
position: relative;
overflow: auto;
margin: 3px;
}
/*]]>*/--></style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div class="inner">
<p>
Topp (anpassar höjden efter innehållet i cellen)<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll.
</p>
</div>
</div>
<div id="content">
<div class="inner">
<p>
Scroll (tar automatiskt resten av höjden)<br />
Scroll (blir scroll om man minskar fönstret)<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll<br />
Scroll<br />Scroll<br />Scroll<br />Scroll.
</p>
</div>
</div>
</div>
</body>
</html>
lycka till.. :(
ska du ha scroll i övre delen också ? då måste du ju mått anpassa den också.. skum design...
Nej, övre delen skall inte ha någon scroll. Den övre delen skall ha samma höjd som dess innehåll.
Jag tycker inte att det är så konstigt - se det som Word. En verktygsrad med knappar som har samma höjd som dess innehåll och resten av sidan tar upp 100% och får en scroll.
Väldigt konstigt om det inte går att klara så "enkel" sak utan att blanda in tabeller. :(
Tack för att du försöker!
Men problemet (i både IE8 och Firefox) är att scrollen inte kommer fram när innehållet i toppen blir högre.
Jag måste ha missförstått dig..
Har suttit nu 1 timme till & hackat .. får inte till det 100% som du vill..
..men.. kör en enkel 2 cells tabell - det är nog ingen som kommer att jaga dig :) funkar det så är alla glada. Det är ju enl webst
Så här skall det stå:
"Men problemet (i både IE8 och Firefox) är att scrollen i botten inte kommer fram när innehållet i toppen blir högre."
Det blir väl tyvärr till att förlita sig på tabelldesign. Det känns lite tråkigt när jag har möjligheten att bygga om en gammal IE6-applikation från grunden. :(
Hmm..
Även den tabelldesign du har i exemplet kommer att börja bete sig annorlunda i när du börjar använda en modern <!DOCTYPE (dvs när även MSIE börjar respektera höjdmåtten utan att ta egna initiativ ;) ) - något som ur framtida underhållssynpunkt IMHO antagligen är minst lika viktigt som att köra tabell-löst ;)
Men det är en annan femma :)
Fråga:
Kommer du alltså att ha fast höjd på toppcellen (dvs en som går att ställa in via CSS) efter det att du bestämt dess innehåll eller kommer den att kunna variera fritt den också (fast utan scrollbar) ?
Kommer du alltså att ha fast höjd på toppcellen (dvs en som går att ställa in via CSS) efter det att du bestämt dess innehåll eller kommer den att kunna variera fritt den också (fast utan scrollbar) ?
Helst så vill jag inte ha någon fast storlek på toppen utan den skall få samma höjd som innehållet. Användaren kan själv styra vad som ligger där (ungefär på samma sätt som jag kan bestämma vilka ikoner som skall synas i toolbaren i Word) och då blir det problem om den har en fast höjd.
Hmm...
Hur styr användaren det rent praktiskt ?
Görs det serverside så att du kan t.ex.skulle kunna servergenerera ut olika klasser på toppelementet beroende av användarinställningarna ?
Skulle användning av "subtil förbättring" (med det menar jag "progressive enhancement med unobtrusive Javascript" på ren svengelska) kunna vara en acceptabel lösning (dvs att de som inte har JS påslaget får en aningen annorlunda upplevelse men i grunden samma funktion)?
Är målgruppen IE7+ (och resten) eller IE8+ och resten ?
Hur styr användaren det rent praktiskt?
Sidorna är servergenererade och innehållet styrs av en, i princip oändlig kombination, av egenskaper för ett fordon, en kund, en ägare ett bolag och användarens behörighet och personliga val.
Är målgruppen IE7+ (och resten) eller IE8+ och resten ?
Det handlar om en hyfsat kontrollerad klientmiljö där kraven är JavaScript, IE8+ och Firefox.
om du skiter i mitt första exempels nedre " border " så är det väl bara att köra ?
om du skiter i mitt första exempels nedre " border " så är det väl bara att köra ?
Nej, se mitt svar till ditt första exempel:
http://www.webforum.nu/showpost.php?p=1506248&postcount=5
(Jag har fetmarkerat två ord för att det skall bli tydligare.)
Anledningen till att det bara är nedre bordern som försvinner i ditt exempel är att innehållet i toppen bara är 1 rad. Om du lägger in 6 rader där så försvinner också mer av innehållet i underdelen innan scrollen kommer fram.
Jag tror att utan fasta mått så blir det svårt. Om inte guru Järvklo har en lösning så kanske det kan fixas med javascript ?
Hmm...
Med tanke på att tabell-lösningen som visas i första inlägget *också* skiter sig så fort man går över i Standards Mode (dvs applicerar de senaste årens högst etablerade praxis med att klappa dit en korrekt <!DOCTYPE) så är nog jag också inne på att man antagligen får bygga något "nästan bra nog" och sedan nita dit det slutgiltiga beteendet (t.ex. hårdlöda in fasta mått på strategiska ställen) med Javascript via lämpliga händelsehanterare.
... men jag har (ännu ?) inte något konkretare än så på lager tyvärr ...