Рекомендованные сообщения

Кароч - может у меня чойто - но только когда ширина =1260 вместо 1280 по разрешению, только тоды полоса прокрутки пропадает.

О как!

Изменено пользователем andrew1978

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

andrew1978,

а зачем так делать? а если пользователь сидит на разрешении 800*600?

я думаю 100% спасут тебя :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Я думаю это должно еще высвободить пару пикселей:

<body style="margin: 0px 0px 0px 0px">

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Вот такой вопрос.105.gif

Как в одном столбике разместить 2 картинки, чтоб при значении width="100%", то есть Y-100%, одна картинка была вверху-top, а другая внизу-bottom?

Меж ними стоит br. При этом в свойство столбика стоит фоновое изображение repeat-y.

 

Кто знает, просьба отписать свой вариант кода, а то ваще ни че не идет в голову. 93.gif

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

LEONeso, поставь внутрь табличку

<table height=100% border="0" cellpadding="0" cellspacing="0"><tr><td valign=top>1 картинка</td></tr><tr><td valign=buttom>2 картинка</td></tr></table>

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

это не должно мешать вообще

Изменено пользователем RPG

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

LEONeso, поставь внутрь табличку

<table height=100% border="0" cellpadding="0" cellspacing="0"><tr><td valign=top>1 картинка</td></tr><tr><td valign=buttom>2 картинка</td></tr></table>

 

это не должно мешать вообще

417.gif Нет, мне не нужен громоздкий код.

 

Все состоит из таблицы 3х3 по три столбика в три ряда. Вот эти две картинки стоят в первом ряду второго столбика с лева, которые разделены <br>, нужно прописать в css, чтобы первая картинка была все время вверху, а вторая внизу, при этом фон данного столбика уже залит текстурой по Y.

 

Высота всей конструкции равна свыше 300px, данные 3 блока, которые стоят во втором ряду, имеют возможность расширяться, как "плюс", во все 4 стороны. Тем самым и блоки, которые стоят в первом и последнем ряду по середине умеют расширяться на все 100%.

 

Вот, что мне всего лишь нужно сделать. Просто задать позиции для верхней картинки прилипнуть к верху блока, а нижней к нижней части блока.379.gif

Если ктонить знает ответ на этот вопрос, просьба отписать свой вариант ответа.88.gif

 

 

Вот пример выше описанного.

post-20293-1182984367_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

одну картинку вставляешь в левый верхний угол, другую - в левый нижний. задаёшь для них position:absolute и отступами выравниваешь как нужно...

с правой стороной - аналогично.

 

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

 

 

ps: где таких весёлых смайликов надыбал? :censored:

 

pps: если не хочешь "громоздки код", который в данном случае неизбежно получится - можешь применить xslt, как тут: http://dark-demon.nm.ru/web/samples/xhtml/....xml#borderskin

Изменено пользователем Dark-Demon

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

одну картинку вставляешь в левый верхний угол, другую - в левый нижний. задаёшь для них position:absolute и отступами выравниваешь как нужно...

с правой стороной - аналогично.

 

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

ps: где таких весёлых смайликов надыбал? ;)

 

pps: если не хочешь "громоздки код", который в данном случае неизбежно получится - можешь применить xslt, как тут: http://dark-demon.nm.ru/web/samples/xhtml/....xml#borderskin

Я пытался позиционировать все текстуры через абсолют, но не выходит, они не прилипают в низу и к верху, если можно, то ссылку на xslt учебник или еще ченить типо статьи с примерами. ДУмаю полезная вещь для верстки 308.gif

 

ps: где-где там где и все :D у себя на сайте. Я ведь тут не просто так шив аюсь. :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
если можно, то ссылку на xslt учебник или еще ченить типо статьи с примерами.
в правом столбце есть все необходимые ссылки. только с кроссбраузерностью есть некоторые нюансы, поэтому за основу лучше взять http://dark-demon.nm.ru/web/samples/xhtml/main.xsl и делать по аналогии.

 

