Juhana Suhonen

HTML-koodaus: Vierityspalkki ylä- ja alabannerien väliin?

Aloittanut Juhana Suhonen,

7 viestiä aiheessa

Kirjoitettu

Eli olen tekemässä nettisivuja käyttämällä pelkkää html- ja css-koodausta. Sivulla on yläbanneri, tekstialue, sekä alabanneri. Bannerit näkyvät koko ajan, ja tarkoitus on, että jos tekstialueella on enemmän tekstiä kuin siihen mahtuu, tulee vierityspalkki, jolla saa lopun tekstistä näkyviin.

 

Olen saanut kaiken muuten toimimaan, mutta vierityspalkki jää alabannerin taakse. Haluaisin sen olevan kokonaan alabannerin yläpuolella kuten se on yläbannerin alapuolella. Miten tämän siis saisi aikaiseksi?

Ohessa vielä kuva; haluaisin siis alas samanlaisen nuolen kuin on ylhäällä; nyt se nuoli jää alabannerin taakse.

 

 

 

[ attachment removed / expired ]

 

Jaa viesti

Link to post
Jaa muulla sivustolla

Kirjoitettu

nyt se nuoli jää alabannerin taakse.

 

Tuon kuvan perusteella vaikuttaisi siltä, että sulla on alabanneri tuon tekstialueen sisällä. Tuo banneri pitää sijoittaa tekstialueen ulkopuolelle=alapuolelle. Tarttis nähdä tuo HTML-koodi tarkemman analysoinnin aikaan saamiseksi

Jaa viesti

Link to post
Jaa muulla sivustolla

Kirjoitettu

Olet oikeassa, teksti jää bannerin alle. Banneri on päällä z-index:n avulla.

Eli ongelmahan oli juuri siinä, että en saa rajattua tuota tekstialuetta niin, että selaimesta jäisi alue ylä- ja alabannereille, jotka näkyvät aina. Ylhäällä tämä jo onnistui antamalla tekstin div:lle top: 100px, mutta alhaalla sama ei toimi.

Laitan vielä koodin tuohon alle, css on erillisessä  tiedostossa, johon on linkki.

HTML:

<body>

<div id="container">

  <div id="header">

    <p>Content for  id "header" Goes Here</p>

  </div>

  <div id="main">

    <div class="pad2"></div>

    <p>Content for  id this Goes Here</p>

    <p>Content for  id that Goes Here</p>

    <div class="pad2"></div>

  </div>

  <div id="footer">Content for  id "footer" Goes Here</div>

</div>

 

</body>

CSS:

html {

height:100%; /* fix height to 100% for IE */

max-height:100%; /* fix height for other browsers */

padding:0; /*remove padding */

margin:0; /* remove margins */

border:0; /* remove borders */

background:#fff; /*color background - only works in IE */

font-size:80%; /*set default font size */

font-family:"trebuchet ms", tahoma, verdana, arial, sans-serif; /* set default font */

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow:hidden; /*get rid of scroll bars in IE */

/* */

}

 

body {

height:100%; /* fix height to 100% for IE */

width: 100%;

max-height:100%; /* fix height for other browsers */

overflow: hidden; /*get rid of scroll bars in IE */

padding:0; /*remove padding */

margin:0; /* remove margins */

border:0; /* remove borders */

position: absolute;

}

 

#main {

display:block; /* set up as a block */

height:100%; /* set height to full page */

max-height:100%;

width: 100%;

overflow:auto; /* pad left to avoid navigation div if required */

position:absolute; /* set up relative positioning so that z-index will work */

z-index:3; /* allocate a suitable z-index */

text-align: center;

top: 100px;

clear: none;

}

 

#header {

height: 100px;

width: 100%;

position: fixed;

top: 0;

z-index: 5;

text-align: center;

background-color: #0FF;

}

#footer {

height: 100px;

width: 100%;

position: fixed;

bottom: 0px;

z-index: 4;

text-align: center;

background-color: #30F;

}

Jaa viesti

Link to post
Jaa muulla sivustolla

Kirjoitettu

Olet oikeassa, teksti jää bannerin alle. Banneri on päällä z-index:n avulla.

Eli ongelmahan oli juuri siinä, että en saa rajattua tuota tekstialuetta niin, että selaimesta jäisi alue ylä- ja alabannereille, jotka näkyvät aina. Ylhäällä tämä jo onnistui antamalla tekstin div:lle top: 100px, mutta alhaalla sama ei toimi.

Laitan vielä koodin tuohon alle, css on erillisessä  tiedostossa, johon on linkki.

 

