Miten tekisitte mahdollisimman yksikertaisesti kuvan laytoutin? Pitäisi olla kiinteä, eli ei responsiivinen. Pysyy siis saman näköisenä näytön/ikkunan koosta huolimatta.
Mulla menee nyt nuo divit täysin sekaisin..
+--------------+--------+ | logo | | +--------------+ sivu- | | navigaatio | palkin | +--------------+ laati- | | sisältö | koita | | | | | | | | | | +--------------+--------+
Vaihtoehtoja on niin monia ja noin karkeilla spekseillä on hankala valita sopivinta. Tässä nyt yksi perinteinen tapa tehdä se. Toinen voisi olla vaikka display: table et al, jolloin sivupalkki voisi kasvaa pääsisältöä suuremmaksi (mikä olisi kyllä erittäin huonoa leiskaamista).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Foobar</title>
<style>
p, h1 {
padding: 0 10px 10px;
}
body {
width: 1000px;
margin: 0 auto;
border: 1px solid black;
position: relative;
}
nav {
border: 1px solid black;
border-width: 1px 0;
}
main {
min-height: 500px;
}
aside {
width: 250px;
text-align: justify;
float: right;
}
nav li {
display: inline;
}
a {
cursor: pointer;
}
.col-main {
width: 749px;
display: inline-block;
border-right: 1px solid black;
}
</style>
</head>
<body>
<div class="col-main">
<header>
<hgroup>
<h1>Foobar</h1>
</hgroup>
<nav>
<ul>
<li><a>Foo</a></li>
<li><a>Bar</a></li>
<li><a>Baz</a></li>
</ul>
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum consequat lectus eget ultricies. Cras scelerisque ac quam sed efficitur. Curabitur vestibulum, erat vitae tempus hendrerit, tellus nibh efficitur felis, consequat blandit libero mi non turpis. Proin a blandit purus. Ut ac sapien ex. Nam mauris odio, efficitur nec semper laoreet, mollis id sem. In dictum sapien elit, vel molestie metus dapibus sit amet. Proin ac neque diam. Mauris consectetur varius orci. Nullam in lorem in nisl congue volutpat. Sed ut rhoncus orci. Curabitur maximus aliquam magna ut sollicitudin. Quisque viverra bibendum purus, vitae efficitur nisl mattis eget.</p>
<p>Integer interdum, felis nec tristique cursus, metus leo imperdiet nisl, vel porttitor nisi velit ut odio. Praesent mattis feugiat sem, non aliquam leo. Curabitur lacus metus, ornare sed interdum laoreet, blandit in massa. Praesent sed leo eget est iaculis vulputate sed id lacus. Donec laoreet nulla ipsum. Fusce sit amet ante ut nunc efficitur scelerisque non nec nulla. Aenean gravida non risus sit amet mollis. Quisque quis dapibus nulla. Sed at odio vulputate, feugiat ex vitae, pulvinar enim. Quisque sed massa in nulla gravida vestibulum vitae quis lorem. Duis iaculis maximus lacus, nec fringilla leo. Aliquam egestas, dolor non rutrum semper, ligula massa cursus eros, nec iaculis metus justo id lorem. Fusce eget ipsum aliquam, efficitur ipsum ut, malesuada justo. In congue porta quam, quis pellentesque massa imperdiet id. Duis commodo magna leo, at laoreet tellus semper et.</p>
</main>
</div>
<aside class="col-alt">
<p>Aliquam erat ante, accumsan in quam sit amet, lobortis dignissim ante. Fusce imperdiet lorem vel nunc sollicitudin convallis. Ut placerat fringilla ante sit amet volutpat. Nullam velit turpis, tempor non egestas vel, finibus ut orci. Fusce cursus maximus diam, id euismod dui pellentesque nec. Aenean vitae justo ut urna tincidunt luctus. Sed sodales magna at hendrerit accumsan. Praesent faucibus convallis mi, et ullamcorper nisl congue quis. Nam tristique dui non quam venenatis tempus. Curabitur ultrices ultrices bibendum.</p>
</aside>
</body>
</html>Kiitos! kokeillaanpa
Se sivupalkki itseasiassa saisi kasvaakkin yli, ei se nyt niin huonoa leiskaamista ole minusta, jos on jokin tynkä sisältö tuohon varsinaiseen osioon?
Edit: mihin tuo display: table et al laitetaan.. Nämä DIV CSS:t on jotenki aina ollut hankala sisäistä.
Laitoin main-elementille hieman min-heightiä juuri sen takia, että jos sisältö jostain syystä on lyhyt, niin leiska ei lässähdä kasaan sen vuoksi. Sivupalkin kasvattaminen ylisuureksi on mielestäni typerää, koska tärkeä sisältö kuuluu päälohkoon. Lisäksi se aiheuttaa käytettävyysongelman silloin, kun käyttäjän tarvitsee jostain syystä selata sivun (pääsisällön) loppuun esimerkiksi end-näppäimellä.
Mainitsemani display: table tarkoittaa yksinkertaisesti vain taulukkorakenteen emulointia css:llä. Sen sijaan että html-dokumentissa olisi table-, tr- ja td-elementtejä, niin siellä voi olla vaikka div-elementtejä tai semanttisesti korrekteja rakenteita, jotka css:llä määrätään taulukoiksi (table), taulukkoriveiksi (tr) ja soluiksi (td). En jaksa demota sitä, koska netistä löytyy käyttöohjeet ja kyse on tosiaan vain em. tagien vaihtamisesta toisiin 1:1.
Tuossa noita aikani pyörittelin ja en saa tuota asideä sinkumaan tekstin mukana pitemmäksi millään. Viitsikkö siihen laittaa vielä vinkkiä vaikka se onkin vastoin layout periaatteita.
Tuola asidessä on muuten class col-alt vaikka sitä ei css:ssä ole?
Aihe on jo aika vanha, joten et voi enää vastata siihen.