Keskustelu: Nettisivujen teko: div ja sen koko

Mulla on sivuilla sisäänkirjautumis-laatikot ja nappulat yhden divin sisällä, jonka koko on 452x53 pikseliä. Tarkoitus olis saada kaksi kuvaa (input-boxien taustalle) ja niiden päälle kaksi input-boxia. Kuitenkin kun input-boxien ja kuvien yhdistetty leveys ylittää helposti tuon 452 pikseliä, niin divin sisään tulee ylimääräinen rivi jota en millään saa pois. Toivottavasti kuva selventää asiaa. Ylempänä on kirjautumis-divin tämänhetkinen kuva ja alhaalla on kuva miltä sen pitäisi näyttää.

Koitin css:n 'position: relative;':lla, mutta sinne jää siltikin se rivi. 'position: absolute;':lla tuota ei voi oikeen tehdä kun se ei toimisi eri resoluutioilla oikein.

Jos mahdollista, niin näytä mielummin se html-sivu + css. Itellä ainakin täällä vastaavanlainen homma ja toiminut kuin junan vessa.

Sivun alku on nähtävissä http://punppis.arkku.net/sivut/manse/

Ton "Tervetuloa..." kuvan pitäs siis alkaa melkein heti noitten login-boxien alapuolelta.

Miten saisin määritettyä css:llä jonkun elementin koon niin, ettei se muutu vaikka siinä olisi kuinka paljon tekstiä?

CSS:n Overflow -ominaisuus auttaa.
Voit piilottaa elementtiin mahtumattoman sisällön:

overflow: hidden;

Tai voit tehdä elementin reunaan vierityspalkin:

overflow: scroll;

Tai voit tehdä elementin reunaan vierityspalkin vain, jos sisältö ei mahdu elementtiin:

overflow: auto;

Pistin style.css:ään .login { ... } -kohdan loppuun 'overflow: hidden;', mutta silti siihen tulee tuota ylimääräistä tilaa.

Divissä ei ole mitään ongelmaa: sen sijaan solussa ja sen sisällössä niitä riittää. Ongelmat johtuivat siitä, ettet oikein ymmärrä miten position: relative; toimii. Se ei ole kovin mukava monen elementin käyttöön juuri näiden kohtaamiesi ongelmien vuoksi. Toisekseen et ollut poistanut .login formista marginaaleja ja sisennystä.

Korjauksia/lisäyksiä:

div.alaosa { position : relative; }
td.login { padding : 0 0 0 20px; }
td.login form { margin : 0; padding : 0; }
img.username { position : absolute; }
img.password { left : 186px; position : absolute; }
#username,#password { top : 0; }
input.kirjauduimg { left : 400px; position : absolute; }
span.kirjaudu { left : 353px; position : absolute: top : 20px; }

Relative on siitä hyödyllinen, että sen lapsielementtinä olevat absoluuttisesti sijoitellut elementit käyttävät tämän isännöivän relative-elementin mittasuhteita omina vertailukohteinaan. Täten asettamalla .alaosan suhteelliseksi saamme aikaiseksi haluamanlaisesi toiminnan absoluuttisille elementeille. Sitten kun lisäksi nollataan vielä jäljellä olevat marginaalit ja sisennykset niin johan alkaa näyttää siltä miltä pitää.

Taulukoista voit muuten näppärästi poistaa sisennyksen ja reunat ihan CSS:llä käyttäen border-collapse : collapse; - poistaa spacingin että paddingin, myös IE:ssä. Ei tarvitse sitten niitäkään sotkea HTML:ään.

(Noin yleisesti on kyllä vähän karmeaa katsottavaa tuo taulukkotaiton ja divien ylikäytön sekasotku, mutta siitä riittänee tämmöinen huomautus nostamaan esille sen, että kehittymisvaraa on vielä runsaasti sivujentekijänä.)

Jos tahdot vertailukohtaa siihen, miten minä olisin lähestynyt ongelmaa, niin en olisi edes tehnyt absoluuttisesti sijoitettuja elementtejä: tuohon kun riittäisi kun nätisti heittäisi elementit inlinenä ja laittaisi tarpeellisen sisennyksen formiin. Kirjautumislootien taustat voisi heittää formiin PNG-taustakuvana (PNG, koska se pakkautuu niin hyvin). HTML muuttuu yksinkertaisemmaksi kun ylimääräinen ulkoasu vedetään sieltä pois.