Как да направим припокриващи се CSS DIV Панели
Когато се използва самостоятелно, HTML маркер няма да промени външния вид или функционалността на съдържащото се в него съдържание. Докато и освен ако маркерът не е дал някакви CSS стилове, всичко, което ще направи, е да действа като разделител на съдържанието във вашия код. Ако фирменият ви уебсайт има панели от двете страни, които искате да се отварят и леко се припокриват, можете да направите това, като зададете атрибут за позициониране на CSS за всеки маркер.
1.
Отворете уеб страницата си в HTML редактор, като Dreamweaver, Notepad ++ или UltraEdit. Превъртете надолу кода до секцията със съдържание (страничния панел), която искате да съдържате в DIV. В началото на раздела вмъкнете маркер. Въведете маркер, за да го затворите, и повторете за други раздели на съдържанието.
2.
Отворете CSS стила на уеб страницата си, или ако има вграден стилов лист, превъртете до върха на страницата, където се намира стиловият лист, щракнете, за да преместите курсора там и след това натиснете "Enter" няколко пъти, за да вмъкнете няколко прекъсвания на редовете.
3.
Въведете CSS кода по-долу в реда. Всички DIV, които използвате за форматиране "style1", ще бъдат намалени с 10 пиксела. Всички DIV, които използвате за форматиране "style2", ще бъдат увеличени до 10 пиксела. С тази комбинация от различни стилове вашите панели ще се припокриват. Обърнете внимание, че можете да промените стойностите в кода (понастоящем 10px), ако искате да се припокриват по-малко или повече.
div.style1 {position: relative; отгоре: 10px; } div.style2 {position: relative; отгоре: -10px; }
4.
Превъртете обратно до DIV маркерите, които сте поставили в началото, и поставете един от двата HTML кода по-долу във всеки маркер:
class = "style1" клас
Окончателните DIV маркери трябва да изглеждат по следния начин:
DIV 1 съдържание DIV 2 съдържание5.
Експериментирайте с различни стойности на CSS (напр. "20px" вместо "10px") и превключете DIV между класовете style1 и style2, докато не достигнете до най-доброто, което харесвате. Запазете промените си и ги прехвърлете отново на сървъра на уебсайта на фирмата си, за да приложите промените.