шапка сайта

Как разделить страницу на три вертикальных раздела?

Я хочу преобразовать свою веб-страницу в четыре раздела: один горизонтальный и три вертикальных. Горизонтальная секция — это нормально, но есть две проблемы с вертикальными секциями:

1. Они не заполняют всю высоту экрана.
2. Третий раздел перекрывается со вторым почти на 10 или 20 пикселей.

body < width: available; height: available; >.container < width: available; height: available; >.leftpane < width: 25%; min-width: 350px; height: available; min-height: 400px; float: left; background-color: rosybrown; border-collapse: collapse; >.middlepane < width: 50%; min-width: 800px; height: available; min-height: 650px; float: left; background-color: royalblue; border-collapse: collapse; >.rightpane < width: available; height: available; position: relative; margin-left: 75%; background-color: yellow; border-collapse: collapse; >.toppane

 
Test Page
 
Test Page
 
Test Page
 
Test Page
 
 

И я хочу, чтобы это было так:

4 ответа

Во-первых, width: available не является допустимым свойством. если вы хотите использовать все доступное пространство, вы должны установить width: 100% . в любом случае, для решения вашей проблемы вы должны использовать height: 100% также для body и html . см. этот пример:

body, html < width: 100%; height: 100%; margin: 0; >.container < width: 100%; height: 100%; >.leftpane < width: 25%; height: 100%; float: left; background-color: rosybrown; border-collapse: collapse; >.middlepane < width: 50%; height: 100%; float: left; background-color: royalblue; border-collapse: collapse; >.rightpane < width: 25%; height: 100%; position: relative; float: right; background-color: yellow; border-collapse: collapse; >.toppane

 
Test Page
 
Test Page
 
Test Page
 
Test Page
 

1. Я удалил все min-width и min-height , которые вам в данном случае не нужны.

2. используйте height: 100% для своих элементов, также вы должны установить это в тегах body и html .

3. левая панель должна быть float: left с width: 25% , правая панель float: right width: 25% и средняя панель float: left или > с width: 50%

Проверьте здесь. Вы получите простейший код для разделения экрана на три столбца.

  
Hi
 
 
Aditya
 
 
This is Working!
 
  

body < width: 100%; float: left; >.class1, .class2, .class3 < width: 33.33%; float: left; height: 100px; >p

Источник

Html разделить страницу вертикально

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

Всем привет!
Продолжаем усердное изучение основ HTML. Я рад, что вы не бросаете уроки основ HTML.

В этом уроке мы разберем, что такое фреймы и как они создаются в HTML.
Итак, давайте определимся, что такое фреймы в HTML.
Фреймы – это разделение окна браузера на отдельные области, в которых могут загружаться отдельные HTML документы.

Я думаю, вы поняли, что благодаря фреймам, вы можете просмотреть сразу несколько веб страниц в одном окне браузера.

Для примера, чтобы понять, как работает фрейм на практике, предлагаю посмотреть пример. Сделайте там пару переходов:

Ну, как вам? Хотите научиться такое создавать? Сейчас мы научимся вставлять фреймы в html-документ.

Создание фрейма на веб странице осуществляется по такому макету:

Внимание: макет фрейм-кода вставляется в html-документ вместо тега :

○ тег frameset

Это главный контейнер для создания фрейма, внутри которого содержатся другие элементы.
Закрывающий тег обязательный.

*Атрибуты тега frameset:

rows — горизонтально

cols — вертикально

В атрибутах cols и rows указывается, на сколько частей делить окно браузера. Вот, например, чтобы разделить окно браузера на две вертикальные части, нужно прописать вот так:

Левая часть экрана будет размером 30%, а правая – 70%.

Если хотите разделить браузер еще на несколько частей, допишите через запятую дополнительные размеры, вот, например, так:

В итоге первая вертикальная колонка будет шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.

Так же и с горизонтальной разбивкой:

Первая горизонтальная колонка будет шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.

