Responsive design - външен div?


2

 Здравейте.

От доста време си опитвам да се обясня защо рани неща се чупят при свиване на прозореца.

 Вчера случайно открих ефективно решение на проблема- като обвия всичко във външен div с фиксиран width. Но предполагам, че това разваля семантиката.

Има ли начин този ефект да се постигне по по-културен начин?

Ето две мои работи, реализирани по този начин. Забележете какво ще се случи, ако се премахне div с id="holder"

http://jsfiddle.net/vonko1988/paN7T/1/

http://http://jsfiddle.net/vonko1988/ABG3h/

Има ли го това нещо обяснено в някои от следващите курсове?




Отговори



1
И аз се мъчих да направя страница, която има ляв и десен aside с фиксирана ширина и някакъв текст в средата между тях, който да заема цялата останала ширина на екрана независимо от разделителната способност на дисплея и респективно широчината на прозореца на браузъра. Обаче нещо не ми се получава. Та... ще хвърлям поглед на съветите дет ще дадат колегите.

от JulianG (5316 точки)


5

Здравей,

точно това е начина, да обвиваме съдържанието в друг елемент, а не да оставяме всичко в body. Това беше го споменал и Дончо в една от лекциите, също така по наблюдения върху други сайтове явно това е правилният начин да се прави (пр.: GitHub, Telerik AcademyPluralSight, Facebook, Mozilla).

Можеш да прочетеш повече информация за този Wrapper, как и за какво се ползва и каква му е целта:

Tip: What is a Wrapper Div?

How to Use a Wrapper Div

Why do most developers put <div id = "wrapper"> firstly?

и на много други места.

Поздрави!


от martin.nikolov (4535 точки)


3
Здравей,
ако искаш да правиш responsive design начинът е с media query. Използва се със css3. Идеята е, че има селектори за device-a, който използваш или за широчината на екрана. И така под 800 пиксела екран можеш да кажеш на кои елементи да се скриват или кои да отиват отдолу. При 500 друго и така нататък.
Ето тук можеш да прочетеш за media queries : http://webdesignerwall.com/tutorials/css3-media-queries
И тук : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Ако все пак не разбираш нещо, питай :) Аз от 2 дена седя до 5:30 сутринта да правя един responsive сайт, така че вече ги разбирам :)
А по въпроса на juliang. Начинът, по който аз бих го направил е като направя един div, използвайки го като контейнер. Вътре правя 3 дива и трите със display:inline-block и на стария div (контейнера) казваш width:100% също можеш да го кажеш и на body-то. След това на 3-те вътрешни дива,от които първия ти е първия aside, втория ти е contenta на страницата, а третият ти е вторият aside. Та на тези 3 дива им казваш width:30% примерно и margin left и right : 5% на контейнер diva. Така би трябвало да изглейда хубаво. И оттам нататък ще си го доизкусоряваш.
Надявам съм да съм помогнал :)

от tddhome (3086 точки)


0

Външния див не разваля семантиката. Да се ползва е практика от години.Може да не е див, а някакъв друг елемент. Не знам, какво имаш предвид с "чупи". При responsive design се ползват media queries :

https://www.google.bg/search?q=what+is+media+queries&rlz=1C1CHMO_bgBG508BG508&oq=what+is+media+q&aqs=chrome.1.69i57j0l5.6532j0j7&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8

(драгваш прозореца, намаляш го и като се счупи нещо го фиксвашс media query), той може, но може и да не включва в себе си - fluid, fixed design. 

Като му сложиш парент с фиксиран размер, това вече не е fluid, elastic design, а фиксиран. Например, 50% от 960 пиксела са си толкова каквото и да правиш. 

Фиксирания дизайн е с фиксирана мерна единица (пиксели), а fluid/elastic с проценти.




0
Първо потърси в нета за: Fluid , Fixed and Responsive. Responsive обединява и двете концепции като цяло.

от Tankata (174 точки)