Weboldalamon összecsúsznak a dolgok egymásra. Hogy lehet megjavítani?
Még elég kezdő vagyok. Ez azért van, mert nem responsive a weboldalam?
Ha csak fél képernyőn van megnyitva a weboldal, minden összecsúszik.
Ha teljes méretben meg van nyitva az oldal, akkor minden oké. Amikor tegyük fel úgy használom a gépet, hogy a képernyő jobb oldalán a weboldalam van megnyitva, a másik oldalon meg valami más, akkor összefolynak a dolgok a weboldalamon. Például két táblázat teljesen egymásra folyik így, illetve a háttérkép is összemegy és marad a fehér kép a többi részen.
Valaki tudja a megoldást?
Próbáltam a meta name="viewport" stb-t, de nem észleltem változást, ráadásul kicsit átrendezte a footer-t meg a social media linkeket szóval azzal nem is foglalkoztam.
Az benne a hiba, hogy nem responsive, azaz nem mobile friendly. Ha kisebb kijelzőn nézem az oldalt, akkor minden össze-vissza van, rájöttem egy kis olvasgatás után.
Valaki eltudná magyarázni "fapados" nyelven, hogy hogyan kell csinálni, hogy ah oldal responsive legyen? (Amit fent a kérdésben is írtam.)
Ahogyan láttam egy tutorialban, 2 oszlopra lett osztva az egész weboldal, tegyük fel left column és right column-ra. (Ez a nevük.)
A content ami az oldal bal oldalára esik, az megy a left nevűbe, ami az oldal jobb oldalára esik, az megy a right column nevű @media szekció alá.
És ha kisebb a kép mint például egy telefonon, akkor a column a-t mutatja elsőnek, és alá teszi a column b-ben lévő dolgokat, szövegeket, képeket.
Csak elég nehéz így tapasztalatlanul belegondolni, hogy hogy is kezdjek neki. Ráadásul wide space-ben gondolkozok, és nem tudom, hogy működik-e vagy érdemes-e 3 oszlopra osztanom az oldalt. Majd még reggel utánanézek.
Aki erre téved és érti miben akadtam el, kérem segítsen ki egy kis elmélettel, hogy jól képzelem-e el ezt az egészet:)
Tedd ki a kódot pastebin-re vagy hasonló kódmegosztóra, mert anélkül nem fogunk tudni segíteni.
Mellesleg javaslom használj Bootstrap-et, ha responsive oldalt akarsz.
"működik-e vagy érdemes-e 3 oszlopra osztanom az oldalt"
Szerintem nem érdemes, mert két oszloppal még elbánsz, de hárommal már nehéz mit kezdeni kisebb felbontásokon. Egymás alá pakolhatod őket, de melyik információ lesz a legkevésbé fontos?
#4 Vagyis amit leírtam, az helyes? Így kell reszponszivvá tenni? (Két oszlopra osztani az oldalt, és oda rakosgatni a dolgokat)
Nekem egy igen vagy nem is elég válaszként, már azzal is megspóroltam magamnak 1-2 óra babrálgatást.
300px körüli szélességű mobilnézetben nincs helye két oszlopnak sem, csak egy fő tartalomnak. A nagyobb felbontású nézetekben megjelenő további oszlopokat tehát el kell helyezned a fő tartalom alá, vagy egyéb módon megjeleníteni elérhető helyen.
Esetleg elrejteni, de ez nem ajánlott, meg sok értelme sincs - ha egyszer egy egész oszlopot kitöltöttél tartalommal, az annyira felesleges nem lehet.
Technikailag megoldható akárhány oszloppal, de usability (a weboldal használhatósága) szempontokat figyelembe véve szerintem nem jó ötlet reszponzív oldalt kettőnél több oszloposra tervezni.
Két oszlopot kezdtem el használni.
Viszont a navigációs sávon még kéne javítanom, de sajnos nekem nem működnek azok a módszerek amik w3schools-on vagy tutorial videókban vannak..
Valamint a footer is össze-vissza van. A szöveg (copyright) és a social media ikonok/linkek is elcsúsznak a helyükről. Ezt mivel szokták megoldani?
(Feltölteni nem szeretném magát a kódot, mert a tanárunk végig futtatja az egészet plagiarism check-en, és ha minden sor ugyanúgy következik a másik után, akkor a saját kódomat hiheti plágiumnak..)
De egyelőre jól megy a "vakon tanításotok", mert eddig sikerült megoldani a segítségekkel:)
Már csak a nav bar és a footer-t kell megcsinálnom.
Egyébként jól értelmezem, hogy akkor minden content-et, akár képeket, szöveget vagy saját táblázataimat a left-column és a right-column szekciók közé kell betennem, igaz? (Mert az eleve készen lévő táblázatom mondjuk elég furán jelent meg, de még csak teszteltem úgyis.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!