| |
|
|
| | Здравствуйте!
Пытаюсь сделать шаблон сайта на "чистом" CSS. И сразу же сталкиваюсь с проблемой - между блоками появляется белая полоса. "margin:0; padding:0" не помогло совсем. Всё сделанное в архиве. Помогите понять, пожалуйста, где моя ошибка? | |
| |
|
|
| |
|
|
| |
для: Tuco
(26.01.2008 в 18:47)
| | | не вижу ни одной белой полосы. вы наверняка в кривом браузере смотрите... | |
| |
|
|
| |
|
|
| |
для: elenaki
(26.01.2008 в 18:54)
| | | Прошу прощения! К моему глубочайшему сожалению я прицепил не тот архив (не совсем полный). Правильные файлы здесь. Помогите пожалуйста!!!
З.Ы. Пользуюсь 3 браузерами - эксплорер, опера и фаерфокс | |
| |
|
|
| |
|
|
| |
для: Tuco
(26.01.2008 в 19:55)
| | | Не пишите код "красиво" - пишите "рационально".
Уберите все ваши TAB'ы, двойные-тройные пробелы и перенесите символ закрытия всех тегов на следующую строку - все ваши полосы уберутся.
Поясняю. Когда вы пишете код:
<span>text1</span>
<span>text2</span>
|
то вы фактически приказываете браузеру написать
Он это и делает - "приказали ведь!"
Писать надо ТАК:
<span>text1</span
><span>text2</span
>
|
| |
| |
|
|
| |
|
|
| |
для: CNT
(26.01.2008 в 20:31)
| | | Вы не совсем правильно поняли. Длинная полоса через весь экран разделяет зеленое поле, а её быть не должно | |
| |
|
|
| |
|
|
| |
для: Tuco
(26.01.2008 в 20:37)
| | |
.logo img {
display: block;
}
|
Нормальный код. Продолжайте так же. А вообще, большинство картинок нуждаются в block. Я, например, прописываю это сразу:
img {
display: block;
margin: 0px;
padding: 0px;
border: none;
}
|
Тогда все картинки идеальны для расположения в дизайне. Контентные картинки нужно настраивать отдельно. Например так:
#content img.floatleft {
float: left;
margin: 0px 10px 10px 0px;
}
#content img.floatright {
float: right;
margin: 0px 0px 10px 10px;
}
|
| |
| |
|
|
| |
|
|
| |
для: SHAman
(26.01.2008 в 21:38)
| | | Спасибо! Полоса исчезла, НО!... раньше я выравнивал маленькие картинки по центру с помощью "text-align: center", а теперь это не работает. А там важно, чтобы кнопки получились именно по центру, там рамка нарисована... Не откажите в помощи, пожалуйста...
И работает это только в эксплорере, в фаерфоксе и опере нижняя зеленая полоса исчезла совсем :-( | |
| |
|
|
| |
|
|
| |
для: Tuco
(26.01.2008 в 20:37)
| | | Ну я-то всё понял правильно.
И дал вам правильный совет.
Если вы не поняли - то это ваши проблемы, не так ли?
Я поместил ваш index.html в текстовый редактор и последовательно:
1. удалил все TAB'ы
2. заменил все двойные пробелы на одинарные
3. заменил все "перенос+пробел" на "перенос"
4. заменил все "пробел+перенос" на "перенос"
5. ну и, наконец, заменил все ">+перенос+<" на "перенос+>+<"
И в результате получил код, отображаемый в любом браузере безо всяких "длинных полос, разделяющих зеленое поле".
Вас этот путь не устраивает - вы ждете "чудодейственных мер", кои позволят вам писать в коде БРЕД, но он будет автоматически исправляться?
Ждите. | |
| |
|
|
| |
|
|
| |
для: CNT
(26.01.2008 в 22:00)
| | | я проверил Ваш способ, он мне не помог совсем. | |
| |
|
|
| |
|
|
| |
для: Tuco
(26.01.2008 в 22:02)
| | | Ой ли!
Замените ВСЕГО ОДНУ вашу "красивую" конструкцию на слитно написанное
<div class="logo"><img src="images/logo.jpg" alt="Логотип" /></div>
|
и "длинная белая полоса" по крайней мере в Ослике исчезнет сразу. | |
| |
|
|
| |
|
|
| |
для: CNT
(26.01.2008 в 22:18)
| | | спасибо, но остальные браузеры? | |
| |
|
|
| |
|
|
| |
для: Tuco
(26.01.2008 в 22:24)
| | | А для прочих браузеров...
1. Поначалу вам придется подучить синтаксис написания правил CSS.
Ибо:
НЕПРАВИЛЬНО | ПРАВИЛЬНО
font-family: Century Gothic, sans-serif; | font-family: 'Century Gothic', 'sans serif';
margin: 0 auto; | margin: 0;
border: 0; | border: none;
|
2. Далее вам надо будет узнать дефолтные значения для свойств объектов.
Когда вы их узнаете, то поймёте, что половина ваших правил CSS попросту не нужна - вы повторили браузеру то, что он и так имеет.
А именно:
div
{
margin: 0;
padding: 0;
border: none;
}
.all
{
margin: 0;
padding: 0;
}
.top_menu_item
{
padding: 0;
}
.logo
{
margin: 0;
padding: 0;
border: none;
}
.first_line
{
margin: 0;
padding: 0;
}
.first_line_item
{
margin: 0;
padding: 0;
border: none;
}
|
3. Наконец, вам надо будет разобраться со свойствами position и top.
Ибо назначать тегу <HTML> значения свойств position: absolute и top: 0 - оно как бы и можно, но вы сможете объяснить - ЗАЧЕМ?:-) | |
| |
|
|
| |
|
|
| |
для: CNT
(26.01.2008 в 22:42)
| | | Спасибо.
Так написано, ибо я обложился разными мануалами и умными книгами, откуда я и передрал код. Я не программист, я - фельдшер, который хочет чего-то ещё узнать и понять. | |
| |
|
|
| |
|
|
| |
для: CNT
(26.01.2008 в 22:42)
| | | относительно синтаксиса - 'sans serif' в кавычках нигода не писалось. пишется через дефис.
возможно кавычки и не будут лишними, но я встречал их использование только со шрифтами в имени которых несколько слов
font-family: "trebuchet ms", helvetica, sans-serif;
|
margin: 0 auto; - имеет смысл и он отличен от margin: 0; | |
| |
|
|
| |
|
|
| |
для: AlexSol
(26.01.2008 в 23:43)
| | | спасибо, так как дальше действовать-то? | |
| |
|
|
| |
|
|
| |
для: Tuco
(26.01.2008 в 23:47)
| | |
html
{
margin: 0;
padding: 0;
font-family: 'Century Gothic', sans-serif;
font-size: 9pt;
}
body
{
padding: 0;
margin: 0 auto;
width: 998px;
border: 1px solid #838484;
}
.all
{
}
.top_menu
{
margin-top: 5px;
color: #64876f;
}
.top_menu_item
{
padding: 0;
padding-left: 17px;
padding-right: 1px;
border-right: 2px solid #167436;
}
.logo
{
}
.logo img
{
display:block;
}
.first_line
{
margin: 0;
padding: 0;
background-image: url(images/menu_line.jpg);
background-repeat: no-repeat;
width: 998px;
}
.first_line_item
{
margin: 0;
padding: 0;
border: 0;
}
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(27.01.2008 в 00:08)
| | | спасибо большое. Работает правильно всё. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(27.01.2008 в 00:08)
| | | и ещё одна проблема, как мне кажется, из этой же оперы :-) ! А в таблицах белые полосы откуда появляются между ячейками и по периметру самой таблицы и как с ними бороться? | |
| |
|
|
| |
|
|
| |
для: Tuco
(28.01.2008 в 17:37)
| | | <table cellpadding=0 cellspacing=0> | |
| |
|
|
| |
|
|
| |
для: AlexSol
(28.01.2008 в 18:52)
| | | спасибо, понял всё! | |
| |
|
|
| |
|
|
| |
для: AlexSol
(26.01.2008 в 23:43)
| | | >относительно синтаксиса - 'sans serif' в кавычках нигода не писалось. пишется через дефис.
Безграмотное написание, к сожалению, встречается чаще, чем правильное.
"Sans Serif" - это от французского "без засечек", но никак не "без-засечек".
То, что название этого семейства шрифтов пишется с пробелом (а, следовательно, его надо заключать в кавычки), можете узнать, например, здесь: слева в поисковом поле можете "вбить" хоть "sans-serif", хоть "Sans-Serif"... в результате всё равно получите информацию про "Sans Serif" (который без дефисов).
UPDATED: но вы правы, разработчики стандартов CSS также безграмотны, как, к примеру, авторы языка PERL (в котором refeRRer имеет всего одну букву R). Потому шрифт "sans-serif" пишется с дефисом, а шрифт "MS Sans Serif" - без дефиса.
>margin: 0 auto; - имеет смысл и он отличен от margin: 0;
Смысл, разумеется, есть: если 0 - это для top-bottom, а auto - это для left-right
Но не в данном конкретном случае.
Ибо у тега <BODY>, для которого этот стиль прописан, как раз margin-left и margin-right отличаются у всех браузеров. Вряд ли топикстартеру именно нужно, чтобы в броузере Opera отступов слева-справа вовсе не было, а в броузере MSIE, наоборот, был. | |
| |
|
|
| |
|
|
| |
для: CNT
(27.01.2008 в 01:19)
| | | CSS-редакторы предлагают, например:
font-family: "MS Sans Serif", Geneva, sans-serif; | |
| |
|
|
| |
|
|
| |
для: CNT
(27.01.2008 в 01:19)
| | | в опере отступы сохранились, как ни странно.... | |
| |
|
|
| |
автор: oki (29.01.2008 в 09:33) |
|
| |
для: CNT
(26.01.2008 в 22:42)
| | | [url][/url][i][/i] huj>А для прочих браузеров...
>
>1. Поначалу вам придется подучить синтаксис написания правил CSS.
>
>Ибо:
> НЕПРАВИЛЬНО | ПРАВИЛЬНО
>font-family: Century Gothic, sans-serif; | font-family: 'Century Gothic', 'sans serif';
>margin: 0 auto; | margin: 0;
>border: 0; | border: none;
|
>
>
>2. Далее вам надо будет узнать дефолтные значения для свойств объектов.
>Когда вы их узнаете, то поймёте, что половина ваших правил CSS попросту не нужна - вы повторили браузеру то, что он и так имеет.
>
>А именно:
>div
>{
> margin: 0;
> padding: 0;
> border: none;
>}
>.all
>{
> margin: 0;
> padding: 0;
>}
>.top_menu_item
>{
> padding: 0;
>}
>.logo
>{
> margin: 0;
> padding: 0;
> border: none;
>}
>.first_line
>{
> margin: 0;
> padding: 0;
>}
>.first_line_item
>{
> margin: 0;
> padding: 0;
> border: none;
>}
|
>
>
>3. Наконец, вам надо будет разобраться со свойствами position и top.
>Ибо назначать тегу <HTML> значения свойств position: absolute и top: 0 - оно как бы и можно, но вы сможете объяснить - ЗАЧЕМ?:-) | |
| |
|
|
| |
автор: genij (29.01.2008 в 09:35) |
|
| |
для: oki
(29.01.2008 в 09:33)
| | | nihuja nepraveljno, dolbajoby kon4enyje!!!!! Zdohnite suki!!!!!!!1 | |
| |
|
|