Я пытался позиционировать все текстуры через абсолют, но не выходит
ну показывай, что застряло :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Пацаны...Блин,забыл HTML код на то чтобы поставить JPG картинку на фон...Кто подскажет? И так чтобы она просто растянулась на екран а не "Замостилась" по всему экрану...плиз хелп!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Пацаны...Блин,забыл HTML код на то чтобы поставить JPG картинку на фон...Кто подскажет? И так чтобы она просто растянулась на екран а не "Замостилась" по всему экрану...плиз хелп!

Вроде так можно сделать =)

style="backgroud: url("ссылка") repeat; z-index: 0; "

 

Вроде так, эту феньку можно вставить сразу в <боди> или куда нить еще td к примеру. Это css.

repeat-x рисунок повторяется по горизонтали

repeat-y рисунок повторяется по вертикали

repeat рисунок повторяется по x и y (по умолчанию)

no-repeat и так все понятно, что он не повторяется вообще, как есть так и стоит.

Позиционирование.

z-index: 0; приоритет слоя изменяешь 0 на более высокую цифру. Так можно задать к примеру тексту быть поверх картинки. Фон он и так в самой Ж стоит.

backgroud-scroll; изображение прокручивается вместе со страницей - разблокировано.

backgroud-fixed; изображение блокировано.

backgroud-position: 50% 40% в данном примере картинка располагается в %(pr) можно в cm и px, но еще можно и в top (верх), bottom (низ), left (лево), right (право).

--- Я сам еще плохо в css и не смею тебя учить иди лучше книжку почитай.

 

А вот через thml

 

backgroud="ссылка" 

 

Вставляешь куда нить там в <td сюда> или в тело страницы <body> и т.п. Растянуть картинку думаю не выйдет. Хотя хз я такое не делал. Хотя ,что понимать под словом "растянуть".

 

А лучше иди учи html сюда.

Изменено пользователем LEONeso

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Пацаны...Блин,забыл HTML код на то чтобы поставить JPG картинку на фон...Кто подскажет? И так чтобы она просто растянулась на екран а не "Замостилась" по всему экрану...плиз хелп!

еще попробуй

Фоновые изображения в HTML

Фон, это та же картинка, только загнанная под текст и другие картинки. Фон нельзя выделить мышкой, в отличие от картинок, выделяемых вместе с текстом. В этом одновременно его преимущество и недостаток - в некоторых случаях. Фон простирается в пределах тега таблицы или же всей странички, если указан в теге <body>. Первое, конечно, предпочтительнее.

Прописываем фон:

<td background="/картинка фона.gif">

- фоном может быть любая картинка. Вот только став фоном она приобретет интересные возможности.

Например, как вы думаете сделаны дырдочки по краям этого клетчатого "листа"? Это не длинная картинка, это один небольшой квадратик с одной "дырочкой". Просто, как и всякий фон, он многократно размножается по всей площади наделенного фоном тега. Так же сделана и тень от листа - темная полоска по краю - это всего лишь состоящий из четырех-пяти точек (пикселей) микрорисуночек.

Естественно, если я бы не назначил четкую ширину полям с этим фоном, у меня бы получилось тиражирование фонового изображения не только вверх, но и в стороны:

 

а поверх фона можно чего-нить написать!

главное, чтобы фон это не перекрывал

 

 

- вот он, этот самый фон. Кто особо любопытен, может попробовать сохранить его как картинку :0) Если получится. Конечно, придется покопаться в коде - если у вас Ехплорер :0) Ну а счастливым владельцам Мозиллы конечно достаточно глянуть "состав HTML", чтобы увидеть всю задействованную в нем графику с соответствующими линками.

