ugrás a tartalomhoz

egyszerű css formázás - nem megy operában

domdom · 2005. Jan. 26. (Sze), 12.07
Sziasztok!

Az alábbi egyszerű példa sajnos nem úgy jelenik meg operában, mint IE6-ban vagy firefoxban. Van valami tippetek, mi lehet a gond, illetve hogy lehetne megoldani?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<style type="text/css">
    <!--
    	div, ul, li { margin: 0; padding: 0; }
    	#container { width: 500px; border: 1px solid #f00; float: left; }
    	#menu { list-style: none; float: right; }
    	#menu li { display: block; float: left; padding: 0 3px; }
    -->
    </style>
    <title>test</title>
  </head>
  <body>
	<div id="container">
	  <ul id="menu">
	    <li>1111</li>
	    <li>2222</li>
	    <li>3333</li>
	    <li>4444</li>
	  </ul>
	</div>
  </body>
</html>
kösz,
doma
‹ Firefox statusbar Fekvő - álló nyomtatás ›
 ■
1

firefox

kmm · 2005. Jan. 26. (Sze), 12.25
firefoxban nekem ez jelenik meg:
This XML file does not appear to have any style information associated with it. The document tree is shown below.

amint betettem a megfelelo xml es html fejleceket, ugyanazt adja operabol mint firefoxbol.
--
üdv: kmm...
2

.html-ként próbáltad?

domdom · 2005. Jan. 26. (Sze), 12.40
kösz a választ!

nem nagyon értem, hogy jön az xml-es dolog... kérlek 'html' kiterjesztéssel mentsd le a fenti kódot, és úgy próbáld ki!

és azt sem tudom, milyen fejlécre gondolsz - az első sorban ott a megfelelő doctype, a kód maga meg valid.

kösz,
doma
5

.html-ként nem próbáltam

kmm · 2005. Jan. 26. (Sze), 12.52
Ez a doctype XHTML, _nem_HTML_ azaz a megfelelő headerek igy neznek kb ki:

<?xml version="1.0" encoding="iso-8859-2" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Kell meg egy HTTP Content-type header is, ami nem text/html hanem application/xhtml+xml.

Ha .html-kent nezem, nalunk a szerver text/html-kent szolgalja ki, ami nem azonos opera es ff eseten az xhtml-el.

Opera kicsit engedekenyebb, es a doctype alapjan (tapasztalatom szerint) felulbiralja, azaz xhtml kent jeleniti meg azt a html-t ami a doctype szerint xhtml.

A kod text/html content-type-pal nem szabványos, esetleg csak a validator ezt nem nezi.

A ff-ban azert jelenik meg "jol" mert o a content-type alapjan HTML-kent es nem XHTML-kent jeleniti meg.

szerintem te is ugy nezd meg, mert igy nem "valid".

--
üdv: kmm...
6

legyen akkor html

domdom · 2005. Jan. 26. (Sze), 13.28
legjobb tuomásom szerint nem feltétlen szerencsés xml-ként kiszolgálni az xhtml-t, sem pedig az xml nyitótag-et (<?xml ...) az elejére rakni (mert pl. az IE ilyenkor hibásan jeleníti meg, vagy/mert bekapcsolja a quirks mode-ot (vagy hogy hívják ott)).

de most tekintsünk el ettől, és váltsuk vissza html-re a
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
fejléccel.

firefoxban és ie-ben így is egymás mellé kerülnek, operában meg egymás alá az li-k.

lehet, hogy a css a rossz, csak azt nem tudom, hol...
8

akkor html.

kmm · 2005. Jan. 26. (Sze), 13.39
Erdekese a kerdes, nemtudom az okot, talan vmelyik szakmai tekintely, csak tapasztalatbol tudom, ha 

        #menu { list-style: none; float: right; }
        #menu li { display: block; float: right; padding: 0  3px; }
akkor forditott sorrendben jelenik meg, de mind ff mind opera jol jeleniti meg :)