Тег frame указывает, какой html-документ должен быть загружен в окно браузера.
Вот, например, нам нужно загрузить в одном окне браузера три разных страницы « 1.html », « 2.html », « 3.html ». Тег frame будет выглядеть вот так:

Подытожим знания по фреймам. Итак, задача: нужно разделить окно браузера на две части и загрузить в эти части две веб страницы – « 1.html » на 30% , « 2.html » на 70% .
Вот готовый код:

* Атрибуты тега frame

• src – адрес веб страницы. src=»http://stepkinblog.ru/html/kak-sozdat-frejmy-v-html-osnovy-html-dlya-nachinayushhix-urok-16.html/1.html» ;
• marginwidth – отступ внутри фрейма по ширине. Пример: marginwidth=»10″ ;
• marginhight – отступ внутри фрейма по высоте. Пример: marginhight =»10″ ;
• scrolling – прокрутка фрейма через скролл.
  — yes – скролл будет присутствовать во фрейме. Пример: scrolling =»yes» ;
  — no – скролл не будет присутствовать во фрейме. Пример: scrolling =»no» ;
  — auto – скролл будет присутствовать во фрейме при необходимости. Пример: scrolling =»auto» ;
• noresize – запрещает двигать границы фрейма.
• name – имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: name =»stepkinblog-ru» ;

○ Ссылки во фреймах или учимся пользоваться атрибутом «name»

Если фрейму не прописать имя в атрибуте «name», то при нажатии по ссылке откроется новый фрейм в том окне, где была ссылка:

А вот пример, если прописать атрибут «name»:

Правда, так лучше?
Для любого фрейма пропишите атрибут «name» там, где вы хотите, чтобы открывались в нем другие html-документы

Имя в атрибуте «name» может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame» , то помните, что каждое должно быть уникальным:

Теперь нужно к ссылке прописать «цель», то есть, в каком окне фрейма должен осуществиться переход. Для этого в теге «a» пропишите атрибут «target» :

« Страница 1 », « Страница 2 » будут открываться в одном окне там, где вы указали имя фрейму « name color: #ff0000;»>stepkinblog-ru » » и « Страница 3 » откроется в другом фрейме, где было название « name color: #ff0000;»>bloggood-ru » »

Со ссылками разобрались. Переходим к практике.

Задание: Нужно создать фреймы вот по такому макету:

Вначале создадим три горизонтальных фрейма:

Теперь добавим «top.html» и «footer.html»

Результат пока что будет вот таким:

Теперь между «top.html» и «footer.html» добавим «menu.html» и «content.html» :

Сохраните файл, как «index.html»

Создайте странички «top.html » , «footer.html» , «menu.html» и «content.html» :

    
StepkinBLOG.ru
   

    StepkinBlog.com © 2015  

    
Главная страница
 Содержимое сайта - "Главная страница (content.html)"  

      
Об авторе
 Содержимое сайта - " Об авторе (autor.html)"  

Вот такой результат у меня вышел:

Воспользуемся атрибутами «frame» и запретим вручную растягивание фреймов и уберем скролл в файле «index.html» .

○ что делать если фреймы не поддерживаются браузером?

Можно вывести сообщение пользователю, что его браузер не поддерживает фреймы. Для этого вставьте тег вовнутрь конструкции :

УПС! Ваш браузер не поддерживает фреймы.

○ Плавающий фрейм

Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»

* атрибуты тега «iframe»

• src — путь к открываемой странице
• width — ширина плавающего фрейма
• height — высота плавающего фрейма
• scrolling — полоса прокрутки
  — no — никогда не показывать полосу прокрутки
  — yes — всегда показывать
  — auto — показывать при необходимости
• align — выравнивание плавающего фрейма
  — left – слева
  — right – справа
  — top – выше
  — bottom – ниже
• frameborder — рамка вокруг плавающего фрейма
  — 1 — включить рамку
  — 0 — выключить рамку

Вот так будет выглядеть тег «iframe» с атрибутами:

Если браузер не поддерживает фреймы, можно вставить текст « УПС! Ваш браузер не поддерживает фреймы. » между тегами .
Это будет выглядеть вот так:

