[html] images uitlijnen

[Verwijderd]

mijn probleem is, ik heb zeg maar een website gemaakt, met een middenframe (dat dus altijd even breed is).
bovenaan dat middenframe zit een logo op de goede breedte (van dat frame dus), en daaronder zit een menu in de vorm van 5 images die elk 130x30 zijn, ze staan nu gecenterd in een table, maar nu wil ik die images zodanig uitlijnen dat de linkse precies even links zit als het splash/logo en de rechtse even rechts eindigt (ja ik weet het rare manier om het duidelijk te maken) en de andere drie er precies tussenin...

[Verwijderd]

Misschien dat een

• url
• plaatje
• code

Ons wat op weg zou helpen...

[RM-rf]

wil je layout doen in HTML (wat zelf enkel de struktuur van je data beschrijft) moet je dat doen met CSS:
dit biedt volop positioneringsmogelijkheden; absoluut, relatief, floats, en de mogelijkheid met margins en paddings te werken voor nette uitlijningen.

eengnomen dat je middenframe juist niet altijd even breed zal zijn:

code:

DIV.navigatie IMG {
   position:absolute
}
DIV.navigatie IMG.class1 {
   left: 0%;
   margin-left: 0px
}
DIV.navigatie IMG.class2 {
   left: 25%;
   margin-left: -32px
}
DIV.navigatie IMG.class3 {
   left: 50%;
   margin-left: -65px
}
DIV.navigatie IMG.class4 {
   left: 75%;
   margin-left: -97px
}
DIV.navigatie IMG.class5 {
   left: 100%;
   margin-left: -130px
}

overigens 5x130 is exact 800 pixels, een beetje onpretige maat, aangezien schermen op 800px breed, juist een effectieve broiwservensterbreedte hebben van iets van 790px of zelfs minder als er office-bar staat, kies dan liever voor een minimale effectieve breedte van 780px.

[ Voor 77% gewijzigd door RM-rf op 10-05-2003 11:51 ]

[Verwijderd]

Umm... Ik haal hier uit op dat je de spacing tussen die menuplaatjes gelijk wilt hebben (5 plaatjes, 4 spacings van X pixels) correct? Reken uit wat die spacing moet zijn en pas daar je <td> groote op aan.

Of doe bij elk plaatje 'style="margin:<pixels boven>px <pixels-rechtst>px <pixels-beneden>px <pixels-links>px;"' waarbij je dan de juiste waarden voor <pixels-blaat> invult. Hierbij ga ik er wel van uit dat die plaatjes in 1 TD staan (en wellicht dat je nu zelfs die hele TABLE weg kunt doen)

Duidelijk zo? Post anders even een URL zodat we de pagina kunnen zien.

(post van RM-rf hierboven vind ikzelf een erg mooie oplossing, temeer omdat die ook rekening houdt met een variable pagina breedte )

[ Voor 29% gewijzigd door Verwijderd op 10-05-2003 11:53 ]

[Verwijderd]

RM-rf schreef op 10 May 2003 @ 11:43:
wil je layout doen in HTML (wat zelf enkel de struktuur van je data beschrijft) moet je dat doen met CSS:
dit biedt volop positioneringsmogelijkheden; absoluut, relatief, floats, en de mogelijkheid met margins en paddings te werken voor nette uitlijningen.

eengnomen dat je middenframe juist niet altijd even breed zal zijn:

code:

DIV.navigatie IMG {
   position:absolute
}
DIV.navigatie IMG.class1 {
   left: 0%;
   margin-left: 0px
}
DIV.navigatie IMG.class2 {
   left: 25%;
   margin-left: -32px
}
DIV.navigatie IMG.class3 {
   left: 50%;
   margin-left: -65px
}
DIV.navigatie IMG.class4 {
   left: 75%;
   margin-left: -97px
}
DIV.navigatie IMG.class5 {
   left: 100%;
   margin-left: -130px
}

overigens 5x130 is exact 800 pixels, een beetje onpretige maat, aangezien schermen op 800px breed, juist een effectieve broiwservensterbreedte hebben van iets van 790px of zelfs minder als er office-bar staat, kies dan liever voor een minimale effectieve breedte van 780px.

ehh sorry hoor maar 5*130 is toch echt exact 650 pixels.
maar bedankt, ik ga dat css verhaal ff uitproberen...

[Verwijderd]

ik heb nu idd een soortgelijk verhaal, style.css:

code:

div.navigatie img       { position: relative }
div.navigatie img.img1      { left: 0%; margin-left: 0px }
div.navigatie img.img2      { left: 25%; margin-left: -30px }
div.navigatie img.img3      { left: 50%; margin-left: -59px }
div.navigatie img.img4      { left: 75%; margin-left: -89px }
div.navigatie img.img5      { left: 100%; margin-left: -118px }

(en meer)
maar, met position op absolute werkte het niet, want ik heb het geheel nu in 1 table cell staan omdat het splash logo en de knoppen dus ook niet de HELE breedte van het frame beslaan
die aantallen pixels heb ik uitgerekend, omdat het logo 768 breed is, en de menu images bij elkaar 650. dan hou je dus 118 over aan spacing die je in vieren moet verdelen...

main.html (center frame) is dus nu:

code:

    [img]"img/logo_boven.jpg"[/img]<br>
<!--    <table width="100%" border=0>
        <tr>
            <td><center><a href="chome.html" target="content">[img]"img/bhome.jpg"[/img]</a></center></td>
            <td><center><a href="cgame.html" target="content">[img]"img/bgame.jpg"[/img]</a></center></td>
            <td><center><a href="cware.html" target="content">[img]"img/bware.jpg"[/img]</a></center></td>
            <td><center><a href="cpict.html" target="content">[img]"img/bpict.jpg"[/img]</a></center></td>
            <td><center><a href="ccont.html" target="content">[img]"img/bcont.jpg"[/img]</a></center></td>
        </tr>
    </table>
!-->
    <table width="90%" border=0>
        <tr>
            <td>
                <div class="navigatie">
                    <a href="chome.html" target="content">[img]"img/bhome.jpg"[/img]</a>
                    <a href="cgame.html" target="content">[img]"img/bgame.jpg"[/img]</a>
                    <a href="cware.html" target="content">[img]"img/bware.jpg"[/img]</a>
                    <a href="cpict.html" target="content">[img]"img/bpict.jpg"[/img]</a>
                    <a href="ccont.html" target="content">[img]"img/bcont.jpg"[/img]</a>
                </div>
            </td>
        </tr>
    </table>

edit:

ja sorry voor layout fuckupage...

[ Voor 28% gewijzigd door Verwijderd op 10-05-2003 12:50 ]

[Verwijderd]

iedereen bedankt, het is nu als volgt redelijk gelukt:

code:

div.navigatie img       { position: relative }
div.navigatie img.img1      { left: 0%; margin-left: 0px }
div.navigatie img.img2      { left: 3%; margin-left: 2px }
div.navigatie img.img3      { left: 6%; margin-left: 3px }
div.navigatie img.img4      { left: 9%; margin-left: 5px }
div.navigatie img.img5      { left: 12%; margin-left: 6px }