Ответ
 
Опции темы
Старый 30.06.2008, 19:14      #1
N0rd
Модератор
[Epic]
[Legion]
Пользователь Mozilla Firefox
 
Аватар для N0rd
 
Регистрация: 08.04.2006
Возраст: 31
Сообщений: 3,103
Пользователь играет в Call Of Duty 2Пользователь играет в Call Of Duty 4
По умолчанию Верстка

Есть такая проблемка
Код
Код:
<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> сдвигает ровно на одну строку(мне же надо на несколько пикселов), варианты вроде создать невидимую таблицу не пойдут, верстка блочная, необходимо делать средствами ксс.
N0rd вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 30.06.2008, 19:23      #2
Ringo
Местный
 
Аватар для Ringo
 
Регистрация: 08.12.2006
Сообщений: 2,870
По умолчанию

цсс, насколько я помню, позволяет устанавливать межстрочные интервалы, или я неправильно понял, чего вы хотите?..
__________________
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.
Ringo вне форума   Ответить с цитированием Вверх
Благодарности: 1
N0rd (30.06.2008)
Старый 30.06.2008, 19:41      #3
N0rd
Модератор
[Epic]
[Legion]
Пользователь Mozilla Firefox
 
Аватар для N0rd
 
Регистрация: 08.04.2006
Возраст: 31
Сообщений: 3,103
Пользователь играет в Call Of Duty 2Пользователь играет в Call Of Duty 4
По умолчанию

Первый скрин - как надо, второй - что получается сейчас. Белый фон - это блок auth в коде который я написал выше.
Изображения
Тип файла: jpg need.JPG (10.6 Кб, 69 просмотров)
Тип файла: jpg n.JPG (11.1 Кб, 67 просмотров)
N0rd вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 30.06.2008, 19:43      #4
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

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

upd: не "вероятно", а именно они.
__________________
[BATTLE]SERVER

Последний раз редактировалось MDM; 30.06.2008 в 19:44.
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
N0rd (30.06.2008)
Старый 30.06.2008, 19:45      #5
N0rd
Модератор
[Epic]
[Legion]
Пользователь Mozilla Firefox
 
Аватар для N0rd
 
Регистрация: 08.04.2006
Возраст: 31
Сообщений: 3,103
Пользователь играет в Call Of Duty 2Пользователь играет в Call Of Duty 4
По умолчанию

MDM, margin действует полностью на блок, фон тоже уезжает.
Проблему решил, помог совет Ringo с интервалами.
N0rd вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 30.06.2008, 19:48      #6
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

N0rd, стили можно применять к любому объекту. В том числе и к полям ввода, а не только к родительскому auth.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
N0rd (30.06.2008)
Старый 30.06.2008, 19:59      #7
Ringo
Местный
 
Аватар для Ringo
 
Регистрация: 08.12.2006
Сообщений: 2,870
По умолчанию

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...
Ringo вне форума   Ответить с цитированием Вверх
Старый 30.06.2008, 20:09      #8
N0rd
Модератор
[Epic]
[Legion]
Пользователь Mozilla Firefox
 
Аватар для N0rd
 
Регистрация: 08.04.2006
Возраст: 31
Сообщений: 3,103
Пользователь играет в Call Of Duty 2Пользователь играет в Call Of Duty 4
По умолчанию

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

Ringo, чуть позже выложу, имеется несколько учебников.
Изображения
Тип файла: jpg f.JPG (15.4 Кб, 51 просмотров)
N0rd вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 30.06.2008, 20:16      #9
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

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

Приблизительно так:
Код HTML:
a {
	background: #FFF;
}

a:hover {
	background: #FFF url('1.png');
}
Шрифты, цвета и остальное тоже на CSS.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 1
N0rd (30.06.2008)
Старый 09.07.2008, 02:47      #10
N0rd
Модератор
[Epic]
[Legion]
Пользователь Mozilla Firefox
 
Аватар для N0rd
 
Регистрация: 08.04.2006
Возраст: 31
Сообщений: 3,103
Пользователь играет в Call Of Duty 2Пользователь играет в Call Of Duty 4
По умолчанию

Требуется помощь. На первом скрине показана страничка в браузере фф3, как видите все отлично, обращаю ваше внимание на отступы по левому и правому краю вокруг серого блока.
Теперь внимание на второй скрин. Та же самая страничка, только открытая в кривом осле. На этот раз серый блок прилип к левому краю страницы.
С чем связан сий баг и как его исправить?
Тегу body, являющемуся родительским по отношению к серому блоку прописано padding:0 14px;
В опере тоже все нормально с этими полями.
Изображения
Тип файла: png ff.png (69.2 Кб, 44 просмотров)
Тип файла: png ie.png (57.6 Кб, 41 просмотров)
N0rd вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 09.07.2008, 13:22      #11
Ringo
Местный
 
Аватар для Ringo
 
Регистрация: 08.12.2006
Сообщений: 2,870
По умолчанию

Сей "баг" связан с тем, что Некрософт плевали на стандарты w3c =\
__________________
Und wie du wieder aussiehst, Löcher in der Hose und ständig dieser Lärm...
Elektrische Gitarren und immer diese Texte...
Ringo вне форума   Ответить с цитированием Вверх
Старый 24.07.2008, 13:52      #12
SuperSkat
Местный
 
Аватар для SuperSkat
 
Регистрация: 05.10.2006
Адрес: Петрозаводск
Возраст: 26
Сообщений: 1,352
По умолчанию

Кто-нибудь знаком с поисковыми скриптами? Нужен скрипт который будет искать по протоколу ftp.
__________________
wish you were here
SuperSkat вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 31.07.2008, 18:07      #13
N0rd
Модератор
[Epic]
[Legion]
Пользователь Mozilla Firefox
 
Аватар для N0rd
 
Регистрация: 08.04.2006
Возраст: 31
Сообщений: 3,103
Пользователь играет в Call Of Duty 2Пользователь играет в Call Of Duty 4
По умолчанию

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

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

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


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

Последний раз редактировалось N0rd; 31.07.2008 в 18:07.
N0rd вне форума Пол: Мужчина   Ответить с цитированием Вверх
Благодарности: 3
glorden (19.07.2011), Ringo (02.08.2008), Rise (01.08.2008)
Старый 13.10.2008, 18:12      #14
SuperSkat
Местный
 
Аватар для SuperSkat
 
Регистрация: 05.10.2006
Адрес: Петрозаводск
Возраст: 26
Сообщений: 1,352
По умолчанию

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

Последний раз редактировалось SuperSkat; 13.10.2008 в 18:12.
SuperSkat вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 13.10.2008, 18:22      #15
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

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

Код HTML:
a {
	border: 1px solid #F00;
	border-right: 0;
	border-left: 0;
	text-decoration: none;
}

a:hover {
	background: #AAD0FF;
}
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 13.10.2008, 18:26      #16
SuperSkat
Местный
 
Аватар для SuperSkat
 
Регистрация: 05.10.2006
Адрес: Петрозаводск
Возраст: 26
Сообщений: 1,352
По умолчанию

MDM, при наведении курсора фон меняется только у текста, всё остальное пространство не меняется.
__________________
wish you were here
SuperSkat вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 13.10.2008, 18:31      #17
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

Я не вижу необходимый кусок кода и используемый DOCTYPE. Стиль, приведённый выше, работает.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 13.10.2008, 18:47      #18
SuperSkat
Местный
 
Аватар для SuperSkat
 
Регистрация: 05.10.2006
Адрес: Петрозаводск
Возраст: 26
Сообщений: 1,352
По умолчанию

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;
}
__________________
wish you were here
SuperSkat вне форума Пол: Мужчина   Ответить с цитированием Вверх
Старый 13.10.2008, 18:50      #19
Muskul
Заблокирован
 
Регистрация: 15.05.2008
Сообщений: 778
По умолчанию

Код 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>

Последний раз редактировалось Muskul; 13.10.2008 в 19:12.
Muskul вне форума   Ответить с цитированием Вверх
Благодарности: 1
SuperSkat (13.10.2008)
Старый 13.10.2008, 19:29      #20
MDM
Администратор
[BATTLE]TEAM
Пользователь Mozilla Firefox
 
Аватар для MDM
 
Регистрация: 20.03.2006
Адрес: Петрозаводск (Ситилинк)
Возраст: 42
Сообщений: 5,589
По умолчанию

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

Кстати, второй вариант, который предложил Muskul, удобней и я бы использовал его. Ссылки находятся в блоке (контейнере) и их удобно разруливать CSS.
__________________
[BATTLE]SERVER
MDM вне форума Пол: Мужчина   Ответить с цитированием Вверх
Ответ


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

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Обратная связь
Текущее время: 06:23. Часовой пояс GMT +3.


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