Niin miten tehdään: Div tagien välissä on 500px leveä "box" jossa on leipä löpinää ja sitten pitäisi saada 2 kuvaa samalle riville.Toinen vasempaan laitaan toinen oikeaan laitaan ja kuvien selite textit alle ja sit taas jatkuisi leipä löpinä.
css:llä kuvien asemointi
Rajatieto
6959
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 6
Vanhimmat
En suosittelisi tekemään pikselimitoituksilla, näyttää ehkä sinun ruudulla ok mutta jonkin toisen sitten ei.
En tiedä onko tämä paras tapa mutta tätä voisit kokeilla:
div.vasen {
/* Tämä div loota vie 20% vasemmasta reunasta */
float: left;
width: 20%;
background-color: red;
}
div.keski {
/* Tämä div loota vie 50% vasemman lootan
reunasta oikealle jättäen kuitenkin 5% raon ja on siten aika just keskellä */
margin-left: 5%;
float: left;
width: 50%;
background-color: green;
}
div.oikea {
/* Tämä div loota vie 20% oikeasta reunasta */
float: right;
width: 20%;
background-color: blue;
}
Tämä on vasemmalla, täällä voisi olla vaikka kuva
Testisivu
Tämä on leipätekstiä
Tämä on oikealla, täällä voisi olla vaikka toinen kuva
Niin tota, tarkotin että, selite text olisi kuvien alla tai alkakoot sit vasemmalta kuvan alta. Kiitti Turha sain tosta kuiteski lääkkeen ie,O,M selainten näyttävyys ongelmaan yhteen toiseen jutskaan.
En tainnut ymmärtää mikä oikeastaan on ongelmana :)
Edellistä esimerkkinä apunakäyttäen voithan keskittää vaikka erikseen noissa div-elementeissä. Lisäät johonkin "text-align: center;"
selitin toisiaan huonosti:( sorry
Yritän paremmin: Mulla on leiska jossa on content
osio jonka leveys on 500px. Tässä on sitä löpinää
ja sit samalla rivillä 2kpl kuvia a200px lev.
toinen float:left; toinen float:right;
Kuvien selite teksti on tällä hetkellä se ongelma, miten kuvien alle saisi nämä selite textit css:llä, tarkoitan että kummankin kuvan selite tulee oman kuvan alle .
:)
Pistät kuvan ja siihen liittyvän tekstin omaan div elementtiinsä. Divit float:right ja float left ja molempiin text-alignment: center? Näin kuva sekä siihen liittyvä teksti on tiiviissä paketissa ja voit sijoittaa sen paketin mihin lystäät.
Niin Kiitos :) vaivannäöstäsi. Nyt pelittä kun laitoin kuvien div:t vielä div:n sisään ja siihen width:100%; ei väliin pääse roinaa.
Vaikka olen iältäni pappa olen sivujenteossa noviisi.
Opera the King :) :)