В чем удобство фона, кроме многими ругаемого "украшательства"? Да в том, что правильно подобранный фон, мелкие, не затрудняющие загрузку детали-"примочки" и прочее, что у нас принято именовать гордым словом "дизайн", призвано скрасить однообразие, облегчить восприятие и вообще... С ним приятнее. Хотя, конечно, и без него можно обойтись. Модно просто назначить таблице какой-либо однотонный цвет и довольствоваться этим. Фоном не стоит злоупотреблять - оптимально, чтобы вся графика на странице, все украшательства не весили больше 30 кб. И то это много... У меня, например, все эти бирюльки-дырочки, клетчатый фон и прочее весит чуток более 8 кб. Лишняя секунда загрузки практически не заметна, а глаз не "тонет" в пустоте белого, серого или черного фона. Фон, как и картинки, можно сделать анимированным, например, флэшем, но для начала лучше .gif`ом, поскольку он наиболее прост и легок в изготовлении.

Да, если вы столкнетесь с неумелым использованием фона и текст, на нем расположенный, будет трудночитаем, советую его просто выделить мышкой и читать в темном выделении - увы, только так можно спасти свои глаза от надругательства многими современными "вебмастерами".

Из фона можно изготавливать и рамочки и уголки к ним - закругленные, завернутые и всяко-разные другие. Главное, не переборщить с наворотами, чтобы они не оттягивали на себя чересчур много внимания - особенно это касается частенько встречающейся назойливой непрекращающейся анимации всем давно опостылевшего файла с анимашкой, который можно найти на сотнях тысяч дилетантских страничек начинающих вебоделов.

Совет - фон старайтесь ориентировать либо вертикально, либо горизонтально. Это упростит растягивание в ту или иную сторону, чтобы дизайн наш при стискивании или растягивании окошка не "плыл".

При назначении фона вполне можно ограничиться картинкой со стороной 1 пиксель на 5-15.

Конечно, кроме перечисленных свойств, у фоновых изображений огромное количество возможностей, но подробности - в разделе "стили"

 

или это

Картинки в HTML

Картинки вставляются тегом <img src="/путь к картинке/название картинки . расширение картинки">.

Тег этот не "контейнерный", посему в закрывающей части не нуждается. Располагая этот тег внутри классической гиперссылки, мы можем добиться, чтобы при тычке по картинке осуществлялся переход по ссылке:

Код, использованный в картинке:

<a href="куда переходим при нажатии">

<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left"></a>

То есть картинка - не что иное, как обычная ссылка, в которую вставляется код с адресом и параметрами картинки:

 

<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left">

 

Все задействованные в коде теги вам уже без сомнения встречались в предыдущих главах, за исключением разве что hspace и vspace - эти два тега тоже не являются обязательными, но при их наличии вокруг картинки образуется отступ в соответствующее количество пикселей от текста. Согласитесь, это намного проще, чем вымучивать эти пробелы при помощи таблиц, пробелов и слоев или же вообще лепить текст впритык к картинке... Вокруг картинки при помощи border="1" можно соорудить элегантную рамочку, а при необходимости (если очень лень или по стратегическим замыслам) изменить размеры отображения картинки при помощи все тех же width и height - если указать в них меньшие размеры, чем реально у картинки, можно вписать ее в любой практически дизайн.

Зачем это нужно? Почему бы не обрезать картинку графическим редактором - что намного более практично?!

Рассмотрим минусы занижения размеров картинки при помощи HTML:

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

- картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное.

теперь плюсы занижения размеров:

- картинку можно вписать в дизайн, пожертвовав парой сантиметров, а при копировании ее на винт она сохранит свои размеры.

Это нужно в редких случаях, когда вы вывешиваете картинку размерами большими, чем разрешающая способность монитора посетителя. И картинку в дизайн впишем и сохранится она на все 2040 на сколько там положено.

 

Теперь - редко где используемая, но вполне приятная технология наложения на одну картинку нескольких ссылок, - в зависимости от той области, на которую тыкаем и осуществляется переход. В чем-то эта технология экономична и удобна, в чем-то, как и всякий инструмент, - непрактична и неудобна. Но оценку можно ставить только в каждом конкретном случае. Поэтому я все же остановлюсь на ней подробнее:

Берется изображение:

Нажав на левую половинку, переходим на Google.ru, нажав на правую - переходим на мой сайт.

Как это реализовано?

Читаем код:

первая часть включается в тег картинки:

 

<img src="наша картинка.jpg" usemap="#Map">

далее, где-нибудь внизу, или в самом начале страницы, но в пределах тега <body> добавляем собственно "карту ссылок", как называется эта технология:

 

<map name="Map">

<area shape="rect" coords="2,2,60,74" href="ссылка на Google.ru">

<area shape="rect" coords="61,4,112,76" href="ссылка на мой сайт">

</map>

 

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

Естественно, мы можем добавить к этим двум областям и третью строку, и четвертую, и сколько угодно. Принцип чтения этого кода бродилкой, как обычно, сверху вниз. Поэтому, если ваши области чуточку перекрываются, то та, что прописана в первой строке, будет лежать "сверху", чем та, что прописана строкой ниже.

Как задаются координаты? Координаты задаются отсчитывая от левого верхнего угла картинки по пикселу в направлении левого верхнего угла и правого нижнего угла. В нашем случае, у первой картинки отступ 2 пиксела слева и сверху у 1 контрольной точки, а правый нижний угол, соответственно, отстоит от левого верхнего угла картинки на 60 слева и 74 пиксела сверху. Алгоритм понятен? Для тех, кто не допер, повторюсь: координаты левого верхнего угла задаваемой области относительно левого верхнего угла картинки + координаты правого нижнего угла области относительно все того же верхнего левого угла картинки. (Здорово! Даже я понял!) Конечно, вручную это все высчитывать долго и муторно. Гораздо проще воспользоваться одной из специальных программ, автоматизирующих все рутинные процедуры. Вот например, в DreamWeaver MX есть такая функция в виде простого "растягивания" области над картинкой и назначения ей ссылки. Никаких цифр при этом вводить не нужно - программа считает все сама. От вас требуется лишь ПОНИМАТЬ что творится в коде и уметь распознать эту фичу в коде других страничек, если когда-либо вам потребуется разобраться в устройстве других сайтов.

Координатные карты могут быть не обязательно квадратными - можно задать область-окружность или произвольную область со сложным изломанным контуром.

Рассмотрим работу с окружностью:

Повозив курсором над этой картинкой, вы можете увидеть, что область внутри лупы, сквозь которую смотрит глаз ведет на один сайт, а вся остальная (за редкими "просветами") - ведет на другой сайт.

В первом случае зона задана окружностью, во втором - многоугольником. Смотрим код:

<img src="наша картинка.jpg" usemap="#Map2"> - строка тега картинки изменяется только в имени карты координат. Полагаю, уже все додумались, что одинаковые имена элементов в пределах одной странички недопустимы. Это касается, кстати говоря, и якорей.

А вот в вынесенных отдельно координатных тегах у нас изменения более заметные:

<map name="Map2">

<area shape="circle" coords="84,28,26" href="http://google.ru/">

<area shape="poly" coords="65,3,51,41,78,58,109,48,110,71,7,75,4,6,34,5" href="http://srez.ru/">

</map>

 

Первая строчка, как вы уже наверняка догадались, не что иное, как тот самый круг (в теге area shape указано "circle", что по-английски будет "окружность"). Координаты у нее высчитываются по методу определения центра окружности - это первые две цифры, а третья цифра - это радиус нашей окружности. Именно радиус, а не диаметр! (Для тех, кто в танке поясняю - радиус, это расстояние от ЦЕНТРА окружности до ее края. Центр в свою очередь - это та точка, которая равноудалена от любой точки на краю окружности)

 

Вторая строка кода - это наша многоугольная область, заполняющая большую часть свободного пространства вокруг окружности. В теге area shape у нее значится "poly", что означает многоугольник. Координаты тут вычисляются парами цифр (расстояние от левого и расстояние от верхнего краев). Каждой точке соответствуют две координаты. Точек может быть сколь-угодно большое множество, но злоупотреблять не стоит - "срубайте" углы, упрощайте систему - незачем громоздить жуткоплавные изгибы только для красоты. Поверьте, примерной разметки на скорую руку тут вполне хватит. Как только точек становится больше трех, наш потенциальный многоугольник становится треугольником. Ссылка, ему назначенная, будет срабатывать между точками. Если добавить еще одну точку (четвертую), но расставить их так, чтоб эти самые точки как бы пересекали собственные соединительный линии, то фигура может превратиться в подобие двух треугольников, сросшихся углами:

На этом про картинки пока что все... Листаем дальше.

вот вроде работает а там хз.________.rarвот 2 книжки не плохие!

цитаты взяты от тудо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

В копилочку, мало ли, кто будит искать, так вот.

Чтоб не писали по сто раз ответы на идентичные вопросы, вот все как нужно.

---

Музыка фоном

 

<bgsound src="URL" loop=5 volume=0 balance=0>

 

Где

  • URL - Имя файла
  • Loop - кол-во повторов, если loop="infinite" - то бесконечно

Формат - .wav .mid

 

Тег EMBED

Применяется при внедрении в страницы мультимедиа содержимого и других файлов.

 

<EMBED атрибуты> </EMBED>

  • height задает вертикальный размер, вставляемого объекта
  • width задает горизонтальный размер, вставляемого объекта
  • autostart задает возможность запуска при загрузке, принимает значения true или false
  • loop задает количество повторений, принимает значения true или false
  • hidden позволяет скрыть подключаемый модуль, принимает значения true или false
  • src указывает на URL мультимедиа файла
  • pluginspage указывает на URL плагина для проигрывания мультимедиа файла
  • bgcolor задает фон объекта
  • type указывает на тип мультимедиа файла
  • quality указывает на качество мультимедиа файла
  • alt задает альтернативное содержание

<EMBED src="file.swf" menu="true" quality="high" bgcolor="#000066" width="760" height="410" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave"></EMBED>

Как видите из примера вставлять можно и Flesh файлы, а также видео аудио.

 

Можно вообще написать с минимальным количеством атрибутов

<embed src="video.avi" width="760" height="410">

 

Музыка всплывающем (новом) окне

Тоже особо ничего сложного нету, используем JavaScript

 

На странице где у Вас будет кнопка "Включить музыку" между тегами <head> добовляем следующий код

<script>
function openWindow()
{
 muzWindow = open("http://адрес сайта/myzon.html", "newWindow", "width=300,height=300, status=no, toolbar=no, menubar=no");
}
</script>

  • width=300 height=300 - Высота ширина
  • http://адрес сайта/myzon.html - ссылка на страницу где будет ваша музыка

Далее влюбом месте на странице, вы ставите либо ссылку

 

<a href="#" onClick="openWindow()">Нажми что включить музыку</a>

 

Либо кнопку

 

<button onClick="openWindow()">Нажми что включить музыку</button>

---

<EMBED src="ссылка на файл" showcontrols="false" quality="high" type="video/x-ms-wmv" pluginspage="http://www.microsoft.com/windows/windowsmedia/ru/mp10/default.aspx"></EMBED>

Вот так нету панели управления музыкой (play, stop, pause, volume)

 

Можно ли ставить видео файлы?

Ответ - можно и видео и flesh

 

Какого вида должна быть ссылка?

Ответ - Вида - http://адрес сайта/sound.mp3 (wma и тд.)

Изменено пользователем LEONeso

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Всем привет. Совсем недавно увлекся HTML-версткой и сразу же столкнулся с такой проблемой. Катастрофически не хватает нужной информации на русском языке по многим интересующим меня вопросам. В сети нашел несколько неплохих ресурсов (webmascon.com, xpoint.ru и др.), но там тема верстки обсуждается крайне поверхностно, с англоязычными сайтами не сравнить. Может быть, я просто плохо искал? Просто меня интересует большой и желательно хорошо посещаемый ресурс, посвященный HTML-версте сайтов. На котором не стыдно было бы задавать вопросы и получать грамотные и четкие ответы. Помогите найти!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Может ктонибудь дать нормальный самоучитель по html css и xml?заранее спасибо

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Может ктонибудь дать нормальный самоучитель по html css и xml?заранее спасибо

 

Хмм...

HTML - любая книжка сойдет.

CSS - ИМХО, М. Дубаков "Создание web-страниц: искусство верстки".

насчет XML точно не скажу, еще до него не дошел :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Sitepoint - The Art and Science of CSS ,

The principles of Beautiful Web Design,

The CSS anthology 101 Essential Tips Tricks and Hacks

Это по CSS .

По HTML - любую , там учить то нечего , только структурку в основном , и никаких св-в .

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Всем привет. Совсем недавно увлекся HTML-версткой и сразу же столкнулся с такой проблемой. Катастрофически не хватает нужной информации на русском языке по многим интересующим меня вопросам. В сети нашел несколько неплохих ресурсов (webmascon.com, xpoint.ru и др.), но там тема верстки обсуждается крайне поверхностно, с англоязычными сайтами не сравнить. Может быть, я просто плохо искал? Просто меня интересует большой и желательно хорошо посещаемый ресурс, посвященный HTML-версте сайтов. На котором не стыдно было бы задавать вопросы и получать грамотные и четкие ответы. Помогите найти!

htmlbook.ru

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

htmlbook.ru

 

Супер! Большое тебе спасибо! Именно то, что я искал!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

У меня возник вопрос, для тех кто хорошо варит в html и css.

PS: Вчера весь день мучался, думал, писал и в итоге заработал головную боль. Ужас. <_<

 

Вот строки. По идее это ти по блок вывода новостей.

CSS:

 
#newstext {
padding: 2px 6px 2px 6px;
}
#newsglava {
font-size: 12px;
border-color: #cecece; 
border-style: solid; 
border-width: 0px 1px 1px 0px;
}

#newsglava2 {
font-size: 12px;
border-color: #cecece; 
border-style: solid; 
border-width: 0px 1px 1px 1px;
}

#news1  {
background: #cecece url("img/news2.png") repeat-x top left;
height: 23px;
width: 100%;
z-index: 10;
}


.neq3 {
float: left;
width: 220px;
z-index: 10; 
}


.neq2 {
float: left;
width: 154px;
z-index: 10; 
}

.neq {
position:relative;
float: left;
width: 100%;
z-index: 10; 
}
#header {
position:absolute;
margin-top:257px;
margin-left:0px;
top:0px;
padding-top: 0px;
width: 100%;
}

 

HTML:

 <div id="header">

<div class="neq">
<table width="100%" border="0">
<tr>
<td width="220" class="neq2"></td>
<td width="100%" valign="top">
<div id="newsglava"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст</div></div>
</td>
<td width="220" class="neq3" valign="top">
<div id="newsglava2"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст Текст Текст Текст Текст</div></div><br>

<div id="newsglava2"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст Текст Текст Текст Текст</div></div><br>

<div id="newsglava2"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст Текст Текст Текст Текст</div></div><br>
</td>
</tr>
</table>
</div>

</div>

 

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

Но дело не в этом, в FF и OPERA все норм отображается, но в IE все ужасно, валидатор css подчеркивает мелкие ошибки, которые не играют большой роли.

 

Если ктонить сможет разобраться в чем дело или дать новую версию кода, я буду очень признателей, потому что я вообще уже не знаю что делать. Я уже начинаю ненавидит IE.

 

ДА и еще: Возможно вы не поняли к чему тут эта строка

<td width="220" class="neq2"></td>

Это отступ для меню, которое с лева.

 

А блин, сам вопрос:

Как сделать так, чтоб этот код отображался одинаково во всех браузерах, включая IE, который не любит 100%. Возможно я что-то не замечаю.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

тэг <h1> предназначен для выделения заголовков контента и автоматического создания оглавления, а не для увеличения размеров пунктов меню ;)

Изменено пользователем Dark-Demon

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

 

Вот кусочег: CSS типо Н1, который упомянули выше. Мож не так использую, особо не задумывался, яж ток учусь :offtopic:

h1 { font:normal 18px Verdana; 	
background: url("img/news1.png") no-repeat top left;
height: 23px;
width: 4;
color: #707070;
padding-left: 6px;
z-index: 11; } 

 

Собственно файл, как выглядит в FF, так он и должен был бы выглядеть в EI, еслиб он не капризничал.

post-20293-1186320431_thumb.jpg

Залил серым все что лишее, выделил сам выше написанный код (html+css).

Собственно там 3 столбика 2 фиксированные и один ,который по середине, растягивается.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

У меня он так не выглядит, ну да ладно. В любом случае ие поддерживает Conditional Comments. Тоесть конструкции типо таких:

 

<!--[if IE]>
<style type="text/css">
Тут идут фиксы для ие.
</style>
<![endif]-->

Соответственно включения стилей для ие должно идти после включения основных стилей.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Еслиб было все так просто, яб сюда не писал бы, у меня просто отсутствуют такие знания.

 

Попробую еще раз, на этот раз пишу код ,который отображается верно в FF и Опера, но мега криво в IE.

<html>
<head>
<style type="text/css">
html, body {
  background: #FFFFFF;
  margin: 0;
  padding: 0 auto;
  min-height: 100%;
  min-width: 100%;
  font:normal 10px Verdana;
  color:#707070;
}
h1 { font:normal 18px Verdana; 	
background: url("img/news1.png") no-repeat top left;
height: 23px;
width: 4;
color: #707070;
padding-left: 6px;
z-index: 11; }
#newstext {
padding: 2px 6px 2px 6px;
}
#newsglava {
font-size: 12px;
border-color: #cecece;
border-style: solid;
border-width: 0px 1px 1px 0px;
}

#newsglava2 {
font-size: 12px;
border-color: #cecece;
border-style: solid;
border-width: 0px 1px 1px 1px;
}

#news1  {
background: #cecece url("img/news2.png") repeat-x top left;
height: 23px;
width: 100%;
z-index: 10;
}


.neq3 {
float: left;
width: 220px;
z-index: 10;
}


.neq2 {
float: left;
width: 154px;
z-index: 10;
}

.neq {
position:relative;
float: left;
width: 100%;
z-index: 10;
}
#header {
position:absolute;
margin-top:257px;
margin-left:0px;
top:0px;
padding-top: 0px;
width: 100%;
}
</style>
</head>
<body>
<div id="header">

<div class="neq">
<table width="100%" border="0">
<tr>
<td width="220" class="neq2"></td>
<td width="100%" valign="top">
<div id="newsglava"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст</div></div>
</td>
<td width="220" class="neq3" valign="top">
<div id="newsglava2"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст Текст Текст Текст Текст</div></div><br>

<div id="newsglava2"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст Текст Текст Текст Текст</div></div><br>

<div id="newsglava2"><div id="news1"><h1>Заголовок</h1></div>
<div id="newstext">Текст Текст Текст Текст Текст</div></div><br>
</td>
</tr>
</table>
</div>

</div>
</body>
</html>

Собственно нужно запихнуть в .html

 

В FF выглядит так post-20293-1186325606_thumb.jpg

 

Если, ктонить понял/знает как эту байдарку запустить в верном направлении по браузеру Internet Explorer, буду очень раз прочесть ваш вариант.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Еслиб было все так просто, яб сюда не писал бы, у меня просто отсутствуют такие знания.

 

Попробую еще раз, на этот раз пишу код ,который отображается верно в FF и Опера, но мега криво в IE.

 

Собственно нужно запихнуть в .html

 

В FF выглядит так post-20293-1186325606_thumb.jpg

 

Если, ктонить понял/знает как эту байдарку запустить в верном направлении по браузеру Internet Explorer, буду очень раз прочесть ваш вариант.

Ну во-первых у тебя нету доктайпа.

float в ячейках таблиц выглядит странным, и з-индекс зачем то везде напихан.

Атрибут width в td считается устаревшим, используй стили, в том числе и для отступов.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Ну во-первых у тебя нету доктайпа.

float в ячейках таблиц выглядит странным, и з-индекс зачем то везде напихан.

Атрибут width в td считается устаревшим, используй стили, в том числе и для отступов.

 

Это единственная таблица в дизайне, потому что я не знаю как сделать отступы по бокам, чтоб по середине было 100%, обычно все это превращается в кучу Г.

 

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

 

Я не думал, что нужно до такой степени все разжевывать, я вроде дал все необходимое, для того, чтоб поступила помощь в мою сторону, но как всегда ниче не идет. Я думал ,что щас дам отрывок кода, скрин, как выглядит без ошибок в FF и мне ктонить поправит код или подчеркнет ошибку в моем коде, но такого наверное дождаться не реал. Писать можно советы кучами, но на деле то все по другому, если сам не попробуешь не узнаешь, что за гадость ie (v6), я с этим браузером изначально не дружил.

 

Лан буду дальше ждать умных людей, но обычно они молчат <_< .

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Я думал ,что щас дам отрывок кода, скрин, как выглядит без ошибок в FF и мне ктонить поправит код или подчеркнет ошибку в моем коде, но такого наверное дождаться не реал.

<html>
Вот тут. Одна большая ошибка
</html

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас