[CSS]div,float,dynamic height/width,background-image,repeaty

[Thunderhawk]

Hey,

Ik zit nu al een paar uur te kloten met een probleem en ik weet het nu niet meer. Ik kan het probleem oplossen door tables te gaan gebruiken maar ja als tech-junkie ben ik er niet echt fan van om deprecated code te gaan pennen.

http://dond.no-ip.org/help/common/base.css
http://dond.no-ip.org/help/temp.php
http://dond.no-ip.org/help/goal.jpg

De uiteindelijke bedoeling is dat het harticoontje om en om geplaatst wordt met een transparante box.
Dus 20px niets, 20px hartje, 20px niets, 20px hartje. Hartjes mogen niet afgekapt worden (overflow:hidden?)
In de hoekjes moet een ander icoontje komen van 20*20px.

Alvast bedankt,

Alex

EDIT
Hartjes zijn 20*20px, niet 50*50px

[ Voor 3% gewijzigd door Thunderhawk op 03-01-2010 18:44 ]

[HuHu]

Maak van dat hartje allereerst een 100x100 afbeelding, met in de linkerbovenhoek het 50x50 hartje en de rest transparant.

Verder zie ik dat het vak met die gele rand niet dynamisch meeschaalt met het browserscherm, dus je kunt gewoon uitrekenen hoeveel hartjes er moeten komen. Kom je op een half hartje uit, dan moet je dat vak iets kleiner/groter maken.

Die sterren kun je er later nog overheen leggen, of je maakt in de hoeken een aparte div/span.

[Thunderhawk]

Maak van dat hartje allereerst een 100x100 afbeelding, met in de linkerbovenhoek het 50x50 hartje en de rest transparant.

Wat heb ik daaraan?

Verder zie ik dat het vak met die gele rand niet dynamisch meeschaalt met het browserscherm, dus je kunt gewoon uitrekenen hoeveel hartjes er moeten komen. Kom je op een half hartje uit, dan moet je dat vak iets kleiner/groter maken.

Voor de width kan dat; voor de height niet. Deze pagina wordt straks vanuit een MySQL volgestauwd met info en de height verschilt dan natuurlijk per page.

Die sterren kun je er later nog overheen leggen, of je maakt in de hoeken een aparte div/span.

Had ik ook al aan zitten denken, maar mijn main concern is dat de verticale kolommen goed gevult worden.

Uiteindelijk hoop ik op een systeem dat ongeveer dit doet:

Stel getColHeight("border_center_left") geeft als waarde 90x terug.

PHP:

{
  // Pak grote van de kolom (=90)
  $colHeight = getColHeight("border_center_left"); 

  // Bepaal hoeveel pixels ik overhouw bij blokjes van 20px (=10)
  $unusedPixels = $colHeight mod 20; //

  // Bepaal hoeveelheid te plaatsen icoontjes (hartjes/transparant boxjes) (=4)
  $numPositions = $colHeight div 20;

  // Verspil 50% van de unusedPixels aan de bovenkant (ligt tegen het sterretje aan)
  echo '<font size=' . $unusedPixels / 2 . 'px>  (spatiebalk)  </font>';

  for ($i = 0; $i < $numPositions; $i = $i+2)
  {
      output('hartje.png');
      output('transparant.png');
  }

  // Verspil de laatste 50% van de unusedPixels aan de onderkant (ligt tegen het sterretje aan)
  echo '<font size=' . $unusedPixels / 2 . 'px>  (spatiebalk)  </font>';
}

[ Voor 36% gewijzigd door Thunderhawk op 03-01-2010 18:51 ]

[pieturp]

Thunderhawk schreef op zondag 03 januari 2010 @ 18:28:
[...]

Wat heb ik daaraan?

Dan komen ze om en om ;-)

Middels wat gepuzzel met line-height en min-height, moet het wsl wel mogelijk zijn om altijd hele hartjes te houden. Denk aan line-height: 50px;

[Cartman!]

Thunderhawk schreef op zondag 03 januari 2010 @ 16:32:
Ik zit nu al een paar uur te kloten met een probleem en ik weet het nu niet meer. Ik kan het probleem oplossen door tables te gaan gebruiken maar ja als tech-junkie ben ik er niet echt fan van om deprecated code te gaan pennen.

Nobel streven

PHP:

echo '<font size=' . $unusedPixels / 2 . 'px>  (spatiebalk)  </font>';

sorry?

En waarom expressions gebruiken in je css file? Weet je dat die vaak je site enorm langzaam kunnen maken? Verder zou ik ook gewoon die background sowieso een vaste breedte geven, scheelt dan de helft alweer van je probleem. Welicht kun je onload met javascript de hoogte nog aanpassen als deze niet precies uitkomt op de hoogte die jij wilt.

[HuHu]

Thunderhawk schreef op zondag 03 januari 2010 @ 18:28:
[...]

Wat heb ik daaraan?

Dan maak je een div/span/tr/whatever waarbij je dat plaatje als background-image opgeeft met een repeat. Dan heb je automagisch je hartjes met 50px tussenruimte.

[...]


Voor de width kan dat; voor de height niet. Deze pagina wordt straks vanuit een MySQL volgestauwd met info en de height verschilt dan natuurlijk per page.

Ah, daar heb je gelijk in. Voor de height zie ik zo 1-2-3 geen oplossing, behalve deze middels JavaScript forceren naar een veelvoud van 50 (of 100).

[...]

Had ik ook al aan zitten denken, maar mijn main concern is dat de verticale kolommen goed gevult worden.

Uiteindelijk hoop ik op een systeem dat ongeveer dit doet:

Stel getColHeight("border_center_left") geeft als waarde 90x terug.

PHP:

{
  // Pak grote van de kolom (=90)
  $colHeight = getColHeight("border_center_left"); 

  // Bepaal hoeveel pixels ik overhouw bij blokjes van 20px (=10)
  $unusedPixels = $colHeight mod 20; //

  // Bepaal hoeveelheid te plaatsen icoontjes (hartjes/transparant boxjes) (=4)
  $numPositions = $colHeight div 20;

  // Verspil 50% van de unusedPixels aan de bovenkant (ligt tegen het sterretje aan)
  echo '<font size=' . $unusedPixels / 2 . 'px>  (spatiebalk)  </font>';

  for ($i = 0; $i < $numPositions; $i = $i+2)
  {
      output('hartje.png');
      output('transparant.png');
  }

  // Verspil de laatste 50% van de unusedPixels aan de onderkant (ligt tegen het sterretje aan)
  echo '<font size=' . $unusedPixels / 2 . 'px>  (spatiebalk)  </font>';
}

De font-tag is net zo deprecated als die tables voor lay-out. Wat zeg ik? Nog wel meer deprecated dan tables voor je lay-out gebruiken.

[Thunderhawk]

I know, was ook maar een pseudo voorbeeldje om te illustreren wat ik ongeveer wou.

Ik heb me ondertussen maar in Javascript verdiept en daarmee heb ik al gedeeltelijke resultaat. 't Voelt wel erg hack-achtig aan. Toch jammer