Problem med sidlayout

Jag håller på att skriva om mina korsordssidor så att ingen del längre kräver omladdning från server mitt i. (Tidigare laddades ledtrådssidan om om man begärde lättare ledtrådar.) Nu hoppas jag lösa det med JavaScript. Därmed skulle jag helst vilja komma ifrån min gamla framelösning.

Vad jag vill åstadkomma
Själva korsordet ligger i en div, ledtrådarna i en annan. Det måste gå att skrolla dessa två divar oberoende av varandra. Dvs varje enskild div måste gå att skrolla. Jag vill ha dessa två divar bredvid varann, korsordet till höger och ledtrådarna till vänster. Lösningen måste funka i IE 6 (för det använder ca 90% av sitens besökare), men jag vill att den funkar även i FF.

1. Låter detta genomförbart?
2. Går det bättre om jag byter divarna de ligger i mot något annat? Tex Iframes?
3. De flesta verkar avsky att lösa positioneringen med tabeller, så om det går med CSS vore det ju trevligt.

Mitt första försök att åstadkomma detta ser inte klokt ut: Horribelt resultat. Dels hoppar ledtrådsdiven i sidled där korsordsdiven tar slut! :o Dels kommer ingen skroller fram. :( Dels finns inget mellanrum alls mellan divarna, vilket inte alls ser bra ut. :( (Än så länge ser det lika fult ut i IE som FF - samma problem i båda läsarna.)

All hjälp skulle uppskattas mycket!

Det går med CSS. Ange en höjd för varje div, förslagsvis samma på båda, och lägg sedan till overflow : auto; för båda divarna. Detta gör att en rullningslist dyker upp så snart innehållet i divarna är större än vad som ryms inom höjden du angav.

Sedan kan du ange float : left; för ledtrådsdiven för att positionera dem bredvid varandra. Det ska fungera i båda läsarna.

Lycka till!

/Lars

Ett tips
för att alltid vara säker på att ledtrådarna ska komma bredvid korsordet så kan du lägga dem i en div med bestämd bredd
förslag:

<div id="wrap">
<div class="korsord"></div>
<div class="korsord"></div>
</div>

och i css

#wrap{width: 1000px!important;  }
.korsord{ width: 45%;
height: 600px;
margin-right: 20px;
overflow:auto;
float:left;}

Hmm... :q Jag undrar vad jag gör för fel? I IE 6 (FF har jag tills vidare ej kollat.)
bruphotos förslag ser likadant ut som mitt ursprungliga och ligger i samma fil: Denna

Tantens genererar en enda lång column istället för två bredvid varandra... Implementerat i egen fil (med egen CSS). Denna.

Jag hittar ingen motsvarigheten till .korsord och wrap i din kod, som du säger är efter mitt förslag. ..

Jag slängde in din kod i mitt förslag och då ser den ut så här i FF.
http://gotlandssidor.se/korsord.html
Eftersom det inte finns doctype och många valideringsfel så kan resultatet bli annorlunda i andra webläsare.

tanten skrev:

Jag hittar ingen motsvarigheten till .korsord och wrap i din kod, som du säger är efter mitt förslag. ..

<div id="wrapper">
  <div id="cw" class="cwColumn" width="60%">
  <!-- ... -->
  </div>
  <div id="clues" class="cwColumn" width="40%" >
  <!-- ... -->
  </div>
</div>

wrap = wrapper, korsord = cwColumn

Sidan på Gotlandssidor laddas i IE helt blank, med absolut inget innehåll, i FF saknas skroller för ledtrådarna. Men lösningen måste funka i IE.

Det ska den göra nu, visas i IE. Hade glomt att avsluta en kommentar i css.
Se om scrollen fungerar nu för hos mig fungerar den både i IE och FF för ledtrådarna.

tanten skrev:

Det ska den göra nu, visas i IE. Hade glomt att avsluta en kommentar i css.
Se om scrollen fungerar nu för hos mig fungerar den både i IE och FF för ledtrådarna.

Det gör den, funkar i båda. :) Insåg inte att det fanns osynliga skrollers... :r Kan man få en synlig skroller? För hur vet annars mina besökare att de kan skrolla?

Jahaja, det blir till att försöka se var din lösning skiljer sig från det jag skrev...

Osynlig??!!
Hos mig är ingen osynlig så det vet jag inte hur det gått till.
Skillnaden med din och min lösning annars är att jag slänger ner innehållet i en egen påse :P för att den inte ska blandas i hop med alla egenskaper som finns i resten av koden. Tror inte på att det blir bra att "classa" in den som du gör. Blir nog bara jobbigt att se till att inget annat tar över. :OO

Det som skiljde sig åt var att jag bytt namn på klassen i HTML-filen men inte i CSS...

Tack, tanten! :birp

tanten skrev:

Ett tips
för att alltid vara säker på att ledtrådarna ska komma bredvid korsordet så kan du lägga dem i en div med bestämd bredd
förslag:

<div id="wrap">
<div class="korsord"></div>
<div class="korsord"></div>
</div>

och i css

#wrap{width: 1000px!important;  }
.korsord{ width: 45%;
height: 600px;
margin-right: 20px;
overflow:auto;
float:left;}

Denna lösning såg ut att fungera utmärkt, ända tills jag la in ett kort stycke (som dock är längre än kolumnen är bred). Då ligger plötsligt inte "kolumnerna" bredvid varann i FF längre! x( :( I IE funkar det hur fint som helst.

Finns det något sätt att fixa detta för FF så det blir samma utseende som för IE? :q (Att korta texten är inte ett alternativ.)

Aktuell sida

Jag får försöka se vad som hänt...
wrapper i koden wrap i css... Ingen doctype... till att börja med. Se om det räcker att ändra det annars så fortsätter vi att felsöka... :)

Nu när jag körde edit css i FF:s webdeveloper toolbar så flög allt upp på rätt ställe när jag tog bort kommentaren i den här

.cwColumn {
  width: 45%;
  height: 600px;
  margin-right: 20px;
  overflow:auto;
  float:left;
}{

tanten skrev:

Nu när jag körde edit css i FF:s webdeveloper toolbar så flög allt upp på rätt ställe när jag tog bort kommentaren i den här

.cwColumn {
  width: 45%;
  height: 600px;
  margin-right: 20px;
  overflow:auto;
  float:left;
}{

Hmm... skälet till att den avkommenterats är att jag inte vill att kolumnerna ska vara lika breda. så för närvarande är korsordsdelen width 60% och ledtrådarna width 40%. Kan det vara så att problemet ligger i att min summa blir 100% medan din blir 90%? Vad används de sista 10 %:n till? Scrollbars?

Ska prova att göra om summan till 90% i stället. Hmm... hjälper i vart fall inte att ändra till 60/30... :q 45% kan ju inte vara ett magiskt tal!??

Men jag tror att 100% kan vara lite riskigt när du kör dem inline.
Inline tar ju över det du har i css-filen och du har 100% inline av vad? Där är jag osäker hur webläsarna räknar. Inte gjort något sådant själv...
Kan du inte ta bort alla vidder du har i koden och bara ange dem i css. Tror du får lättare själv när du ska ändra något då.

Ytterligare lite testning senare tätnar mystiken i min inte alltför kunniga HTML/CSS-skalle... Följande funkar inte heller:

-------- Med följande  CSS ---------
.cwColumn {
  /*width: 45%;*/
  height: 600px;
  margin-right: 20px;
  overflow:auto;
  float:left;
}
--------------------------------------

<div id="wrapper">
  <div id="cw" class="cwColumn" width="45%">
</div>
<div id="cwClues" class="cwColumn" width="45%" >
</div></div>

Vari ligger skillnaden mot att sätta vidden till 45% i CSS-filen för cwColumn??? :q :q

Vill du ha bredden inline så använd då px i stället. Du vet antagligen på ett ungefär hur brett ditt bredaste korsord är och rätta divarna efter det och har du 1000px som important för wrapper så blir det enklare att räkna ut hur breda de får vara.
I ditt fall är ju inte relativa storlekar så betydelsefullt och folk kommer ändå kunna förstora texten om de tycker din är för liten... :-)

Vi svarade samtidigt...

tanten skrev:

Kan du inte ta bort alla vidder du har i koden och bara ange dem i css. Tror du får lättare själv när du ska ändra något då.

Lade vidden i id:na för divarna i stället och plötsligt hoppade kolumnen tillbaka upp! Skönt!

Men... tyvärr hamnar de "en mil" ifrån varandra? Varför i allsindar då? Alltså det finns hur mycket som helst tomt utrymme mellan dem... Även IE uppvisar nu samma gap...! :o :x

Nej, jag vet inte hur stort mitt bredaste korsord är... Jag kanske inte har gjort det än...

Ah din kom emellan, men svaret kanske finns där. Jag har hållit på aldeles för lite med inline för att veta vad dina % räknar på för någonting. Jag misstänker ingenting utan att de slänger ut sig så mycket de kan. Prova med att sätta width inline på wrapper också.