Vertikális és horizontális pozícionálás gombokra
Egy változó magasságú elemen belül (td), 4 gombot szeretnék elhelyezni a következő módon:
- egy alul középen
- egy fent középen
- egy jobb szélen középen
- egy bal szélen középen
Táblázattal már sikerült összehozni a kívánt eredményt, FF alatt működik, Chrome és Opera alatt viszont nem.
CSS vertical-align és társairól elolvastam amit találtam, de sokkal előrébb nem jutottam.
Gondoltam megkérdezem tud-e valaki rá egyszerű megoldást (vagy akármilyent), mielőtt feladom...
■ - egy alul középen
- egy fent középen
- egy jobb szélen középen
- egy bal szélen középen
Táblázattal már sikerült összehozni a kívánt eredményt, FF alatt működik, Chrome és Opera alatt viszont nem.
CSS vertical-align és társairól elolvastam amit találtam, de sokkal előrébb nem jutottam.
Gondoltam megkérdezem tud-e valaki rá egyszerű megoldást (vagy akármilyent), mielőtt feladom...
position
A javaslatom, hogy ha a táblákkal (table <td>) szeretnéd felépíteni oldalad, akkor azt felejtsd el, s használj diveket <div> és azokra írj stílust. Hidd el, sokkal jobban jársz mind gyorsaság, áttekinthetőség és stilizálás szempontjából.
A kérdésedet nem igazán értem, viszont elképzelésem szerint Te egy olyan dobozt szeretnél, ahol a gombok a 4 oldalon helyezkednek el (fent, lent, jobb, bal).
Erre a javaslatom a következő lenne -ami nem biztos, hogy jó, csak az én elképzelésem-;
A positionnal megadod a relatív értékre az adott gombot, majd beállítod annak pozícióját a top és left paraméterekkel. Ha szeretnél a dobozba még írni, így hely is kellene, vagy nem szeretnéd, hogy szétcsússzon, akkor használd a float, vagy a z-index paramétereket, vagy létrehozol még egy divet, aminek megadod a gombok méreteinek kivonásával a méretet és elhelyezed a dobozon belül, majd a köré építed a gombokat. A belső doboznak adsz fix méretet, így a szétcsúszástól mentve vagy.
Íme a példa az elképzelésemről:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.doboz {
width: 400px; height:400px;
border: #000 solid 1px;
margin: 0 auto;
padding: 0;
margin-top: 150px;
}
.gomb-fent,
.gomb-lent,
.gomb-jobb,
.gomb-bal
{
width: 50px;
height: 20px;
border: #000 solid 1px;
background: #666666;
color: white;
position: relative;
font-size: 10px;
text-align: center;
}
.gomb-fent {
top: -1px;
left: 175px;
}
.gomb-lent {
top: 357px;
left: 175px;
}
.gomb-jobb {
top: 155px;
left: -1px;
}
.gomb-bal {
top: 135px;
left: 349px;
}
</style>
</head>
<body>
<div class="doboz">
<div class="gomb-fent">gomb-fent</div>
<div class="gomb-lent">gomb-lent</div>
<div class="gomb-jobb">gomb-jobb</div>
<div class="gomb-bal">gomb-bal</div>
</div>
</body>
</html>
Remélem segítettem!
Üdv,
Idahoo
tábla vs div
A tábla elem azért kellett, mert van egy nagy változó magasságú szövegdoboz, és tőle jobbra a négy gomb.
A td elemen belül lévő div elemen alkalmazott "top" CSS tulajdonságot, mintha a böngészők nem vennék figyelembe és így a 4 gomb középre kerül.
A div-re való átíráskor kicsit belekeveredtem a float meg clear használatába.
div-ek egymás mellett
Hogy világos legyen mit szeretnék, lerajzoltam, ehhez szeretnék segítséget kérni:
Jazoja, tudtommal két dolgot
1.,
készítesz a két float-olt elemed köré egy befoglaló div-et és ennek a befoglaló div-nek megadsz egy háttérképet CSS-ben (ismételtetheted is repeat-y-nal, ha homogén a háttér), amit kis vizuális csalással úgy készítesz el, hogy ha ránézel fel se tűnjön, hogy az a háttérkép nem a két float-olt div-ednek van beállítva.
<div style="display: inline; float: left; width: ___px;"></div>
<div style="display: inline; float: left; width: ___px;"></div>
</div>
2.,
használsz js-t, pl. itt
(én még nem próbáltam, biztos van jQuerys-s alternatíva is)
clearfix-ről itt
Szerintem is vagy
Az pedig úgy, hogy a jobboldali "gombos" cellát 4 részre osztod (1-2-1 cella soronként), a jobboldalinak rowspan=3 kell. Így a gombokat nem könnyen poziciónálhatod.
Én sem szeretem a táblázatokat, de már sztem inkább table mint jquery...
táblázat
Most a következő van:
- a tábla alapból 3x3-as
- bal oszlop "rowspan=3"-al egybe van nyitva a szövegdoboz számára
- a jobb oldali 2x3-as rész, az 1-2-1 miatt alsó és felső sorban "colspan=2"-vel van egybe nyitva
- alul és felül az oszlop magassága 50px, a középső részre nincs beállítva semmi
FF a középső részt automatikusan növeli (ami így jó), Chrome és Opera meg az alsót (ami nem jó - nekem).
Próbáltam egybenyitni a gombok sorait, de akkor meg mintha nem működnének a top, bottom által beállított dolgok.
<!DOCTYPE HTML PUBLIC
<html>
<head>
<title>Cím</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="hu">
<style type="text/css">
.masodik {
position: relative;
width: 120px;
}
.masodik input {
position: absolute;
width: 40px;
}
#gomb1 {
left: 50%;
top: 0px;
margin-left: -20px;
}
#gomb2 {
top: 50%;
right: 0px;
margin-top: -5px;
}
#gomb3 {
left: 50%;
bottom: 0px;
margin-left: -20px;
}
#gomb4 {
top: 50%;
left: 0px;
margin-top: -5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<p>asdfg</p>
<p>asdfg</p>
<p>asdfg</p>
<p>asdfg</p>
<p>asdfg</p>
</td>
<td class="masodik">
<input type="button" id="gomb1" value="Gomb1">
<input type="button" id="gomb2" value="Gomb2">
<input type="button" id="gomb3" value="Gomb3">
<input type="button" id="gomb4" value="Gomb4">
</td>
</tr>
</table>
</body>
</html>
firefoxban nem
Azt kell elérni, hogy a
diplay:block
Összes többi opció esetén meg az position:absolute az ablakhoz igazítja a gombokat.
Firefox 10 (UX)-el is ugyanígy jelentkezik a probléma.
Próbáltam átírni a táblát div-ekre és CSS display:table/table-row/table-cell módon összerakni ugyanazt, de az eredmény tkp. ugyanaz lett. (mármint hogy Chrome-ban ment, FF-ben meg ugyanaz a hiba jelentkezett)
Utánaolvastam, állítólag a
Sokkal egyszerűbb, mint
<html>
<head>
<title>Cím</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="hu">
<style type="text/css">
#szulo {
position: relative;
width: 300px;
}
#tartalom {
width: 200px;
border: 1px solid red;
}
.gomb {
position: absolute;
width: 40px;
}
#gomb1 {
left: 230px;
top: 0px;
}
#gomb2 {
top: 50%;
right: 0px;
margin-top: -5px;
}
#gomb3 {
left: 230px;
bottom: 0px;
}
#gomb4 {
top: 50%;
left: 200px;
margin-top: -5px;
}
</style>
</head>
<body>
<div id="szulo">
<div id="tartalom">
<p>asdfg</p>
<p>asdfg</p>
<p>asdfg</p>
<p>asdfg</p>
<p>asdfg</p>
</div>
<input type="button" id="gomb1" class="gomb" value="gomb">
<input type="button" id="gomb2" class="gomb" value="gomb">
<input type="button" id="gomb3" class="gomb" value="gomb">
<input type="button" id="gomb4" class="gomb" value="gomb">
</div>
</body>
</html>
Valóban...:-)
ugyanez
Egy sorba?
Szerk:
Hibás a HTML is, a .button pedig kér szépen egy display: inline -t.