Engem nem igazan erdekel a reszponziv webdizajn ( legalabbis egyenlore meg nem)

Ugyanis szerintem sokkal jobb az egyszeru desktop nezet, bar lehet hogy ez csak szerintem van igy.
Nyilvan ha majd szugsegem lesz ra akkor majd utananezek.

Sk8erPeter "Ikszdé!
Látom megtetszett. " Van ez igy.

[ Szerkesztve ]

XD alias IKSZDé

Van eltérés a sok media query, vagy egy önálló mobil css berántása között? Ha igen, akkor melyik a jobb megoldás? Én eddig csak az előbbit használtam.

"ha majd szugsegem lesz ra"
Nem adom fel, addig foglak javítgatni, amíg legalább ezt az egy szót meg nem tanulod. Legalább nemcsak webfejlesztéssel próbálkozol, hanem egy kicsit a magyar nyelv tanulgatásával is, rádfér.
Tehát: szükség. Vágod? Szükség. SZÜKSÉG!!!!444NÉGYNÉGY!! K-val! KÁVAL!

Na, mindjárt jön a "nincs jobb dolgod"-duma...

Amúgy hogy ON is legyek, ez az "Engem nem igazan erdekel a reszponziv webdizajn [...] Ugyanis szerintem sokkal jobb az egyszeru desktop nezet" nem túl profi hozzáállás.
Nem tudom, neked mekkora tégla lehet a telefonod, de azért sok oldalt kényelmetlen nézni a teljes nézetben egy átlagos okostelón (ilyen 4" az már egész átlagosnak számít), pl. a PH-t is rázoomolva kell nézni a desktop-nézetben, és ide-oda scrollozgatni az oldalon.

Sk8erPeter

Nem tudom, hogy miért van erre szügség. Mindig belekötni szegénybe...

On: (#1301) honda 1993:
Az hogy egyelőre (mellesleg az sem egyenlőre, hanem egyelőre) nincs rá szükséged, nem jelenti azt hogy nem kellene megtanulni. Webes témában szerintem jó, ha mindenről van némi fogalmad.

[ Szerkesztve ]

Igazából nekem az idő során teljesen ráállt az ujjam a PH mobilon való nagyítás scrollozás stb-re.

Amúgy az miért van, hogy a böngésző összehúzásakor megy a reszponzív design meg tök jól néz ki, de mobilon iPhone 4S, pedig az eredeti nézet jelenik meg. Most ezt így kód nélküli konklúzióként vontam le eddigi "alkotásaimat" nézve.

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

Majd amikor észreveszed, hogy az oldalad minimum 20%-ban (és egyre növekvő százalékban) mobilról néznék, majd gyorsan érdekelni fog.
Sőt akkor az olcsó tabletekről még nem is beszéltünk az 1024X600-as felbontásukkal.

Én kérek elnézést!

Mondjuk ebben van valami.

És egyébként csak hogy tudjam.
Ha mégis hozzáfognék, akkor ez kb mekkora meló lenne úgy hogy 0-ról kezdeném el tanulni.

Tehát az lenne a kérdésem egy kicsit pontosítva, hogy az egész oldalam át kellene írnom, vagy valamivel egyszerűbb lenne?

XD alias IKSZDé

Szerintem egyelőre ne fogj hozzá. Egyébként optimális esetben jóformán csak a CSS-t kell átírni, tehát nem nagy meló.

but without you, my life is incomplete, my days are absolutely gray

Jólvan, már annyiszor mondtad hogy nem jól írom ezt a bizonyos szót hogy már megjegyeztem.

Szóval mostmár nincs szügségem arra hogy kijavíts.

Nyugi csak vicc volt ha esetleg nem esett volna le.

DNReNTI : Miért emelted ki azt hogy optimális esetben?
Esetleg előfordulhat hogy a HTML kód is bekavar?

[ Szerkesztve ]

XD alias IKSZDé

"Esetleg előfordulhat hogy a HTML kód is bekavar?"
Naná. Optimális eset alatt azt értem, hogy a HTML a modern szabványoknak megfelelő, letisztult, olvasmányos ésszerűen felépített kód, nem pedig egy toldott-foldott, valami 8 éves editorral összekattintgatott táblázatos layout, tele inline formázással.

but without you, my life is incomplete, my days are absolutely gray

Optimális esetben már alapból úgy építed fel az oldal HTML kódját, hogy ne okozzon gondot az esetleges mobil CSS hozzá adása. Amúgy nem olyan elvetemülten nehéz szerintem, csak pepecselős meló. Nézz utána a media queryknek. Ezzel a módszerrel több felbontásnak megfelelő CSS-t is tudsz készíteni.

Na igen, csakhogy ez nekem eszembe sem jutott.

Azért remélem hogy ettől függetlenül még kivitelezhető lesz.

XD alias IKSZDé

Sziasztok! Van egy #wrapper id-val ellátott div rész a honlapon, a header fölött. Ezen található bal oldalt egy logó, mellette egy szöveg, és jobb oldal vízszintesen a menüsor. Így néz ki htmlben:

<div id="wrapper">
<div id="wrapperLogo">
<img src="img/lion.jpg" width="150" height="100" alt=""/> </div>
<h2> Lion Tour </h2>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Tour</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>

és vizuálisan pedig így: [link]

Hogyan tudnám a logó mellette szöveget a logó mellé középre hozni? Próbáltam paddinggelni h2-re, viszont akkor a menübart is viszi lefelé. Hogyan oldhatnám meg, hogy csak a szöveg mozogjon a megfelelő helyre?

Előre is köszönöm a segítségeteket!

Egymás mellé kell úsztatni őket: [link]

"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán

"<div id="clear"></div>"
Wat?

Egy: nincs definiálva a CSS-ben, kettő: mér' id? A clearfix legyen már osztály, ha már ebben a formában használjuk. Meg amúgy is: ne az img tag kapjon már globális float-ot, főleg, hogy még konténer is van neki. És végül: az egész elintézhető ennyivel: display: inline-block;

but without you, my life is incomplete, my days are absolutely gray

Köszönöm, így már jó!

Az miért van, hogy html-ben megírom menüfunkcióként a listámat, style formázás után mégis fordítva jeleníti meg a benne található elemeket. Gondolok itt arra pl, hogy a "Home" menü lenne az első, de valamiért azt teszi legutoljára, és a "Contact" fület pedig az első helyre.

Valamint még egy "technikai észrevétel". A DW CC-ben az élő nézetben valamikor teljesen más mutat a honlap megjelenítésnek, mint amit chrome vagy mozillában látok. Ezért is már csak mentést követően ezekbe a böngészőkbe nézem az oldal megjelenését. A "Live-nézet" DW-ben egyszerűen rossz lenne?

[ Szerkesztve ]

Floatoltatod a lista elemeit?

A példádban a 'Home' pont az utolsó, így hát ott is jelenik meg. Vagy én nem értem?

but without you, my life is incomplete, my days are absolutely gray

Átírtam utolsó helyre, mert vizuálisan meg úgy lesz az első.

Zedz: Igen, jobbra.

[ Szerkesztve ]

Ne a lista elemeket floatoltasd, hanem magát az egész listát. Ha az elemeket floatoltatod jobbra, akkor az első elemtől kezdve a végééig - mint látod - jobbra "rendezi" őket.

Jaaa, lol.

Float helyett:
A li tag-ek legyenek display: inline;
A bennük lévő a tag pedig: display: block;

Így nem kell floatot és clearfixet használni, ráadásul szépen középre is lehet rendezni a csapatot, mivel a lista elemek inline lesznek.

but without you, my life is incomplete, my days are absolutely gray

A kérdés teljesen jogos, mivel a nav tag-nek nem kötelező listát tartalmaznia, tehát tökéletesen jó megoldás lenne az is ha így használnánk:
<nav>
<a href="#">Menü 1</a>
<a href="#">Menü 2</a>
...
</nav>

Magam részéről én még csak nem is gondolkoztam ezen. Szvsz elsőrorban beidegződés, mint a float, használja mindenki ha kell ha nem. A menü végül is egy lista, ráadásul (szintén szvsz) olvasmányosabb is listaként a kód. De ha mondjuk többszintű menük készítesz, akkor a fenti példa már elvérzik, be kell vezetni új osztályokat, akkor meg már minek vezetnéd be ha ott a jó öreg lista. Plusz: lehet vele ügyeskedni, ahogy a korábbi példámban írtam. Igaz, egy sima menü esetében eleve elkerülhető ez az ügyeskedés ha a fenti példát használod.

but without you, my life is incomplete, my days are absolutely gray

A tartalmi résznél kép a két hasáb között valamiért nem teszi fehérré a lapot, gondolom a body osztály színbeállításait nézi. Itt a kód a content részhez:

<div class="content" id="leftContent">
<h4> Tour in Africa </h4>
<img src="img/leftSideImg.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
<div class="content" id="rightContent">
<h4>Lion Safari</h4>
<img src="img/africa-animal-cat-1066.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

Itt a hozzá tartozó CSS:

.content {
background-color:#FFF;
}

#leftContent {
float:left;
text-indent:25px;
text-align:justify;
font-size:15px;
width:48%;
border-left:solid 1px #A6A6A6;
}


#leftContent img {
float:left;
padding-right:5px;
padding-left:5px;

}

