Просмотр полной версии : Верстка
Есть такая проблемка
Код
<div id="auth">
<form action="index.php" method="post">
<input name="login" type="text">
<input name="pass" type="text">
<input name="csend" type="submit">
</form>
</div>
Т.е. блок в котором в одну строку располагаются два текстовых поля и кнопка. Как выровнять эти объекты по вертикали, относительно данного блока auth?
Тег <br> сдвигает ровно на одну строку(мне же надо на несколько пикселов), варианты вроде создать невидимую таблицу не пойдут, верстка блочная, необходимо делать средствами ксс.
цсс, насколько я помню, позволяет устанавливать межстрочные интервалы, или я неправильно понял, чего вы хотите?..
Первый скрин - как надо, второй - что получается сейчас. Белый фон - это блок auth в коде который я написал выше.
N0rd, вероятно, тебе подойдут padding и margin.
upd: не "вероятно", а именно они.
MDM, margin действует полностью на блок, фон тоже уезжает.
Проблему решил, помог совет Ringo с интервалами.
N0rd, стили можно применять к любому объекту. В том числе и к полям ввода, а не только к родительскому auth.
css - сила...
не сочтите за оффтоп, где можно в цифровом виде найти книжки по css, xhtml и JacaScript? :) На русском, желательно)
Еще вопрос, можно кто-нибудь обрисовать принцип создания таких фич(см. вложение)?
Т.е. выделение каким-либо цветом активных пунктов меню. Может кто ссылочку на статью выложит, или наглядные примеры имеются?
Ringo, чуть позже выложу, имеется несколько учебников.
CSS и здесь пригодится.
Приблизительно так:
a {
background: #FFF;
}
a:hover {
background: #FFF url('1.png');
}
Шрифты, цвета и остальное тоже на CSS.
Требуется помощь. На первом скрине показана страничка в браузере фф3, как видите все отлично, обращаю ваше внимание на отступы по левому и правому краю вокруг серого блока.
Теперь внимание на второй скрин. Та же самая страничка, только открытая в кривом осле. На этот раз серый блок прилип к левому краю страницы.
С чем связан сий баг и как его исправить?
Тегу body, являющемуся родительским по отношению к серому блоку прописано padding:0 14px;
В опере тоже все нормально с этими полями.
Сей "баг" связан с тем, что Некрософт плевали на стандарты w3c =\
SuperSkat
24.07.2008, 13:52
Кто-нибудь знаком с поисковыми скриптами? Нужен скрипт который будет искать по протоколу ftp.
css - сила...
не сочтите за оффтоп, где можно в цифровом виде найти книжки по css, xhtml и JacaScript? :) На русском, желательно)
Сейчас заливаю сюда (http://disk.karelia.ru/n/n0rd/webdev/books) довольно интересную книжечку "Философия CSS-дизайна".
Интересный сайтик (http://csszengarden.com/) на примере которого можно увидеть силу css, на нем представлено множество вариантов оформления сайта, при этом html разметка всегда остается одной и той же, меняются только стили(css).
Кстати, начинающим верстальщиком советую обратить внимание на эту (http://vremenno.net/html-css/css-global-reload/) статейку. В ней рассказывается что такое глобальный сброс и приводится несколько примеров его реализации.
Кто-нибудь знаком с поисковыми скриптами? Нужен скрипт который будет искать по протоколу ftp.
А какое отношение имеют поисковые скрипты к верстке?
SuperSkat
13.10.2008, 18:12
Не получается сделать фон ссылки + надо сделать чтобы при наведении фон менялся.
Надо вот так сделать:
Фон:
71976
При наведении курсора:
71977
В CSS примерно следующим образом:
a {
border: 1px solid #F00;
border-right: 0;
border-left: 0;
text-decoration: none;
}
a:hover {
background: #AAD0FF;
}
SuperSkat
13.10.2008, 18:26
MDM, при наведении курсора фон меняется только у текста, всё остальное пространство не меняется.
Я не вижу необходимый кусок кода и используемый DOCTYPE. Стиль, приведённый выше, работает.
SuperSkat
13.10.2008, 18:47
MDM,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<a href="?page='.$item.'" class="menu">'.$title.'</a>
a.menu:link, a.menu:visited, a.menu:active {
font-family: Georgia;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #74aee5;
}
a.menu:hover {
color: #ff0000;
}
a:hover {
background: подставляем цвет;
}
должно работать
:)
SuperSkat, а так:
<html>
<style type=text/css>
.menu a:link, a:visited, a:active {
font-family: Georgia;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #74aee5;
}
.menu a:hover {
background: #ff0000;
}
</style>
<div class="menu"><a href="@">МЕД</a></div>
</html>
SuperSkat, так а где border и background?
Кстати, второй вариант, который предложил Muskul, удобней и я бы использовал его. Ссылки находятся в блоке (контейнере) и их удобно разруливать CSS.
SuperSkat
13.10.2008, 20:17
71995, а надо чтобы не только под текстом был фон.
Мы на месте топчемся. Ты так и не показал свой окончательный код.
SuperSkat, конечно, не видя кода, не совсем понятно, но, может, я в правильном направлении думаю:
<html>
<style type=text/css>
.menu a:link, .menu a:visited, .menu a:active {
font-family: Georgia;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #74aee5;
width: 200px;
height: 200px;
display: block;
}
.menu a:hover {
background: #ff0000;
}
</style>
<div class="menu"><a href="@">МЕД</a></div>
</html>
SuperSkat
13.10.2008, 22:20
Ну что я вам скажу, господа, заработало =) Спасибо всем.
Только внимательней. Размер ссылок теперь фиксированный. Текст может уйти за бордюры при увеличении его размера.
И все же код ты не показал. :) Интересно было посмотреть, в каком месте косяк.
SuperSkat
13.10.2008, 22:45
.menu a:link, a:visited, a:active {
font-family: Georgia;
font-weight: bold;
font-size: 12px;
text-decoration: none;
color: #74aee5;
}
.menu a:hover {
color: #ffffff;
background: url(img/a.png) no-repeat;
}
Вопрос: как можно сделать динамически растягивающийся бэкграунд пунктов меню?
Допустим, так:
74689
Muskul, почитай статейку (http://www.webmascon.com/topics/coding/36a.asp), тут описан этот прием.
Существует валидатор http://www.jslint.com/ для javascript. Он ругается на функции типа document.write, alert, пишет, что они глобальные... А надо, чтобы скрипты мои прошли валидатор этот. Никто не знает, как можно решить проблемку? Буду очень благодаерен.
возникал проблема, поставил на блог социальные кнопки, и нигде не могу найти, как сделать, чтоб они были по горизонтали, на определённом расстояние друг от друга, с помощью какого тега можно решить проблему?
lourini, UL, LI выранивать по горизонтали?
SoaT, пробовал, не работает.. Когда гуглил, натыкался, что нужно возиться с css, но по делу ничего нет..
lourini,
ul li {
float:left; /*горизонтальное выранивание*/
list-style:none; /*чтобы небыло точек перед каждым LI*/
}
Добавлено через 43 секунды
тут к примеру: http://www.cssmaster.ru/Vyravnivanie_gorizontalnogo_menu_po_centru_stranic y
SoaT, У меня плохие знание в html( Как правильно использовать css?
<div>
<ul>
<li><div style="text-align: justify;">
<script charset="windows-1251" src="http://vkontakte.ru/js/api/share.js?10" type="text/javascript">
</script> <script type="text/javascript">
<!--
document.write(VK.Share.button(false,{type: "button", text: "Сохранить"}));
-->
</script> </li>
<li><a href="http://www.facebook.com/sharer.php" name="fb_share" type="button_count">Опубликовать</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script> </li>
<li><a class="mrc__plugin_like_button" href="http://connect.mail.ru/share" rel="{'type' : 'button', 'width' : '200'}" target="_blank">Нравится</a> <script charset="UTF-8" src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript">
</script></li>
</li><a class="twitter-share-button" data-count="horizontal" data-via="krmoo" href="http://twitter.com/share">Tweet<qtlend></qtlend><qtlend></qtlend><qtlend></qtlend><qtlend></qtlend><qtlend></qtlend></a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script></div></li>
</div>
SuperSkat
28.10.2010, 19:56
lourini, по идее вот так можно:
<script charset="windows-1251" src="http://vkontakte.ru/js/api/share.js?10" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script charset="UTF-8" src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript"></script>
<style>
div#soc_but {
text-align: justify;
}
#soc_but ul li {
float:left; /*горизонтальное выранивание*/
list-style:none; /*чтобы небыло точек перед каждым LI*/
}
</style>
<div id="soc_but">
<ul>
<li>
<script type="text/javascript">
<!--
document.write(VK.Share.button(false,{type: "button", text: "Сохранить"}));
-->
</script>
</li>
<li>
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="button_count">Опубликовать</a>
</li>
<li>
<a class="mrc__plugin_like_button" href="http://connect.mail.ru/share" rel="{'type' : 'button', 'width' : '200'}" target="_blank">Нравится</a>
</li>
<li>
<a class="twitter-share-button" data-count="horizontal" data-via="krmoo" href="http://twitter.com/share">Tweet</a>
</li>
</ul>
</div>
только у меня кнопка мейла отвалилась.
Добавлено через 6 минут
А вообще, как-то бредовато выравнивать списком, проще запихать все в div и выравнять ссылки.
SuperSkat, очень коряво получается всё в разнобой, можешь подробнее про div вариант?
<style type="text/css">
.wapper {width: auto;} /* ширина родителя, можно в пикселях или процентах.*/
.wapper div {
float: left;
padding: 0 3px 0 3px; /* отступ внутри дива, поле так сказать, показетели: верх, право, низ, левый бок*/
margin: 0 3px 0 3px; /* отступ снаружи дива, ну и показатели: верх, право, низ, левый бок*/
}
</style>
<div class="wapper">
<div>Элемент</div>
<div>Элемент</div>
<div>Элемент</div>
<div style="clear: both;"></div>
</div>
Вот так я делаю, внизу both - это ресет обтекания.
Нужно так же учитывать, чтобы Элементы по ширине подходили.
dar, уже почти, только не корректно отражается вконтакте, и твиттер отпадает, что не так?
109149
<style type="text/css">
.wapper {width: auto;}
.wapper div {float: left;
padding: 0 2px 0 2px;
margin: 0 2px 0 2px;}
</style>
<div class="wapper">
<div> <!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?10" charset="windows-1251"></script>
<!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript"><!--
document.write(VK.Share.button(false,{type: "button", text: "Сохранить"}));
--></script> </div>
<div><a href="http://www.facebook.com/sharer.php" name="fb_share" type="button_count">Опубликовать</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script> </div>
<div><a class="mrc__plugin_like_button" href="http://connect.mail.ru/share" rel="{'type' : 'button', 'width' : '200'}" target="_blank">Нравится</a> <script charset="UTF-8" src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript"></script></div> <div><a class="twitter-share-button" data-count="horizontal" data-via="krmoo" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script></div>
<div style="clear: both;"></div>
</div>
lourini, стукни 483646561.
Про контакт, скорее всего там тоже div используется. Можно попробовать так:
div.wapper {float: left;
padding: 0 2px 0 2px;
margin: 0 2px 0 2px;}
А по поводу твиттера надо глянуть на блог.
Кинь ссылку в аську мне, я буду курить - гляну где жуки зарылись, попробую их выкопать .
SuperSkat
31.10.2010, 15:55
lourini, в стиле margin:0; сделай, должно помочь.
в стиле margin:0; сделай, должно помочь.
Решили решили уже, там одна плашка просто имела внутри себя iframe и у нее была внушительная ширина и поэтому для последнего блока не было места в строке, как бэ так, если в трех словах.
Ребят, реально к блогу прикрутить форму для заполнения? Чтоб при заполнении данные шли на электронную почту. Есть ли специальный сервисы для этого?
lourini, я не понял, что надо и причем тут верстка.
Нужна форма обратной связи ? А какой движок ?
Или форма есть, но надо сверстать инпуты?
dar, ну да форма обратной связи, хочу прикрутить к блогу http://veloextreme.blogspot.com/ , сделать страницу вступить, там будут поля для заполнения: имя, фамилия, отчество, год рождения, и при отправке, после заполнения, жмёшь отправить, и вся информация идёт на определённый емаил, реально так сделать?
lourini, а на blogspot такого нет в опциях ?
Там можно использовать инородные скрипты на php например ?
lourini, я не думаю, что гугл дает возможность внедрять свои файлы исполняемые.
Можно тут нарулить (http://blogohelp.blogspot.com/2010/05/blogspot.html) че нить.
Вообще должно быть готовое решение.
Ещё один вопрос, а есть онлайн-сервисы которые представляют удобный календарь, форму которого можно разместить на сайте? На гугл не понравилось, что мало информации можно записывать..
Хочу изменить в блоге значок манкированного списка, на square (квадратик), куда нужно вставить стиль?
.post-body ul li:before, #sidebar-wrapper ul li:before {
color:#000000;
content:>;
lourini, В <style> в head?
SuperSkat
07.02.2011, 18:59
lourini, http://htmlbook.ru/html/li/type
vBulletin® v3.8.4, Copyright ©2000-2026, Jelsoft Enterprises Ltd. Перевод: zCarot