Olis tälläinen kysymys, että kuinka saan div elementin leveyden riippumaan ikkunan leveydestä ilman prosentti mentaliteettiä?
Eli kotisivussani on oikeanpuoleinen navigointipalkki, jonka olen vain floadannu oikealle ja asettanut sille kiinteän leveyden(200px).
Navigointipalkin vasemmalle puolella on div laatikko. Tarkoitukseni olisi saada tämä div elementin leveys määräytymään ikkunan koon mukaan siten, että laatikon ja navigointi palkin väliin jää aina 20 pikseliä. Laatikon vasenreuna täytyisi olla taas aina kiinni ikkunassa. Jos käytän laatikon leveyden määrityksessä prosentteja, niin silloin etäisyys navigointipalkkiin ei pysy samana ja sen lisäksi ikkunaa pienennettäessä riittävästi, kone flippaa laatikkoni navigointipalikan alapuolelle - luonnollisesti.
Jos siis ikkunaa venytetään, niin div elementtikin täytyisi venyä, navigointipalkin tai muun tavaran leveyden pysyessään ennallaan. Mikä olisi ratkaisu probleemaa, onko mitään määritettä tyyliin:
width: AS LARGE AS POSSIBLE;
tai
width: SO LONG UNTIL DISTANCE TO OTHER 20px
tai jotain rakennetta millä tämän tarpeen voi korvata.
Jos laatikossa on riittävästi sisältöä, riittää, että asetat marginaalin niin, ettei laatikko pääse liian reunaan.
margin-right: 220px;
On siinä oikeastaan tavaraa: kuva, jonka leveys on jotain 1400 pikseliä. Ongelma on kuitenkin se, että haluaisin, että kuvasta näkyy vain osa, riippuen siitä kuinka leveä ikkuna on. Jos laitan kuvan img tagilla, niin silloin kuva on täsmälleen sen 1400 px leveä, eikä se enää floadaannu navipalkin vasemmalle puolelle, vaan alapuolelle.
Sen takia olen laittanut kuvan div elementin backgroundiksi, mutta ilmeisesti backgroundi ei ole sisältöä, vaan pelkkää backgroundia, eikä laatikkoa ole ilman sisältöä, ellei määritä leveyttä.
Keksitkö ongelmaa vielä jotain ratkaisua?
Laita sille diville overflow: hidden;
joo, tolla tosiaan saa tuon kuvan kehyksiinsä, mutta tässäkin tapauksessa joutuu käyttämään jotain yksikköä ilmaisemaan div elementin leveyttä, eikä prosentit ole käytännöllisiä tässä tilanteessa.
No kaippa täytyy koodata systeemi javascriptillä.
Mutta kiitokset silti vastauksista!
Tee vaikka span-elementti johon laitat taustakuvan, aseta display: block; ja height kuntoon niin pitäisi toimia. Voit myös laittaa kuvauksen title-attribuuttiin.
Millainen span elementti? Mitä tässä span elementissä olis sitten niin ku sisältönä?
Aika suoraan kyllä kuvasin, mutta pistetään nyt sama sitten koodina, ei se mikään ihmeellinen ole:
<span style="display:block;height:KUVANKOKOpx" title="Kuvaus"></span>
Se on siis sisällöltään tyhjä. Jos tahtoo oikein kikkailla perinpohjaisesti asiat oikein, niin voihan siihen tunkea tekstiäkin, mutta piilotella näkymästä:
<span style="display:block;height:1px;overflow:
Joo, suuret kiitokset! Homma toimii. En vain aluks oikeen ymmärtänyt tuota logiikkaa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.