haluaisin tehdä tällaisen rakenteen, miten se onnistuu? Eli divejä olisi tarkoitus käyttää.
-yhden divin sisällä sivun koko sisältö
-vasemmassa reunassa kolme samanlevyistä (kapeaa) laatikkoa päällekkäin (valikko ym.)
-oikeassa reunassa sivun varsinainen sisältö, leveässä laatikossa, joka on pitempi kuin vasemman reunan laatikot yhteensä.
eli antakaapas ohjeita, kiitos!
-yhden divin sisällä sivun koko sisältö
-vasemmassa reunassa kolme samanlevyistä (kapeaa) laatikkoa päällekkäin (valikko ym.)
-oikeassa reunassa sivun varsinainen sisältö, leveässä laatikossa, joka on pitempi kuin vasemman reunan laatikot yhteensä.
eli antakaapas ohjeita, kiitos!
Vastaukset 4
Vanhimmat
Vasemman laidan laatikot kannattaa todennäköisesti tehdä mieluummin listana (), riippuen vähän siitä, minkälaista tavaraa sinne loppujen lopuksi on tarkoitus laittaa.
Testatut selaimet: Opera 8.54, Firefox 1.5.0.4, IE 6.
Testi
#container
{
position: absolute;
left: 5%;
width: 90%;
}
#content
{
position: absolute;
top: 0;
left: 10em;
border-left: 1px solid #C0C0C0;
padding-left: 2em;
}
#menu
{
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#menu div
{
border-bottom: 1px solid #C0C0C0;
padding: 1em;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sed purus a
leo porttitor hendrerit. Curabitur imperdiet enim eget dolor. Fusce at
mauris. Nullam eget erat non augue mattis nonummy. Proin ac diam. Ut nec
leo a risus molestie viverra. Morbi nec sapien. Vivamus lacus lorem, tempus
non, euismod a, cursus ut, libero. Sed nulla pede, aliquet sed, pretium
eget, ornare a, libero. Cras semper. Integer tincidunt pede et urna. Ut
vel tortor. In hac habitasse platea dictumst. Pellentesque at quam commodo
neque ultricies pulvinar. Quisque felis leo, ornare a, iaculis ut, placerat
quis, metus. Aliquam hendrerit sem eget erat. Nulla malesuada nulla eu
nisi. Sed eget odio nec tellus placerat ultricies. Vivamus venenatis
rhoncus ante.
Duis tempor elementum purus. Etiam non ligula. Integer pharetra facilisis
urna. Vivamus rhoncus faucibus quam. Maecenas ac erat nec justo mollis
elementum. Morbi pretium massa nec risus. Pellentesque varius. Ut vel velit
eu est luctus pretium. Curabitur enim. Donec in ipsum convallis dui mollis
vehicula. Etiam placerat, risus quis tristique adipiscing, lacus leo
ullamcorper nulla, id sollicitudin mauris diam ac augue. Quisque cursus.
Duis gravida bibendum metus. Suspendisse consectetuer aliquet tellus.
Praesent quam purus, porttitor vel, mollis ultrices, posuere nec, nibh.
Suspendisse potenti. Suspendisse sollicitudin, tellus vitae faucibus
aliquam, urna libero aliquam tortor, eu mollis mi odio et turpis. Ut sed
ligula. Nam lobortis tempus nulla. Phasellus ut massa. Nullam egestas nulla
at dolor. Maecenas accumsan. Nunc luctus.
Pellentesque pede nulla, pharetra sed, laoreet eu, feugiat eu, urna.
In eleifend condimentum tellus.
Etiam a arcu.
joo, tuo vaikutti ihan hyvältä. Kiitos siitä.
Nyt kysyisin, että onko tuo mahdollista toteuttaa vielä hieman eri tavalla. Tarkoitus olisi saada niin kuin erillisiä laatikoita niistä kaikista sivun osista. Eli sillä lailla, että tekee vain ja ainoastaan 5 diviä:
-1 ison, jonka sisällä kaikki on
-3 menua tai vastaavaa
-1 jossa on sisältö
Ja sitten voiko ne tehdä jollain ihme floateilla, kun joku selitti että sellaisilla olis hyvä tehdä.
En ehkä aivan ymmärtänyt, mitä ajat takaa, mutta yritetään silti. Tässä 5-divinen floateilla toteutettu versio:
Testi 2.0
#container
{
border: 2px solid #FF00FF;
margin: 0 5%;
padding: 1em;
}
#menu1, #menu2, #menu3
{
float: left;
clear: left;
width: 8em;
border: 1px solid;
margin-bottom: 1em;
padding: 1em;
}
#menu1 { border-color: #00FF00; }
#menu2 { border-color: #0000FF; }
#menu3 { border-color: #FF0000; }
#content
{
border: 1px solid #FFD700;
margin-left: 12em;
padding: 1em;
}
Pellentesque pede nulla, pharetra sed, laoreet eu, feugiat eu, urna.
In eleifend condimentum tellus.
Etiam a arcu.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sed purus a
leo porttitor hendrerit. Curabitur imperdiet enim eget dolor. Fusce at
mauris. Nullam eget erat non augue mattis nonummy. Proin ac diam. Ut nec
leo a risus molestie viverra. Morbi nec sapien. Vivamus lacus lorem, tempus
non, euismod a, cursus ut, libero. Sed nulla pede, aliquet sed, pretium
eget, ornare a, libero. Cras semper. Integer tincidunt pede et urna. Ut
vel tortor. In hac habitasse platea dictumst. Pellentesque at quam commodo
neque ultricies pulvinar. Quisque felis leo, ornare a, iaculis ut, placerat
quis, metus. Aliquam hendrerit sem eget erat. Nulla malesuada nulla eu
nisi. Sed eget odio nec tellus placerat ultricies. Vivamus venenatis
rhoncus ante.
Duis tempor elementum purus. Etiam non ligula. Integer pharetra facilisis
urna. Vivamus rhoncus faucibus quam. Maecenas ac erat nec justo mollis
elementum. Morbi pretium massa nec risus. Pellentesque varius. Ut vel velit
eu est luctus pretium. Curabitur enim. Donec in ipsum convallis dui mollis
vehicula. Etiam placerat, risus quis tristique adipiscing, lacus leo
ullamcorper nulla, id sollicitudin mauris diam ac augue. Quisque cursus.
Duis gravida bibendum metus. Suspendisse consectetuer aliquet tellus.
Praesent quam purus, porttitor vel, mollis ultrices, posuere nec, nibh.
Suspendisse potenti. Suspendisse sollicitudin, tellus vitae faucibus
aliquam, urna libero aliquam tortor, eu mollis mi odio et turpis. Ut sed
ligula. Nam lobortis tempus nulla. Phasellus ut massa. Nullam egestas nulla
at dolor. Maecenas accumsan. Nunc luctus.
Tähän esimerkkiin näköjään mahtuu mukaan myös yksi Internet Explorerin suurista ja mahtavista bugeista. Nimittäin container-diville annettu padding (tarkkaan ottaen padding-top) vaikuttaa vasemmassa laidassa olevien elementtien välisen tilan korkeuteen. Ongelman voi kyllä tarvittaessa kiertää, mutta jätän sen tällä kertaa näin.
Juuri tuollaista hain, kiitos paljon!!