Battle Forum

Battle Forum (http://forum.battlefox.ru/index.php)
-   Web-программирование / Сайтостроение (http://forum.battlefox.ru/forumdisplay.php?f=110)
-   -   Верстка (http://forum.battlefox.ru/showthread.php?t=8460)

N0rd 30.06.2008 19:14

Верстка
 
Есть такая проблемка
Код
Код:

<div id="auth">
<form action="index.php" method="post">
  <input name="login" type="text">&nbsp;&nbsp;
  <input name="pass" type="text">&nbsp;&nbsp;
  <input name="csend" type="submit">
</form>
</div>

Т.е. блок в котором в одну строку располагаются два текстовых поля и кнопка. Как выровнять эти объекты по вертикали, относительно данного блока auth?
Тег <br> сдвигает ровно на одну строку(мне же надо на несколько пикселов), варианты вроде создать невидимую таблицу не пойдут, верстка блочная, необходимо делать средствами ксс.

Ringo 30.06.2008 19:23

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

N0rd 30.06.2008 19:41

Вложений: 2
Первый скрин - как надо, второй - что получается сейчас. Белый фон - это блок auth в коде который я написал выше.

MDM 30.06.2008 19:43

N0rd, вероятно, тебе подойдут padding и margin.

upd: не "вероятно", а именно они.

N0rd 30.06.2008 19:45

MDM, margin действует полностью на блок, фон тоже уезжает.
Проблему решил, помог совет Ringo с интервалами.

MDM 30.06.2008 19:48

N0rd, стили можно применять к любому объекту. В том числе и к полям ввода, а не только к родительскому auth.

Ringo 30.06.2008 19:59

css - сила...
не сочтите за оффтоп, где можно в цифровом виде найти книжки по css, xhtml и JacaScript? :) На русском, желательно)

N0rd 30.06.2008 20:09

Вложений: 1
Еще вопрос, можно кто-нибудь обрисовать принцип создания таких фич(см. вложение)?
Т.е. выделение каким-либо цветом активных пунктов меню. Может кто ссылочку на статью выложит, или наглядные примеры имеются?

Ringo, чуть позже выложу, имеется несколько учебников.

MDM 30.06.2008 20:16

CSS и здесь пригодится.

Приблизительно так:
Код HTML:

a {
        background: #FFF;
}

a:hover {
        background: #FFF url('1.png');
}

Шрифты, цвета и остальное тоже на CSS.

N0rd 09.07.2008 02:47

Вложений: 2
Требуется помощь. На первом скрине показана страничка в браузере фф3, как видите все отлично, обращаю ваше внимание на отступы по левому и правому краю вокруг серого блока.
Теперь внимание на второй скрин. Та же самая страничка, только открытая в кривом осле. На этот раз серый блок прилип к левому краю страницы.
С чем связан сий баг и как его исправить?
Тегу body, являющемуся родительским по отношению к серому блоку прописано padding:0 14px;
В опере тоже все нормально с этими полями.

Ringo 09.07.2008 13:22

Сей "баг" связан с тем, что Некрософт плевали на стандарты w3c =\

SuperSkat 24.07.2008 13:52

Кто-нибудь знаком с поисковыми скриптами? Нужен скрипт который будет искать по протоколу ftp.

N0rd 31.07.2008 18:07

Цитата:

Сообщение от Ringo (Сообщение 275998)
css - сила...
не сочтите за оффтоп, где можно в цифровом виде найти книжки по css, xhtml и JacaScript? :) На русском, желательно)

Сейчас заливаю сюда довольно интересную книжечку "Философия CSS-дизайна".

Интересный сайтик на примере которого можно увидеть силу css, на нем представлено множество вариантов оформления сайта, при этом html разметка всегда остается одной и той же, меняются только стили(css).

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


Цитата:

Сообщение от SuperSkat (Сообщение 283283)
Кто-нибудь знаком с поисковыми скриптами? Нужен скрипт который будет искать по протоколу ftp.

А какое отношение имеют поисковые скрипты к верстке?

SuperSkat 13.10.2008 18:12

Вложений: 2
Не получается сделать фон ссылки + надо сделать чтобы при наведении фон менялся.
Надо вот так сделать:
Фон:
Вложение 71976
При наведении курсора:
Вложение 71977

MDM 13.10.2008 18:22

В CSS примерно следующим образом:

Код HTML:

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, при наведении курсора фон меняется только у текста, всё остальное пространство не меняется.

MDM 13.10.2008 18:31

Я не вижу необходимый кусок кода и используемый DOCTYPE. Стиль, приведённый выше, работает.

SuperSkat 13.10.2008 18:47

MDM,
Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<a href="?page='.$item.'" class="menu">'.$title.'</a>

Код HTML:

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;
}


Muskul 13.10.2008 18:50

Код HTML:

a:hover {
        background: подставляем цвет;
}

должно работать
:)


SuperSkat, а так:

Код HTML:

<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>


MDM 13.10.2008 19:29

SuperSkat, так а где border и background?

Кстати, второй вариант, который предложил Muskul, удобней и я бы использовал его. Ссылки находятся в блоке (контейнере) и их удобно разруливать CSS.


Текущее время: 21:30. Часовой пояс GMT +3.

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot