Switch74
-
Posts
3,246 -
Joined
-
Last visited
-
Days Won
155
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Switch74
-
-
<div class="clear"></div>
Ну что за грязь в разметке?
.content {
overflow: hidden;
}вот и всех делов.
спс, учту это замечание.
-
<style>
*{margin:0px;padding:0px;}
img{border:0px;}
.content div{float:left;width:20%;}
.content img{width:100%;}
div.clear{clear:both;float:none;width:auto;}
</style>
<body>
<div class="content">
<div><img src="http://nailart-jana.narod.ru/333.jpg"></div><div>Первый текст</div>
<div><img src="http://nailart-jana.narod.ru/333.jpg"></div><div>Второй текст</div>
<div><img src="http://nailart-jana.narod.ru/333.jpg"></div>
<div class="clear"></div>
</div>
</body> -
На сколько мне известно, такой возможности нет.
-
Ну можно этот min-height:100% установить для <div> обёрточки.
в коде даже место от неё осталось, но я подумал что так нагляднее будет.
переработанный вариант по совету psywalker
<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
.body{min-height:100%;}
.bg1{min-height:100%;background:#ccc;}
.bg2{background:#aaa;}
.content{}
</style>
<body>
<div class="body">
<div class="bg1">
<div class="bg2">
bg2
</div>
<div class="content">
conten
</div>
</div>
</div>
</body> -
Со стилями проблем нет вроде, а вот с js могут возникнуть - советую свести его к минимуму и так, чтобы его отсутствие не мешало просмотру сайта.
Если сайт должен быть мега красивым и навороченным для пользователей ПК, то для мобилок лучше сделать отдельную (упрощённую) версию.
-
просто вынеси меню из блока ограничивающего его размер
. В твоём случае это <div class="art-sheet-body">про min и max это верно сказано - они нужны по необходимости.
-
попробуй так
<style>
*{margin:0px;padding:0px;}
html,body{min-height:100%;height:100%;}
.bg1{min-height:100%;background:#ccc;}
.bg2{background:#aaa;}
.content{}
</style>
<body>
<div class="bg1">
<div class="bg2">
bg2
</div>
<div class="content">
content
</div>
</div>
</body> -
можно наверно это реализовать вот так:
<style>
*{padding:0px;margin:0px;}
body{background:#eee;text-align:center;}
.top{background:#bbb;text-align:center;}
.menu{display:inline-block;background:#999;min-width:800px;width:100%;max-width:1000px;}
.content{display:inline-block;background:#bbb;min-width:800px;width:100%;max-width:1000px;text-align:left;}
</style>
<body>
<div class="top">
<div class="menu">
<a>link1</a> | <a>link2</a>
</div>
</div>
<div class="content">
content
</div>
</div> -
1.
Если нет цели создавать анимацию при наведении на какую-либо ссылку, то можно обойтись ссылочными областями.
Если же захочется сделать, чтобы фотограф или почтовый ящик при наведении увеличивались, то лучше делать все ссылки отдельными картинками.
2.
Реализовать подобное можно с помощью javascript:
<img src="http://www.tropicarium.ru/morpho.jpg" onMouseOver="document.getElementById('show').innerHTML = this.src;">
<div id="show"></div> -
мне кажется ни как
-
Не совсем понял, что именно ты хочешь сделать
.Если это не то, отобрази на рисунке где точно должен быть скролл и что именно он должен прокручивать.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style>
*{padding:0px;margin:0px;}
html,body{height:100%;overflow:hidden;}
.body{position:absolute;left:0px;right:0px;top:0px;height:100%;overflow:hidden;}
.top{position:absolute;left:0px;right:0px;top:0px;height:200px;background:#bbb;z-index:2;}
.content{position:absolute;left:0px;right:0px;top:200px;bottom:100px;background:#eee;overflow:auto;z-index:1;}
.bottom{position:absolute;left:0px;right:0px;bottom:0px;height:100px;background:#999;z-index:2;}
</style>
</head>
<body>
<div class="body">
<div class="top">top</div>
<div class="content">content</div>
<div class="bottom">bottom</div>
</div>
</body> -
В IE6 к сожалению :hover работает только у ссылок, советую обновить IE и
прописать <!DOCTYPE> но правильной работы в IE не гарантирую
или попробовать сделать его через javascript
воспользовавшись граблями csshover.htc
-
Никто не заставляет вас использовать ещё не полностью поддерживаемые теги. Но уже есть достаточно плюсов которые можно вполне кроссбраузерно использовать.
Имхо конечно, но один короткий доктайп это то, за что стоит перейти на HTML5. Тьфу, никуда переходить не надо. Вы уже на нём.
Я несколько лет назад уже начал создавать нужные мне объекты на страницу на мой взгляд лучше получить то, что хочешь, а не то, что дают.
В данном случае мы обсуждаем input и select, по этому по ним и скажу:
input меня конечно всем устраивает, за исключением скажем разнотипных checkbox и password в разных браузерах, их аналоги можно легко сделать через обычный див.
select
- это просто не до объект1. в разных браузерах присутствуют разные ограничения на его стилизацию
2. не поддаётся выравниванию по z-index (обычными способами)
3. много мелких недочётов по его работе и функциональности
реально костыльный объект.
его аналог это бегунки в любом браузере.
кста, как правило заказчик придумывает такое, что стандартными средствами не сделать.
-
Малой поддержки это жизни старых ИЕ? Ну так давайте ещё года 2-3 тупить с глядеть в прошлое. В то время когда многие уже скоро второй год будут использовать новый доктайп.
Я просто высказал своё мнение о HTML5. Я работаю в сфере WEB и большинство клиентов хотят видеть свой сайт во всех браузерах и желательно одинаковым. Делать по 3-4 копии сайта мне как-то не хочется, по этому я ищу кроссбраузерные решения, пусть они не всегда идеальны, но работают везде.
Как правило мне приходиться поддерживать последние две версии браузеров, а с ИЕ так даже и 7 иногда просят.
Пример нескольких тегов HTML5:
<video> - все браузеры нормально его поддерживают, но есть одно но, чуть ли не для каждого нужен свой формат видео - это явно не рационально держать несколько копий иногда не маленьких файлов, а если они ещё и в разном качестве будут? Тут к сожалению от flash никуда не деться.
<output> - ради одной оперы вставлять данный тег считаю бессмысленно. (подобными тегами HTML5 просто кишит, и среди них есть очень даже интересные которые я бы стал использовать - новые типы для input).
<command> - а это просто шикарный тег...
-
<div width height center>
<img width height absolute z-index>
<img width height>
</div>
Объясняю свою не понятную идею
:т.к. твоя картинка получается через PHP можно узнать её размеры и выставить их для наших объектов жестко (width, height)
первый img - это png c прозрачным центром и плавно переходящим в чёрное к краям, она у нас абсолютная и слоем выше, чтобы накрыть вторую картинку
второй img - это сама картинка
зная размеры обёртки (div) мы можем его выровнять и по горизонтали и по вертикали через top left margin
первый img можно разбить на четыре картинки, как ты и хотел, и при желании сделать через div background
так же наложение градиента можно повесить на javascript - это получится наверно более красивой и удобной реализацией
-
Я смотрел в Firefox и IE. Нужно указать доктайп. У меня <!DOCTYPE html>
при использовании <!DOCTYPE html> <select> не имеет padding-left и padding-rightи вообще считаю использование HTML5 пока не рациональным в виду малой поддержкой браузерами.
-
хмм.. странно. В каком браузерере смотрите?
-
*{ margin: 0; padding: 0;} попробуй.
И дай ссылку на тестовую страницу с примером.
добавил это в стиль table, не помогло, и всё налево уехало, но всё равно спасибо )
тестовой страницы пока нету, на локалхсоте делаю сайт)
*{ margin: 0; padding: 0;}
это не нужно добавлять для таблицы, этот стиль указывает для всех элементов страницы margin и padding 0px.
ты наверно написал: table{ margin: 0; padding: 0;}
-
padding:0px; для <td> нужен в котором лежит вложенная таблица,
в предыдущем посте грамотно сделали "ресет" всех объектов, советую вставлять данный код в самом начале всегда.
проблема с изображениями
in HTML Coding
Posted
тоже интересное решение, но я стараюсь не пользоваться тегами не поддерживающимися двумя последними версиями браузеров, да и Gaspode более краткое, кроссбраузерное и пока особых нареканий в нём я не вижу.