Moi
Minulla on elementti joka on asetettu sivun alareunaan keskelle sivua. Jos sisältöä tulee enemmän kuin näytölle mahtuu ( = scrollbar) ja rullaa alas, niin elementti X ei pysykkään enään alareunassa. Miten saisin sen pysymään kiinteästi siellä?
Näihin kysymyksiin olisi helppo laittaa linkki sivulle, jossa ongelma esiintyy, niin sitten kaikkien olisi helppo katsoa millä tavalla se nykyinen on tehty ja mitä siinä täytyisi muuttaa.
Ilman tarkempaa tietoa on melko mahdotonta antaa varmasti toimivaa vastausta. Toki varmaan useampikin vastaus voisi tuurilla auttaa.
Tai sitten jos vaan haluaa tietää miten jokin asia kuuluisi tehdä, eikä halua kertoa nykytoteutusta, niin on ihan turha selittää miten nykyinen toimii.
Oletko tyylitellyt sen siis tyyliin:
elementti{
position: fixed;
bottom: -1%;
}Tarkoitit varmaan tätä:
#footer {
position: fixed;
bottom: 0;
}Jos kohdistit minuun, niin en elementti on geneerinen nimi, joka vastaa mitä tahansa elementtiä.
Kiitos -tossu-. Noinkin yksinkertaisesti se alkoi toimimaan.
Oikeastaan elementti on määritelty alas näin:
elementti {
bottom: 0px;
position: absolute;
}Laitampa tähän sitten koodia.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sivusto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="con">
<div id="yla"></div>
<div id="sis">
<div id="tsis">
Tähän väliin tulee pitkä sisältö
</div>
</div>
<div id="ala"></div>
</div>
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#"><span>Etusivu</span><img src="images/bw/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><span>Ota yhteyttä</span><img src="images/bw//email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><span>Portfolio</span><img src="images/bw//portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><span>Musiikki</span><img src="images/bw//music.png" alt="music" /></a>
<a class="dock-item2" href="#"><span>Video</span><img src="images/bw//video.png" alt="video" /></a>
<a class="dock-item2" href="#"><span>Historia</span><img src="images/bw//history.png" alt="history" /></a>
<a class="dock-item2" href="#"><span>Kalenteri</span><img src="images/bw//calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><span>Linkit</span><img src="images/bw//link.png" alt="links" /></a>
<a class="dock-item2" href="#"><span>RSS</span><img src="images/bw//rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><span>RSS2</span><img src="images/bw//rss2.png" alt="rss" /></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
</body>
</html>// Joukkoon on eksynyt ylimääräistäkin
body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url("images/main-bg.gif");
padding: 0;
margin: 0;
height: 100%;
}
img {
border: none;
}
.dock {
position: relative;
height: 50px;
text-align: center;
}
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url("images/dock-bg.gif");
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
#con {
width: 730px;
margin: auto auto;
}
#yla {
background-image: url("kuvat/ylaosa.png");
width: 730px;
height: 75px;
}
#ala {
background-image: url("kuvat/alaosa.png");
width: 730px;
height: 32px;
}
#sis {
background-image: url("kuvat/sisalto.png");
width: 730px;
}
#tsis {
padding: 10px 35px 10px 20px;
}Sitten on lisäksy jQuery- ja Interface-kirjastot.
-tossu-:n koodi pitää elementin kyllä alhaalla, mutta position: fixed sekoittaa muun toiminnan.
Muuten, miten tuon dock-systeemin saa koko sivun levyiseksi? Mitkään width-määritteet eivät ole auttaneet.
Teuro kirjoitti:
Jos kohdistit minuun, niin en elementti on geneerinen nimi, joka vastaa mitä tahansa elementtiä.
En kohdistanut sinuun vaan Macroon; kun aloitin kirjoittamaan viestiäni, ei tässä aihessa ollut vielä yhtään vastausta.
Macro kirjoitti:
-tossu-:n koodi pitää elementin kyllä alhaalla, mutta position: fixed sekoittaa muun toiminnan.
Ei tuo sivu näytä toimivan ilman "position: fixed":iäkään. Otin tosin JavaScriptit pois, koska minulla ei ole noita kirjastoja koneella.
Ok vedän siis sanani takaisin. :)
No, ilman JavaScriptiä tuo ei toimikkaan. Ilman sitä elementit kasaantuvat vasempaan reunaan. Eikö vain?
Muita ehdotuksia korjaamiseen?
Sivuista kannattaa tehdä sellaiset, että ne toimivat myös ilman JavaScriptiä. Voisit laittaa tuon sivun nettiin, niin olisi helpompi testata omia koodeja, mielellään vielä siten että CSS on samassa tiedostossa kuin HTML.
Valitettavasti en saa nyt sivuja nettiin, kun ei ole missään mitään palvelinta mitä käyttää, ja omaa palvelinta ei saa nettiin tuon Elisa Kotiboksin takia. Pahoitteluni.
Jos sivut toimisivat ilman JavaScriptiä, pystyisin testaamaan niitä.
Macro kirjoitti:
position: fixed sekoittaa muun toiminnan.
Kerro vähän tarkemmin mitä "position: fixed" sekoittaa.
-tossu- kirjoitti:
Macro kirjoitti:
position: fixed sekoittaa muun toiminnan.
Kerro vähän tarkemmin mitä "position: fixed" sekoittaa.
Todennäköisesti tuo Interface kirjasto "tekee" elementteihin jonkinsortin keskipisteen, ja tarkistaa kuinka lähellä elementtiä hiiri on. Sitten se suurentaa kuvia hiiren läheltä sen mukaan, kuinka lähellä ollaan. Eli, hiiri kaukana keskipisteestä -> pieni kuva. Hiiri lähellä keskipistettä -> suuri kuva.
Ongelma: Skrollatessa tämä oletettu keskipisteentarkistus jää oleilemaan sinne ylös, missä se oli alunperin.
Macro kirjoitti:
Ongelma: Skrollatessa tämä oletettu keskipisteentarkistus jää oleilemaan sinne ylös, missä se oli alunperin.
Tuo johtuu bugista Interfacessa, joka korjautuu patch:illa. http://www.monkey-business.biz/181/jquery-interfaces-fisheye-position-fixed-patch/
Kiitos, nyt se toimii hyvin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.