Battle Forum - Верстка

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

Показывать 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.

SuperSkat

13.10.2008 20:17

Вложений: 1

Вложение 71995, а надо чтобы не только под текстом был фон.

MDM	13.10.2008 20:37

Мы на месте топчемся. Ты так и не показал свой окончательный код.

Muskul

13.10.2008 22:08

SuperSkat, конечно, не видя кода, не совсем понятно, но, может, я в правильном направлении думаю:

Код HTML:

<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

Ну что я вам скажу, господа, заработало =) Спасибо всем.

MDM	13.10.2008 22:32

Только внимательней. Размер ссылок теперь фиксированный. Текст может уйти за бордюры при увеличении его размера.

И все же код ты не показал. :) Интересно было посмотреть, в каком месте косяк.

SuperSkat

13.10.2008 22:45

Код HTML:

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

}

Muskul

17.11.2008 14:05

Вложений: 1

Вопрос: как можно сделать динамически растягивающийся бэкграунд пунктов меню?
Допустим, так:
Вложение 74689

N0rd	18.11.2008 21:42

Muskul, почитай статейку, тут описан этот прием.

ДимON

20.11.2008 20:47

Существует валидатор http://www.jslint.com/ для javascript. Он ругается на функции типа document.write, alert, пишет, что они глобальные... А надо, чтобы скрипты мои прошли валидатор этот. Никто не знает, как можно решить проблемку? Буду очень благодаерен.

lourini

27.10.2010 18:18

Вложений: 1

возникал проблема, поставил на блог социальные кнопки, и нигде не могу найти, как сделать, чтоб они были по горизонтали, на определённом расстояние друг от друга, с помощью какого тега можно решить проблему?

SoaT	27.10.2010 18:58

lourini, UL, LI выранивать по горизонтали?

lourini

27.10.2010 19:25

SoaT, пробовал, не работает.. Когда гуглил, натыкался, что нужно возиться с css, но по делу ничего нет..

SoaT	28.10.2010 09:42

lourini,

Код:

ul li {

   float:left; /*горизонтальное выранивание*/

   list-style:none; /*чтобы небыло точек перед каждым LI*/

}

Добавлено через 43 секунды
тут к примеру: http://www.cssmaster.ru/Vyravnivanie...entru_stranicy

lourini

28.10.2010 14:40

SoaT, У меня плохие знание в html( Как правильно использовать css?

Код HTML:

<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, по идее вот так можно:

Код HTML:

<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 и выравнять ссылки.

lourini

30.10.2010 15:53

SuperSkat, очень коряво получается всё в разнобой, можешь подробнее про div вариант?

dar	30.10.2010 18:31

Код HTML:

<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 - это ресет обтекания.
Нужно так же учитывать, чтобы Элементы по ширине подходили.

lourini

31.10.2010 13:52

Вложений: 1

dar, уже почти, только не корректно отражается вконтакте, и твиттер отпадает, что не так?
Вложение 109149

Код HTML:

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

dar	31.10.2010 14:45

lourini, стукни 483646561.

Про контакт, скорее всего там тоже div используется. Можно попробовать так:

Код HTML:

div.wapper {float: left;

   padding: 0 2px 0 2px;

   margin: 0 2px 0 2px;}

А по поводу твиттера надо глянуть на блог.
Кинь ссылку в аську мне, я буду курить - гляну где жуки зарылись, попробую их выкопать .

SuperSkat

31.10.2010 15:55

lourini, в стиле margin:0; сделай, должно помочь.

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

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

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