Для примера давайте добавим к файлу «content.html» плавающий фрейм:

    
Главная страница
 Содержимое сайта - "Главная страница (content.html)"    

Источник

Как мне разделить страницу на три вертикальных раздела?

Я хочу преобразовать мою веб-страницу в четыре раздела, один горизонтальный и три вертикальных. Горизонтальная секция в порядке, но есть две проблемы с вертикальными секциями:

1. Они не заполняют всю высоту экрана.
2. Третий раздел перекрывается со вторым разделом почти на 10 или 20 пикселей.

body < width: available; height: available; >.container < width: available; height: available; >.leftpane < width: 25%; min-width: 350px; height: available; min-height: 400px; float: left; background-color: rosybrown; border-collapse: collapse; >.middlepane < width: 50%; min-width: 800px; height: available; min-height: 650px; float: left; background-color: royalblue; border-collapse: collapse; >.rightpane < width: available; height: available; position: relative; margin-left: 75%; background-color: yellow; border-collapse: collapse; >.toppane

 
Test Page
 
Test Page
 
Test Page
 
Test Page
 
 

И я хочу, чтобы это было так:

4 ответа

Первый, width: available не является действительным свойством. если вы хотите использовать все доступное пространство, вы должны установить width: 100% , в любом случае, для решения вашей проблемы вы должны использовать height: 100% также для body а также html , посмотрите этот пример:

body, html < width: 100%; height: 100%; margin: 0; >.container < width: 100%; height: 100%; >.leftpane < width: 25%; height: 100%; float: left; background-color: rosybrown; border-collapse: collapse; >.middlepane < width: 50%; height: 100%; float: left; background-color: royalblue; border-collapse: collapse; >.rightpane < width: 25%; height: 100%; position: relative; float: right; background-color: yellow; border-collapse: collapse; >.toppane

 
Test Page
 
Test Page
 
Test Page
 
Test Page
 

1. Я удалил все min-width а также min-height вам не нужно это в этом случае.

2. использовать height: 100% для ваших элементов также вы должны установить это на body а также html теги.

3. левая панель должна быть float: left с width: 25% правая панель float: right width: 25% и средняя панель float: left или же float: right с width: 50%

Источник

Как создать вертикальную линию, разделяющую страницу на части?

помогите пожалуйста , как можно создать вертикальную линию чтобы разделить страницу на части . например вот так:

Создать в Chart вертикальную линию
Как можно в Chart программно вставить вертикальные линии на определенные X координаты? Использую.

Как начертить вертикальную линию?
Имеется график, на котором нужно начертить вертикальную линию х=1,25. Когда вписываю ее через.

Как продлить вертикальную линию до конца?
есть два блока (левый и правый), линия сейчас прикреплена к правому блоку и зависит от него. Как.

Как сделать вертикальную разделительную линию?
Здравствуйте, мне нужно сделать вертикальную линию которая должно тянуться по длине блока с.

1. Установить линию в качестве фона для элементов.
2. Для левого элемента задать рамку справа, для верхнего элемента — рамку снизу.
3. Для создания горизонтальной линии так же можно использовать элемент .

Сообщение было отмечено SIPAR как решение

Решение

div style="float: left; width: 23%; padding: 0 15px; border-right: 1px solid #000; "> asdfasfdasdfasd adf alkdjshf lja lajkshf lj dfkljahd flka cajkds lkajhdfl akjdf lakjf lakjds calskjd lajkhfalkjdhf lakjds alkj lakjshdf lajskh ljk alkjsdh lasjkhdl cjkhsdl jh lasdkjh alskjdch aljkshc ljkashdf lakjsdhf laksjhf lajkdshf lajkdhflajkdhf aljksdhf alkjdhf lasdf /div> div style="float: left; width: 70%; padding: 15px 0px; margin-left: 2%; border-bottom: 1px solid #000;"> asdfjads flajdhf lajkhsdf lakj dflakjshdf lakjshfd alksjdhf alskjdhf alsdkjfh alkhf asdf /div>

Источник