Andyk
-
Posts
50 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Andyk
-
-
а вот не надо убирать то, что критически важно.
Но опять же: трёх дивов тут днём с огнём не сыскать. Один — уже теперь понимаю. В него будет текст завёрнут, о котором сначала речи не шло.
Да, я упустил важную деталь. Но сделал это потому, что даже представить не мог, что часть бордеров можно прицепить к рисунку, а вторую часть просто сместить.
Касательно дивов уже сам не могу понять откуда у меня третий взялся. В два у самого все трамбуется.
Тут два варианта.Правильный: прикрыться модным веянием, с умным видом сказать graceful degradation и послать пользователей устаревших браузеров в далёкие дали.
Неправильный: пойти на msdn и почитать про фильтры. Кстати, настоятельно рекомендую читать не только whatwg или htmlbook, но и msdn. Там тоже очень много интересного, хотя и с большим трудом находится.
Я не гуру, но попробую поспорить. IE8, который входит в комплект семерки не назовешь старым. А moz-box-shadow он не понимает. Ну и до уровня чтобы читать msdn я еще не дорос
так леплю темку для форума for fun.В общем спасибо за советы, значит так и остановлюсь на своих дивах.
-
Текст, конечно же предполагался. Убрал все, что бы код был проще в понимании. А дивами написал потому, что сам квадратик это один из дивов на странице. Мне почему-то казался возможным только вариант с:
<div class="a1">
<div class="a2">
</div>
</div>а стиль
.а1 {
border-top серый
border-left серый
border-right белый
border-bottom белый
}
.a2 {
border-top белый
border-left белый
border-right серый
border-bottom серый
}На бред немного смахивает, почему и решил спросить
Да и второй ваш вариант swetlana не будет работать во всех браузерах
ок, оставим в стороне body и html.Но всё равно: куда тут какие-то дивы?
Но сдвинуть рамку на два пикселя я бы ни за что не догадался
PS а еще если игнорировать IE можно outline прицепить
swetlana, если не сложно, сверстайте этот "квадратик"
без рисунка. С условиями, что сам квадрат это обязательно div, не использовать абсолютное позиционирование и без новомодных свойств, чтобы старенькие браузеры тоже разобрались. Наиболее оптимально по вашему мнению. -
Конечно сойдет. Вот только я ничего не понял. Ирония это или намек для опытного верстальщика. Для начинающего можете подсказать?
зы если не совсем понятно в чем собственно вопрос, то вопрос в верстке бордеров квадратика
-
В три дива с бордерами? Это нормально или можно более изящно?
-
Беру свои слова назад. Ваш вариант полностью мне подходит, невнимательно посмотрел сразу.
Спасибо.
-
Аналогично варианту с фоном на а1. В идеале хотел чтобы а2 заполнял всю пустоту и имел свои бордеры и отступы. Снова все переделал и вернулся к фону на а1. Гемор какой-то
-
Решил обернуть a3 в еще один div. Ширину ему указать в процентах оставшихся от a2 с фоном. Что делать с пустотой при разных разрешениях монитора хз.
-
Вариант. Только right: 0 для блока a3 не работает, прижимает к окну браузера, а нужно прижать к краю a1.
Нет, не вариант. Лезут косяки в других браузерах.
И такой же результат можно получить сделав
А почему бы фон не повесить на a1? -
-
Я уже думал так сделать. Но, на фоне будет еще форма поиска + лого + описание. И по задумке этот блок должен быть оформлен (бордер, обводка, отступы) как и блок a3, а это уже не получится.
-
-
С помощью css этого не сделать? Или я что-то не так написал?
-
И снова здравствуйте. Нуждаюсь в вашей помощи.
<div class="a1">
<div class="a2"></div>
<div class="a3"></div>
</div>.a1 {
width: 100%;
display: inline-block;
}
.a2 {
background: url("{T_THEME_PATH}/images/logogo.jpg");
background-position: center;
height: 300px;
border: 1px solid #BFBFBF;
display: inline-block;
float: left;
overflow: hidden;
display: inline-block;
}
.a3 {
overflow: hidden;
float: right;
height: 300px;
background-image: url("{T_THEME_PATH}/images/bg_tex2.jpg");
border: 1px solid #BFBFBF;
display: inline-block;
}В блоке a2 фоном изображение, которое может растягиваться на 100% ширины. В блоке a3 желательно указать фиксированную ширину в px. И собственно вопрос, как заставить блок a2 растягиваться, как заполнить им всю пустоту?
Можно указать ширину в %, но учитывая разницу между монитором 1024*768 и 1920*1200 блок а3 выходит очень "сжатым" в первом варианте и "пустым" во втором.
-
А если сайт резиновый?
-
Я конечно не спец, но разве не будет легковеснее:
1) чертики сверху - картинка;
2) синий фон - background-color;
3) белое свечение png;
?
-
можно попробовать указать ему высоту
-
Как сверстать такой фон написали бы.
-
кхм
зациклился на вставке картинки и все тут
а решение под носом, спасибо 
-
мде, стоило чуть внимательнее глянуть
спасибо
-
не оно?
К сожалению нет.
Почему бы вам просто не воспользоваться таблицей?что-то мне подсказывает, что ненужный мудрёж где-то ещё раньше.Общую задачу опишите пожалуйста.
Для чего все эти блоки с ненужными свойствами?
Форум на движке phpbb, стандартная тема prosilver. Нужно поместить в шапку иллюстрацию (процентов 70-80 по ширине) и на том же уровне форму входа+личный раздел+новые сообщения на оставшуюся ширину. Поскольку ширина окна заранее не известна, изображение будет для максимального разрешения. А значит, оно должно центрироваться по горизонтали, высота в принципе, может быть указана и жестко.
Выше двух блоков div, описание которых в первом сообщении темы есть еще три блока div ну и body.
body с фоном
body {
background: url("./styles/prosilver/theme/images/patern.jpg") repeat scroll 0 0 transparent;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-size: 10px;
padding: 0 0 20px;
margin: 0;
padding: 0;
}Первый див на странице
Градиент для фона
div {
background-image: url("./styles/prosilver/theme/images/wrap_grad.png");
background-repeat: repeat-x;
min-height: 721px;
padding: 2% 2% 0;
margin: 0;
padding: 0;
}Второй див
Выравнивает, "держит" форум
div {
border: 1px solid #909090;
margin: 0 auto;
max-width: 1650px;
}Третий див
Текстура для форума
div {
background-image: url("./styles/prosilver/theme/images/bg_tex.jpg");
border: 1px solid #FFFFFF;
margin: 0 auto;
max-width: 1650px;
padding: 20px;
}Дальше div2 в который пытаюсь поместить изображение и div3 для формы входа и личной панели.
Возможно divов многовато, но я только учусь
-
Что, теперь с шириной проблемы? Не считается ширина 80% и 19% от div1?
Сами поймёте почему или лучше сразу рассказать, что ширина ячеек в процентах считается от ширины таблицы?
В таком случае не работает overflow: hidden
div1 может быть только display: block иначе ломается вся верстка страницы.
-
Не работает. Если убрать float: left div2 растягивается по все ширине и вытесняет div3 вниз.
Смена display: inline-block на display: table-cell абсолютно ничего не меняет.
Если все-таки float: left вернуть то все возвращается на свои места. Без изменений.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function toggle_show(id) {
document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';
}
</script>
</head>
<body>
<ul>
<li>Название 1</li>
<li onClick="toggle_show('bla-bla2')">Название 2
<ul id="bla-bla2" style="display: none">
<li>Бла Бла Бла</li>
<li>Бла Бла Бла</li>
<li>Бла Бла Бла</li>
</ul>
</li>
<li>Название 3</li>
</ul>
</body>
</html>Отлично решение. А как сделать что бы по умолчанию скрытые елементы были видны ну и закрывались/открывались по клику.
-
Здравствуйте. Не могу найти решение, надеюсь, вы мне поможете.
Есть div1 с шириной 100%
В нем еще два div'а:
.div2 {
width: 80%;
height: 60px;
border: 1px solid blue;
display: inline-block;
float: left;
overflow: hidden;
}.div3 {
float: right;
width: 19%;
height: 60px;
display: inline-block;
background-image: url("{T_THEME_PATH}/images/bg_tex2.jpg");
border: 1px solid #BFBFBF;
}В левый (div2) вставляем картинку и она прижимается к верхему и левому краям div'а.
Можно кроссбраузерно выровнять данное изображение по вертикали и горизонтали без использования php и js?
Как сверстать такую красотульку
in HTML Coding
Posted
Ваш пост не видел. При отправке формы не говорит, что есть новые ответы.
Жду.