Eli olet alhaalle kokeillut antaa tekstin div:lle bottom: 100px ?

 

   
text-align: center;
top: 100px;
bottom: 100px;
clear: none;

 

Nyt lyö aivot tyhjää, etten tuosta muuta äkkiä löytänyt, mutta mietiskellään vielä.

Jaa viesti

Link to post
Jaa muulla sivustolla

Kirjoitettu

Terve,

 

Ongelmasi voisi johtua siitä kun määrittelet main-elementin korkeudeksi 100%. Selain täyttää aina main-elementillä koko ruudun välittämättä onko siinä muita elementtejä kuten footer tms.. Jos elementit määriteltäisiin kiinteiksi (500px; tms) ei tätä ongelmaa esiinny. Internet-sivustoa suunniteltaessa kannattaa huomioida, että käyttäjillä voi olla käytössään suuria näyttöjä (2500 x 1600 px). Tällöin Internet-sivu skaalautuu aina näytön mukaan, jolloin sivuun suunniteltu ulkoasu voi rikkoontua - tai näyttää huonolta.

 

Voisi tietysti kokeilla määritellä main-elementin max-height -arvoksi vaikkapa 70% tms.. Mutta ongelma saattaa tositua erikokoisella näytöllä katsottaessa  :'(

Jaa viesti

Link to post
Jaa muulla sivustolla

Kirjoitettu

Eli olet alhaalle kokeillut antaa tekstin div:lle bottom: 100px ?

Yritetty on, juu, mutta ei auta.

Terve,

 

Ongelmasi voisi johtua siitä kun määrittelet main-elementin korkeudeksi 100%. Selain täyttää aina main-elementillä koko ruudun välittämättä onko siinä muita elementtejä kuten footer tms.. Jos elementit määriteltäisiin kiinteiksi (500px; tms) ei tätä ongelmaa esiinny. Internet-sivustoa suunniteltaessa kannattaa huomioida, että käyttäjillä voi olla käytössään suuria näyttöjä (2500 x 1600 px). Tällöin Internet-sivu skaalautuu aina näytön mukaan, jolloin sivuun suunniteltu ulkoasu voi rikkoontua - tai näyttää huonolta.

 

Voisi tietysti kokeilla määritellä main-elementin max-height -arvoksi vaikkapa 70% tms.. Mutta ongelma saattaa tositua erikokoisella näytöllä katsottaessa  :'(

 

Sinänsä totta, sillä jos main elementille määrittelee tuon 70%, koko teksti näkyy ruudulla, mutta jos ruutu on iso, main jää vajaaksi alhaalta (eli alanuolen ja alabannerin välissä on tyhjää tilaa). Ja jos näyttö on riittävän pieni, tulee taaskin sama ongelma kuin aiemmin. Eli tuo ei itsessään ole ratkaisu ongelmaan. Main elementin kooksi pitäisi saada 100%-200px, jolloin se olisi jokaisella näytöllä juuri oikean kokoinen.

 

Ja olen juurikin yrittänyt tehdä nätä sivuja niin, että näkyvät samalla tavalla kaiken kokoisissa ruuduissa, vain main elementin vaihdellessa kokoaan.

 

Löysin sivun, jonka layout on juuri, mitä haluan. En kuitenkaan osaa lukea lähdekoodia niin hyvin, että saisin siitä mitään merkittävää irti... Yritin vaihtaa main elementin position: fixed, mutta ei sekään tuntunut toimivan...

Jaa viesti

Link to post
Jaa muulla sivustolla

Kirjoitettu

Noniin, edellisen sivun avulla ongelma ratkesi. Löysin sieltä nimittäin ohjeet sen linkitetyn sivun tekemiseen.

 

Ongelma oli tosiaan siinä, että mulla oli main 100% height. Poistamalla tuon kokonaan (body kun määrittelee jo sivulle 100% height&width), ja antamalla main top:100px, bottom:100px, syntyi juurikin haluttu lopputulos.

 

Kiitos teille avusta!

Jaa viesti

Link to post
Jaa muulla sivustolla

Luo uusi käyttäjätunnus tai kirjaudu sisään

Sinun täytyy olla jäsen osallistuaksesi keskusteluun

Luo käyttäjätili

Rekisteröi uusi käyttäjätili helposti ja nopeasti!


Luo uusi käyttäjätili

Kirjaudu sisään

Sinulla on jo käyttäjätili?


Kirjaudu sisään
Palaa aiheisiin Ohjelmat ja laitteet