[CSS] positionering probleempje

[MrZed]

Hoi,

Ik ben bezig met een website, voor mezelf. En nu dacht ik handig te zijn door alles makkelijk met css te positioneren. Zodat het allemaal netjes in de tabellen staat.
Op mijn resolutie, alles prima.
Op een lagere resolutie dus niet.

Ik dacht dit in het begin al te voorkomen door de left waardes in procenten te doen, ik dacht dan past het zich wel aan aan de venstergroote.

Op deze manier dus:

code:

#about {
  position: absolute;
  left: 75%;
  top: 210px;
  z-index: 10;

Maar het werkt dus ook niet, ik heb al verschillende dingen geprobeerd, de left waarde in pixels, de position: relative. Maar niets mocht baten. Ben ik nou zo dom of zie ik gewoon iets over het hoofd? Of hoe kan ik dit anders oplossen?

Alvast bedankt!

[ Voor 3% gewijzigd door MrZed op 16-10-2003 02:16 ]

[Verwijderd]

volgens mij moet het position: percentage zijn als je met % wil werken...

je werkt nu met 2 positioneringsmethoden door elkaar, misschien dat er daarom fout gaat?

Edit:
leftwaarde in px werkte ook niet???

vaag... kun je niet es een screenshot maken ofzo? en een beetje meer uitleg aub

[ Voor 29% gewijzigd door Verwijderd op 16-10-2003 02:23 ]

[MrZed]

als ik position: percentage doe.. schiethet allemaal ineens naar onderen en opzij, dan kan ik in de procent waardes veranderen wat ik wil, maar het verplaatst zich niet..
Wacht even, position: percentage bestaat niet! dan komen de teksten gewoon in default positie te staan!

Ik heb de waarde vanaf de bovenkant van het venster wel in pixels, maar lijkt me dat die ook niet veranderd..

[ Voor 19% gewijzigd door MrZed op 16-10-2003 02:31 ]

[MrZed]

Voor positioneren zijn er 4 opties: static, relative , absolute, fixed

Welke heb ik hiervoor nodig? En wat gebruik ik dan % of pixels?

Uitgebreidere uitleg:

De tekst moet in een tabel cel komen, die tabel cel heeft een achtergrond plaatje dat is deze:

Nu zie je ook waarom ik de tekst wilde positioneren. De about tekst moest niet over de Stats titel heenkomen. En onder de Stats titel, daar komt dus een nedstat teller die ik ook met css heb gedirigeerd daar te staan. Helaas veranderd dit dus door resolutie verschillen. Mijn vraag is dus hoe los ik dit op? Mijn vorige posts geven nog wat extra uitleg. Hopende dat jullie mij daarmee verder kunnen helpen.

[Wolfboy]

kan je misschien ook eventjes een link geven?
* Wolfboy snapt het niet helemaal

kan ook aan het tijdstip liggen hoor

[MrZed]

*geen spam*
[link removed]

Ojah de code is wat rommelig, net als mijn hoofd zeg maar

[ Voor 77% gewijzigd door MrZed op 16-10-2003 03:32 ]

[Wolfboy]

hoe komt het dat de body head en html tag rond regel 75 opeens nog een keer komen?
de broncode daar klopt niet zoveel van geloof ik

[MrZed]

Wolfboy schreef op 16 October 2003 @ 02:59:
hoe komt het dat de body head en html tag rond regel 75 opeens nog een keer komen?
de broncode daar klopt niet zoveel van geloof ik

daar word een php bestand geinclude.. die heeft nog een body enzo..

[ Voor 14% gewijzigd door MrZed op 16-10-2003 03:03 ]

[Wolfboy]

die tags moeten daar iig weg mja dat maakt even weinig uit

HTML:

<table style="width:1000px; height:800px; border:1px solid;">
  <tr>
    <td style="height:150px;" colspan="4">dit word een banner ofzo?
</td>
  </tr>
  <tr>
    <td>eerste ding</td>
    <td>hier nog 1</td>
    <td>dit is ook nog iets</td>
    <td>geval 4</td>
  </tr>
</table>

is zoiets niet makkelijker voor je?

en dan natuurlijk wel de breedte bepalen van de td's die niet mogen vergroten

