Olen tehnyt nettisivua css:n avulla, ja yrittänyt samalla korvata taulukot css-asemoinnin avulla. Tähän mennessä olen saanut sivun näyttämään haluamaltani, paitsi että Firefoxissa/Mozillassa/Operassa sivulleni tulee kaksi tyhjää riviä, joissa näkyy siis vain taustaväri. IE:ssä näitä tyhjiä rivejä ei näy. Mistähän tämä voisi johtua?
Sivu on siis jaettu kolmeen vaakasuoraan elementtiin, Top, Main (jossa on "päällä" vierekkäin Picture ja Text ja joka venyy tarvittaessa) sekä Bottom alimmaisena. Tyhjät rivit näkyy Mainin ylä ja alapuolella, eli toisin sanoen Top:n jälkeen ja ennen Bottomia. Jos laitan Mainin positioniksi absolute, välit häipyy, mutta samalla Bottom nousee ihan ylös ja sekoittaa koko sivun.
tässä vielä sivun html ja css:
tahan tulee tekstia
tekstia
- - - - - -
html {
margin: 0px;
padding: 0px;
}
body {
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: Gray;
margin: 0px;
padding: 0px;
background-color: White;
}
#Top {
background: url(pic1.jpg) no-repeat;
width: 800px;
height: 93px;
}
#Main {
background: url(pic4.jpg) repeat-y;
top: 93px;
width: 800px;
z-index: 1;
}
#Picture {
position: absolute;
background: url(pic2.jpg) no-repeat;
left: 0px;
width: 205px;
height: 386px;
z-index: 2;
}
#Text {
position: relative;
left: 205px;
width: 400px;
z-index; 2;
}
#Bottom {
background: url(pic5.jpg) no-repeat;
height: 46px;
width: 800px;
text-align: center;
}
Muutenkin voi antaa vinkkiä tuon asemoinnin suhteen, näyttääkö ollenkaan järkevältä ja olisko tämän voinut tehdä jotenkin toisin?
Sivu on siis jaettu kolmeen vaakasuoraan elementtiin, Top, Main (jossa on "päällä" vierekkäin Picture ja Text ja joka venyy tarvittaessa) sekä Bottom alimmaisena. Tyhjät rivit näkyy Mainin ylä ja alapuolella, eli toisin sanoen Top:n jälkeen ja ennen Bottomia. Jos laitan Mainin positioniksi absolute, välit häipyy, mutta samalla Bottom nousee ihan ylös ja sekoittaa koko sivun.
tässä vielä sivun html ja css:
tahan tulee tekstia
tekstia
- - - - - -
html {
margin: 0px;
padding: 0px;
}
body {
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: Gray;
margin: 0px;
padding: 0px;
background-color: White;
}
#Top {
background: url(pic1.jpg) no-repeat;
width: 800px;
height: 93px;
}
#Main {
background: url(pic4.jpg) repeat-y;
top: 93px;
width: 800px;
z-index: 1;
}
#Picture {
position: absolute;
background: url(pic2.jpg) no-repeat;
left: 0px;
width: 205px;
height: 386px;
z-index: 2;
}
#Text {
position: relative;
left: 205px;
width: 400px;
z-index; 2;
}
#Bottom {
background: url(pic5.jpg) no-repeat;
height: 46px;
width: 800px;
text-align: center;
}
Muutenkin voi antaa vinkkiä tuon asemoinnin suhteen, näyttääkö ollenkaan järkevältä ja olisko tämän voinut tehdä jotenkin toisin?
Vastaukset 2
Vanhimmat
Ei jaksa tutkia kunnolla, mutta epäilen, että kyseessä on p tagin välit jotka siihen kuuluvat. IE näyttää tämän välin pienempänä kuin muut.
Lisääppäs
* {
margin: 0px;
padding: 0px;
}
Tämä poistaa kaikilta nuo turhat välit, tämän jälkeen voit helposti lisätä niitä jos tarttet. Tai sitten poistat vain p tagilta ne.
Kiitos vinkistä, laitoin 0 marginit ja paddingit p tagiin ja nyt näyttää hyvältä. Itsekin ajattelin sen johtuvan jotenkin noista margineista, mutta kokeilin ainostaan laittaa 0 margineita ja paddingejä noihin eri osioihin, ja siellä ne ei auttaneet mitään.