#rightContent {
float:right;
text-indent:25px;
font-size:15px;
text-align:justify;
width:48%;
border-right:solid 1px #A6A6A6;
}

#rightContent img {
float:right;
padding-right:5px;
padding-left:5px;

}

.content h4 {
color: #ec8000;
text-weight:bold;
text-align:center;
}

Ha egyszerűen a content részt teszem fehérré, akkor se teszi egyszerre a left és a right side-ot fehérré, mindig közte marad a kis rés, ami a body osztály színbeállításait nézi. Hogyan tudnám a két sideot egységesen fehér háttérrel ellátni?

[ Szerkesztve ]

"Hogyan tudnám a két sideot egységesen fehér háttérrel ellátni?"
Igazából már elláttad. Mind a kettő tökéletesen fehér, de mivel 48% szélesek, így 4% az oldalszélességből "kimarad" és ott az alatta lévő objektum látszik. Ez most valszeg a body, ahogy te is gondoltad. Megoldás az lehet, ha ezeket belehelyezed egy 100% széles fehér hátterű konténerbe.

but without you, my life is incomplete, my days are absolutely gray

<div id="side1">
<div class="content" id="leftContent">
<h4> Tour in Africa </h4>
<img src="img/leftSideImg.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
<div class="content" id="rightContent">
<h4>Lion Safari</h4>
<img src="img/africa-animal-cat-1066.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>