[ Voor 29% gewijzigd door Wolfboy op 16-10-2003 03:13 ]

[MrZed]

Wolfboy schreef op 16 oktober 2003 @ 03:11:
die tags moeten daar iig weg mja dat maakt even weinig uit

HTML:

<table style="width:1000px; height:800px; border:1px solid;">
  <tr>
    <td style="height:150px;" colspan="4">dit word een banner ofzo?
</td>
  </tr>
  <tr>
    <td>eerste ding</td>
    <td>hier nog 1</td>
    <td>dit is ook nog iets</td>
    <td>geval 4</td>
  </tr>
</table>

is zoiets niet makkelijker voor je?

ja, zo gaat het er ooit ook wel uit zien!
Maar nu even niet.. haha

Mijn eerste zorg is om alle problemen die er zijn te verhelpen, en het laatste probleem is dus dat positioneren.. Als dat is opgelost, ga ik de code opschonen en gooi ik de boel officieel online.

edit Ik zie in mijn statistieken dat het merendeel van jullie is gekomen met een resolutie van 1024 x 768, ikzelf zit dus net eentje hoger. Maar op 1024 x 768 kwam ik dus achter het probleem dat de positie niet helemaal klopte.

[ Voor 23% gewijzigd door MrZed op 16-10-2003 03:16 ]

[Wolfboy]

je begrijpt blijkbaar niet helemaal wat ik wil zeggen
als je deze code gebruikt dan heb je geen last meer van de positionerings problemen

HTML:

<table style="width:1000px; height:800px; border:1px solid;">
  <tr>
    <td style="height:150px;" colspan="4">dit word een banner ofzo?
</td>
  </tr>
  <tr>
    <td style="width:50px;">eerste ding</td>
    <td style="width:100px;">hier nog 1</td>
    <td style="width:150px;">dit is ook nog iets</td>
    <td style="width:200px;">geval 4</td>
  </tr>
</table>

[MrZed]

is er niet gewoon een manier om dit met css op te lossen? Daar was css toch zo handig voor?

Ik kan natuurlijk ook gewoon aan de bestaande <td>'s dat style component toevoegen Poeh... kben al vanaf 12 uur vanmiddag bezig hiermee.. steeds wel pauzes uiteraard, maar toch, je zult begrijpen dat ik nu redelijk gaar ben!

[ Voor 56% gewijzigd door MrZed op 16-10-2003 03:28 ]

[MrZed]

mensen bedankt voor nu, ik red me wel

Nu is het eerst tijd voor een dutje.. tis verd*mm* weer half 4 geworden, net als gisteren, en dat is nou net wat ik niet wil! haha, once a nerd, always a nerd!

tot morgen!

[crisp]

absolute positionering is altijd t.o.v. zijn container. Een table-cell is geen block-level element en dus geen container, dus positioneer je t.o.v. je body. Dit kan je verhelpen door een relatief gepositioneerde div in je table-cell als container te gebruiken:

HTML:

<table>
  <tr>
    <td style="height:300px;width:100px">
      <div style="position:relative;height:300px">
        <div style="position:absolute;top:210px;left:75%">stats</div>
      </div>
    </td>
  </tr>
</table>

[MrZed]

@ Iedereen: super bedankt ik heb het voor elkaar gekregen met de manier waartoe wolfboy al een voorzetje gaf, en crisp het even afmaakte. Allemaal bedankt!

[Verwijderd]

HTML:

<table>
  <tr>
    <td style="position:relative;height:300px;width:100px">
        <div style="position:absolute;top:210px;left:75%">stats</div>
    </td>
  </tr>
</table>

Volgens mij zou dit ook moeten mogen.
Op het moment dat je position:relative aanroept, wordt het vanzelf een containing block. En absolute positioned blocks worden gepositioneerd aan de hand van de containing block.
http://www.w3.org/TR/CSS2/visuren.html#choose-position
http://www.w3.org/TR/CSS2/visuren.html#relative-positioning

En dit werkt dan weer niet in Mozilla vanwege:
http://bugzilla.mozilla.org/show_bug.cgi?id=35168

Ik weet het, ik ben aan het muggeziften, maar ik wou het gewoon (iig voor mezelf) duidelijk hebben