Вид для печати
Начал вестать с помощью CSS и боксов. Все вроде бы гут, но если сильно увеличить шрифты (В FireFox - второй ряд картинок съежает вниз). Из-за чего это происходить и как это предотвратить? Спасибо.
[Only registered and activated users can see links. Click Here To Register...]
З.Ы. Сильно по почкам не бейте. Все таки первый раз блочно верстаю.
Видимо, Вы пока еще не до конца прониклись блочными принципами...
Несмысловые изображения (графические изображения декоративного характера) необходимо задавать фоном, а не тэгом <img>. Почаще смотрите свою верстку с отключенными стилями...
А [Only registered and activated users can see links. Click Here To Register...] так... В догонку...
Т.е. картинки - фон бокса <div>. Понял. А что должно быть, если отключить стили?
Четкая логическая структура должна пред Вами предстать.
И ничего лишнего, т.е. без всяких там оформительских картиночек...
Посмотрите с отключенными стилями [Only registered and activated users can see links. Click Here To Register...]
Сразу все станет понятно.
Понятно. Еще вопрос. Если мне нужно две картинки втулить в ряд. Если я ставлю так:
<div id="head1"></div>
<div id="head2"></div>
то вторая будет с новой строки. А как сделать, чтобы два бокса шли в ряд?
Отризательные отступы могут решить проблему?
З.Ы. Aykroyd - ты что один тут отвечаеш на вопросы?)
[/quote]Цитата:
Originally posted by KukMan@Apr 19 2007, 22:13
Понятно. Еще вопрос. Если мне нужно две картинки втулить в ряд. А как сделать, чтобы два бокса шли в ряд?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Зафлоатить их направо или налево...
В зависимости от того, в какую сторону изначально предполагается...
[/quote]Цитата:
Originally posted by KukMan@Apr 19 2007, 22:13
Отризательные отступы могут решить проблему?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Если Вы имеете в виду margins – я предпочитаю обзывать их полями, а не отступами... Отступы в моем понимании – это paddings... (не претендует на истину и не требует оспаривания) Как правило, отрицательные извращения излишни... Флоатами все намного проще...
[/quote]Цитата:
Originally posted by KukMan@Apr 19 2007, 22:13
З.Ы. Aykroyd - ты что один тут отвечаеш на вопросы?)
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Иногда. Пользуйтесь случаем, пока я добрый... ))
Только посты не плодите друг за дружкой... Есть кнопка "правка"...
"Четкая структура логическая должна пред тобой предстать. И лишнего ничего на ней не должно быть. С отключенными стилями на картинку смотри на [Only registered and activated users can see links. Click Here To Register...]. Сразу понятно все станет тебе и прозреешь ты..."
Aykroyd, предлагаю поменять [Only registered and activated users can see links. Click Here To Register...]... [Only registered and activated users can see links. Click Here To Register...]
KukMan, напрмер так часто поступают с пунктами меню, оформленного в виде списка; ну и вообще для того, чтобы сделать список горизонтальным:
и типа того...Код:[list]
*[*]
*[*]
[list]
...
li {
*display : block;
*float : left;
}
li a {
*display : block;
*width : 100%;
*height : 100%;
*background : url('фоновая картинка') repeat-x top;
*...
}
Ок. спасибо. Буду мучать дальше.
Насчет постов - принял к сведению.
Проблема с IE есть. (как всегда). Можно ли указать свойства дива именно для IE, которое не влияло б на другие браузеры. Т.е. сначала ставлю для других браузеров (по умолчанию), а потом именно для ИЕ, которое должно заменить вышеуказанное?
(решено. * html и элемент)
[/quote]Цитата:
Originally posted by null@Apr 19 2007, 23:15
Aykroyd, предлагаю поменять [Only registered and activated users can see links. Click Here To Register...]... [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Как скажешь... [Only registered and activated users can see links. Click Here To Register...]
или селектор прямого потомка "элемент>элемент"Цитата:
Originally posted by KukMan@Apr 19 2007, 22:16
[b](решено. * html и элемент)
Насколько я читал, ИЕ не понимает свойства min-height. А с min-width никаких запар нет? или придется пользоватся каким-то хаком?
[/quote]Цитата:
Originally posted by KukMan@Apr 19 2007, 23:55
Насколько я читал, ИЕ не понимает свойства min-height. А с min-width никаких запар нет?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Тоже не понимает.
[/quote]Цитата:
Originally posted by KukMan@Apr 19 2007, 23:55
или придется пользоватся каким-то хаком?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Придется пользоваться скриптом.
Уверен, что один новоиспеченный Джедай сейчас расскажет Вам об этом поподробнее... )
Вот мой последний результат - travu.ru. Два вопроса.
Как мне управлять положением текста в меню (#top_menu) (хочу сделать отступ слева и сверху. Делается всего блока.)
Как мне деть большие отступы в IE (holly hack не помагает (там указан)). Собственно все
Цитата:
Originally posted by KukMan@Apr 19 2007, 19:13
Понятно. Еще вопрос. Если мне нужно две картинки втулить в ряд. Если я ставлю так:
<div id="head1">
<div id="head2"></div>
то вторая будет с новой строки. А как сделать, чтобы два бокса шли в ряд?
Отризательные отступы могут решить проблему?[/quote]
Для тебя сейчас самое главное понять разницу между строковым и блочным элементов и суть методов разметки. поищи в этом разделе темы, которые создал я. такие же вопросы были у меня полгода/год назад и там даны ответы.
display : block; здесь лишний, т.к. li является по дефолту блочным элементомЦитата:
Originally posted by KukMan+Apr 19 2007, 19:13--><div class='quotetop'>Цитата(KukMan @ Apr 19 2007, 19:13)</div>он Папа :new_russian:Цитата:
З.Ы. Aykroyd - ты что один тут отвечаеш на вопросы?)[/b]
<!--QuoteBegin-null@Apr 19 2007, 20:15
KukMan, напрмер так часто поступают с пунктами меню, оформленного в виде списка; ну и вообще для того, чтобы сделать список горизонтальным:
и типа того...Код:[list]
*[*]
*[*]
[list]
...
li {
*display : block;
*float : left;
}
li a {
*display : block;
*width : 100%;
*height : 100%;
*background : url('фоновая картинка') repeat-x top;
*...
}
[/quote]Цитата:
Originally posted by null@Apr 19 2007, 20:49
или селектор прямого потомка "элемент>элемент"
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
это не для IE, а для скрытия правила от IE6 и ниже, пояснятйте, иначе начинающему не будет понятно.
конструкция позволяет скормить правило FF, IE7, Opera 8-9, а IE6 и ниже проигнурируютКод:html>body любой селектор {правило}
[/quote]Цитата:
Originally posted by KukMan@Apr 19 2007, 21:30
Вот мой последний результат - travu.ru. Два вопроса.
* Как мне управлять положением текста в меню (#top_menu) (хочу сделать отступ слева и сверху. Делается всего блока.)
* Как мне деть большие отступы в IE (holly hack не помагает (там указан)). Собственно все
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
совет №1. избавься от 3х блоков в шапке сайта. это архаизм табличной верстки, сейчас так никто изображения не режет, просто поверь на слово, что лучше, все одной картинкой сделать (лень писать).
№.2 padding внтури li, margin между li
3. можно в правиле перед свойством поставить / , например /color: #000; тогда это правило поймут только IE6-7
Так лучше все одним рисунком забабахать? Если можно, то это существенный плюс:)
Насчет display:block. Я долго думал, почему у меня не растягивается на весь блок фон. И потом пришел к выводу, что пропустил вот эту строчку, хоть и пользовался списками.
display:block нужен для ссылки (a), но не для пункта списка (li)
а. теперь понял
Мне кажется, что использование блочной верстки в конечном итоге намного легче, чем с табличной. Меньше просидишь на проблемах отдельных браузеров, и больше возможностей
[/quote]Цитата:
Originally posted by KukMan@Apr 20 2007, 01:54
Мне кажется, что использование блочной верстки в конечном итоге намного легче, чем с табличной.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Если только в конечном итоге, да и то далеко не всегда...
[/quote]Цитата:
Originally posted by KukMan@Apr 20 2007, 01:54
Меньше просидишь на проблемах отдельных браузеров
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Больше просидишь на проблемах отдельных браузеров.
При использовании табличной модели этих проблем практически нет.
[/quote]Цитата:
Originally posted by KukMan@Apr 20 2007, 01:54
и больше возможностей
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Главное – это понять для ЧЕГО эти возможности...
1.Хотлеось бы услышать мнение Aykroyd'a по поводу одной большой картинки. Ничего негативного не будет, если я поставлю одну большую картинку?.
2. И где мне найти этот скрипт для указания минимальной ширины окна для осла?
3. Во, осел... [Only registered and activated users can see links. Click Here To Register...]. нужно, чтобы линия в заголовке продолжалась до конца документа. Поступил как написано на странице про float'ы ([Only registered and activated users can see links. Click Here To Register...])(где одна колонка фиксированной ширины, а вторая растягивается). Так вот, в FF все гут, а вот в осле - переходит на новый ряд. ИМХО, нужно, чтобы флоат проваливался, но если убрать overflow:hidden; в родительском боксе - то вобще ужос получается.
4. Стоит мне ставить Opery, если у мну есть FF для просмотра страницы?
[/quote]Цитата:
Originally posted by KukMan@Apr 20 2007, 17:09
1.Хотлеось бы услышать мнение Aykroyd'a по поводу одной большой картинки. Ничего негативного не будет, если я поставлю одну большую картинку?.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Это куда?
[/quote]Цитата:
Originally posted by KukMan@Apr 20 2007, 17:09
2. И где мне найти этот скрипт для указания минимальной ширины окна для осла?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Код://min-width for IE
var d = document;
var winIE = (navigator.userAgent.indexOf("Opera")==-1 && (d.getElementById && d.documentElement.behaviorUrns)) ? true : false;
function bodySize() {
if(winIE && d.documentElement.clientWidth) {
sObj = d.getElementsByTagName("body")[0].style;
sObj.width = (d.documentElement.clientWidth<1000) ? "1000px" : "100%"; }}
function init() {
if(winIE) {bodySize(); }}
onload = init;
if(winIE) {onresize = bodySize;}
[/quote]Цитата:
Originally posted by KukMan@Apr 20 2007, 17:09
4. Стоит мне ставить Opery, если у мну есть FF для просмотра страницы?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Особых различий в отображении между FF и Оперой мало. Но если собираетесь заниматься версткой профессионально – рекомендую поставить...
ie при float удваивает значение margin либо для IE закройте хаком уменьшенное на 2 значение либо display: inline исправляет это. конечно все это работает, если причина именно в margin
Скорее всего, причина не в маргине. А можно указать размер объекта так. 100%-824px? Если ставить размер, меньший за размер экрана - все пучкем, только не до конца линия. а нужно, чтобы до конца была
ЧТО, никто не знает, что за параша у меня?
И еще вопрос, а почему именно дивы? можно использовать и P и еще какието теги-боксы.
[/quote]Цитата:
Originally posted by KukMan@Apr 20 2007, 16:19
Скорее всего, причина не в маргине. А можно указать размер объекта так. 100%-824px? Если ставить размер, меньший за размер экрана - все пучкем, только не до конца линия. а нужно, чтобы до конца была
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
скрестя пальцы, будем ждать вот такой фишки в CSS
[Only registered and activated users can see links. Click Here To Register...]Код:#mainContent {
width: calc(100% - 200px)
}
А сколько ждать? Это б очень облегчило задачу.
Может какимито другими способами поставить ту линию? Абсолютным позиционированием?
ошибку нашел. у меня было два свойства #line (одно старое, второе новое). Теперь все гут, но есть одно "но".
Мне нужно поставить высоту #content. Если я это сделаю (height: 63px;), то в осле появляется непонятный отсутп в 3 пикселя. Никакими отрицательными маргинами не лечится. Что мне делать?Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Main</title>
<STYLE TYPE="text/css">
#sidebar {
*float:left; width:824px; height: 221px;
*background-color: black;
*margin:0px; *padding: 0px;
}
#content {
*background-color: red;;
*margin: 158px 0px 0px 824px;
}
#title {
*overflow:hidden;
}
</STYLE>
</head>
<body>
<div id="title">
*<div id="sidebar">
* *
*</div>
*<div id="content">
* *
*</div>
</div>
</body>
</html>
[Only registered and activated users can see links. Click Here To Register...]
Пасибки;)
Фух. Закончил. Если бы не Вы - еще б парился б минимум месяц. Можете посмотреть на сие чудо по адерсу [Only registered and activated users can see links. Click Here To Register...]. На всех разрешениях вплоть до 800х600 тестировалось. В ИЕ и в ФФ гут (в Опере не смотрел). Так что, ваше мнение. Спасибо еще раз.
Теперь зато в FF кривизна... ))
О вспомнил. На радостях забыл спросить об этом косяке. Истинной причины его я не вижу. Может там проблелы перед переносами или еще чтото. как это устранить?
[/quote]Цитата:
Originally posted by KukMan@Apr 21 2007, 21:59
Фух. Закончил. Если бы не Вы - еще б парился б минимум месяц. Можете посмотреть на сие чудо по адерсу [Only registered and activated users can see links. Click Here To Register...]. На всех разрешениях вплоть до 800х600 тестировалось. В ИЕ и в ФФ гут (в Опере не смотрел). Так что, ваше мнение. Спасибо еще раз.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
обязательно смотри, как выглядит сайт при отключенном CSS, формы принято брать в fieldset, и обязательно должно присутствовать название или лого сайта.
пример можешь посмотреть здесь [Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by KukMan@Apr 22 2007, 01:07
О вспомнил. На радостях забыл спросить об этом косяке. Истинной причины его я не вижу. Может там проблелы перед переносами или еще чтото. как это устранить?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
у тебя здесь стоит margin, а т.к. блок не тянется по вертикали, то и этот margin присутствует только по высоте блока.Код:#sections {style.css (line 42)
float:left;
margin-right:15px;
width:205px;
}
Увидел, исправил.Цитата:
у тебя здесь стоит margin, а т.к. блок не тянется по вертикали, то и этот margin присутствует только по высоте блока.
Как это сделать?Цитата:
формы принято брать в fieldset
Смотрел, отлично выглядит. Только вопрос. Можно так делать т.е. чтобы между тегами ничего не было, или обязательно пробел нужно ставить?Цитата:
обязательно смотри, как выглядит сайт при отключенном CSS,
[quote]обязательно должно присутствовать название или лого сайта.[/QUOАTE]
А для чего? Ну я думал текст "Лекарственный Растения" сделать текстом.
Если для удобного просмотра без стилей, можно написать лого и поставить display:none. При отключении стилей будет показываться.
т.е. чтобы между тегами ничего не было, или обязательно пробел нужно ставить?[/quote]Цитата:
Originally posted by KukMan+Apr 22 2007, 10:51-->я не зря дал ссылку на одну из своих работ, посмотри на нее без CSS и на свою работы и поймешь, как брать в fieldset формы и почему нужно название сайта.Цитата:
Смотрел, отлично выглядит.
<!--QuoteBegin-KukMan@Apr 22 2007, 10:51
[b]Только вопрос. Можно так делать <div id="class">
лучше поставить пустой коммент
Код:<!-- -- >
да, display: none либо замена картинки текстом, но не в твоем случае.Цитата:
Originally posted by KukMan@Apr 22 2007, 10:51
[b]А для чего? Ну я думал текст "Лекарственный Растения" сделать текстом.
Если для удобного просмотра без стилей, можно написать лого и поставить display:none. При отключении стилей будет показываться.
Исправил все... Даже прошел валидацию:)
вот, это уже другой разговор, ты все ближе к идеалу в плане верстки.
могу еще дать совет. есть такая конструкция тэгов
это так называемый список определений. так вот конструкцию с фоткой растения, его названием и описанием семантически верно запихнуть в такую конструкцию, тогда опять же при отключенном CSS контент будет выглядеть более структурировано.Код:<dl>
<dt></dt>
<dd></dd>
</dl>
Поподробнее, если можно, плиз.
KukMan
Можно, конечно. Но хоть разок, хоть ради приличия, загляните в Спецификацию, а?
Если собираетесь верстать с более-менее завидной постоянностью, ее все равно прочитать придется... )