Csináltam egy side1 divet, ami felöleli a tartalmakat, és ezt a side1 ID-s divnek css-ben megadtam a width:100%-os értéket és fehér szint, viszont továbbra is közte van az a pici szürke rés.

[ Szerkesztve ]

Látom, most mindenki jó kedvében van és nem szólnak érte, de nem lehetne inkább egy jsfiddle linkkel ellátni a posztokat ahelyett, hogy leírod hogy mit csináltál CSS-ben, meg hogy is néz jelenleg ki?

"Amúgy miért listával csináljátok a menüket a nav tagen belül? Akkor nem kell ilyenekkel szórakozni, a böngésző is tudja már, hogy ez bizony egy menü. "
Az <a> tag - gondolom erre az alternatív megoldásra gondoltál, hogy csak ezeket használod list-itemek helyett - egy inline (szövegközi) tag, tehát alapértelmezetten csak olyan stílusok érvényesek rá, mint a többi inline-szintűre... hiába adsz meg neki mondjuk 300px szélességet, ha az csak az általa kitöltött helyet "foglalja" (pl. 100px-nyit). Egy menü elemeinek meghatározásához pedig a legtöbbször valamilyen - legalább minimális - szélességet meg szeretnél határozni.
Ezért tehát blokkszintű elemekre van szükséged. Például ilyen az unordered vagy ordered list (<ul>, <ol>). A menüelemek egyenként pedig szemantikailag pont megfelelnek egy lista egy-egy elemének (hiszen a menüpontok felsorolása is egy lista), ezért értelemszerűen az a jó, ha azt a taget használod a definiálásukra, amivel éppen listaelemeket határozol meg (<li>).
Lehetnek alternatív megoldások, de ez a logikus.
Nyilván nem véletlen, hogy a népszerű template-ek, front-end keretrendszerek, mint pl. a Bootstrap is a <nav>-on belüli <ul>-t használják menükészítésre.