nemtudom az okot...
nem is ertem.

--
üdv: kmm...
9

kösz, a fordított sorrendes

domdom · 2005. Jan. 26. (Sze), 13.43
kösz, a fordított sorrendes megoldás világos, csak jelen helyzetben nem szerencsés, mert a mnüpontok php-ból jönnek, és ahhoz elvileg nem nyúlhatok...

szakmai tekintély alatt konkrétan kire, kikre gondolsz?
11

szaktekintely

kmm · 2005. Jan. 26. (Sze), 13.54
Akik a levlistan is tenykednek, sokat valaszolgatnak.
Neveket inkabb nem mondok, nehogy kihagyjak vkit :D

--
üdv: kmm...
3

egyébként nálam az a hiba,

domdom · 2005. Jan. 26. (Sze), 12.42
egyébként nálam az a hiba, hogy míg a firefox - a szándékomnak megfelelően - egymás mellé helyezi az li-ket, addig az opera egymás alá
4

re: egyebkent

kmm · 2005. Jan. 26. (Sze), 12.43
nalam mind2 egymas ala
--
üdv: kmm...
7

online elérhető

domdom · 2005. Jan. 26. (Sze), 13.34
no, sikerült egy ideiglenes helyet kapnom, és kirakni, hogy online kipróbálható legyen.
itt megnézhető

továbbra is az a baj, hogy firefoxban és ie-ben egymás mellett jelennek meg a "menüpontok" (li-k), operában meg egymás alatt.

valami ötlet?

kösz, doma
10

float "shrink-to-fit"

Jano · 2005. Jan. 26. (Sze), 13.52
A float eseten a CSS szabvany kulonbozo verzioi, a szelesseggel kapcsolatban 2 dolgot mondanak:
- explicit meg kell adni a szelesseget, vagyis minden float-olt elemnek width erteket kell adni.
- nem kell megadni a szelesseget, ekkor a "shrink-to-fit" viselkedes lep eletbe ami azt jelenti, hogy olyan szeles legyen az elem, hogy ne elgjon ki belole egyetlen belso elem se.

Ez utobbira ennel pontosabb meghatarozas nincsen, ezert a bongeszok kulonbozokeppen kezelhetik. Az Opera ugylatszik egyszeruen osszenyomja a leheto legkisebbre. A floatolt elemeknek amik belul vannak igy nincs helyuk egymas melle kerulni.
13

én is gyanakodtam erre, de s

domdom · 2005. Jan. 26. (Sze), 14.17
én is gyanakodtam erre, de sajnos hiába. adtam egy "min-width"-et az ul-nek (módosítottam a kirakott fájlt is), de úgy sem jó...
16

width-vel jo

Jano · 2005. Jan. 26. (Sze), 18.11
Adjal min-width helyett width erteket az UL-nek es jo lesz!

A min-width-szal ugy latszik gondjai vannak az Operanak.
Pl ha UL min-width:300px; LI width:50px; akkor be kene fernie mindegyiknek egymas melle (50+2*3px padding), ehelyett 3-at egymas melle tesz a 4.-et le.
Ha viszon az LI-rol leveszed a padding-ot akkor mar egymas melle teszi.

A display:block egyebkent elvileg felesleges az LI-knel mert float eseten ilyen tulajdonsaguva kell valni szabvany szerint.

Szoval egyreszt sajat szabvany ertelmezes, masreszt bug.
17

width-et nem tudom

domdom · 2005. Jan. 26. (Sze), 21.34
sajnos mivel változó az li-k száma, meg a szélessége is, így sem az ul-nek, sem az li-knek nem tudok width-et adni...

doma
19

mutasd a designt

Jano · 2005. Jan. 27. (Cs), 11.22
Mutasd a megvalositando designt (reszletet) es arra lehet tudunk valami megoldast mondani.
Floatolas helyett pl display:inline modszer is mukodhet ha design engedi.
20

inline

