Vertikális és horizontális pozícionálás gombokra

Jazoja · 2011. Okt. 15. (Szo), 17.27

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...

■

HTML, CSS, JavaScript, Ajax

csirip

position

idahoo · 2011. Okt. 15. (Szo), 18.44

Nos, ha jól látom és értelmezem, akkor Te táblán belül, vagy táblára szeretnél stílust írni...

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:

<!DOCTYPE html>
<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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

tábla vs div

Jazoja · 2011. Okt. 17. (H), 01.04

A példád kicsit módosítottam, hogy dinamikusan alkalmazkodjon a változó magassághoz. (px helyett %, illetve float:left/right használatával).

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

div-ek egymás mellett

Jazoja · 2011. Okt. 17. (H), 23.04

Hát a táblát átírtam div-re, de nem sikerült összehozni, hogy az egyik div magassága automatikusan igazodjon a mellette lévő div magasságához.
Hogy világos legyen mit szeretnék, lerajzoltam, ehhez szeretnék segítséget kérni:

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Jazoja, tudtommal két dolgot

asam9 · 2011. Okt. 18. (K), 00.09

Jazoja, tudtommal két dolgot tehetsz:

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.

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Szerintem is vagy

mahoo · 2011. Okt. 18. (K), 06.38

Szerintem is vagy javascripttel pozicionálsz illetve méretezel (ez jquery-vel könnyen megoldható) vagy táblázat...
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...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

táblázat

Jazoja · 2011. Okt. 18. (K), 19.39

Eredetileg táblázattal csináltam meg, ez FF alatt szépen műxik is. Csak ugye Chrome, Opera alatt nem...
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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

<!DOCTYPE HTML PUBLIC

Hidvégi Gábor · 2011. Okt. 18. (K), 20.29

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

firefoxban nem

Jazoja · 2011. Okt. 18. (K), 23.37

Nagyon köszönöm, Operában egész jól néz ki, Chrome-ban szinte tökéletes, de Firefox (7.0.1) alatt a gombok a böngésző ablak 4 széléhez igazodnak.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Azt kell elérni, hogy a

Hidvégi Gábor · 2011. Okt. 19. (Sze), 09.50

Azt kell elérni, hogy a .masodik firefox alatt kapjon egy display: block-ot, mert úgy tűnik, hogy táblázatcellák esetén a böngésző figyelmen kívül hagyja a position: relative-et. Azért kíváncsi vagyok, hogy ez bug vagy szabványos.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

diplay:block

Jazoja · 2011. Okt. 19. (Sze), 14.01

Igen, ezzel már én is próbálkoztam (sőt, a display összes opciójával), de display:block esetén a doboz mérete összeesik, így muszály neki fix méretet adnom.
Ö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)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Utánaolvastam, állítólag a

Hidvégi Gábor · 2011. Okt. 19. (Sze), 15.11

Utánaolvastam, állítólag a firefox csinálja jól, táblázat cellái nem lehetnek relatív szülők (az más kérdés, hogy ennek szerintem semmi értelme).

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Sokkal egyszerűbb, mint

Hidvégi Gábor · 2011. Okt. 19. (Sze), 15.09

Sokkal egyszerűbb, mint gondolnád:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Valóban...:-)

Jazoja · 2011. Okt. 19. (Sze), 18.42

Nagyon köszönöm, tényleg sokkal egyszerűbb és az összes tesztelt böngészőben úgy működik ahogy kell... :-)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

ugyanez

Zozzy087 · 2016. Dec. 13. (K), 15.38

Nekem hasonló a problémám, de mivel nem értek hozzá segítséget kérek benne. Nekem 5 gombon van egymás alatt, de egymás mellé szeretném őket rakni. Hogyan tudom megoldani? Íme a kódok:


<style>
/* start flex */

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-content: center;

}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: flex-end;
  flex-wrap: wrap;

}

/* end flex */
* {
  box-sizing: border-box;
}

body {
  background: #FFFFCC;
  margin: 0 auto;
  max-width: 1000px;
}

header {
  width: 100%;
  background: black;
  text-align: center;
}

h1 {
  color: white;
  font-size: 5rem;
  text-shadow: 1px 1px 3px #FFFFFF;
}

section {
  background: #FF4500;
  padding: 1.5rem;
  min-width: 200px;
  border-radius: 20px;
  margin-top: 1rem;
  min-hight: 170px;
}

section:last-of-type {
  margin-bottom: 1rem;
}

div.dice{
   
	width: 80px;
  height: 80px;
	background: white;
	border: 2px solid black;
	font-size: 4rem;
	text-align:center;
  line-height: px;
  margin-right: 60px;
}

button {
  background: #000000;
  border-radius: 10px;
  color: white;
  text-shadow: 1px 1px 1px black;
  font-size: 1rem;
  position: relative;
  outline: none;
}

button:active:before {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 10px;
  left: 0;
  top: 0;
}

.button {
  background: #FFFFFF;
  color: black;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 15px;
  position: relative;
}



h2 {
  color: #000000;
}

</style>



<div class="container">
  <header>
    <h1><font face="Arial Black">Ide jön valami szöveg</font face></h1>
  </header>

<!-- első gomb -->
<section>
<div class="row"> 
<div id="die4" class="dice">0</div>
  <div class="button" onclick="rollDice4()"><font size= "10"> <font face="Algerian">első gomb</font size> </font face></div>
</div>
<div class="row">
<h2 id="status4" style="clear:left;"></h2>
</div>
</section>
<!-- első gomb vége -->

<!-- második gomb -->
<section>
<div class="row"> 
<div id="die6" class="dice">0</div>
  <div class="button" onclick="rollDice6()"><font size= "10"> <font face="Algerian">második gomb</font size> </font face></div>
</div>
<div class="row">
<h2 id="status6"></h2>
</div>
</section>
<!-- második gomb vége -->

<!-- harmadik gomb -->
<section>
<div class="row"> 
<div id="die16" class="dice">0</div>
<div class="button" onclick="rollDice16()"><font size= "10"> <font face="Algerian">harmadik gomb</font size> </font face></div>
</div>
<div class="row">
<h2 id="status16" style="clear:left;"></h2>
</div>
</section>
<!-- harmadik gomb vége -->

<!-- negyedik gomb-->
  <section>
<div class="row"> 
<div id="die40" class="dice">0</div>
<div class="button" onclick="rollDice40()"><font size= "10"> <font face="Algerian">negyedik gomb</font size> </font face></div>
</div>
<div class="row">
<h2 id="status40" style="clear:left;"></h2>
</div>
</section>

<!--ötödik gomb-->
<section>
<div class="row"> 
<div class="button" onclick="rollDice20()"><font size= "10"> <font face="Algerian">ötödik gomb</font size> </font face></div>
</div>
<div class="row">
<h2 id="status20"></h2>
</div>
</section>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Egy sorba?

Pepita · 2016. Dec. 18. (V), 17.02

Pl úgy tudod megoldani, ha egy sorba (row) teszed őket. :)

Szerk:
Hibás a HTML is, a .button pedig kér szépen egy display: inline -t.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés