Верстка

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

Первый скрин - как надо, второй - что получается сейчас. Белый фон - это блок 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

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

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

Требуется помощь. На первом скрине показана страничка в браузере фф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

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

На русском, желательно)

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

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

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

Сообщение от SuperSkat

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

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

SuperSkat · 13.10.2008, 18:12

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

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

30.06.2008, 19:14	#1
N0rd Модератор [Epic] [Legion]	Верстка Есть такая проблемка Код Код: <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> сдвигает ровно на одну строку(мне же надо на несколько пикселов), варианты вроде создать невидимую таблицу не пойдут, верстка блочная, необходимо делать средствами ксс.

30.06.2008, 19:23	#2
Ringo Местный	цсс, насколько я помню, позволяет устанавливать межстрочные интервалы, или я неправильно понял, чего вы хотите?.. __________________ Und wie du wieder aussiehst, Löcher in der Hose und ständig dieser Lärm... Elektrische Gitarren und immer diese Texte... Последний раз редактировалось Ringo; 30.06.2008 в 19:24.

30.06.2008, 19:43	#4
MDM Администратор [BATTLE]TEAM	N0rd, вероятно, тебе подойдут padding и margin. upd: не "вероятно", а именно они. __________________ [BATTLE]SERVER Последний раз редактировалось MDM; 30.06.2008 в 19:44.

30.06.2008, 19:48	#6
MDM Администратор [BATTLE]TEAM	N0rd, стили можно применять к любому объекту. В том числе и к полям ввода, а не только к родительскому auth. __________________ [BATTLE]SERVER

30.06.2008, 20:16	#9
MDM Администратор [BATTLE]TEAM	CSS и здесь пригодится. Приблизительно так: Код HTML: a { background: #FFF; } a:hover { background: #FFF url('1.png'); } Шрифты, цвета и остальное тоже на CSS. __________________ [BATTLE]SERVER

30.06.2008, 19:45	#5
N0rd Модератор [Epic] [Legion]	MDM, margin действует полностью на блок, фон тоже уезжает. Проблему решил, помог совет Ringo с интервалами.

30.06.2008, 19:59	#7
Ringo Местный	css - сила... не сочтите за оффтоп, где можно в цифровом виде найти книжки по css, xhtml и JacaScript? На русском, желательно) __________________ Und wie du wieder aussiehst, Löcher in der Hose und ständig dieser Lärm... Elektrische Gitarren und immer diese Texte...

09.07.2008, 13:22	#11
Ringo Местный	Сей "баг" связан с тем, что Некрософт плевали на стандарты w3c =\ __________________ Und wie du wieder aussiehst, Löcher in der Hose und ständig dieser Lärm... Elektrische Gitarren und immer diese Texte...

24.07.2008, 13:52	#12
SuperSkat Местный	Кто-нибудь знаком с поисковыми скриптами? Нужен скрипт который будет искать по протоколу ftp. __________________ wish you were here

13.10.2008, 18:12	#14
SuperSkat Местный	Не получается сделать фон ссылки + надо сделать чтобы при наведении фон менялся. Надо вот так сделать: Фон: 1.jpg При наведении курсора: 2.jpg __________________ wish you were here Последний раз редактировалось SuperSkat; 13.10.2008 в 18:12.

13.10.2008, 18:22	#15
MDM Администратор [BATTLE]TEAM	В CSS примерно следующим образом: Код HTML: a { border: 1px solid #F00; border-right: 0; border-left: 0; text-decoration: none; } a:hover { background: #AAD0FF; } __________________ [BATTLE]SERVER

13.10.2008, 18:26	#16
SuperSkat Местный	MDM, при наведении курсора фон меняется только у текста, всё остальное пространство не меняется. __________________ wish you were here

13.10.2008, 18:31	#17
MDM Администратор [BATTLE]TEAM	Я не вижу необходимый кусок кода и используемый DOCTYPE. Стиль, приведённый выше, работает. __________________ [BATTLE]SERVER

13.10.2008, 19:29	#20
MDM Администратор [BATTLE]TEAM	SuperSkat, так а где border и background? Кстати, второй вариант, который предложил Muskul, удобней и я бы использовал его. Ссылки находятся в блоке (контейнере) и их удобно разруливать CSS. __________________ [BATTLE]SERVER

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)