Keskustelu: Nettisivujen teko: HTML/CSS ja divin + linkin asemointi oikealle

xxmss [14.08.2018 18:43:38]

Pitäisi saada kutakuinkin tämmöinen näkymä:

This is my text. This is my text. Thi... TEXT [Button]

Nyt kuitenkin TEXT ja hyperlinkki katoavat näkyvistä. Miten ihmeessä saisin ne tuonne oikealle? IE 7 täytyisi olla tuettuna myös.

<div class="listaus" style="width:400px;">
  <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;width:100%; display:inline-block; vertical-align:middle; text-align:left; background-color:#D4D9E8; height:24px; line-height: 24px;">
    This is my text. This is my text. This is my text. This is my text.

    <span style="position:relative; top:0; right:0; white-space:nowrap;">
      <div style="width: 50px; float: left">TEXT</div>

      <a href="go.html">[Button]</a>
    </span>
  </div>
</div>

Kiitos avusta.

Grez [14.08.2018 21:10:07]

Mite olis jotenkin tälleen

<div class="listaus" style="width: 400px">
  <div style="float: right; width: 50px;">TEXT <a href="go.html">[Button]</a></div>
  <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle; background-color:#D4D9E8; height:24px; line-height: 24px;">
    This is my text. This is my text. This is my text. This is my text.
  </div>
</div>

En ole testannut IE7.

xxmss [14.08.2018 21:59:47]

Tuossa 50 pikseliä leveän divin sisässä ovat sekä TEXT että hyperlinkki, mutta alkuperäisessä koodissa 50 pikselin divin sisällä oli vain TEXT.

Grez [15.08.2018 09:05:15]

Niin, tarkoitus oli antaa vinkkiä miten sen voisi esimerkiksi toteuttaa.

Alkuperäinen koodi oli sen verran erikoinen, että en ollut ollenkaan varma mitä siinä oli tarkoitettu tehtäväksi, vaikka kieltämättä 50px leveys oli vain TEXT-pätkälle.

Mutta olisiko sitten tällainen ollut tarkoituksena?

<div class="listaus" style="width: 400px">
  <div style="float: right;"><a href="go.html">[Button]</a></div>
  <div style="float: right; width: 50px;">TEXT</div>
  <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle; background-color:#D4D9E8; height:24px; line-height: 24px;">
    This is my text. This is my text. This is my text. This is my text.
  </div>
</div>

xxmss [16.08.2018 01:06:54]

Kiitos, viimeisimpää hieman muokkaamalla onnistui hienosti.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku