VPF::Фиксированный дизайн - Форум программистов

Tanya

Дата 1.8.2008, 23:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 20.10.2006

Репутация: нет
Всего: 4

Я так и хотела, но на курсах мне почему то подругому присоветывали, но можно и исправить

Добавлено через 2 минуты и 27 секунд
Кстати, что значит transparent и no-repeat 0% 0%
мы такого не проходили

webster

Дата 1.8.2008, 23:29 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

transparent - означает - "прозрачный", кроме этого стандартного слова можно еще использовать определенный цвет, например #000 или black, используется это в основном для того, чтобы при использовании непрямоугольной картинки (а все элементы, для которых используется свойство background имеют как-раз прямоугольную область), все оставшееся пространство, незаполненное бэкгроундной картинкой будет заполнено цветом, или останется прозрачной - transparent.
no-repeat - без повторения, т.е. бэкгроундная картинка не будет повторяться в содержащем ее блоке, и если она меньше его размера, то все оставшееся пространство элемента останется прозрачным (transparent) или будет заполнено определенным цветом.
0% 0% - позиции бекгроунда внутри содержащего ее элемента относительно левого верхнего угла последнего (по-горизонтали - ось X и по-вертикали - Y соответственно).
Более полную информации по соответствующим свойствам стилей вы можете посмотреть здесь.

Tanya

Дата 3.8.2008, 18:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 20.10.2006

Репутация: нет
Всего: 4

С background что-то у меня не получилось, заупуталась я. А вот к прежнему коду текст присобачился, но опять появилась полоса smile

http://s54.radikal.ru/i146/0808/f4/6bf2e9d3b657.jpg
Это можно ведь как то исправить?

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<BASE HREF="http://iojik-25.narod.ru">
<style type="text/css">
*{ margin: 0px; padding: 0px; }
#container{
width:1024;
height:769;
border:0; 
margin-right: auto; 
margin-left: auto; 
}
#col1{
width:226;height:155;float: left;
}
#col2{
width:798;height:155;float: left;
}
#col3{
width:410;height:302;float: left;
}
#col4{
width:614;height:302;float: left;
}
#col5{
width:410;height:302;float: left;
}
#col6{
width:614;height:302;float: left;
}
img {
    display: block;
}

</style>
</HEAD>
<body bgcolor="#FFFFFF">
<div id="container">

<div id="col1">
<a href="http://iojik-25.narod.ru/"
                onmouseover="window.status=' ';  return true;"
                onmouseout="window.status='';  return true;">
                <img src="d:/images-2/obo_mne_08.jpg" width="226" height="155" border="0" alt=""></a>
                
</div>
<div id="col2">
   <img src="d:/images-2/fon-3_02.jpg" width="798" height="155" alt="">
</div>
<div id="col3">
<img src="d:/images-2/fon-3_03.jpg" width="410" height="302" alt="">
</div>
<div id="col4">
<img src="d:/images-2/fon-3_04.jpg" width="614" height="302" alt="">
<div style="position:relative;top:-280;left:175;font-size:13px;color:black;z-index:2;"><b>Zagolovok</b></div>
</div>
<div id="col5">
<img src="d:/images-2/fon-3_05.jpg" width="410" height="311" alt="">
</div>
<div id="col6">
<img src="d:/images-2/fon-3_06.jpg" width="614" height="311" alt="">
</div>
<div id="col7">

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

webster

Дата 3.8.2008, 18:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Не могло не получиться:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<BASE HREF="http://iojik-25.narod.ru">
<style type="text/css">
*{ margin: 0px; padding: 0px; }
#container{
width:1024;
height:769;
border:0; 
margin-right: auto; 
margin-left: auto; 
}
#col1{
width:226;height:155;float: left;
}
#col2{
background: transparent url(d:/images-2/fon-3_02.jpg) no-repeat top left; width:798;height:155;float: left;
}
#col3{
background: transparent url(d:/images-2/fon-3_03.jpg) no-repeat top left; width:410;height:302;float: left;
}
#col4{
background: transparent url(d:/images-2/fon-3_04.jpg) no-repeat top left; width:614;height:302;float: left;
}
#col5{
background: transparent url(d:/images-2/fon-3_05.jpg) no-repeat top left; width:410;height:302;float: left;
}
#col6{
background: transparent url(d:/images-2/fon-3_06.jpg) no-repeat top left; width:614;height:302;float: left;
}
/*img {
    display: block;
}*/

</style>
</HEAD>
<body bgcolor="#FFFFFF">
<div id="container">

<div id="col1">
<a href="http://iojik-25.narod.ru/"
                onmouseover="window.status=' ';  return true;"
                onmouseout="window.status='';  return true;">
                <img src="d:/images-2/obo_mne_08.jpg" width="226" height="155" border="0" alt=""></a>
                
</div>
<div id="col2">
   Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. 
</div>
<div id="col3">
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
</div>
<div id="col4">
Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
<div style="position:relative;top:-280;left:175;font-size:13px;color:black;z-index:2;"><b>Zagolovok</b></div>
</div>
<div id="col5">
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.
</div>
<div id="col6">
В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32

</div>
<div id="col7">

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

И возьмите за правильную привычку проставлять размерность, даже когда стандарты позволяют этого и не делать (px).

Это сообщение отредактировал(а) webster - 3.8.2008, 18:47

Tanya

Дата 3.8.2008, 21:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 20.10.2006

Репутация: нет
Всего: 4

Ну вот так вот получается почему то
http://s60.radikal.ru/i167/0808/32/2a7f32a58629.jpg

webster

Дата 3.8.2008, 21:33 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Здесь надо все переделать. Нельзя расставлять повторяющиеся бекгроундные картинки тегами IMG. Чуть позже покажу как можно сделать.

webster

Дата 3.8.2008, 22:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Примерно так должен выглядеть макет с фиксированными размерами (табличная верстка)

Это сообщение отредактировал(а) webster - 3.8.2008, 22:38

Присоединённый файл ( Кол-во скачиваний: 4 )

table_sample.rar 38,05 Kb

Tanya

Дата 3.8.2008, 22:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 20.10.2006

Репутация: нет
Всего: 4

При табличной верстке дизайнчик сильно пострадал однако

webster

Дата 3.8.2008, 23:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Я думаю, что заменить табличную верстку блочной не составить труда. Практически надо использовать вместо td - div.
Других предложений нет.

Это сообщение отредактировал(а) webster - 3.8.2008, 23:06

Tanya

Дата 3.8.2008, 23:28 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 20.10.2006

Репутация: нет
Всего: 4

нус попробую

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »