Moi!
Miten saisin kasattua sivun seuraavasti "pinoon"?
http://s759.photobucket.com/albums/xx231/
Tässä punainen neliö on vasemmassa laidassa ja on 100% korkea. Ylimpänä sen päällä on logo vihreässä neliössä ja valikko sen alla ruskeassa neliössä. Viimeisenä sinisessä neliössä on sisältö.
Jos osaat CSS, niin määrittelemällä absoluteina vihreän ja punaisen. Sininen sitten ihan normaalisti.
Kouluun lähtiessäni en ehtinyt muokata viestiäni, ja ilmoittaa että tuo vaihe onnistui. Mitäs sitten tehdään, jos kaikki teksti ei mahdu sivulle, ja tulee vierityspalkki? Tällöinhän kun selaa alas, niin vasen palkki jää vajaamittaiseksi. Miten tämä korjattaisiin?
Toinen ongelma on sivun valikon kanssa, kun käyttää Internet Exploreria.
Tässä kyseinen sivu: http://thunderstone.jouluserver.com/testit/sivu/
Kun valikkoa selaa, niin elementit hyppivät kummallisesti. Firefoxilla tämä toimii hyvin. Miten tämä korjataan?
absolute tekee niistä eräänlaisen kehyksen. Voit ottaa mallia useilta eri imageboardeilta:
www.kuvalauta.fi
www.2chan.net
www.4chan.org
www.420chan.org
Mitäköhän nyt tarkoitit? En halua käyttää frameja, tai iframea.
Vai, onko bugi oikeastaan muissa selaimissa, koska .npalkki:hover aktivoituu kun .npalkki-elementin päälle menee hiirellä. Tällöinhän, eikö sen voisi ajatella niin, että kaikki sillä class-arvolla olevat elementit liikkuisivat?
IE ei toimi kunnolla, jos margin-top -arvo on .npalkki:hover -lohkossa negatiivisella arvolla. Jos sen muuttaa positiiviseksi, tällöin vain se elementti jonka päällä ollaan liikkuu (Vähän tyhmä sanajärjestys).
Helpoin korjaus valikon taustaan:
#sisalto {
border-left: 200px solid #353B41;
margin-right: 10px;
min-height: 100%;
padding-bottom: 1px;
padding-left: 10px;
}Eli tehdäänkin värillistä borderia sisällölle, jolloin näyttää siltä että valikko venyisi. Toinen vaihtoehto olisi laittaa toistuva taustakuva, tämän voisi sijoittaa 1) html-elementtiin 2) body-elementtiin tai 3) #sisalto-elementtiin.
Muita ongelmia en ehdi juuri nyt pohtia.
Kiitos avusta. Miten valikko-ongelma ratkaistaisiin?
Koitin myös tehdä siten, että loin jokaiselle valikkoelementille omat tyylielementtinsä. Kaikki samoja, mutta ne eivät olleet mitenkään yhteydessä toisiin. Näin:
npalkki1 { ... }
npalkki1:hover { ... }
Mitä pitäisi tehdä?
Koitin myös erillaisella tavalla sijoittaa viereisiä elementtejä, ja valikkoa, mutta mikään ei tunnu tehoavan.
Osaisiko joku ratkaista näinkin kinkkisen pulman?
Mitenkäs on tuo sivun korkeus 100% onnistunut? Sujuuko, mikäli tekstiä on vähemmän kuin nyt tuolla sivulla?
Nykyisestä tilanteesta: Laita taustaväri, joka on sama kuin vasemmassa palkissa. Sisällölle oma taustavärinsä.
En ole suuri absoluuttisen sijoittelun ystävä, joten tässä on kellutuksia ja sivun jatkuvuutta hyväksi käyttävä versio. Toimii jopa IE6:lla! Sillä on ongelmia vain PNG:n alfakanavan kanssa.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Sivu</title>
<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
body {
background: #353B41 url('http://thunderstone.jouluserver.com/testit/sivu/img/ylapalkki.png') repeat-x;
}
body:after {
clear: both;
content: '';
display: block;
}
#otsikko {
color: #FFF;
height: 125px;
line-height: 60px;
margin: 0;
padding: 0;
}
#valikko {
background: url('http://thunderstone.jouluserver.com/testit/sivu/img/navigaatio.png') repeat-x 0 100%;
height: 60px;
list-style: none;
margin: 0;
padding: 0 0 0 200px;
}
#valikko li {
display: inline;
float: left;
margin: 0 15px 0 0;
}
#valikko a {
background: url('http://thunderstone.jouluserver.com/testit/sivu/img/navigaatiopalkki.png') no-repeat;
color: #000;
display: block;
margin-top: 5px;
line-height: 20px;
text-align: center;
text-decoration: none;
width: 150px;
}
#valikko a:hover {
background-image: url('http://thunderstone.jouluserver.com/testit/sivu/img/navigaatiopalkki2.png');
line-height: 25px;
margin-top: 0;
padding-bottom: 35px;
text-decoration: underline;
}
#sivupalkki {
float: left;
text-align: center;
width: 200px;
}
#sivupalkki p {
background: url('http://thunderstone.jouluserver.com/testit/sivu/img/viiva.png') no-repeat 50% 100%;
line-height: 25px;
margin: 0;
padding: 5px 0 0 0;
}
#sisalto {
background: #EDEDED;
margin-left: 200px;
min-height: 400px;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1 id="otsikko">Logoteksti</h1>
<ul id="valikko">
<li><a href="">Etusivu</a></li>
<li><a href="">Tiedotteet</a></li>
<li><a href="">Blogi</a></li>
<li><a href="">Vieraskirja</a></li>
</ul>
<div id="sivupalkki">
<p>Testi 1</p>
<p>Testi 2</p>
<p>Testi 3</p>
<p>Testi 4</p>
<p>Testi 5</p>
<p>Testi 6</p>
</div>
<div id="sisalto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lectus leo, adipiscing vel interdum nec, congue ut tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut porta egestas dui, condimentum dignissim nunc dictum nec. Aenean iaculis, magna eu gravida mollis, tellus lectus egestas nulla, sit amet viverra enim nulla eu arcu. Aliquam in est sed ligula pulvinar imperdiet. Aenean ante augue, vehicula at euismod quis, faucibus a est. Proin eget adipiscing magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam tempus sem a nisi pellentesque sit amet sodales neque condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida sem vel augue elementum in tincidunt mauris sodales. Sed enim sapien, consectetur quis pharetra eu, mattis aliquam metus. Nullam sed congue lectus. Suspendisse consequat nibh id arcu ornare et vehicula ligula consequat. Phasellus interdum posuere nisl, in varius tellus auctor nec. Nulla feugiat velit nec justo lacinia ullamcorper. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et blandit risus. Mauris vel odio quam, id ornare ligula. Curabitur consequat nisi sed quam sagittis blandit. Aenean lacinia fermentum urna, a suscipit eros pulvinar et. Nulla fermentum aliquam sagittis. Proin at ipsum ligula, in fermentum neque. Aenean ligula leo, pellentesque id pharetra in, ullamcorper quis est. Pellentesque tempus auctor arcu, a venenatis elit faucibus quis. Aliquam et pretium libero. Donec quis velit sapien, eget semper ante. Integer nunc ligula, consequat non euismod ut, aliquet eget nunc. Nulla a sem metus, a tempus augue. Integer augue augue, dapibus at semper sed, varius non lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Mauris laoreet, nulla at tempor porta, nisi ipsum scelerisque enim, suscipit commodo nisl dolor eget arcu. Morbi quam felis, consectetur sagittis porta ut, blandit in mauris. In at dui id dolor sagittis rutrum. Nam gravida nulla eget dolor pellentesque nec facilisis metus consectetur. Donec vulputate, est vel sollicitudin pellentesque, nisl nulla varius odio, non semper est lectus a quam. In blandit arcu eget est molestie tincidunt. Etiam augue risus, volutpat quis laoreet eu, semper ac sapien. Pellentesque hendrerit, mauris sed semper pellentesque, elit neque ultricies nunc, sed gravida eros elit a elit. Curabitur nec nulla in dui interdum mattis a sit amet libero. Nam eros justo, iaculis vel fermentum at, sagittis eget nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse erat turpis, varius nec ultrices malesuada, auctor ut justo. Suspendisse dolor lectus, vestibulum in egestas eu, varius quis justo. Etiam scelerisque mauris quis risus vulputate in consequat lectus accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur mauris sapien, semper id adipiscing at, scelerisque eu augue. Pellentesque interdum, lacus euismod convallis varius, tortor neque rutrum nisl, at fermentum nisl urna elementum risus. Phasellus tempor imperdiet purus vitae ornare. Maecenas at massa nec nunc laoreet placerat. </p>
<p>Vivamus accumsan vestibulum ante, vel posuere nisl sodales in. Quisque mattis interdum ipsum sed aliquet. Donec volutpat sagittis quam in scelerisque. Integer molestie nulla vitae magna fringilla facilisis. Fusce id magna lobortis dui suscipit interdum. Suspendisse potenti. Vivamus semper suscipit justo, sed laoreet turpis pellentesque sit amet. Nulla facilisi. Phasellus congue pulvinar nulla, tristique aliquam lectus venenatis sed. Etiam tempor, lacus in venenatis pretium, nunc justo imperdiet tortor, vulputate venenatis nunc velit id nisi. Quisque sed dolor neque. Duis egestas accumsan libero sed aliquet. Sed volutpat dapibus nibh vitae porttitor. Integer ac leo rutrum leo ultrices vestibulum egestas vel nisl. Donec egestas venenatis diam, a sodales turpis ullamcorper nec. Ut vel sapien at nibh cursus interdum sit amet eget velit. </p>
<p>Nunc fermentum luctus metus at lacinia. Proin vel ante purus, sed molestie sem. Morbi vehicula volutpat urna vitae porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus commodo purus eget mi tempus nec luctus nisl ultricies. Donec turpis ipsum, viverra nec euismod quis, ullamcorper eu felis. Mauris lacus lorem, mollis sit amet feugiat dignissim, mollis vel lectus. Praesent porta tellus eget massa egestas ut malesuada ligula porttitor. Praesent vulputate elementum massa eget ullamcorper. Donec tincidunt justo purus. Nam fringilla, metus ut viverra interdum, nisl purus sollicitudin arcu, ut auctor nisi mi eu lacus. In lorem neque, facilisis ac varius ut, euismod vel neque. Cras non tellus dui, et laoreet purus. Sed vel lorem ut dui dapibus adipiscing non eget est.<p>
</div>
</body>
</html>Tässä ehkä isoin juttu on juuri se, että olen irroitellut "tämä elementti on tässä ja sillä on just tää tausta ja se venyy just näin isoksi" -logiikan siihen, että olenkin vaan peitellyt tarpeen mukaan. Esim. tummanharmaa taustaväri ja sen taustakuva on vain ja ainoastaan body-elementissä. Lisäksi olen käyttänyt suhteellisen vähän tarkkoja height-määrityksiä ja olen sen sijaan käyttänyt line-heightiä, jolla on se hauska vaikutus että teksti keskittyy sen korkeuden mukaan.
Toinen iso muutos on toki tuo luopuminen absoluuttisesta sijoittelusta. #otsikko on 125 pikseliä korkea, #valikko on 60 pikseliä korkea, #sivupalkki on sen kokoinen kuin sisältönsä samoin kuin #sisalto, mitä nyt on 400 pikselin minimikorkeus. Pääasiassa tuossa on siis kolme elementtiä päällekkäin (#otsikko, #valikko, #sisalto) ja sivupalkki on kellutettu. #valikkoa ja #sisaltoa on mulkattu sen verran, että ne näyttäisivät muka väistävän sivupalkkia.
Ja joo, oli nopeampaa värkätä CSS alusta kun alkaa selvitellä, miten korjata sekä IE:n ongelmat että muita oheisongelmia, joita nykyisessä sivussasi on.
Kiitos Merri!
Muutin kummiskin vasempaan elementtiin absoluten takaisin, jolloin sain laitettua bodylle #ededed taustavärin, ja niin oikea elementti näyttäisi venyvän alas asti. Internet Explorer 6 -version tuelle ei ole kotipiirissä mitään tarvetta. Ennemmin karsin vanhentuneen selaimen pois, ennemmin kuin antaisin sen näyttää huonolta.
Aihe on jo aika vanha, joten et voi enää vastata siihen.