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

Tanya

Дата 1.8.2008, 19:27 (ссылка)

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

Загрузка ...

Новичок

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

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

Что я делаю не так, появляются горизонтальные полосы между блоками http://s44.radikal.ru/i104/0808/45/dbc3ffe4a1b8.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="">
<style type="text/css">
#container{
width:1024;
height:769;
border:0; 
margin-right: auto; 
margin-left: auto; }

#col1{
width:226;height:155;margin:0;padding: 0;float: left;
}
#col2{
width:798;height:155;margin:0;padding: 0;float: left;
 }
#col3{
width:410;height:302;margin:0;padding: 0;float: left;
}
#col4{
width:614;height:302;margin:0;padding: 0;float: left;
}
#col5{
width:410;height:302;margin:0;padding: 0;float: left;
}
#col6{
width:614;height:302;margin:0;padding: 0;float: left;
}
</style>
</HEAD>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">

<div id="col1">
<a href=""
    onmouseover="window.status='';  return true;"
    onmouseout="window.status='';  return true;">
    <img src="d:/images-2/_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>
<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>
</body>
</html>

bars80080

Дата 1.8.2008, 19:46 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

попробуйте в начале добавить:

Код


* { margin: 0px; padding: 0px; }

Tanya

Дата 1.8.2008, 19:51 (ссылка)

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

Загрузка ...

Новичок

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

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

Так ведь есть же уже или не там где надо разве?

bars80080

Дата 1.8.2008, 20:43 (ссылка)

(голосов:1)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

а где он? я не вижу. частные обнуления не исправят картину полностью

Tanya

Дата 1.8.2008, 21:00 (ссылка)

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

Загрузка ...

Новичок

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

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

В стилях каждого блока задано:
#col1{
width:226;height:155;margin:0;padding: 0;float: left;
}
Где же их надо тогда задавать, если не там?

bars80080

Дата 1.8.2008, 21:32 (ссылка)

(голосов:1)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

послушайте, а вы можете просто впендюрить ту строчку что я предложил в начало стилей, и потом сказать, что получилось?

Tanya

Дата 1.8.2008, 21:54 (ссылка)

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

Загрузка ...

Новичок

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

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

Дык куда присобачить эту строчку, вот в чём вопрос... я же ведь "чайник" притом патолагический

Fortop

Дата 1.8.2008, 22:21 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2200
Регистрация: 13.11.2007
Где: Донецк

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

Цитата(Tanya @ 1.8.2008, 21:54

)

Дык куда присобачить эту строчку, вот в чём вопрос... я же ведь "чайник" притом патолагический

Tanya,
зачем заниматься тем, что неизлечимо? smile

--------------------

Мир это Я.
Живее всех живых.

Tanya

Дата 1.8.2008, 22:28 (ссылка)

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

Загрузка ...

Новичок

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

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

А я уже два месяца лечусь на курсах веб-дизанеров... smile

Вот не знаю правильно ли присабачила, но Не помагает

Код


<!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="">

<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;margin:0;padding: 0;float: left;
}
#col2{
width:798;height:155;margin:0;padding: 0;float: left;
 }
#col3{
width:410;height:302;margin:0;padding: 0;float: left;
}
#col4{
width:614;height:302;margin:0;padding: 0;float: left;
}
#col5{
width:410;height:302;margin:0;padding: 0;float: left;
}
#col6{
width:614;height:302;margin:0;padding: 0;float: left;
}
</style>
</HEAD>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">

<div id="col1">
<a href=""
    onmouseover="window.status='';  return true;"
    onmouseout="window.status='';  return true;">
    <img src="d:/images-2/_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>
<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>
</body>
</html>

bars80080

Дата 1.8.2008, 22:35 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

а где звёздочка перед скобкой? /самый важный элемент ядрён-батон/

Fortop

Дата 1.8.2008, 22:36 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2200
Регистрация: 13.11.2007
Где: Донецк

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

Цитата(Tanya @ 1.8.2008, 22:28

)

Вот не знаю правильно ли присабачила, но Не помагает
{ margin: 0px; padding: 0px; }

звездочку куда дела?

Добавлено через 1 минуту и 18 секунд

Цитата(Tanya @ 1.8.2008, 22:28

)

А я уже два месяца лечусь на курсах веб-дизанеров... smile

Ты же сама сказала - "паталогический" smile

это не лечится ;)

Как только перестанешь себя таковым считать - сразу пойдешь на поправку.

--------------------

Мир это Я.
Живее всех живых.

Tanya

Дата 1.8.2008, 22:43 (ссылка)

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

Загрузка ...

Новичок

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

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

Вернула звёздочку на родину ( я думала она чисто в натуре для красоты, а я девушка суровая типо smile

) Не помагает...
А эту звездочку больше никуда не надобно присобачивать случайно?

webster

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

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

Загрузка ...

Опытный

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

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

Установите для элемента img стиль:

Код


img {
    display: block;
}

и используйте корректную и полную запись DOCTYPE

Tanya

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

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

Загрузка ...

Новичок

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

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

Цитата(webster @ 1.8.2008, 22:59)

Установите для элемента img стиль:

Код


img {
    display: block;
}

и используйте корректную и полную запись DOCTYPE

Вау, помогло! а то я уже хотела фотошопные страницы оставить.
Теперь осталось только текст удачно присобачить...

Это сообщение отредактировал(а) Tanya - 12.8.2008, 19:32

webster

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

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

Загрузка ...

Опытный

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

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

По-идее вам нужно было использовать для расположения картинок свойство background, например:

Код


#col2{
background: transparent url(d:/images-2/fon-3_02.jpg) no-repeat 0% 0%; width:226;height:155;margin:0;padding: 0;float: left;
}

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

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 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »