HTML-koodaus: Vierityspalkki ylä- ja alabannerien väliin?
Jps:
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 not found - or removed ]
Juuseppi:
Lainaus
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
Jps:
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:
Lainaus
<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:
Lainaus
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;
}
Juuseppi:
Lainaus
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 ?
Koodia:
text-align: center;
top: 100px;
bottom: 100px;
clear: none;
Nyt lyö aivot tyhjää, etten tuosta muuta äkkiä löytänyt, mutta mietiskellään vielä.
Kari K.:
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
Navigaatio