X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> проблема с делением страницы на колонки
funman
funman
Topic Starter сообщение 31.5.2008, 14:24; Ответить: funman
Сообщение #1


Привет форумчане!

Есть такая задача, нужно страницу разделить на 3 колонки

как например здесь http://nashe.ru/online/
или здесь http://www.aircharter.ru/vip_charter.htm

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

Знаю что можно это как то через DIV и CSS сделать... но не знаю как..

Единственно что приходит в голову это абсолютное позиционирование, но это не вариант.

Буду благодарен за простой и рабочий пример как сделать три не зависемые колонки.

Frame-ы тоже не вариант.

Спасибо.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exploit_hb
Exploit_hb
сообщение 31.5.2008, 18:06; Ответить: Exploit_hb
Сообщение #2


моно так например:

<table align=left border=1>
<tr>
<td width=170 height=400> 1 </td>
</tr>
</table>

<table align=left border=1>
<tr>
<td width=550 height=500> 2 </td>
</tr>
</table>

<table align=left border=1>
<tr>
<td width=200 height=460> 3 </td>
</tr>
</table>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 31.5.2008, 18:55; Ответить: Webmaster_hb
Сообщение #3


funman,
<table border=1>
<tr valign="top">
<td > 1 </td>
<td > 2 </td>
<td > 3 </td>
</tr>
</table>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
funman
funman
Topic Starter сообщение 1.6.2008, 11:39; Ответить: funman
Сообщение #4


(Exploit_hb @ 31.5.2008, 21:06) *
моно так например:

<table align=left border=1>
<tr>
<td width=170 height=400> 1 </td>
</tr>
</table>

<table align=left border=1>
<tr>
<td width=550 height=500> 2 </td>
</tr>
</table>

<table align=left border=1>
<tr>
<td width=200 height=460> 3 </td>
</tr>
</table>


Попробовал так, это частично решает проблему, появились 3 независемые колонки, в которе я вставлял DIV блоки и вроде ничего не разлазилось...
когда попытался добавить внизу таблицу (должна быть по ширене как все эти таблицы с низу ) ничего не получается она тоже появляется с боку от этих таблиц, если добавлять много переносов строк, она теоретически съезжает , но это ужас как не ровно получается.

Пробовал делать конструкцию из вложенных
<div><div> {Здесь таблицы с колонками</div>Здесь нижняя таблица</div>


В IE7 даже вроде работает... но в в редакторе это все выглядит ужасно... и в FireFox просто все улетает... чувствую что делаю что то не правильно , не вижу в чем ошибся....

Можете помочь? или нужен полный код?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
funman
funman
Topic Starter сообщение 1.6.2008, 12:13; Ответить: funman
Сообщение #5


вот исходник. почему в IE7 он открывается нормально, а в FireFox криво...

В чем не валидность кода???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="test">
<div class="shift">
<div class="test_in" >
<div class="bgcolor">
<table width="941" border="0" cellpadding="0" cellspacing="0" bgcolor="c8d3dd">
<tr>
<td scope="col"><img src="static/images/flag_end.jpg" alt="Грузовые авиаперевозки" />&nbsp;</td>
<th scope="col">&nbsp;</th>
<td align="right" scope="col"><img src="static/images/flag_end2.jpg" alt="международные авиаперевозки" width="12" height="25" /> </td>
</tr>
</table>
</div>
<img src="images/headers/head_new2correct.jpg" width="941" height="121" /><br>
<table height="25" background="images/dynamic/menu_buttons/menu_fon.jpg" width="941" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Главная</th>
<th scope="col">О Компании</th>
<th scope="col">Услуги</th>
<th scope="col">Тарифы</th>
<th scope="col">Схема проезда</th>
<th scope="col">Контакты</th>
<th scope="col">Информация</th>
<th scope="col">Новости</th>
</tr>
</table>
<table width="941" height="5" border="0" cellspacing="0" cellpadding="0" bgcolor="c8d3dd">
<tr>
<th height="5" scope="col"><img src="images/dynamic/menu_buttons/line1.jpg" alt="Грузовое агенство ТопЭйр" /></th>
</tr>
</table>
<table align=left border=0>
<tr>
<td width=172 height=400 valign="top"><div class="menu_button">
<div class=" text_mid_menu " >test</div>
</div>

<div class="menu_button">
<div class=" text_mid_menu " >test 1</div>
</div>

<div class="menu_button">
<div class=" text_mid_menu " >test 2</div>
</div>

<div class="menu_button">
<div class=" text_mid_menu " >test 3</div>
</div>

<div class="menu_button">
<div class=" text_mid_menu " >test 4</div>
</div>

<div class="menu_button">
<div class=" text_mid_menu " >test 5</div>
</div>
</tr>
</table>
<table align=left border=0>
<tr>
<td width=599 height=500 valign="top">
<div class=" head_1">
Профессионалы в сфере грузовых авиаперевозок
</div>
<div align="left" class="head2">
<h3>
Приветствуем вас на сайте TOPAIR.ru
</h3>
</div>
<div align="left" class="head1">
· О Компании TOPAIR.ru ·
</div>
<div align="left" class=" newstext">
<br>
- Компании <strong>TOPAIR</strong>.ru - Rulezz!! <br>
Здесь нужен текст о компании <br />много текста, желательно о авиаперевозках
<br>
<br>
<br>
<br><br >
<br><br>
Еще текст<br>
</div>

<div align="left" class="head1">
· Наши Услуги·
</div>
<div align="left" class=" newstext">
<br>
Услуги TOPAIR.ru - Rulezz!! <strong>Авиаперевозки</strong> - 4ever!!!<br>
Здесь нужен текст о компании <br />много текста, желательно о авиаперевозках
<br />
<br />
<br />
<br /><br />
<br /><br />
Еще текст<br />
</div>
<div align="left" class="head1">
· Тарифы на авиаперевозку·
</div>
<div align="left" class=" newstext">
<br>
Тарифы на <strong>Авиаперевозку</strong> <br>
Здесь нужены несколько наших лутьших или <br />наиболее востребованных строчек из тарифов
<br />
<br />
<br />
<br /><br />
<br /><br />
На странцу с тарифами<br />
</div>

</td>
</tr>
</table>
<table align=left border=0>
<tr>
<td width=171 height=460><div class="news">новости авиаперевозок:</div>
<div class="newstext2">
<strong>первая новость</strong> 01/06/08
<p>Самолеты летали и будут летать.</p>
<p>сто пудово будет летать...</p>
<p><strong>вторая новсть</strong> 01/06/08</p>
<p>funman - Rulezzz!!!</p>
<p><strong>третья новость</strong> 01/06/08</p>
<p>CSS - DIV - вынос мозга</p>
<p><strong>четвертая новость</strong> 01/06/08</p>
<p>понял нахер нужен rowspan ж)</p>
<p>нужен и все!!!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</td>
</tr>
</table>


