Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Фиксированный дизайн


Автор: Tanya 1.8.2008, 19:27
Что я делаю не так, появляются горизонтальные полосы между блоками 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
попробуйте в начале добавить:
Код

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

Автор: Tanya 1.8.2008, 19:51
Так ведь есть же уже или не там где надо разве?

Автор: bars80080 1.8.2008, 20:43
а где он? я не вижу. частные обнуления не исправят картину полностью

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

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

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

Автор: Fortop 1.8.2008, 22:21
Цитата(Tanya @  1.8.2008,  21:54 Найти цитируемый пост)
Дык куда присобачить эту строчку, вот в чём вопрос... я же ведь "чайник" притом патолагический 

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

<style type="text/css">
"собачить" и "пендюрить" тут
</style>

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

Автор: Tanya 1.8.2008, 22:28
А я уже два месяца лечусь на курсах веб-дизанеров... 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
а где звёздочка перед скобкой? /самый важный элемент ядрён-батон/

Автор: Fortop 1.8.2008, 22:36
Цитата(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
Вернула звёздочку на родину ( я думала она чисто в натуре для красоты, а я девушка суровая типо  smile ) Не помагает...
А эту звездочку больше никуда не надобно присобачивать случайно?

Автор: webster 1.8.2008, 22:59
Установите для элемента img стиль:
Код

img {
    display: block;
}
и используйте корректную и полную запись http://w3schools.com/tags/tag_doctype.asp

Автор: Tanya 1.8.2008, 23:08
Цитата(webster @ 1.8.2008,  22:59)
Установите для элемента img стиль:
Код

img {
    display: block;
}
и используйте корректную и полную запись http://w3schools.com/tags/tag_doctype.asp


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

Автор: webster 1.8.2008, 23:14
По-идее вам нужно было использовать для расположения картинок свойство 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
Я так и хотела, но на курсах мне почему то подругому присоветывали, но можно и исправить

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

Автор: webster 1.8.2008, 23:29
transparent - означает - "прозрачный", кроме этого стандартного слова можно еще использовать определенный цвет, например #000 или black, используется это в основном для того, чтобы при использовании непрямоугольной картинки (а все элементы, для которых используется свойство background имеют как-раз прямоугольную область), все оставшееся пространство, незаполненное бэкгроундной картинкой будет заполнено цветом, или останется прозрачной - transparent.
no-repeat - без повторения, т.е. бэкгроундная картинка не будет повторяться в содержащем ее блоке, и если она меньше его размера, то все оставшееся пространство элемента останется прозрачным (transparent) или будет заполнено определенным цветом.
0% 0% - позиции бекгроунда внутри содержащего ее элемента относительно левого верхнего угла последнего (по-горизонтали - ось X и по-вертикали - Y соответственно).
Более полную информации по соответствующим свойствам стилей вы можете посмотреть http://w3schools.com/css/css_reference.asp.

Автор: Tanya 3.8.2008, 18:26
С 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
Не могло не получиться:
Код

<!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).

Автор: Tanya 3.8.2008, 21:23
Ну вот так вот получается почему то
http://s60.radikal.ru/i167/0808/32/2a7f32a58629.jpg

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

Автор: webster 3.8.2008, 22:31
Примерно так должен выглядеть макет с фиксированными размерами (табличная верстка) 

Автор: Tanya 3.8.2008, 22:59
При табличной верстке дизайнчик сильно пострадал однако

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

Автор: Tanya 3.8.2008, 23:28
нус попробую

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)