Új hozzászólás Aktív témák
-
fordfairlane
veterán
Ha például az oldal közepére akarsz rakni egy egy blokk elemet, akkor így lehet:
<div style="width: 300px; margin: 0 auto;"></div>
A te esetedet nem ismerem pontosan, valószínűleg kell egy konténer elem, amit középre igatítasz ezzel a módszerrel, és ebbe pakolod a további elemeket, mondjuk így:
<div style="position:relative; width: 400px; margin: 0 auto; border: 1px solid">
<div style="position:absolute; left: 0px; width:100px">1</div>
<div style="position:absolute; left: 100px; width:100px">2</div>
<div style="position:absolute; left: 200px; width:100px">3</div>
<div style="position:absolute; left: 300px; width:100px">4</div>
</div>Keretet azért raktam a konténer elemre, hogy lásd, hol van.
x gon' give it to ya
-
fordfairlane
veterán
Konténer elem már van, akkor azon belül meg ki kell matekozni ezek szerint.
Egy blokkelemet lehet középre igazítani a fentebb említett "margin: 0 auto" módszerrel, ha többet akarsz egymás mellé, akkor mindenképp szükséged lesz egy olyan plussz elemre, amit középre igazítasz, és ezen belülre rakod egymás mellé a többit.
x gon' give it to ya
-
fordfairlane
veterán
Oké, ez már megvan, bár az érdekes, hogy ha "padding: 0 10px 0 10px"-et adok meg a négy téglalapnak, akkor befér a konténerbe, de ha meg margint, akkor már nem fér be.
A forráskód nélkül nem biztos, hogy jó a tippem, de a padding és a margin az hozzáadódik a blokkelem szélességéhez, illetve magasságához, tehát a width illetve height a tartalom szélességére és magasságára vonatkozik, padding, border és margin nélkül.
De most beleszaladtam egy sokkal nagyobb problémába: IE alatt szép a végeredmény, Firefox alatt viszont egy csomó dobozt ki se rajzol.
Ebben sem tudok segíteni a kód nélkül.
[ Szerkesztve ]
x gon' give it to ya
-
fordfairlane
veterán
A floatnak ilyen a természete, mert alapvetően arra találták ki, hogy inline contentbe lehessen beszúrni és igazítani blokk elemeket, nem pedig arra, hogy blokkelemeket rakjuk egymás mellé. Ha a négy blokkelemnek a szélessége valamilyen oknál fogva meghaladja a konténerelem szélességét, akkor a float a következő sorba rakja az elemet (még nem jöttem rá, hogy FF-ben miért így van, IE-ben miért nem).
x gon' give it to ya
-
fordfairlane
veterán
bemásolom a kódot két részletben, remélem jó lesz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #24577e;
font-family: 14px arial,sans-serif;
}
.balmenu {
position: absolute;
left:40px;
top:100px;
width:120px;
height:430px;
background-color: #d7e0ef;
}
.kozep_keret {
position: absolute;
left:200px;
top:100px;
width:760px;
min-height:430px;
background-color: #d7e0ef;
border: 0px solid #ffffff;
}
.cim {
height: 25px;
position: relative;
}
.navig {
height: 60px;
position: relative;
}
.balnyil {
background-color: #ffffff;
height: 60px;
position:absolute;
left: 0px;
width: 150px;
}
.datum {
background-color: #000000;
height: 60px;
position: absolute;
left: 150px;
text-align: center;
width: 460px;
}
.jobbnyil {
background-color: #ffffff;
height: 60px;
position: absolute;
left: 610px;
width: 150px;
}
.tartalom {
border: 1px solid;
margin: 0 auto;
position: relative;
width: 600px;
}
.foto {
border: 1px solid;
margin-top: 20px;
margin-left: 35px;
width: 100px;
float: left;
}
</style>
</head>x gon' give it to ya
-
fordfairlane
veterán
Második:
<body>
<div class="balmenu">balmenü</div>
<div class="kozep_keret">
<div class="cim">Cím</div>
<div class="navig">
<div class="balnyil">balnyíl</div>
<div class="datum">Dátum</div>
<div class="jobbnyil">Jobbnyíl</div>
</div>
<div class="tartalom">
<div class="foto">A text-align: center;-re nem csinálja, igaz, nem is textről van szó, hanem négy divről. Mondjuk mind a négy divnek float:left; van megadva, talán ez kavarhatja meg. (De ha ezt kiszedem, akkor egymás alá rakja a dobozokat.)</div>
<div class="foto"> </div>
<div class="foto"> </div>
<div class="foto"> </div>
<div style="clear: both"></div>
<div class="foto">A text-align: center;-re nem csinálja, igaz, nem is textről van szó, hanem négy divről. Mondjuk mind a négy divnek float:left; van megadva, talán ez kavarhatja meg. (De ha ezt kiszedem, akkor egymás alá rakja a dobozokat.)</div>
<div class="foto"> </div>
<div class="foto"> </div>
<div class="foto"> </div>
<div style="clear: both"></div>
</div>
<div class="also_menu">Alsó menü</div>
</div>
</body>
</html>x gon' give it to ya
-
fordfairlane
veterán
Meg lehet oldani.
<div style="position:relative; width:500px; height: 500px; border: 1px solid">
<div style="position: absolute; bottom: 0px">lábléc</div>
</div>Nyugodtan használj táblázatokat, ha nagyon elakadsz. A CSS pozicionálás komplexebb dolog, és idő kell, hogy egyrészt megszokd a logikáját, másrészt megismerd a különféle böngészőket.
[ Szerkesztve ]
x gon' give it to ya
-
fordfairlane
veterán
A korrekt képfrissítés sokszor probléma, a böngészőket a felhasználó állítja be magának, és sokszor emiatt is furcsa dolgokat produkál. Ha biztos akartam lenni abban, hogy a böngésző letöltse a képet a szerverről és nem cache-ből szedje, random paramétert adtam a képnek. Pl:
kep.jpg?r=ADA121E8870FF1 ... (általában MD5 timestampet)x gon' give it to ya
-
fordfairlane
veterán
Van egy újabb ötletem. Mi lenne, ha az iframe urljébe is tennél random paramétert?
x gon' give it to ya
-
fordfairlane
veterán
válasz bazsikaaa #1536 üzenetére
Linket adj légyszi az oldalra, akkor megnéznem. Így látatlanban nehéz okosat mondani, talán a háttérképre megadott hivatkozás url-je nem szabványos, esetleg a képformátummal van gond (CMYK jpeg), egyébként az Explorer is meg szokta jeleníteni a cella háttérképét.
x gon' give it to ya
-
fordfairlane
veterán
válasz bazsikaaa #1542 üzenetére
Nekem bejön az oldalsó menü IE 6-ban, pedig ezen csak egy régi 6-os verziójú flash plugin van Explorer alá. Ugyanakkor felül az információs sáv kiírja, hogy frissítsek 11-es flashre.
Firefox alatt 10-es flashem van, ott is jó. Talán az object tag nem megfelelő classid-vel van berakva, de a dreamweavert nem ismerem, és a flasht se nagyon.Próbáld ki ezzel: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
[ Szerkesztve ]
x gon' give it to ya
-
fordfairlane
veterán
válasz Anubiss #1545 üzenetére
Ötvözhető. A PHP egy programnyelv, amely megmondja a szervernek, hogy melyik oldal mit csináljon, milyen adatok jelenjenek meg rajta, a bekért adatokat hogyan dolgozza fel stb... A HTML (+ CSS) egy leírónyelv, mint a PDF vagy a DOC, amelyik leírja, hogy az oldal kb. hogyan nézzen ki.
Az általános gyakorlat szerint egy weboldal úgy működik, hogy a PHP programrész összeszedi a megjelenítendő adatokat, majd ezt a HTML leírónyelvvel strukturálja, és ezt küldi a böngészőnek, amely a HTML tartalmat megjeleníti.
[ Szerkesztve ]
x gon' give it to ya
-
fordfairlane
veterán
válasz dodopek #1562 üzenetére
Fix méretű ablakot a window.open funkcióval lehet nyitni. Három paramétere van, az első az url, a második a target, mint az anchor tagnál, a harmadik pedig egy paraméterlista, amiben megadod az ablak jellemzőit, szélesség, magasság, átméretezhető-e vagy sem, legyen-e url mező, legyen-e státuszsor, és hasonlók.
Írok egy egyszerű példát:
<a href="#" onclick="window.open('http://index.hu', '_blank', 'width=400,height=200')">link</a>
[ Szerkesztve ]
x gon' give it to ya
-
fordfairlane
veterán
És ez most nem sértegetés, tényleg nem találtam még olyan összefoglaló cikket, ahol a fontos alap dolgok le lennének írva ezzel kapcsolatban, én is innen-onnan olvasgatva jöttem rá a dolgokra..)
Szívesen segítek, akár egy HTML help írásában is. Ugyan vannak a neten tutorialok, de általában csapnivaló minőségűek. Vagy elavultak, vagy idétlenül, igénytelen fogalmazással vannak megszerkesztve, és sokszor lényegtelen dolgokkal vannak tele.
x gon' give it to ya
-
fordfairlane
veterán
-
fordfairlane
veterán
válasz NeoExDeath #1742 üzenetére
Nem ismerem a Dreamweavert, de html-lel és style-lal középre pozicionálni nem bonyolult. Kell egy blokk, ami tartalmazza az oldalt, meg kell adni a szélességét, és "margin: auto" style beállítással középre lehet rendezni. Internet Explorer kompatibilitási okok miatt arra kell figyelni, hogy a fejlécben a megfelelő DOCTYPE verzió legyen.
x gon' give it to ya
-
fordfairlane
veterán
Hát pedig sajnos nem árt foglalkozni a 6os ie-vel.
A 6-os Explorer ismeri a margin: auto-t, csupán a megfelelő doctype fejléc kell, hogy szerepeljen, ami ún. "szabvány" üzemmódba állítja az IE 6 oldalrendelését. A text-align: center és text-align: left módszer az IE 6-nál régebbi (4, 5, 5.5) böngészők miatt kell.
Ezek a böngészők (ha jól emlékszem) nem ismerik a margin: auto-t, viszont hibásan értelmezik a "text-align" proprety-t, nemcsak inline elemekre érvényesítik, hanem blokkelemre is (div), ellentétben ugye a CSS szabvánnyal. Na ez az, amivel én már nem szoktam foglalkozni. Az IE 6 egyelőre megkerülhetetlen.
[ Szerkesztve ]
x gon' give it to ya
-
fordfairlane
veterán
Így látatlanban azt mondom, hogy ha a div-ek szélességével van gond, akkor bizonyára hiányzik a megfelelő doctype a fejlécből.
Az Internet Explorer a 4-es verziótól támogatja a CSS szabványt, viszont a blokkelemek szélességét nem a szabványban leírtak szerint implementálták, hanem a saját értelmezésük szerint: [link]
Az IE hatos verziótól kezdve lehetőség van rá, hogy az Explorert egy ún. szigorú szabványkövető üzemmódba állítsd, és bár így is akadnak eltérések a szabványban leírtakhoz képest, de innentől kezdve a blokkelemek szélességét a szabvány szerint értelmezi az Explorer is. Ehhez az üzemmódhoz a megfelelő doctype kapcsoló kell, hogy szerepeljen a html kódod első sorában. Erről a dologról itt találsz részletes leírást: [link]
Én általában ezt a fejlécet használom:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">vagy valamelyik xhtml-t.
Ez egyfajta "verzióinformáció" a html kódodról, amit a w3c validator is figyelembe vesz, amikor a kód validálását végzi.
x gon' give it to ya
-
fordfairlane
veterán
Bocs, nem néztem meg alaposan a képeket, my baaad. A 3 pixeles gap egy sokat emlegetett IE 6 bug, egyből beugrott: [link], [link]
Én nem igazán futottam még ebbe bele, őszintén szólva nem is ismerem, hogy pontosan mikor jön elő, és mivel lehet elkerülni, próbálom kerülni a float használatát, ha van rá mód.
x gon' give it to ya
-
fordfairlane
veterán
válasz blast3r #1898 üzenetére
Ezen metatag átírása nem változtat az oldal karakterkódolásán, csupán a böngészőnek jelzi, hogy milyen kódlap szerint értelmezze. Olyanra kell beállítani, amilyenben ténylegesen mentve lett az adott html fájl. Ha UTF-8-ban lett elmentve, akkor értelemszerűen UTF8-at kell a böngészőnek jelezni.
x gon' give it to ya
-
fordfairlane
veterán
válasz milegyen #1918 üzenetére
Ha tooltipet akarsz a kép fölé, akkor a title tagba is írd be a szöveget.
<img src="08032114209.gif" alt="Ide van írva valami?" title="Ide van írva valami?" align="center" vspace="100" hspace="100" width="162" height="225" border="3">
Az alt tag eredeti funkciója egy alternatív szöveg, amely abban az esetben jelenik meg, ha hiányzik a kép, vagy nagyon lassan töltődik le.
[ Szerkesztve ]
x gon' give it to ya
Új hozzászólás Aktív témák
- Villanyszerelés
- Futott egy Geekbench kört egy új HTC készülék
- Magga: PLEX: multimédia az egész lakásban
- Xiaomi 11 Lite 5G NE (lisa)
- Stellar Blade
- Tőzsde és gazdaság
- Napelem
- Súlyos adatvédelmi botrányba kerülhet a ChatGPT az EU-ban
- Vezetékes FEJhallgatók
- Xbox tulajok OFF topicja
- További aktív témák...