Преклапање текста на веб страницама

Нема два начина о томе - преклапање текста је лоше. Када се текст преклапа на страници, то је збуњујуће и може учинити страницу потпуно нечитљивом. Ако посетилац не може да прочита страницу, неће остати. Ако се ваш текст преклапа, несумњиво користите елементе див за израду веб-локације. Када користите ЦСС за структурирање дивова и преклапање текста, највероватније је да користите апсолутно позиционирање заједно са фиксном ширином. Срећом, постоји више од једног начина дизајнирања распореда.

Апсолутно против релативног позиционирања

Док вам апсолутно позиционирање даје највећу контролу над местом у којем ваш елемент ДИВ-а иде, то није једина опција. Можете користити релативно позиционирање за секундарне елементе; ово помера елементе у односу на то гдје ће се појавити у нормалном току странице. На пример, див див са апсолутном позицијом која користи "врх: 5пк;" појављује се пет пиксела од врха странице; ако користите релативно позиционирање, чини се да је пет пиксела ниже него што се уклапа у нормалан ток.

Усинг Флоатс

Друга опција је употреба пловака. Плутајући див узрокује да се елемент поравна на левој или десној страни странице, док се остатак садржаја слаже око њега. Ово се обично користи за слике и текст, али плутачи се могу користити на ЦСС распоредима да би се један елемент ДИВ-а појавио на другој страни. Флоат је пожељнији од апсолутног позиционирања, јер ако је екран премален да прихвати ширину, сидебар се појављује испод садржаја. То није савршено решење, али функционише.

Флекибле Видтхс

Друга опција за креирање флексибилног распореда који не узрокује преклапање текста је да користите проценте уместо тачних ширина за ваше див елементе. Рецимо да имате два див-а - садржај див који има ширину од 900 пиксела и бочну траку која је широка 200 пиксела. Ово неће радити на екранима са резолуцијама као што су нетбоок рачунари, који обично користе резолуцију екрана од 1024 к 600 пиксела. Такође неће радити на мобилним уређајима.

Можете користити проценат уместо фиксне ширине који нуди више флексибилности. То није савршено решење: приликом подешавања ширине морате узети у обзир било који паддинг, а код великих резолуција ширина заснована на проценту може бити једнако проблематична. Једно решење је да додате правило "мак-видтх", тако да ваша страница може бити одређени проценат странице или максимална ширина пиксела.

Мултипле Стилесхеетс

Још једно решење за преклапање текста на мањим екранима је дизајнирање стилских листа за вишеструке резолуције. Ово може бити тешко и није увек лако имплементирати, али коришћењем медијских упита за позивање различитих стилских листа, изглед вашег веб сајта се аутоматски мења на основу резолуције претраживача. Веб дизајнер Цхрис Цоииер са веб сајта ЦСС Трицкс је поставио овај метод у свом посту "Различити стилски листови за различито велике прозоре прегледача", који нуди детаљно објашњење о томе како користити више стилова за различите резолуције, укључујући мобилне прегледнике (погледајте линк у Ресурси).