domdom · 2005. Jan. 30. (V), 19.21
sajnos a design egyelőre nem mutatható...
egyébként meg az inline jó lenne, de a design-t nem tudom úgy átvariálni, hogy menjen azon is (mert az egyes li-knek van magassága, ahhoz háttérképe, stb...)

egyéb ötlet, esetleg külföldi fórum, ahol ez felvethető?

kösz, Doma
21

nem ertem

Jano · 2005. Jan. 30. (V), 20.20
Most az hogy egy design reszletet megmutatsz, snekinek nem art, es nem is derul ki belole az oldal egeszere semmi...na mindegy.

Amit nem ertek:
A menu benne van egy kontenerben ami 500px szeles. A menu elemeknek szepen egymas melle kell sorakozniuk ugy, hogy a legutolso a kontener jobb szelehez igazodjon. A menu elemek szama viszont valtozo. Ha valtozo akkor 2 dolog lehetseges:
- vagy vegig eri a kontener 500px szelesseget
- vagy van meg valami ott a baloldalon a menu mellett.

Mindket esetben lehet egy maximumot mondani a menu szelessegere. Vagyis van egy fix mereted. Ha ezt megadod a menunek (UL) akkor mar nem fog osszehuzodni a menuelem szelessegere.
22

méret nem lehet fix

domdom · 2005. Jan. 31. (H), 01.41
(a design nem-mutatás nem rajtam múlik, sejtheted...)

az ul azért nem lehet fix széles, mert a lista bal szélének "grafikáját" ennek háttérképe adja, azaz pont az első menüelem mellett kell lennie. az első menüelem meg azért nem adhatja, mert annak más backgroundja van. (fölöslegesen plusz elemet meg nem akartam beletenni, de lehet, hogy mégis az lesz).
és ha fix az ul szélessége, akkor is fordított sorrendben kell kiadni az li-ket, és jobbra float-olni.

a végén még inkább átszabatom a designt, hogy az ul balra float-olt legyen......

és kösz Janó a segítséget!
23

vilagos

Jano · 2005. Jan. 31. (H), 12.23
Aha, most mar vilagos mi a problema!

Egy dolog amivel tudnal az elso lista elem ele kepet tenni. .

Valami ilyesmi:

ul#menu:first-child::before {
 background:url(menubal.gif)
 content:"";
 display:block;
 width:30px;
 height:20px;
}
De ezt nem tamogatja IE.

Masreszt hulyeseget irtam elozoleg, mert ha teljes szelessegu a menu, akkor a benne balra floatolt elemek a bal szelen kezdodnek...

Mindenestre erdekes problema.
12

megjegyzés- list-style-type+

chx · 2005. Jan. 26. (Sze), 13.54
Lehet, hogy nagy bakot lövök, de mióta lehet HTML megjegyzés jelet tenni egy CSS fájlba? A <-- --> zavar a <style> között.

Ami viszont, nagyon gyanús, az az hogy list-style-type: none; viszont kéne bele.

http://www.webmasterworld.com/forum83/760.htm
14

komment nyitást és zárást

domdom · 2005. Jan. 26. (Sze), 14.18
komment nyitást és zárást kiszedtem a kedvedért :)
a list-style-type-ot meg megadom a list-style-lal.

egyéb ötlet?
15

az html fajl

Jano · 2005. Jan. 26. (Sze), 17.56
Ebben az esetben a HTML fajlban vannak a CSS szabalyok! Csak a style tag-en belul. Es azert szoktak megjegyzes koze tenni, hogy azok a bongeszok amik nem ismerik fel a style elemet azok ne rakjak ki a stilus definiciokat a kepernyore!
18

külföldi fórum

domdom · 2005. Jan. 26. (Sze), 21.35
esetleg tudtok ajánlani olyan külföldi fórumot, ahol érdemes lehet feltenni a kérdést?
azzal tökéletesen megelégednék, ha kiderülne, hogy ez egy bug, de lenne valami spéci megoldás rá (mint mondjuk a box model hack)... :)

kösz,
doma