Battle Forum - Верстка

Страница 1 из 3

Показывать 40 сообщений этой темы на одной странице

Battle Forum (http://battlefox.rooty.ru/index.php)

- Web-программирование / Сайтостроение (http://battlefox.rooty.ru/forumdisplay.php?f=110)

- - Верстка (http://battlefox.rooty.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, на нем представлено множество вариантов оформления сайта, при этом 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.

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

Страница 1 из 3

Показывать 40 сообщений этой темы на одной странице