Главная Вход в систему Регистрация
Задать вопрос Консультации Пользователи Форум
О системе Помощь
Задать вопрос экспертам
Консультация № 104822
09.10.2007, 13:02
0.00 руб.
0 2 1
Компьютеры Программирование
Здравсвуйте, эксперты. Пробую сверстать учебный макет с помощью css. Разбил страницу на 4 колонки. в 1-ой вложено две и еще одна отдельно. 1-ая вложенная колонка отображается адекватно, а 2-ая вложенная находится гораздо ниже 1-ой вложенной, хотя должна быть с ней на одном уровне. Подскажите, пожайлуста, как исправить код, чтобы страница отображалась нормально, и если можно, подскжите в чем была ошибка. Код в приложении
С уважением,

Приложение:
<style type="text/css">#left{width:348px;position:absolute;left:0px;right:0px;top:0px}#right{width:402px;position:absolute;left:348px;top:0px}#logo {text-align: right}#left1 {text-align: right;width: 188px;height: 600px};position: absolute;left: 0px;top: auto}#left2{width:160px;height:600px;position:absolute;left: 188px;top: auto} .back{background:url("enig.gif") no-repeat}.bluecol {background:blue}</style><body><DIV id="left"><div id="logo"> <IMG SRC="img/fragment_l.gif" WIDTH="266" HEIGHT="86" ALT="Ýíèãìà -êðèïòîãðàôè÷åñêèå ñðåäñòâà çàùèòû èíôîðìàöèè [ëîãîòèï]"></div> <div id="left1" class="back"> <BR><BR><A HREF="#">ссылка1 </A><BR><A HREF="#"> ссылка2<BR><A HREF="#"> ссылка3<BR><A HREF="#"> ссылка4</A></div> <div id="left2" class="bluecol"> d fff</div> </DIV> <DIV id="right"> <IMG SRC="img/fragment_2.gif" WIDTH="251" HEIGHT="167" > ddd </div></body>

Обсуждение

Неизвестный
09.10.2007, 14:48
общий
это ответ
Здравствуйте, Чепиков Александр Валерьевич!

Если вы имеете ввиду разную высоту колонок
<B>
<div id="logo">
<IMG SRC="img/fragment_l.gif" WIDTH="251" HEIGHT="167" ALT="Yieaia - e?eioia?aoe?aneea n?aanoaa caueou eioi?iaoee [eiaioei]">
</div>
</B>
и
<B>
<DIV id="right"> <IMG SRC="img/fragment_2.gif" WIDTH="251" HEIGHT="167">
ddd
</div>
</B>
то разница в этой высоте у вас получилась потому что вставленные графические файлы имеют разные размеры. Вот сравните:
<B>
<IMG SRC="img/fragment_l.gif" WIDTH="<FONT COLOR="#ff0000">266</FONT>" HEIGHT="<FONT COLOR="#ff0000">86</FONT>">
<IMG SRC="img/fragment_2.gif" WIDTH="<FONT COLOR="#ff0000">251</FONT>" HEIGHT="<FONT COLOR="#ff0000">167</FONT>">
</B>
Установите одинаковые значени этих параметров в <B>WIDTH</B> и <B>HEIGHT</B> и все будет отображаться нормально.

Удачи!
Неизвестный
09.10.2007, 16:12
общий
В таком случае вы можете использовать систему относительных координат. Данная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества и необходимость наличия такой координатной системы очевидны. Она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках умолчания. Естественно стили можно использовать и в отдельном блоке. Вот приблизительный пример:<B><div style="border-width:1px; border-style:solid; width:80%; height:300px">Блок 1<div style="position:relative; border-style:solid; width:40%; top:10px; left:10px; border-width:1px">Блок 2 <BR><BR><BR></div><div style="position:relative; border-style:solid; width:40%; top:20px; left:10px; border-width:1px">Блок 3 <BR><BR><BR></div><div style="position:relative; border-style:solid; width:40%; top:30px; left:10px; border-width:1px">Блок 4 <BR><BR><BR></div></div> </B>Используя данную систему координат вы всегда сможете расположить ваши блоки в нужном месте страницы.Успехов!
Форма ответа