- Honor 400 Pro - gép a képben
- Netfone
- One mobilszolgáltatások
- VoLTE/VoWiFi
- Apple Watch
- Samsung Galaxy S24 Ultra - ha működik, ne változtass!
- Honor Magic5 Pro - kamerák bűvöletében
- Mi nincs, grafén akku van: itt a Xiaomi 11T és 11T Pro
- Samsung Galaxy S21 és S21+ - húszra akartak lapot húzni
- Samsung Galaxy A54 - türelemjáték
Új hozzászólás Aktív témák
-
cidalain
veterán
Tegnap szoptam be IE8-nál egy olyan egyszerű történetet mint a BASE tag.
Nem bírja értelmesen kezelni, az istennek sem.Emiatt most minden belinkelt cuccom elé (css, js, képfájl) elé oda kell tennem egy rohadt / jelet...
Ez azért is gáz, mert pl a fejlesztési cuccomban az oldal gyökere nem így van, hanem a BASE /projektnév/verziószám/. Így most mindenhova PHP-változóval kell kipakolnom a config beállításoknak megfelelően.Ez annyira nem tetszik. Van erre értelmesebb megoldás?
(Szép URL-es oldalkialakítással próbálkozom, és muszáj, hogy a belinkelt fájlok a gyökérhez legyenek relatívak, függetlenül hogy mi van a címsorban) -
cidalain
veterán
már nem látom a próba10-ben a menüknél az alt-ot és a title attribútumokat de 1000%-osan biztos vagyok benne hogy a baj az volt hogy az <a> tagnek nincs alt attribútuma. itt csak a title mehet.
viszont a régi stílusú oldalverzióban a menüpontok képelemek <img> taggel, annak viszont van alt és title attribútuma is, és azért nem reklamál ott.tehát ha kell a tooltip jellegű felbukkanó az egérfölévitelnél, akkor <a>, <button>, <div> elemű "gomboknál" csak title lehet, míg <img> gombnál lehet alt és title is (sőt kell is mindakettő, keresőoptimalizálás miatt szerencsés).
-
DeltaPower
addikt
A strict doctype nem ismeri az alt taget. Ha mégis szükséged van rá, akkor használj transitional doctype-ot.
#4312-re
- position alapbeállítása általában megfelel, nem gond, ha kiszeded a relatívokat, viszont a left, top se maradjon benne.
- konténert úgy tudsz adni a floatoknak hogy pl. beleteszed őket egy divbe. A konténer nem egy konkrét html elem, hanem valami, amibe beleteszel valamit (ez de szép mondat lett)
- A #4296-ban leírtam, hogy tudod css-ből beállítani a különböző háttérképeket. Minden oldalon más classt kell megadni a fejlécnek és kész. -
DeltaPower
addikt
A bal sávban még mindig vannak absolute elemek.
Gyors, de nem teljes megoldás az oldaladra a szétesés ellen:
- lablec divről leszedni a floatot, helyette clear: both
- szoveg divről leszedni a left, top értékeket.Továbbá, pár általánosan bevált módszer:
- Mindig csak annak adjunk floatot, ami tényleg valami mellé megy.
- Ami teljes szélességű a szülő elemhez képest (pl. nálad a konténerben a kapcsolat, lábléc divek), azoknak nem float, hanem clear kell.
- A szülő utolsó floatolt eleme után mindig clearelni kell, ha a szülő nem fix magas.
- A floatolt elemeket szokás külön konténerbe rakni.
- Position: relative elemre csak akkor tegyél top, left értéket, ha valóban tudod, mi lesz a hatása. Helyette ott a margin vagy a padding. -
sz.j
nagyúr
Nem sikerül a fix magasságok megszüntetése ...., ha auto-ra átállítom a kontener, a bal és a jobb div-eket, akkor ilyen lesz az oldal ...
Ui.
Lehet, hogy butaság amit kérdezek, de ha külső stíluslapon van a css, akkor van arra mód, hogy egy (bármelyik) oldalon lévő beágyazott stíluslapon lévő css-el úgymond "felülbíráljuk" a külsőn lévő hasonló css-t (azaz a belsőn lévő "lép érvénybe")? -
DeltaPower
addikt
Jónak tűnik, már csak a fix magasságokat kell megszüntetni, ahol nem feltétlen kell.
Menü név kiíratása mondjuk így történhet:
<a href="#" alt="Kezdőlap" title="Kezdőlap">Kezdőlap</a>
Ha rajta tartod az egeret, kiírja buborékban a titlet/alt-ot browsertől függően. Ha mouseovernél azonnal ki akarod íratni, ahhoz valami javascriptes megoldás kell, én pl. tipsy-t használok, ha ilyenre van szükség. -
cidalain
veterán
adsz neki title taget:
<a style="font-weight: normal;" href="#" title="Bubiszöveg1">Kezdőoldal</a>
<a style="font-weight: normal;" href="#" title="Bubiszöveg2 - Redőny">Redőny</a>Következő lépésként külön kódlapba tenném a css elemeket:
kimásolod a <style> és </style> közötti részt egy külön fájlba (ez a nyitó és záró HTML tag nem kell)
elmented mondjuk a gyökérbe stilus.css néven (vagy létrehozol egy "mappát" és azon belül)itt a HTML-ben meg beleteszed a külön stíluslap meghívását a <stlye> helyére:
<link href="stilus.css" rel="stylesheet" type="text/css" /> vagy
<link href="mappa/stilus.css" rel="stylesheet" type="text/css" /> -
DeltaPower
addikt
1. az oldal kódja alapvetően jó, ráadásul valid, ami egy kezdőtől szép teljesítmény. ami nem jó, az az, hogy minden abszolút van pozícionálva, sokkal jobb lenne floatolt elemekkel dolgozni.
2. mindenképp a lehető legtöbb css-t külső stíluslapba kell tenni, mert akkor külön cachelheti a böngésző az oldal tartalmától független.
3. a fejlécnek létrehozol egy alap classt, amiben a méretei stb vannak, ezen kívül több háttérformázást, valahogy így:
div#fejlec { width: 500px; height: 200px; ...}
div.fejlec1 { background: url(hatter1.jpg) }
div.fejlec2 { background: url(hatter2.jpg) }
Ezután kódban tudod hozzáadni a háttér classokat oldalanként: <div id="fejlec" class="fejlec1">...</div>
4. a jelenlegi oldalfelépítéssel bonyolult, mivel minden fix méretű és abszolút pozícionált.
5. a "jobb" div rátakar a "kontener" div jobb szegélyére, a "jobb" divet 1 pixellel keskenyebbre kell venni. -
Peter Kiss
őstag
Az egészben az a jó, hogy nem igényel kódmódosítást, mert ezekért a webszerver felel.
Ha apache futtatja a cuccot, akkor a HTML5 boiler plate oldalt ajánlanám, ott találsz egy kezdő .htaccess fájlt (és magyarázatot), amit be kell másolni a gyökérkönyvtárba. Ha szerencséd van, helyből jó lesz (amire számítani lehet, az az internal server error [ekkor valami hiányozni fog, vagy épp nem képes a szerver értelmezni valamit], bemásolás ellenére se lesz [ezzel nem tudsz mit kezdeni, mert le van tiltva a .htaccess használata, vagy egy-két modul nincs telepítve]).
Ha IIS, akkor keress rá a cuccra, mert már megcsinálták arra is (github-on lesz valamerre).
-
Sk8erPeter
nagyúr
Na várj, szerintem félreérted a célt. Mondok olyan példát, ami testközeli lesz neked
Pl.:<div>XYZ műanyag redőny:</div>
<div>Ez egy csodaszép redőny.</div>
<div>12345 Ft</div>EHELYETT EZT ÁTALAKÍTOD ilyenre (most direkt berakom a teljes body-val és mindenfélével, persze lehet másképp is):
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Redőnyök</title>
</head>
<body>
<div itemscope itemtype="http://data-vocabulary.org/Product">
<div> <span itemprop="brand">XYZ</span> <span itemprop="name">műanyag redőny</span>:</div>
<div>
<img itemprop="image" src="http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/package.png"
/>
</div>
<div>
<span itemprop="description">Ez egy csodaszép redőny.
</span>
</div>
<div> <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
<meta itemprop="currency" content="HUF" />
<span itemprop="price">12345</span> Ft</span>
</div>
</div>
</body>
</html>Itt elérhető ez a példa, látható, hogy nagyjából hogy fog kinézni a keresőben, mondjuk a kép pont nem jelenik meg.
-
Sk8erPeter
nagyúr
Itt csak annyiról van szó, hogy ahelyett, hogy sima szövegként jeleníttetnéd meg a termék nevét, majd az értékelését egy divben, meg a leírását egy harmadik divben, aztán még az árát egy negyedikben, stb., ahelyett ellátod ezeket a diveket, spaneket, stb.-ket a Google számára is beszédes osztályokkal (class attribútum) vagy egyéb attribútumokkal.
Például itt mutat tök jó példát:
mondjuk van ez:
Sale: $119.99 (Sale ends 5 November!)
ezt átalakítod ilyenre:<meta itemprop="currency" content="USD" />
$<span itemprop="price">119.99</span>
(Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05">
5 November!</time>)Így tehát a Google keresőrobotja tudni fogja, hogy az utóbbinál épp egy termékárat taglaltál, amikor végigrohangászik az oldaladon, és próbálja megfelelően indexelni. A dátumnál a datetime attribútumban meg pontosabb dátumot is megad (évvel), szabványos formában.
Mondjuk ezek alkalmazásához érdemes áttérned HTML5-re, ha azt szeretnéd, hogy valid maradjon az oldalad. Úgyis az a jövő. -
Sk8erPeter
nagyúr
Na várj, bocs, de most látom, hogy az előző demónál a <style> tagen belül rosszul adtam meg a class-t, ezért nem vált érvényessé a margó, szóval ez a jó változat:
http://jsbin.com/eromuy/7/edit -
Sk8erPeter
nagyúr
Igen. Megközelítés kérdése, de itt talán logikusabb úgy, hogy a táblázat cellájába raksz mondjuk egy <div>-et, és annak egy margót határozol meg.
Az itt korábban mutatott példát ennek megfelelően update-eltem, nézd a középső, összevont cellát, aminek a div-jénél megadtam egy 30 pixeles margót a style attribútumban:
http://jsbin.com/eromuy/4/edit
Természetesen az inline style attribútum alapból kerülendő, és külön CSS-fájlban illik megadni a stílusokat (osztályokkal, stb.) csak most így volt egyszerűbb a szemléltetés miatt (mondjuk most már gondolom ezzel nem mondtam újat).Szerk. (#4135) szerint: most ennek megfelelően megint módosítottam a példát, lásd a div-et, "cellan-belul-nagy-margoval" osztállyal ellátva, plusz a <style> tagen belüli stílus-meghatározást:
http://jsbin.com/eromuy/6/edit -
Soak
veterán
Én mindent floatolnék a helyedben . A legkönyebben úgy tanulhatod meg, ha csinálsz egy nagy div-et egy új, üres dokumentumban. Mondjuk 960x1500 . Ennek adsz két oldalon margin-left:auto;, margin-right:auto; . Ez bepocizionálja középre. Itt neki állhatsz szórakzoni a div-ekkel. Teszel bele 5 div-et és mindegyiket float:left; (vagy right, vagy tetszés szerinti variáció) . Méretet adsz nekik és háttérszínt, hogy lásd mi történik. Régebben linkeltem neked a Clear-ről, az nagyon fontos, nézd meg a példát és probálgasd.
Kb 25perc alatt rá fogsz jönni, hogy miként működik.
-
DeltaPower
addikt
position:absolute esetén a top:auto; alapból a befoglaló elemhez képest 0,0-ra teszi az elemet
Ahogy írtad, az abszolút pozícionálásnak leginkább fix méretek esetén van értelme, a te oldaladon inkább float-olni kellene a diveket.
Az általános megoldás erre így néz ki:
- felosztjuk az oldalt tartalmi egységekre: nálad fejléc, középrész, lábléc
- minden egységben, ami egymás mellé kerül, fix szélesség és float:left, ezek alá egy 0px magas div, aminek clear:both tulajdonsága van, és mindezt egy konténer elembe tesszük
- az egymás alá kerülő elemeket egymás után pakoljuk, float nélkülA te oldaladnál például így néznének ki a div-ek (ez csak egy megoldás):
<div id="kontener"> // fix széles, vízszintes margin: auto, nincs float
<div id="fejlec"> // fix széles, fix magas, nincs float
<div id="logo">...</div> // fix széles, fix magas, float:left
<div id="kep">...</div> // fix széles, fix magas, float:left
<div class="cleardiv"></div> // clear:both, height: 0px;
<div id="kapcsolat">...</div> // fix széles, fix magas, float:left
</div> //fejlec vége
<div id="tartalom"> // fix széles, no float
<div id="bal">...</div> // fix széles, float:left;
<div id="jobb">...</div> // fix széles, float:left;
<div class="cleardiv"></div>
</div> // tartalom vége
<div id="lablec">...</div> // fix széles, fix magas, no float
</div> // kontener vége -
Sk8erPeter
nagyúr
A smiley pedig pont arra való, hogy elvegye a mondandó élét, legalábbis az általad idézett esetben én inkább ezzel próbáltam jelezni, hogy nem szemétkedésből írom, amit írok. Tehát akkor ezek szerint félreértelmezzük így távolból egymás metakommunikációját.
(és ez most nem egy gunyoros smiley volt, hanem inkább barátibb hangulat kialakítására törekvő)
Azért annak örülök, hogy ezt tisztáztuk (remélem tisztáztuk).A logónál igazából arra gondoltam, hogy nagyon csúnyán pixeles a linkelt oldalnál, tehát egy "butított" kép. A butított szón azt értem, hogy a jpeg alapvetően tömörítést alkalmaz, és itt túl sok a tömörítés, lehetne a kép jóval élesebb: egy jobb minőségű képet kellene választani. Persze mindezt nem annak árán, hogy túl nagy legyen a kép: kis kép is lehet élesebb ennél.
A Kompozer topicban szerintem ne próbálkozz, nem egy túlságosan látogatott topic, nyugodtan tedd fel itt a kérdésedet, arra való.
-
Sk8erPeter
nagyúr
A logó remélem csak átmenetileg ilyen rossz minőségű, amíg tesztcélú az oldal.
Egyébként szerintem a sárga háttérhez eléggé nem illik ez a kékes szín. De nem is folytatom a kritizálást, mert az eddigiek alapján érzékeny vagy a kritikákra, még ha építő jellegűek is akarnak lenni.(#4075) Soak : egyetértek, Te is egy jó példát mutattál neki, sőt, a tiéd egyből kipróbálható kód volt.
-
sz.j
nagyúr
".....nem jövök rá arra, hogy a Kompozer-ben lévő css-el hogyan lehet függőleges menüsort csinálni .."
-
Sk8erPeter
nagyúr
Ami szerintem jól és könnyen továbbfejleszthető:
Drupal + Zen
utóbbiból egy subtheme-et érdemes kreálni.
De arra fel kell készülni, hogy ez elég csupasz lesz, inkább egy nagyon jó vázat ad, egy alapot, amire lehet építeni, fixed layout, liquid layout, IE-hülyeségek, többoszlopos megjelenés kezelve van benne, és nagyon jó dokumentáció van még a CSS-fájlokban is.
Persze ez csak akkor hasznos, ha van hozzá türelmed, hogy beleásd magad.
Nem érdemes ezzel a theme-mel kezdeni a Drupalt, mert az elején kezdőként az ember megijed tőle, és elszalad. -
Sk8erPeter
nagyúr
Nekem (nekünk) sem két perc volt rájönni annak idején, az biztos, ennek is van egy tanulási ideje. Én sokat tanultam abból, hogy
1.) ha WYSIWYG-szerkesztőt használtam, folyamatosan néztem a kódban a változásokat (hogy értsem, mi történik a háttérben, különben csak annyit látok, hogy változott a megjelenés, de nem tudom, mitől)
2.) nem használtam WYSIWYG-szerkesztőt, megpróbáltam egy mezei szövegszerkesztőben (Notepad++) összedobálni az oldalakat, ha nem sikerült, akkor utánanéztem, hogy mi lehet a baj, sokat Gugliztam, tutorialokat böngésztem, könyvet olvasgattam.Itt van rengeteg példa a CSS-használatra.
Konkrétan például ez lehet hasznodra:
Creating a homepage without tables -
Soak
veterán
Így : [link] . Mondjuk tegyük fel, hogy van 2 div-ed . Az egyik amiben minden benne van (ez egy nagy, mondjuk 960x960, vagy amekkorát akarasz) meg van még egy ami mondjuk 100px széles, és olyan magas amilyenre akarod, mondjuk 500px . Ugye ez a második div a nagy divben van benne, amit már lerögzítettél (ha nem akkor mondjuk a kétoldali margin:auto; kb jó lesz.) . Szóval a második div-ednek adsz egy float:left; , ezzel feluszik a nagy div bal felső sarkába. Innentől meg azt csinálsz vele amit akarsz, teszel bel mondjuk 5 linket és ugyanugy floatolod öket mondjuk balra és szépen be fognak egymás alá sorakozni.
-
Sk8erPeter
nagyúr
Hát jó.
Kicsit mintha magadra vetted volna múltkor, hogy megkérdeztem, miért nem változtatsz az oldalfelépítésen is a táblázatosról, hidd el, nem rossz szándékból mondtam, hanem azért, mert túl sok szívás lehet hosszú távon egy full táblázatos felépítéssel rendelkező oldalon (pl. be akarsz rakni egy új sort, és lejjebb csúszik, meg kell oldani a különválasztást, stb.), egyszerűbb lehet a különálló elemekből (<div>) való összepakolás. Persze azzal is bőven lehet szívni, de másképp.=======
(#4065) Soak : na, ennek örülök, szívesen!
-
Sk8erPeter
nagyúr
-
fordfairlane
veterán
Ne a td background attribútumot használd, az már régi, hanem a css background-image, vagy az összevont css background attribútumot.
<td style="background-image: url(szaboredony-logo.jpg)">
Háttérnek akkor érdemes használni képet, ha valamit a kép fölé akarsz tenni. Inkább szúrd be simán a képet a cellába, és állítsd be, hogy <img src="szaboredony-logo.jpg" style="display: block">
-
Soak
veterán
Search Engine Optimisation
Utolsó hozzászólásom a témában
Igen, próbaverzió, igen, le fog járni, de oda van írva, hogy addig minden funkciója működik. 1. Nem értem, hogy mennyibe tart leszedni a panaszkodás helyett. 2. Ha leszeded és betöltöd az oldaladat akkor van lehetőséged rá, hogy szimultán láss egy renderelt képet az oldalról és mellette a kódot is, magyarul élesben, azonnal látod, hogy mi történik, meg tudod tanulni, hogy milyen változtatásra mi változik az oldalon, amit miután lejárt a próbaverzió kézzel is tudsz kódolni(kisebb változtatásokat eszközölni). 3.Ehhez hozzá jön még, hogy a DW nem "szemeteli" tele a forrás kódot. 4. Mivel jelenleg ott tartunk, hogy egy CSS sincs az oldalhoz kapcsolva (legalábbis eddig így volt), ezt a DW-vel 2 darab kattintással megcsinálod és beírja neked ezt :
<link href="csskönyvtárad/cssfileod.css" rel="stylesheet" type="text/css">
Vagy amit DeszkásPeti írt , az mondjuk két kattintás és automatikusan, hiba nélkül beteszi a CSS file-ba. Miután kb 2 óra alatt el tudod végezni ezeket akkor lesz egy normális forráskódod, normális CSS-el és esetleg ha segítséget kérsz és kapsz egy olyan részletes kódot amit jelenleg nem tudsz beilleszteni akkor majd be fogsz tudni, mert lesz hová.
U.i.: Én csak segíteni probáltam/ok , de ha másképp szeretnéd csinálni akkor nosza, csak nem gondolom, hogy az megoldás, hogy szép lassan megírják neked a kódot itt többen, mert akkor ugyanott tartunk mint amit mondtál a DW próbaverzióval. Ha nem lesz valaki épp fórum közelbe akkor nagy lesz a szenvedés mert nem tudod magadnak megoldani.
U.i.2: Azt is írtam ezelött ,hogy a DW-ben pont az ilyen egyszerű siteokhoz nagyon jó minták vannak automatikusan beépítve amihez kiváló magyarázatot ad, mint placeholder szöveg. Nem beszélve arról, hogy azokat 10perc alatt fel lehet tölteni az általad kivánt tartalommal.
U.i.3.: Azon kivül, hogy 1001 tutorial van a DW-hez még a saját súgója is kiváló, tehát még segítséged is azonnal van.
-
Sk8erPeter
nagyúr
Ja, az alt, title attribútumok is segítenek, de én úgy tudom, egy hagyományos elrendezésű. szöveges menü jobb értékelést kap, mint a képekkel teli.
Amúgy az ilyen navigációs linkekre HTML5-ben pl. már a <nav> tag alkalmazása javasolt (szemantikus web, stb.), de ez most mellékes, mert nálad nem HTML5-ös DOCTYPE van.
======
(#4010) Soak : igen, tudjuk, de most igazából miért olyan nagy szám ez?
Szerk.: Ja, jó leesett, gondolom arra céloztál, hogy "keressé, vazze".(és akkor megleli a trial változatot)
-
Sk8erPeter
nagyúr
<a href="index.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Kezdőoldal" src="button1.jpg"></a><br>
<br>
<a href="redony.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Redőny" src="button2.jpg"></a><br>
<br>
<a href="nyilaszaro.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Nyílászárók" src="button3.jpg"></a><br>
<br>
<a href="reluxa.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Reluxa" src="button4.jpg"></a><br>
<br>
<a href="szunyoghalo.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Szúnyogháló" src="button5.jpg"></a><br>
<br>
<a href="szalagfuggony.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Szalagfüggöny" src="button6.jpg"></a><br>
<br>
<a href="arak.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Árak" src="button7.jpg"></a><br>
<br>
<a href="kapcsolat.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Kapcsolat" src="button8.jpg"></a><br>
<br>
<a href="oldalterkep.html"><img style="border: 0px solid ; width: 100px; height: 20px;" alt="Oldaltérkép" src="button9.jpg"></a><br>
<br>====================================================
HELYETT
CSS-be:
ul.navigation
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul.navigation img
{
border: 0px solid;
width: 100px;
height: 20px;
}HTML-rész:
<ul class="navigation">
<li>
<a href="index.html"><img alt="Kezdőoldal" title="Kezdőoldal" src="button1.jpg" /></a>
</li>
<li>
<a href="redony.html"><img alt="Redőny" title="Redőny" src="button2.jpg" /></a>
</li>
<li>
<a href="nyilaszaro.html"><img alt="Nyílászárók" title="Nyílászárók" src="button3.jpg" /></a>
</li>
<li>
<a href="reluxa.html"><img alt="Reluxa" title="Reluxa" src="button4.jpg" /></a>
</li>
<li>
<a href="szunyoghalo.html"><img alt="Szúnyogháló" title="Szúnyogháló" src="button5.jpg" /></a>
</li>
<li>
<a href="szalagfuggony.html"><img alt="Szalagfüggöny" title="Szalagfüggöny" src="button6.jpg" /></a>
</li>
<li>
<a href="arak.html"><img alt="Árak" title="Árak" src="button7.jpg" /></a>
</li>
<li>
<a href="kapcsolat.html"><img alt="Kapcsolat" title="Kapcsolat" src="button8.jpg" /></a>
</li>
<li>
<a href="oldalterkep.html"><img alt="Oldaltérkép" title="Oldaltérkép" src="button9.jpg" /></a>
</li>
</ul>Persze itt a lista még lehet, hogy igazításra szorul (pl. padding, margin, stb.), ezt tesztelni kell.
Egyébként annak érdekében, hogy a Google még jobban értékelje az oldaladat, a menüből jó lenne kivenni ezeket a kép formájában szereplő menüelemeket (gombokat), és szövegesen berakni.
Úgy is megoldható, ha szeretnéd a gombokat ezzel a háttérrel, hogy külön kivágod azt a kékes hátteret, és a szöveges részek mögé rakod. -
Soak
veterán
Hogyha egy kicsit elolvasnád, hogy mit írtunk neked akkor szerintem könnyebb helyzetben lennél. Egy ul lista kódja így néz ki (amit amugy a google is megmond) :
<ul>
<li>Lista 1. eleme</li>
<li>Lista 2. eleme</li>
</ul>Ezzel annyi a baj, hogy ez eredményez neked egymás alatt két elemet ami mellett van egy pont (hasonló a word-ös listához) . Ezt még CSS-el be kell styleollni a saját igényeidhez. Itt van egy bővebb leirás, pl az ul és ol közötti különbségről http://www.w3schools.com/html/html_lists.asp . Azt is írtam neked, hogy nézd meg a DW-t mert azzal ilyen dolgokat nagyon egyszerű megcsinálni egy kezdőnek mert be rakni egy listát 1 katt, utánna meg 5katt bestyleolni.
Szerk: A lista amit írtam az még nem linkesített természetesen.
-
Soak
veterán
A <h?> tag-eknél ugyanúgy megadhatod, hogy aláhuzza, nem kell hozzá spanba rakni . (Persze csak akkor, ha az összes olyan h? tagot alá akarod huzni.) . Ha megadod, hogy aláhúzza akkor csak az változik, azon kivül mindent ugycsinál mind eddig.
szerk : Jó lenne kicsit rá google-zni a css-re, kb 1 nap alatt meg lehet olyan szinten tanulni, hogy egy ilyen siteot összedobj.
-
j0k3r!
őstag
"Köszi az infót, utánanézek, hogy a javasolt módosításokból mit tudnék megvalósítani, de tartok tőle, hogy nem sokat, mert mint ahogy az előző hsz-ban is írtam sajnos nem értek a kódíráshoz...."
igazabol nem is kell nagyon erteni a kodirashoz, mivel ezek (html, css) inkabb leiro nyelvek, mintsem turing teljes nyelvek, azaz (kis tulzassal) leirod, amit latni akarsz es kesz
"Amúgy nagyon szemetes a forráskód?"
hat ezt a szot, hogy szemetes en meg ebben a kontextusban nem hallottam, de ha arra gondolsz, hogy elavult-e (deprecated) a kod, akkor sajnos azt kell mondjam, hogy reszben az (ez foleg az oldalszerkezet tablazattal valo kialakitasara vonatkozik)
"Sajnos a <big>-t a Kompozer alkalmazza, én sem örülök neki."
ha nem orulsz neki, akkor dobd el (szerintem a wysiwyg editorok nagy resze teljes zsakutca a fejlesztes szemszogebol, mar ha normalis oldalt akar letrehozni az ember), aztan helyette szanj ra egy par napot, hogy megismerd a gyakrabban hasznalt html elemet (5-15) es css beallitasokat (10-20)
- a szamokkal kapcsolatban most csak hasrautottem, csak azt akartam kihangsulyozni, hogy nem egy lehetetlen dolog megtanulni
"Ez a SEO-t miben és hogy befolyásolja?"
nem vagyok egy seo magus, de, ha jol tudom, akkor a keresorobotok egy oldal bejarasa soran odafigyelnek a <h?> tagekre, mivel ezek az oldal tartalmaval kapcsolatban viszonylag relevans informaciokat hordoznak (ha hulyeseget irtam, nyugodtan javitsatok ki
)
ahogy te is nagyobba, jobban lathatova tetted a cimeket a user szamara (<big>), hasonlo dolgot muvelsz a keresorobot szamara is, amikor kiemeled szamara, hogy mi a fontos az oldalon (<h?> tagek)mas: ha vegleg nem boldogulsz az egesszel, meg akkor is ottvan az a lehetoseg, hogy letoltesz az internetrol egy, mar kesz templatet (biztosan talalsz olyan, amelyiknek az elrendezese megfelel), aztan befoldozod a lyukakat (diveket)
mod: (#3988) DeltaPower:
-
Soak
veterán
A linkekről nem sokkal ezelött folyt az eszmecsere bővebben. Ha ajánlhatom akkor töltsd le a Dreamweavert és töltsd be vele az oldalt. Ugyan fizetős a program (de biztos találsz valahol egy pár napos próba verziót
), viszont a HTML kódolást 1001 módon könnyíti. Tudni kell kódolni hozzá, de egy ilyen szintü weblaphoz elenyésző tudás kell. Ha gondolod szívesen segítek a programmal kapcsolatban, de a html kódrol is kérezhetsz itt bárkit nyugodtan. Amit érdemes megtanulni, a tag-ek neveit (igazából div ami fontos lenne), meg a css alapfogalmait. Viszont a css-ben hatalmas segítség a Dreamweaver, mert aki szeretné az szinte kézi kódolás nélkül meg tudja oldani (ha erről a siteról van szó akkor még csak rá se kell nézni a kódra igazából..
).
-
j0k3r!
őstag
hello!
elso ranezesre:
- tablet teljesen kiirtanam belole -> divekkel is meg lehet oldani
- inline css-t is kiirtanam, foleg ha ugyanaz a formazas x elemre vonatkozik (erre valo a css class)
- ugye a css-t kulon fileba kellene rakni (igy elkulonul a tartalom es a megjelenes)
- <big> helyett <hn> taget ajanlanam ( n = 1..6 ) -> ez seo miatt is lenyeges
- a menut is altalaban <ul> <li> <a> elemekkel szoktak megvalositanimod: a mezei user szereti, ha tortenik 'valami', ha raviszi az egeret egy linkre (alahuzodik, elszinezodik, akarmi), ezt szinten css segitsegevel tudod megoldani: hover
-
Sk8erPeter
nagyúr
Sztem itt most mindegy, "valid"-ot vagy "satisfiable"-t ír, a státuszról szóló header felülbírálható szerveroldalról.
Ez esetleg érdekes lehet:
HTTP Error 416 Requested Range not satisfiable
Mondjuk kétlem, hogy Te tudnád orvosolni, ezt a webszerverhez értő emberkék kellene, hogy javítsák valamilyen módon (nekem ezzel a hibakóddal személy szerint nincs tapasztalatom). Meg persze tudni kéne a dolog konkrét forrását. -
Sk8erPeter
nagyúr
Tudtommal ATW-n nem működik a .htaccess, tiltják a használatát. Itt van egy fórum erről, itt is ezt írják.
-
tob!as
tag
Van egy ilyen mondat mindkét bejegyzésnél:
"If this error occured in a script section of your document, you should probably read this FAQ Entry"
Egyrészt javasolnám a FAQ entry elolvasását.
Másrészt pedig ha a <script></script> közötti részt külső fájlból include-olod akkor nem lesz para.
Ha mégse akarsz külső include-al bajlódni akkor itt megláthatod a probléma megoldásást a "Writing HTML in a SCRIPT Element" rész alatt. A script rész után be kell szúrni egy htrml comment nyitót, a script záró elé be kell rakni a html comment záró részét, és az egész document.write részt escapelni kell -
tob!as
tag
Az első és utolsó esetet így szerintem buktad. Az első eset XHTML-re jó, az utolsó meg HTML5.
Viszont ezt javaslom, hogy próbáld ki:
<!-- Ezt a részt rakd a headbe. -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'hu'}
</script>
<!-- Ezt meg oda ahova akarod rakni a +1 gombot. -->
<script type="text/javascript">
document.write('<g:plusone size="medium" href="http://www.example.org/post"></g:plusone>');
</script>Ha minden jól megy, akkor a +1 gomb helyén lévő javascript lefut, és berakja a sima <g> taget. Viszont a validáló nem futtatja a javascriptet. Gondolom hogy neked az a lényeges, hogy a validáció meglegyen.
-
tob!as
tag
Szia!
Ezen a linken találsz leírást.
Ha XHTML-re akarod validálni, akkor hozzá kell adni a "g" namespace-t:
<html xmlns:g="http://base.google.com/ns/1.0">De van olyan opciód is, hogy javascript-es document.write függvénnyel belerakod a kódba betöltés alatt, így a validáló nem hasal el.
Ha HTML5-be akarod rakni, akkor pedig:
<div class="g-plusone" data-size="standard" data-count="true"></div> -
DeltaPower
addikt
Valószínűleg <span>-n vagy hasonlón belül használod a <h2>-t, de az is lehet, hogy előtte valahol van lezáratlan tag-ed.
Én a helyedben nem erőltetném inline módban a <h2>-t szövegen belül, az életben nem lesz valid mert ez a tag nem erre való. Szövegrészek formázására ott a <span>, ahogy cucka is említette a #3516-ban. -
Brown ügynök
senior tag
A különbség mindössze annyi, hogy amit a <head>-be írtál, az magasabb prioritású, mint amit linkelsz. Ez azt jelenti, hogy ha van két ugyanolyan stílusdefiníció ami a headbe és a linkelt stíluslapban is megvan, akkor a head-ben rögzítettek fognak érvényesülni. Egyébként nincs sok értelme két helyre rögzíteni a meghatározásokat. Érdemes linkelni a css-t.
@3522: A valami helyére a fájlnevet kell írni.
-
cucka
addikt
Ez azért van, mert a h3 (meg a többi heading is) blokkszintű elem. Két megoldás van:
- h3 helyett használj span-t, amire css-ben megadod a megfelelő stílus definíciókat
- h3-ra css-ben állítsd be, hogy display:inline . Ezzel lehet rábírni a böngészőt, hogy sorszintűként jelenítse meg. -
Sk8erPeter
nagyúr
Attól még valid marad, hogy nem (XML+)XHTML-nek megfelelő fejléceket küld a böngésző felé a szerver - tehát teljesen tökéletes a validator szerint is a kódod, valószínűleg a felhasználó is jó kimenetet lát, ezzel tehát tényleg egyáltalán nem érdemes foglalkozni, hogy nem "valós" XML-jellegű doksit küldesz ki. Ne aggódj ezen, mert ez tényleg nem befolyásol semmit negatív irányba, sem a Google találati listáján, sem máshol nem kerülsz hátrányba emiatt.
Sőt, épp akkor lenne rosszabb a helyzet, ha bármilyen véletlen hibát elkövetnél a kódban, és fatal errorokat kapna a látogatód az XML-ellenőrzés miatt - na meg a Google keresőrobotja sem azt kapná a kódból, amit vele láttatni szeretnél.
Egy szó, mint száz: ez nem olyan dolog, amire időt érdemes szánni (sőt, kifejezetten nem érdemes), mert teljesen lényegtelen az oldalad relevanciája és minősége szempontjából. -
fordfairlane
veterán
Emlékeim szerint Xhtml 1.0-nál mindkét fejléc megfelelő. Ha xml fejléccel küldi ki a szerver, akkor a böngészők elvileg ellenőrzik azt, hogy well-formed xml vagy sem, és ha hiba van a kódban, akkor csak egy hibaüzenetet írnak ki. Az xhtml 1.1 az, amelyiknél a szabvány megköveteli az xml fejlécet, tán pont ezért nem is használja senki.
-
Sk8erPeter
nagyúr
"Akkor szerencsém van a szerverrel, mert alapból úgy volt/van beállítva, hogy a html-ben és az xhtml-ben megírtakat is küldi a böngészők felé."
Szerintem rosszul értelmezted, amit cucka írt.Mindkét esetben fog választ kapni a böngésződ a kérésre (az oldalad így is-úgy is megjelenít valamit), csak nem mindegy, milyen formában.
cucka arra célzott (majd kijavít, ha nem), hogy attól még, mert XHTML-szintakszisnak megfelelően írod meg az oldalaidat, és abban a formában kapja meg a HTML outputot a böngésző (így a validator is), még nem biztos, hogy application/xhtml+xml MIME type-pal értelmezi azt (hanem pl. text/html-ként); ahhoz, hogy mégis így tegyen, szerveroldalról olyan formában kell megkapnia a böngészőnek a fejléceket, hogy valós XML- (és XHTML-)doksiként értelmeződjön. [link]
Pl. lehet erre vonatkozó headereket küldeni PHP-vel is.Tehát attól még, hogy helyesen jelenik meg az oldalad (és jól is van ez így), nem biztos, hogy ténylegesen XML-doksiként értelmeződik a böngészőben.
cucka arra is kitért, hogy nem is biztos, hogy előnyös lenne, ha mégis így történne, mert a dokumentumban felmerült esetleges hibákat sokkal csúnyább formában kapná az arcába a felhasználó (fatal error a szintakszisban), mintha amúgy észre se venné ezeket. -
cucka
addikt
Ahhoz, hogy a "szerver application/xhtml+xml content type-al kell küldje az oldalt" a böngészők felé kell ahhoz bármit is csinálni/jelezni
Úgy kell beállítani a szervert, hogy a megfelelő content type-al küldje el.Ebből arra következtetek (lehet, hogy hibásan), hogy a szerver, a megírt kódok alapján, "automatikusan" érzékeli az oldalakat és XML-ként továbbítja azokat a böngészők felé....
Általában nem érzékel semmit automatikusan, ettől még az oldalad valid marad.Amúgy nincs semmilyen előnye annak, ha rendes xml/xhtml content-typeal küldöd a html-t a böngészőnek, inkább csak hátrányos oldalai. (Pl. ha a legapróbb hiba van a kódban, akkor normális esetben a felhasználók nem vesznek észre belőle semmit, xml-ként értelmezve viszont minden hiba fatal error és ezt a felhasználók is észreveszik
)
-
cucka
addikt
A http csomagok fejlécében található content-type deklarációról van szó.
Általában ez text/html, ami azt jelenti, hogy a böngésző html-ként fogja értelmezni, ennek legfontosabb hozadéka, hogy a hibás kód is meg fog jelenni.
Ha valóban xhtml-t akarsz használni, akkor a szerver application/xhtml+xml content type-al kell küldje az oldalt. Továbbá fontos tudni, hogy az xhtml specifikáció szerint ez esetben a <head>-ben található content-type deklaráció nem fog számítani, a szerver által küldött üti azt. Ekkor a böngésző xml-ként fogja értelmezni a dokumentumot, aminek a legszembetűnőbb eredménye, hogy ha bármilyen hiba van benne, akkor kapsz majd egy nagy xml error hibaüzenetet.Egyébként általános esetben nulla értelme van annak, hogy valódi xhtml-t használj, igazából saját magad sz*patása, előnyök nélkül.
Több okosság erről: [link]
-
sz.j
nagyúr
Hosszas keresgélés után a neten találtam egy infót, miszerint a htaccess fájl egy "síma" szöveges fájl, ezért az előzőleg talált átirányítási szöveget
(" redirect 301 /regi-oldal.html http://www.akarmi-barmi.hu/uj-oldal.html ")
txt formátumban megírtam és "önmagában" felraktam a tárhelyemre.
Azóta tökéletesen működik az átirányítás.De mivel nem értek ehhez, és nem szeretnék hibás dolgokat felrakni a tárhelyemre, ezért meg szeretném kérdezni, hogy szerintetek a fenti .htaccess fájl tartalma hibátlan-e? Maradhat-e fenn a tárhelyemen? Esetleg nem e kell valamivel kiegészíteni?
-
Sk8erPeter
nagyúr
Ennek az az oka, hogy a Firefox-kiegészítő ugyanazt csinálja, mintha Te a validator oldalán a Validate by Direct Input résznél "kézzel" (Ctrl+C -> Ctrl+V módszerrel) bemásolnád a forráskódodat a beviteli mezőbe, amire a figyelmeztetést kapod. A figyelmeztetés oka pedig az, hogy ilyenkor tulajdonképpen nincs egy konkrét dokumentumod (fájl formájában), aminek a karakterkódolása adott (pl. Notepad++-ban kapásból láthatod, hogy pl. UTF-8 vagy ANSI karakterkódolású a fájl), és ez a karakterkódolás akár lehet jó is vagy rossz is (pl. keveredés a meta tagekkel, kiadott szerveroldali headerekkel, stb.), amelyre szintén figyelmeztet a validator, valamint szerveroldalon sem adsz ki semmiféle headert, amivel tudatod a böngészővel (ami a "Validate by URI" esetén tulajdonképpen a validator saját "böngészője", user agentje), hogy milyen karakterkódolás szerint kell értelmeznie a dokumentumot.
Éppen emiatt a "Validate by Direct Input" során az ellenőrző feltételez egy adott karakterkódolást (UTF-8), és azt is eleve feltételezi, hogy ez jól van beállítva az ezt tartalmazó dokumentumban. Ez azonban nem biztos, hogy így van, tehát lehet, hogy mondjuk valaki készített egy valid kódot, de rosszul adta meg a konkrét kész dokumentuma karakterkódolását (pl. a szövegszerkesztőjében), és így összességében a böngészőben mondjuk krikszkrakszok jelenhetnek meg (vagy egyéb hiba merülhet fel emiatt).
Tulajdonképpen erre figyelmeztet, hogy attól még, hogy itt validnak értelmezi a kódot, a végterméknél még előfordulhatnak hibák.Ha azt tapasztalod, hogy az oldalad hibátlanul jelenik meg, valamint a validator szerint is hibátlan ("Validate by URI" esetén is, amennyiben nem localhoston lévő cuccot tesztelsz), akkor egy a fontos: ne foglalkozz ezzel a figyelmeztetéssel, valid kódot írtál.
-
DeltaPower
addikt
-
cucka
addikt
Rövid válasz: html a kiterjesztés és xhtml doctype.
Hosszú válasz: ez ennél bonyolultabb.A weboldalak úgy működnek, hogy a böngésző lekér egy url-t (HTTP GET), majd az url mögött figyelő szerver (szintén HTTP protokollal) visszaküld neki valamilyen file-t. A file neve, típusa meg még egy csomó minden a HTTP csomag fejlécében található. A filetípust a content-type nevű paraméter határozza meg. (Figyeled, nincs olyan, hogy file kiterjesztés, mert egyáltalán nem biztos, hogy a szerverről egy valójában létező file jön vissza)
Akkor, ha a webszerverről lekérsz egy valóban létező file-t, akkor a szerver beállításai fogják eldönteni, hogy ezt milyen content-type-al fogja elküldeni, tehát a file kiterjesztése szigorúan véve tulajdonképpen bármi lehet.
(#3377) Lacces
Például így:
<div class="elso_osztaly masodik_osztaly"> -
cucka
addikt
Miért van az, hogy az alábbi meta tagekat sem Notepad++-al sem a Kompozer progi kódjának utólagos módosításával sem tudom a kódba beírni/bemásolni?
Mit jelent az, hogy nem tudod beleírni a kódba? Megnyitod a file-t a szövegszerkesztőben, beleírod, elmented és ott lesz.
Hogy a kompozer pontosan mit csinál és bekavarhat-e, azt nem tudom. -
sz.j
nagyúr
Nem hagy nyugodni ez a xhtml téma, és inkább kevesebb mint több sikerrel, de próbálkozom ......
Most már sikerült hiba nélküli (W3C xhtml strict szerint valid) oldalt csinálni, de más problémám adódott és ennek a megszüntetésében kérném a segítségeteket.
Az oldal kódja így kezdődik:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>kiserlet</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 204);">
<table
style="border-style: none; height: 519px; width: 980px; text-align: left; margin-left: auto; margin-right: auto;"
summary="0" cellpadding="0" cellspacing="0">Miért van az, hogy az alábbi meta tagekat sem Notepad++-al sem a Kompozer progi kódjának utólagos módosításával sem tudom a kódba beírni/bemásolni?
<meta http-equiv="Content-Language" content="hu" />
<meta name="description" content="...................." />
<meta name="keywords" Content="....................." />
<meta name="robot" content="index, follow" />Mit rontok el?
-
cucka
addikt
Melyik a jobb, előnyösebb megoldás, az ha az oldalak HTML strict-ben vagy az ha XHTML Transitional-ben vannak megírva?
Teljesen mindegy, a lényeg, hogy az oldal minden böngészőben ugyanúgy jelenjen meg és működjön. Ehhez az (x)html transitional is teljesen megfelelő, fölösleges időpocsékolás azzal foglalkozni, hogy átírogasd más doctype szerint. -
Sk8erPeter
nagyúr
Hali!
Sajnos úgy tűnik, a képet azóta eltávolítottad, mert már nem látható.
Egyébként szerintem ne a <br>-rel próbálkozz, hanem a nálad már létező style tagben adj meg inkább valamelyik szükséges oldalon padding-et/margin-t.
Szóval a <br>-t szerintem is távolítsd el.Esetleg priviben elküldheted a konkrét oldal címét, hogy látható legyen a kód, ha itt nem akarod feltüntetni a címet. Bár gondolom ez ugyanazon az oldalon van, amit egyszer már küldtél, akkor majd mondd meg, azonbelül hol van.
-
cucka
addikt
Mondjuk első körben megereszthettél volna egy google keresést a hibaüzenetre és akkor már meg is tudtad volna a választ.
Röviden: ez egy figyelmeztetés, amit azért kapsz, mert style attribútumot használsz. Az elgondolás mögötte, hogy olyan esetben is tesztelni kell a honlapot, amikor a kliens nem támogatja a css stylesheet-eket, az üzenet erre figyelmeztet. A szabvány készítői néha kicsit túlbuzgóak voltak, ráadásul ez pont egy olyan dolog, ami talán a 90-es években még releváns volt, de 2011-ben nem az.
A válasz a kérdésre, hogy ilyen hülyeségekkel nem érdemes foglalkozni. -
cucka
addikt
Css stíluslappal tudod megoldani, valahogy így
test a{ color: #000099 !important; }
test a:active{ color: #000099 !important; }
test a:visited{ color: #990099 !important; }A "test" helyett nyilván a megfelelő selectort kell odaírni (egyébként is, test nevű html tag nem létezik, gondolom ezt vágod..). Az !important nem kötelező, de ha korábban már definiáltál valamilyen stílust az a tag-re, akkor Firefox-ban így fogod tudni felüldefiniálni azt.
Új hozzászólás Aktív témák
Hirdetés
- DDR5 GAMER PC: Új RYZEN 7 8700F/9700X/9800X3D +RTX 4060/5060/4070/5070 +16-64GB DDR5! GAR/SZÁMLA!
- Dell Latitude 7410 Strapabíró Ütésálló Profi Ultrabook 14" -80% i7-10610U 16/512 FHD
- Szép! HP EliteBook 850 G8 Fémházas Multimédiás Laptop 15,6" -65% i7-1185G7 32/512 Iris Xe FHD Magyar
- HP EliteBook 850 G8 Fémházas Multimédiás Laptop 15,6" -65% i7-1185G7 8/512 Iris Xe FHD Magyar
- 512 Gb-os NVME-k
- ÁRGARANCIA!Épített KomPhone Ryzen 7 5700X 16/32 RAM RTX 5060Ti 16GB GAMER PC termékbeszámítással
- ÁRGARANCIA!Épített KomPhone Ryzen 7 5700X 16/32/64GB RAM RX 7600 8GB GAMER PC termékbeszámítással
- ÁRGARANCIA!Épített KomPhone Ryzen 7 7800X3D 32/64GB RAM RTX 5070 GAMER PC termékbeszámítással
- BESZÁMÍTÁS! Microsoft XBOX Series S 512GB játékkonzol garanciával hibátlan működéssel
- Nvidia Quadro M2000/ M4000/ P2000/ P2200/ P4000/ P5000/ RTX 4000/ RTX A2000 / RTX A4000
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft
Város: Budapest
Cég: PC Trade Systems Kft.
Város: Szeged