ugrás a tartalomhoz

fix széles li firefoxban

Anonymous · 2006. Feb. 17. (P), 17.22
Hali!

Ez a kód firefox (1.07) -ban nem egészen ugy jelenik meg mint ie ben. Mi lehet a megoldás?


<style>
li.termek{display: inline; background-color:#fff; margin: 5px; width: 120px; height: 60px; border: 1px solid #000000}
</style>

<ul>
<li class="termek">&nbsp;</li>
<li class="termek">&nbsp;</li>
<li class="termek">&nbsp;</li>
</ul>
‹ CSS-sel weblapok is létrehozhatóak? Validációs kérdések ›
 ■
1

inline width

Jano · 2006. Feb. 17. (P), 17.29
Az inline eseten a width nem ugy mukodik mind display:block eseten! HA egymas melle akarod rakni oket es fix szelessegure akarod allitani akkor float-tal csinald. A float hatasara display:block tulajdonsaguak is lesznek egybol.
2

center kérdés

Anonymous · 2006. Feb. 17. (P), 17.38
Kösz a gyors választ. Amit írtál télleg műxik, csak igy hogy tudom középre igazitani az li ket. próbáltam, hogy beleteszem egy <div align=center> be de nem csinálta.
3

Kozepre igazitas

Grandmaster · 2006. Feb. 17. (P), 18.55
A LI-ket tartalmazo UL-nek adj fix szelesseget, majd pedig az UL-nek egy margin: 0 auto -t, igy a ket oldalso marginja auto lesz, azaz kozepre kerul.
4

ieben nem jó

Anonymous · 2006. Feb. 18. (Szo), 15.45
az auto margin ie ben nem műxik... nincs valami más megoldás?
5

kozepre

Jano · 2006. Feb. 18. (Szo), 20.10
http://users.hszk.bme.hu/~hj130/css/elmelet/center/
6

IE-ben is jó

attlad · 2006. Feb. 18. (Szo), 22.48
IE 6-tól kezeli, ha normális HTML típust használsz.
7

pontosítás

Anonymous · 2006. Feb. 21. (K), 10.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<style>
ul.doboz{width:600px; margin-left:auto; margin-right:auto;border: 1px solid #000000}
li.termek{float: left; background-color:#fff; padding:5px; margin: 5px; width: 120px; height: 60px; border: 1px solid #000000}
</style>
</head>
<body>
<ul class="doboz">
<li class="termek">1.&nbsp;</li>
<li class="termek">2.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
<li class="termek">3.&nbsp;</li>
</ul>
</body>

Csak, h. egyértelmű legyen :)
Az ul közepére szeretnémigazítani az li ket.
Ez igy mindig balra igazitja.
Az eddigieket is kösz.
8

<Nincs cím>

Anonymous · 2006. Feb. 21. (K), 11.48
Ez igy mindig balra igazitja.


ilyen ez a float: left; :) ha azt szeretnéd, hogy középen legyenek a li-k, akkor ne az ul-nak adj meg szélességet, hanem rakd be egy elembe /annak adj szélességet/, és azon belül igazítsd a felsorolásod középre.

gex
9

<Nincs cím>

Anonymous · 2006. Feb. 21. (K), 12.35
tudnál írni egy példát?
10

öhm...

Anonymous · 2006. Feb. 21. (K), 13.27
végigolvastam az egész témát. :] Grandmaster megadta* a pontos megoldást, amit - kiegészülve attlad hozzászólásával** - már felhasználhattál volna.

ha mégsem sikerülne:

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>%title%</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style type="text/css"><!--
body {
}
ul {
  width: 360px;
  margin: 0 auto;
  padding: 0;
  background: #ccc;
}
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 120px;
  float: left;
  background: #eee;
}
li.red { background: red; }
li.green { background: green; }
li.blue { background: blue; }
--></style>
</head>
<body>
<ul>
<li class="red">első</li>
<li class="green">második</li>
<li class="blue">harmadik</li>
</ul>
</body>
</html>
gex

* : margin: 0 auto; a megoldás kulcsa
**: helyes doctype használata esetén működik
11

<Nincs cím>

Anonymous · 2006. Feb. 21. (K), 15.23
felhasználhattam volna, ha működne... Sztem még mindig nem értjük egymást.
Az ul en belül az li -knek kéne közepre igazodnia, nem az ul nek.
Valahogy így képzelem:
|---------------------------------|
|                               UL|
|     |-----| |-----| |-----|     |
|     |  LI | |  LI | |  LI |     |
|     |-----| |-----| |-----|     |
|                                 |
|             |-----|             |
|             |  LI |             |
|             |-----|             |
|                                 |
|---------------------------------|
12

más struktúra...

Anonymous · 2006. Feb. 21. (K), 19.45
a float: left; miatt nem fog menni, már írtam. sima ul-li párossal biztos hogy nem tudsz olyat, amilyet rajzoltál.

gex
13

inline-block

Jano · 2006. Feb. 21. (K), 20.19
Valószinűleg neked a 
display:inline-block;
értékre lenne szükséged ami nem elég támogatott a mai böngészőkben.

Miért szeretnéd ennyire középre igazítva megjeleníteni a dolgokat? Általában szebb oldal képet ad ha oszlopokra és sorokra osztva jelennek meg az ilyen kisebb blokkok.
14

Ha a termékek csak sima szöveg

Jano · 2006. Feb. 21. (K), 20.25
Ha az LI-kben mégse beágyazott mindenféle HTML kód, csak szöveg van és annyi a célod, hogy ezek egymás mellé és középre kerüljenek, akkor:

ul {
 list-style:none;
 margin:0; /* illetve izles szerint*/
 padding:0;

 text-align:center; /* ettol fognak a display:inline-nal sorbeli elemme konvertalt lista elemek kozepre rendezodni */
}

li.termek {
/* az amit irtal a topik nyitoban */
}
15

így igen,...

Anonymous · 2006. Feb. 21. (K), 20.54
...meg lehet csinálni, viszont ez szöges ellentétben áll a téma címével is, és az eredeti problémával is, nevezetesen a fix szélességgel. ;] ezért írtam, hogy sima ul-li párossal nem tudja megcsinálni.
viszont AZT HISZEM, hogy ha a display: inline; -os listaelemekbe /li-kbe/ blokk típusú elemet rakunk (pl: a-kat 'a { display: block; }' stílusdefinícióval, akkor megoldható a középre rendezés.

gex
17

<Nincs cím>

Anonymous · 2006. Feb. 22. (Sze), 09.37
Én nem ragaszkodom az ul li pároshoz, ha valamilyen más módon meg lehet oldani kérlek oszd meg velem/mindenkivel.
Azért gondoltam a listára mert egy terméklista oldal lenne...
19

mégsem

Anonymous · 2006. Feb. 22. (Sze), 11.13
már nem hiszem... :]

gex
16

<Nincs cím>

Anonymous · 2006. Feb. 22. (Sze), 09.33
Hát igen, visszajutottam az eredeti kódhoz :)) Ami firefoxban nem fix széles li-ket eredményez...
18

<Nincs cím>

Anonymous · 2006. Feb. 22. (Sze), 09.39
Bocs, nem direkt, de kétszer ment el...
20

<Nincs cím>

Anonymous · 2006. Feb. 23. (Cs), 09.18
Akkor ezt nem lehet megcsinálni css sel?