Login
подскажите по блочной верстке
296
NEW 15.08.09 14:56
пытаюсь разобраться с блочной версткой (как я поняла на сегодняшний день самое востребование направление)
начала с элементарной формы: вверху вместо зоголовка картинка, потом две колонки (например меню и текст)
проблема: когда ставлю два блока друг за другом(float:left), исчезает фоновый рисунок (задан повторением по оси У картинки). когда же еще добовляю ко всему этому еще и подвал, фон снова появляется. мистика.
где может быть собака зарыта???
начала с элементарной формы: вверху вместо зоголовка картинка, потом две колонки (например меню и текст)
проблема: когда ставлю два блока друг за другом(float:left), исчезает фоновый рисунок (задан повторением по оси У картинки). когда же еще добовляю ко всему этому еще и подвал, фон снова появляется. мистика.
где может быть собака зарыта???
NEW 15.08.09 16:15
in Antwort katrin_qq 15.08.09 14:56
Случайно не в лисе тестируем?..., а то я в последнее время заметил что в лисе во время отладки стилей, стили гуляют произвольно. Хотя с фоном пока таких проблем не было.
NEW 15.08.09 16:49
in Antwort katrin_qq 15.08.09 14:56
NEW 15.08.09 17:40
in Antwort Poiser 15.08.09 16:49
Poiser, ты в чем верстаешь и тестишь? Случайно не замечал в лисе 3.5 проблемы с временной неправильной обработкой стилей?
Меня честно говоря в последнее время это достало, то нормально выведет, то даёт смещение без видимой причины, и это без изменения стилей, и каких либо других манипуляций. В других браузерах этого нет, всё четко работает. Не могу понять, то ли сама лиса глючит, то ли что из расширений мешает.
Меня честно говоря в последнее время это достало, то нормально выведет, то даёт смещение без видимой причины, и это без изменения стилей, и каких либо других манипуляций. В других браузерах этого нет, всё четко работает. Не могу понять, то ли сама лиса глючит, то ли что из расширений мешает.
NEW 15.08.09 17:59
in Antwort Sergo2008 15.08.09 17:40
Я заметил что FF 3.5 стал немного по-другому рендерить, но изменения совсем не значительные. А так чтобы один раз одно, второй раз другое, я не видел. Может у тебя что-то догружается ещё когда ты смотришь.
Верстаю я в блокноте с подсветкой синтаксиса ;) + FireBug + Firefox Web Developer
Верстаю я в блокноте с подсветкой синтаксиса ;) + FireBug + Firefox Web Developer
Создание сайтов, онлайн-магазинов в Германии
NEW 16.08.09 09:43
Насчет рендеринга это так, есть небольшие изменения, но не настолько чтобы они были сильно заметны.
Возможно придётся переустановить, я его обновляю без переустановки ещё с с самой первой версии 2.0, в том числе и плагины. Проблема появилась с обновлением до версии 3.5, раньше такого не было. В основном грешу на IE Tab, после обновления до 3.5, как то криво работает, но кто знает, что в действительности.
Ну, я тоже с Notepad++, FireBug, Web Developer, + основные браузеры и IETester для проверки.
Лан, ушли от темы, вопрос был про блочную вёрстку.
По теме не припомню чтобы у меня пропадал фон при работе с блоками и float, только если ошибку в пути сделаю.
Код примера, как уже написал Poiser, был бы кстати, что бы сказать где собака порылась.
in Antwort Poiser 15.08.09 17:59
В ответ на:
Я заметил что FF 3.5 стал немного по-другому рендерить, но изменения совсем не значительные.
Я заметил что FF 3.5 стал немного по-другому рендерить, но изменения совсем не значительные.
Насчет рендеринга это так, есть небольшие изменения, но не настолько чтобы они были сильно заметны.
В ответ на:
А так чтобы один раз одно, второй раз другое, я не видел. Может у тебя что-то догружается ещё когда ты смотришь.
А так чтобы один раз одно, второй раз другое, я не видел. Может у тебя что-то догружается ещё когда ты смотришь.
Возможно придётся переустановить, я его обновляю без переустановки ещё с с самой первой версии 2.0, в том числе и плагины. Проблема появилась с обновлением до версии 3.5, раньше такого не было. В основном грешу на IE Tab, после обновления до 3.5, как то криво работает, но кто знает, что в действительности.
В ответ на:
Верстаю я в блокноте с подсветкой синтаксиса ;) + FireBug + Firefox Web Developer
Верстаю я в блокноте с подсветкой синтаксиса ;) + FireBug + Firefox Web Developer
Ну, я тоже с Notepad++, FireBug, Web Developer, + основные браузеры и IETester для проверки.
Лан, ушли от темы, вопрос был про блочную вёрстку.
По теме не припомню чтобы у меня пропадал фон при работе с блоками и float, только если ошибку в пути сделаю.
Код примера, как уже написал Poiser, был бы кстати, что бы сказать где собака порылась.
NEW 16.08.09 21:08
in Antwort katrin_qq 15.08.09 14:56
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title> наш сайт для праксиса </title>
<style type="text/css">
body {
margin:0; /* - отступ от внешних границ - */
padding:0; /* - отступ внутри блока - */
}
#container{
width:100%; /* - ширина блока - */
background: url(fon.png) repeat-y; /* - фоновая картинка, повторяется по вертикали - */
padding : 0;margin: 0; /* - отступы - */
}
#content {
width:59.5%;
/*background-color:#fff;*/
border-width: 3px;
border-style:solid;
padding : 0 0 20px 0;
float:left;
}
#sub-section {
width:20%;
/*background-color:#fff;*/
border-width: 3px;
border-style:solid;
padding : 0 0 20px 0;
float:left;
}
#content p {
font:12px verdana, helvetica, sans-serif;color:#333;
padding : 0 9px 0 9px; line-height:1.5;
}
#sub-section p{
font: 10px verdana,helvetica;
color: darkred;
padding: 5px 5px 5px 5px;
}
/*тот самый подвал, без которого не грузится фон*/
#unten p{
font: 10px;
color: red;
clear:both;
}
span.c1 {
display:none;
}
h1 {
background:url(logo.jpg) no-repeat; /* - вместо заголовка будет картинка - */
height:100px; /* - высота картинки - */
margin:0; /* - отступ - */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><span class="c1">UNSER PRAXIS</span></h1>
</div>
<div id="content">
<h3>SPRECHSTUNDEN</h3>
<p>
Praxis von MIR :))))))))
Blummenstr. 1000
11111 BLABLABLA
Tel: 999-999-999
fax: 999-999-998
mail: qqq@gmail.com
</p>
</div>
<div id="sub-section">
<h4>zusetzliche Information:</h4>
<p>
bei der Unfahl erreichen Sie uns uter Nummer 0151-111-111
</p>
<h4>NOCH:</h4>
<p>
da kann noch etwas geschrieben werden, egal eigentlich was. das spielt jetzt keine Rolle.
</p>
</div>
<div id="unten">
<p>
Da Steht noch was.
</p>
</div>
</div>
</body>
</html>
<head>
<title> наш сайт для праксиса </title>
<style type="text/css">
body {
margin:0; /* - отступ от внешних границ - */
padding:0; /* - отступ внутри блока - */
}
#container{
width:100%; /* - ширина блока - */
background: url(fon.png) repeat-y; /* - фоновая картинка, повторяется по вертикали - */
padding : 0;margin: 0; /* - отступы - */
}
#content {
width:59.5%;
/*background-color:#fff;*/
border-width: 3px;
border-style:solid;
padding : 0 0 20px 0;
float:left;
}
#sub-section {
width:20%;
/*background-color:#fff;*/
border-width: 3px;
border-style:solid;
padding : 0 0 20px 0;
float:left;
}
#content p {
font:12px verdana, helvetica, sans-serif;color:#333;
padding : 0 9px 0 9px; line-height:1.5;
}
#sub-section p{
font: 10px verdana,helvetica;
color: darkred;
padding: 5px 5px 5px 5px;
}
/*тот самый подвал, без которого не грузится фон*/
#unten p{
font: 10px;
color: red;
clear:both;
}
span.c1 {
display:none;
}
h1 {
background:url(logo.jpg) no-repeat; /* - вместо заголовка будет картинка - */
height:100px; /* - высота картинки - */
margin:0; /* - отступ - */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><span class="c1">UNSER PRAXIS</span></h1>
</div>
<div id="content">
<h3>SPRECHSTUNDEN</h3>
<p>
Praxis von MIR :))))))))
Blummenstr. 1000
11111 BLABLABLA
Tel: 999-999-999
fax: 999-999-998
mail: qqq@gmail.com
</p>
</div>
<div id="sub-section">
<h4>zusetzliche Information:</h4>
<p>
bei der Unfahl erreichen Sie uns uter Nummer 0151-111-111
</p>
<h4>NOCH:</h4>
<p>
da kann noch etwas geschrieben werden, egal eigentlich was. das spielt jetzt keine Rolle.
</p>
</div>
<div id="unten">
<p>
Da Steht noch was.
</p>
</div>
</div>
</body>
</html>
NEW 16.08.09 21:13
in Antwort katrin_qq 15.08.09 14:56
насколько я понимаю радом с документом теперь надо положить любой граф файл с названием fon.png
ну и подвал если убрать, то этот самый fon грузиться не будет.
хотя может действительно дело в браузере. работаю действительно в FF
ща буду в других тестить. но как то все равно странно. :(
(кстати, не пинайте за оформление, это мои первые в жизни попытки написать сайт. когда допишу - выложу для пинания :)))
а пока я только учусь)
ну и подвал если убрать, то этот самый fon грузиться не будет.
хотя может действительно дело в браузере. работаю действительно в FF
ща буду в других тестить. но как то все равно странно. :(
(кстати, не пинайте за оформление, это мои первые в жизни попытки написать сайт. когда допишу - выложу для пинания :)))
а пока я только учусь)
NEW 16.08.09 21:26
in Antwort katrin_qq 16.08.09 21:08
Разбираться лень, ибо в примере много несущественных деталей, пример неотформатирован и проблемы не сформулированы чётко. На будущее:
0. Используйте тег pre для форматирования кода.
1. Используйте doctype-declaration. Лучше всего HTML 5 (<!doctype html>), ибо он включает стандартный рендеринг во всех браузерах.
2. Используйте резет-стили ( http://meyerweb.com/eric/tools/css/reset/ ) для нормализации рендеринга в различных браузерах.
3. Не используйте лишние классы. Используйте вместо них селекторы. В данном случае класс C1 излишен.
4. При показе кода здесь минимизируйте код, чтобы изолировать проблему и облегчить нам понимание кода. Нам абсолютно не нужны в коде стили для шрифтов и подобная мишура.
0. Используйте тег pre для форматирования кода.
1. Используйте doctype-declaration. Лучше всего HTML 5 (<!doctype html>), ибо он включает стандартный рендеринг во всех браузерах.
2. Используйте резет-стили ( http://meyerweb.com/eric/tools/css/reset/ ) для нормализации рендеринга в различных браузерах.
3. Не используйте лишние классы. Используйте вместо них селекторы. В данном случае класс C1 излишен.
4. При показе кода здесь минимизируйте код, чтобы изолировать проблему и облегчить нам понимание кода. Нам абсолютно не нужны в коде стили для шрифтов и подобная мишура.
NEW 16.08.09 21:45
Проблема в том что если нет подвала, то блок container схлопывается. В подвале есть clear:both; который не даёт ему это сделать.
Если вы добавите внизу вашего container что-то типа <br clear="all" />, то всё будет хорошо.
Объяснил не научно, но популярно. Что как и почему ищете сами!
in Antwort katrin_qq 16.08.09 21:13
В ответ на:
проблема: когда ставлю два блока друг за другом(float:left), исчезает фоновый рисунок (задан повторением по оси У картинки). когда же еще добовляю ко всему этому еще и подвал, фон снова появляется. мистика.
проблема: когда ставлю два блока друг за другом(float:left), исчезает фоновый рисунок (задан повторением по оси У картинки). когда же еще добовляю ко всему этому еще и подвал, фон снова появляется. мистика.
Проблема в том что если нет подвала, то блок container схлопывается. В подвале есть clear:both; который не даёт ему это сделать.
Если вы добавите внизу вашего container что-то типа <br clear="all" />, то всё будет хорошо.
Объяснил не научно, но популярно. Что как и почему ищете сами!
Создание сайтов, онлайн-магазинов в Германии
29.08.09 21:00
in Antwort katrin_qq 15.08.09 14:56