(#1328) Zedz:
"Először még listáztam én is, de nav óta már nem használom"
Akkor szokj vissza a használatára.

(#1325) DNReNTi:
Nem csak "beidegződés", hanem van logika a használatában, lásd fentebb.

[ Szerkesztve ]

Sk8erPeter

Logikus az tény, de ha valaki ragaszkodik a listless megoldáshoz, lehet inline-block az a tag, akkor pedig megkapja a blokkelemek áldásos tulajdonságait, így például, hogy lehet adott szélessége. Így akkor megint felesleges a lista. Mondom ezt elkötelezett lista-menü felhasználóként.

Szerk:
(#1331) Sspot
Már akartam szólni, mert untam bemásolgatni.

Ennek folyományaképp:
(#1330) adam_
JsFiddle?

Szerk:
Na jó nem b*ziskodok, de legközelebb tényleg használd a fiddle-t. Csak tippelni tudok, mivel a tartalmi div-ek floatolva vannak, és nincs clearfix, így az az eredmény, az egészet magába ölelő konténer (#side1) 0px magas, tehát mintha egy üres div lenne.

[ Szerkesztve ]

but without you, my life is incomplete, my days are absolutely gray

Köszönöm a terjedelmes választ, így már látom a logikát a lista mögött. De ha már felvetődött a téma akkor szeretném kicsit boncolgatni, csak hogy minden világos legyen. Írtad, hogy szükségünk van block szintű elemekre, például a teljes menü szélességének megadásakor. Ezért az ul, ol teljesen megfelel számunkra. De a nav is block szintű elem, annak is lehet szélességet adni, és pl nav#menu a -ként bármit rá lehet húzni magára az a elemre is. Vagy így az egészet rosszul gondolom?

Szerintem meg ez erőltetett, mert így inline elemet átvariálsz inline-block-ká, minek, ha van rá megfelelő elem, meg ha így logikus (plusz a normálisan strukturált felépítést szerintem a keresőrobotok is értékelik, bár szerencsére sosem kellett mélyen tanulmányoznom a SEO-irományokat). Mindegy, mindenki úgy csinálja, ahogy akarja.

Sk8erPeter

Ha blokkszintűvé varázsolod az <a> taget, akkor annak is adhatsz blokkszintű stílusformázást, csak mondom, szerintem ez kicsit erőltetett megoldás, valaminek "álcázni" egy elemet. Persze nyilván van, amikor az alapértelmezett stílust pont, hogy felül kell bírálni, bizonyos elemeket floatolni vagy inline-ná tenni, épp azért, hogy a megfelelő módon jelenjenek meg, ne az alapértelmezett módon (mint ahogy pont a listaelemeket is egymás mellé kell úsztatnod floattal), de ebben az esetben szerintem jobb eleve a jó megközelítést alkalmazni.
De hát ízlések és pofonok különböznek.

Sk8erPeter

[link] Sry, nem ismertem ezt az oldalt. Sajnos továbbra sem jó.

Én értem, de ettől még szerintem a megoldás - annak ellenére, hogy én se így használom - nem rossz, annak ellenére sem, hogy egy inline elemet váltok inline-block-ká. Ha fordítva nézzük, akkor meg egy block elemből (li) csinálok inline-t. Na mindegy, folytathatnánk szerintem ezt reggelig, igazad van: mindenki úgy csinálja, ahogy akarja.

Szerk:
Na jó még egy dolgot csak hozzáteszek:
Egy sima egy szintű menünél ráadásul mind a HTML mind a CSS kód rövidebb.

[ Szerkesztve ]

but without you, my life is incomplete, my days are absolutely gray

Csekkold most. Két hiba is volt. Egyet írtam korábban is igaz nem neked, definiálatlan a clearfix, a másik, hogy a clearfix-et ebben a formában a konténeren belülre, a floatolt elemek után közvetlenül kell betenni.

but without you, my life is incomplete, my days are absolutely gray

Nem az <a> tagre gondoltam, hanem a <nav>-ra. Írtad, hogy például menü szélesség megadásához kellett <ol>, <ul>, de mivel a <nav> is block szintű, ezért nem értem, hogy miért tartsam meg a listát. Mert ha a szokásos menü design-t szeretném elérni - tehát az egymás mellett lévő menüpontok -, akkor több dolgom van a lista gatyába rázásába, mintha csak simán adnék egy paddinget a <nav> <a> elemeire. Például itt.

Itt a magyarázat, hogy értette Brian.

but without you, my life is incomplete, my days are absolutely gray

Köszönöm szépen! Bár ez a clearfix nekem még nem teljesen tiszta, de remélem idővel ráérzek, hogy mikor kell alkalmazni.

Óóó értem, valamiért az egész menüre gondoltam a szélességet! De ha lehetek szőrszálhasogató, akkor így még mindig kevesebb. Szóval nagyjából tényleg mindegy hogyan csinálja az ember.

[ Szerkesztve ]

Furcsa állatfaj, az első néhány alkalommal, az tuti. Ezért is jobb csak ott float-ot használni, ahol muszáj. Itt nem lenne muszáj. Szintén szóba került ma már párszor a display: inline-block; használata. Esetedben is megspórolt volna némi kínlódást.

Szerk:
(#1343) Zedz
Éppen ezt írtam itt.

[ Szerkesztve ]

but without you, my life is incomplete, my days are absolutely gray

Valamint még egy "technikai észrevétel". A DW CC-ben az élő nézetben valamikor teljesen más mutat (pl header szélességnek) a honlap megjelenítésnek, mint amit chrome vagy mozillában látok. Ezért is már csak mentést követően ezekbe a böngészőkbe nézem az oldal megjelenését. A "Live-nézet" DW-ben egyszerűen néha bugos lenne?

[ Szerkesztve ]

Nem használok DW-t, de így elsőre valami olyasmit tippelnék, hogy szimplán máshogy alapján építi fel a weboldalt. Ez tetten érhető a böngészők között is, tehát például megadsz XY értéket egy elemnek, az mondjuk Chromeban tökéletesen fog kinézni, Explorerben pedig már szét van csúszva az egész. Más motor, máshogy épít.

[ Szerkesztve ]

Igazából Zedz mondta ki a kulcsszót, valószínű, hogy arról van szó, hogy böngészőmotorbeli eltérések vannak - az 5.5-nél már WebKitet használtak, de lehet, hogy nem követték már a Blink-vonalra való átállást... bár az általad írt drasztikus változások tényleg furcsák, ennyire azért nem kéne durvának lennie az eltérésnek, hogy még a szélességek sem stimmelnek. Sajnos pont emiatt nem alkalmas ez az eszköz sem arra, hogy a komplett frontendet ebben tervezd meg. (Ne kérdezd, mi alkalmas rá, nem tudok ilyenről a kézi bűvészkedésen, mindenféle böngészőben való tesztelésen kívül.)

Sk8erPeter

"azért nem kéne durvának lennie az eltérésnek, hogy még a szélességek sem stimmelnek"
Tudom sarkos, de simán lehet ha box-sizing fix-et használ, és azt a Dw figyelmen kívül hagyja, így mondjuk az 500 px szélességhez a live view hozzáadja a paddingot, a böngészők meg nem. Így el tudom képzelni, más esetben elég para. Egyébként meg egyetértek.

Szerk: elírás

[ Szerkesztve ]

but without you, my life is incomplete, my days are absolutely gray

Egy Youtube videót szeretnék beágyazni az oldalalom, JSFiddle szépen meg is jeleníti a kódot, de ha élesbe beszúrom a honlap kódjába, akkor ott nem hoz be semmit, csak egy üres részt, "szürke színnel, ami a háttér színe". Próbáltam esetleg clear beszúrással is, de úgy sem jó. Itt a kódrészlet: [link] Hozzáteszi még, hogy" a fájlt, vagy könyvtárt nem sikerült megtalálni" egy kis ablakban az éles nézetben.

A régi hosszú "object" kódos youtube beágyazással sem jó.

[ Szerkesztve ]