</div>
</div>

</div>
</body>
</html>


test1.css:
@charset "utf-8";
.test {
background-color: #C8D3DD;
width: 960px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.test_in {
width: 941px;
margin-left: auto;
margin-bottom: 2px;
margin-top: 0px;
margin-right: auto;
}
.shift {
padding-right: 9px;
background-color: #FFFFFF;
padding-left: 9px;
}
.bgcolor {
background-color: c8d3dd;
}
.mainframe {
padding: 10px;
color: #000066;
}
.head1 {
font-size: 12px;
color: #FFFFFF;
background-color: #213347;
text-align: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
.head2 {
font-size: 24px;
font-weight: bold;
color: #213347;
background-color: #FFFFFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 10px;
border-top-style: ridge;
border-right-style: none;
border-bottom-style: ridge;
border-left-style: none;
border-top-color: #E7E7E7;
border-right-color: #E7E7E7;
border-bottom-color: #E7E7E7;
border-left-color: #E7E7E7;
border-top-width: 5px;
border-bottom-width: 5px;
text-align: center;
}
.news {
color: #000000;
background-image: url(images/dynamic/menu_buttons/line3.jpg);
background-repeat: repeat-y;
text-align: center;
}
.newstext {
font-size: 10px;
color: #000000;
padding-left: 15px;
background-color: #E3E7E8;
}
.newstext2 {
font-size: 10px;
color: #000000;
padding-left: 15px;
background-color: #E3E7E8;

}
.menu_button {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background-image: url(images/dynamic/menu_buttons/left_menu.jpg);
height: 46px;
width: 172px;
margin-top: 5px;
}
menubutton1 {
text-align: center;
vertical-align: middle;
padding-top: 10px;
}
.text_mid_menu {
text-align: center;
padding-top: 10px;
}
.head_1 {
font-size: 12px;
color: #000000;
background-color: #C8D3DD;
font-style: normal;
font-weight: normal;
font-variant: normal;
margin-left: 10px;
margin-right: 10px;
}
.test2 {
font-size: 10px;
color: #000033;
text-align: center;
background-color: #C8D3DD;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 1.6.2008, 13:07; Ответить: Exterior
Сообщение #6


funman, смотрите Макеты сайтов - там все предельно ясно и детально описано, есть варианты фиксированные по ширине и "резиновые".
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
funman
funman
Topic Starter сообщение 1.6.2008, 13:09; Ответить: funman
Сообщение #7


(Exterior @ 1.6.2008, 16:07) *
funman, смотрите Макеты сайтов - там все предельно ясно и детально описано, есть варианты фиксированные по ширине и "резиновые".


Спасибо огромнное за ссылку на макеты.

Но хотябы в двух словах, где у меня косяк, почему она таблица вылазиет? и что нужно было сделать чтобы ее вписать туда?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
funman
funman
Topic Starter сообщение 1.6.2008, 13:19; Ответить: funman
Сообщение #8


Я заметил что она перестает быть вписанной в рамку блока когда в таблицы появляется свойство align=left (У тех трех колонок)
но без этого тега колонки появляются друг под другом... можно как то это обойти?
Может вобще не использовать таблицу?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 1.6.2008, 14:25; Ответить: Exterior
Сообщение #9


funman,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Untitled Document</title>

<!--<link href="test1.css" rel="stylesheet" type="text/css" />-->
<style type="text/css">
<!--
/*@charset "utf-8";*/
.test {
background-color: #C8D3DD;
width: 960px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding: 10px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

.test_in {
width: 941px;
margin-left: auto;
margin-bottom: 2px;
margin-top: 0px;
margin-right: auto;
}

.shift {
padding-right: 9px;
background-color: #FFFFFF;
padding-left: 9px;
}

.bgcolor {
background-color: #c8d3dd;
}

.mainframe {
padding: 10px;
color: #000066;
}

.head1 {
font-size: 12px;
color: #FFFFFF;
background-color: #213347;
text-align: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}

.head2 {
font-size: 24px;
font-weight: bold;
color: #213347;
background-color: #FFFFFF;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 10px;
border-top-style: ridge;
border-right-style: none;
border-bottom-style: ridge;
border-left-style: none;
border-top-color: #E7E7E7;
border-right-color: #E7E7E7;
border-bottom-color: #E7E7E7;
border-left-color: #E7E7E7;
border-top-width: 5px;
border-bottom-width: 5px;
text-align: center;
}

.news {
color: #000000;
background-image: url(images/dynamic/menu_buttons/line3.jpg);
background-repeat: repeat-y;
text-align: center;
}

.newstext {
font-size: 10px;
color: #000000;
padding-left: 15px;
background-color: #E3E7E8;
}

.newstext2 {
font-size: 10px;
color: #000000;
padding-left: 15px;
background-color: #E3E7E8;
}

.menu_button {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background-image: url(images/dynamic/menu_buttons/left_menu.jpg);
height: 46px;
width: 172px;
margin-top: 5px;
}

.menubutton1 {
text-align: center;
vertical-align: middle;
padding-top: 10px;
}

.text_mid_menu {
text-align: center;
padding-top: 10px;
color: #000;
}

.head_1 {
font-size: 12px;
color: #000000;
background-color: #C8D3DD;
font-style: normal;
font-weight: normal;
font-variant: normal;
margin-left: 10px;
margin-right: 10px;
}

.test2 {
font-size: 10px;
color: #000033;
text-align: center;
background-color: #C8D3DD;
}
-->
</style>

</head>

<body>

<div class="test">

<div class="shift">

<div class="test_in">

<div class="bgcolor">

<table width="941" border="0" cellpadding="0" cellspacing="0" bgcolor="#c8d3dd">
<tr>
<td scope="col"><img src="static/images/flag_end.jpg" alt="Грузовые авиаперевозки" />&nbsp;</td>
<th scope="col">&nbsp;</th>
<td align="right" scope="col"><img src="static/images/flag_end2.jpg" alt="международные авиаперевозки" width="12" height="25" /> </td>
</tr>
</table>

</div>
<img src="images/headers/head_new2correct.jpg" width="941" height="121" /><br>

<table height="25" background="images/dynamic/menu_buttons/menu_fon.jpg" width="941" border="0" cellspacing="0" cellpadding="0" style="color:#000;">
<tr>
<th scope="col">Главная</th>
<th scope="col">О Компании</th>
<th scope="col">Услуги</th>
<th scope="col">Тарифы</th>
<th scope="col">Схема проезда</th>
<th scope="col">Контакты</th>
<th scope="col">Информация</th>
<th scope="col">Новости</th>
</tr>
</table>

<table width="100%" height="5" border="0" cellspacing="0" cellpadding="0" bgcolor="c8d3dd">
<tr>
<th height="5" scope="col" valign="top"><img src="images/dynamic/menu_buttons/line1.jpg" alt="Грузовое агенство ТопЭйр" /></th>
</tr>
</table>

<table align="left" border="0" cellspacing="0" cellpadding="0" width="171">
<tr>
<td width="171" height="400" valign="top">
<div class="menu_button">
<div class="text_mid_menu">test</div>
</div>
<div class="menu_button">
<div class="text_mid_menu">test 1</div>
</div>
<div class="menu_button">
<div class="text_mid_menu">test 2</div>
</div>
<div class="menu_button">
<div class="text_mid_menu">test 3</div>
</div>
<div class="menu_button">
<div class="text_mid_menu">test 4</div>
</div>
<div class="menu_button">
<div class="text_mid_menu">test 5</div>
</div>
</tr>
</table>

<table align="left" border="0" cellspacing="0" cellpadding="0" width="599">
<tr>
<td width=599 height=500 valign="top">
<div class=" head_1"> Профессионалы в сфере грузовых авиаперевозок </div>
<div align="left" class="head2">
<h3> Приветствуем вас на сайте TOPAIR.ru </h3>
</div>
<div align="left" class="head1"> · О Компании TOPAIR.ru · </div>
<div align="left" class=" newstext"> <br>
- Компании <strong>TOPAIR</strong>.ru - Rulezz!! <br>
Здесь нужен текст о компании <br />
много текста, желательно о авиаперевозках <br>
<br>
<br>
<br>
<br>
<br>
<br>
Еще текст<br>
</div>
<div align="left" class="head1"> · Наши Услуги· </div>
<div align="left" class=" newstext"> <br>
Услуги TOPAIR.ru - Rulezz!! <strong>Авиаперевозки</strong> - 4ever!!!<br>
Здесь нужен текст о компании <br />
много текста, желательно о авиаперевозках <br />
<br />
<br />
<br />
<br />
<br />
<br />
Еще текст<br />
</div>
<div align="left" class="head1"> · Тарифы на авиаперевозку· </div>
<div align="left" class=" newstext"> <br>
Тарифы на <strong>Авиаперевозку</strong> <br>
Здесь нужены несколько наших лутьших или <br />
наиболее востребованных строчек из тарифов <br />
<br />
<br />
<br />
<br />
<br />
<br />
На странцу с тарифами<br />
</div>
</td>
</tr>
</table>

<table align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170" height="460" valign="top">
<div class="news">новости авиаперевозок:</div>
<div class="newstext2"> <strong>первая новость</strong> 01/06/08
<p>Самолеты летали и будут летать.</p>
<p>сто пудово будет летать...</p>
<p><strong>вторая новсть</strong> 01/06/08</p>
<p>funman - Rulezzz!!!</p>
<p><strong>третья новость</strong> 01/06/08</p>
<p>CSS - DIV - вынос мозга</p>
<p><strong>четвертая новость</strong> 01/06/08</p>
<p>понял нахер нужен rowspan ж)</p>
<p>нужен и все!!!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</td>
</tr>
</table>

</div>

</div>

</div>

</body>
</html>


чесно говоря, свалка кода, что html, что css... куча косяков и т.д. Вот например, зачем в таблицах нужны <th>? - это табличные заголовки, через них можно определить свойства столбцов, но в данном случае, они просто бесполезны. Также стоит определиться что использовать - таблицы или блоки. Задумка приведенной страницы решается куда проще, мой вам совет - внимательнее изучить макеты, кот. я привел и все переделать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
funman
funman
Topic Starter сообщение 1.6.2008, 14:34; Ответить: funman
Сообщение #10


чесно говоря, свалка кода, что html, что css... куча косяков и т.д. Вот например, зачем в таблицах нужны <th>? - это табличные заголовки, через них можно определить свойства столбцов, но в данном случае, они просто бесполезны. Также стоит определиться что использовать - таблицы или блоки. Задумка приведенной страницы решается куда проще, мой вам совет - внимательнее изучить макеты, кот. я привел и все переделать.


Ваш макет рулит! буду разбираться, только времени не хватает на все...

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужно ли закрывать ненужные страницы тегом noindex, follow?
 8 noviktamw 2906 2.3.2024, 12:53
автор: toplinks
Открытая тема (нет новых ответов) Вытащить страницы из кэша Яндекса
 2 VostrVL 1959 11.1.2024, 23:07
автор: ЛаврионСергеевич
Открытая тема (нет новых ответов) Сверстать страницы из figma
нужно сделать страницы для веб приложения
 1 bluestorm 1296 7.6.2022, 18:11
автор: doharddocode
Открытая тема (нет новых ответов) Подобрать группы и страницы и разместить ссылку
 4 Lacomka 3410 21.2.2022, 8:43
автор: АлексейWEB
Открытая тема (нет новых ответов) Верстка и внедрение на сайт макета главной страницы
Требуется: с Figma на Laravel
 2 ARsHi 1670 27.3.2021, 0:57
автор: Ogaelath


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 19.4.2024, 15:34

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet