Как отменить "перемешивание" между собой в футере баннера блока контактов и блока соцсетей?

@Vors · Регистрация: 03.06.2014

Author24 — интернет-сервис помощи студентам

а то получается фигня

@Sn1p3rOk · 23.07.2015, 03:28

Что значит "перемешивание"? Вкратце опишите чтобы я не запускал ваш код.

@Gabriel_Castro · 23.07.2015, 14:06

Расскажите подробнее что должно быть.
У Вас сперва текст в <h2> "ничего лишнего..."
затем картинка с надписью "уже можно и забыть про ..."
потом <div>КОНТАКТЫ
и текст "номер телефона" со ссылками на соц сети.

И у Вас эти элементы наслаиваются!
Вам нужно это исправить?
И еще они и должны быть друг под другом и по центру?

Добавлено через 3 часа 24 минуты
Подождал час, ответа нет.
переписал год полностью.
Много лишнего и неправильного.
исправлять и объяснять что не правильно - долго.
расположите все файлы правильно.
СТРУКТУРА КАТАЛОГОВ:
в корне файлы html,
и папки (img) (css) соответственно картинки и файлы css
Вам понадобится css-reset, код предоставлю, создайте файл css и подключите к странице.
Если расположите его в папке css, то он в коде html уже подключен.
Некоторый код закомментировал, его можно удалить, остальное переписал.

Остался пустым foote, скажите что нужно там расположить и как должно выглядеть и я Вам сделаю.
Т.к. сейчас не совсем будет красиво.

Код можно полностью скопировать и заменить.

Кстати, я отформатировал код в правильное и удобное представление, так как он и должен выглядеть.
Остался только раздел с книгами по ФИЛОСОФИИ, сделайте сами по примеру выше.

HTML5

<!DOCTYPE html>
<html>
<head>
<title>страница История как наука</title>
<meta charset="windows-1251">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<!--<div id="str"></div>-->
    <div id="header">
        <img align="right" src=http://www.imageup.ru/img280/2085138/3205841.jpg class="ipgW">
        <h1>
            Sckriptoriumsz.com
        </h1>
        <h2>
            Сайт безумного &laquo;книжного крота&raquo;
        </h2>
    </div>
    <div id="nav">
        <ul class="main-menu">
            <li><a href="#">ГЛАВНАЯ</a></li>
            <li><a href="#">ОТЕЧЕСТВЕННАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ЗАРУБЕЖНАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ИСТОРИЯ КАК НАУКА</a>
                <ul class="sub-menu">
                    <li><a href="#">Вспомогательные исторические дисциплины</a></li>
                    <li><a href="#">Теория.методология и философия истории</a></li>
                </ul>
            </li>
            <li><a href="">КОНТАКТЫ</a></li>
        </ul>
    </div>
    <div id="content">
        <h4>Теория. методология и философия исторического знания</h4>
                <h3>МЕТОДОЛОГИЯ:</h3>
                <p>
                    <a href=# target="_blank">
                        АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        БОРИС МОГЛЬНИЦКИЙ&nbsp;&nbsp;&laquo;Введение в методологию истории&raquo;&nbsp;&nbsp;(DJVU-odt-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВАЛЕНТИН КОЛОМИЙЦЕВ&nbsp;&nbsp;&laquo;Методология истории (от источника к исследованию)&raquo;&nbsp;&nbsp;(Firefox Html Document-DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВИКТОР ВАЗЮЛИН&nbsp;&nbsp;&laquo;Логика истории. Вопросы теории и методологии&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ВЛАДИМИР СИДОРЦОВ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(PDF )
                    </a>
                </p>
                <p>
                    <a href=#>
                        ИВАН КОВАЛЬЧЕНКО&nbsp;&nbsp;&laquo;Методы исторического исследования&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИЗРАИЛЬ БИСК&nbsp;&nbsp;&laquo;Методология истории Курс лекций&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИОГАНН ГУСТАВ ДРОЙЗЕН&nbsp;&nbsp;&laquo;Историка. Лекции об энциклопедии и методологии истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=target="_blank">
                        ЛЕВ СКВОРЦОВ&nbsp;&nbsp;&laquo;История и антиистория К критике буржуазной философии истории&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ЛЕОНИД ЗАШКИЛЬНЯК&nbsp;&nbsp;&laquo;Методология истории от древности до современности&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ЛОРИНА РЕПИНА&nbsp;&nbsp;&laquo;Историческая наука сегодня. Теории, методы, перспективы&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ ЛАПТЕВА&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ РУМЯНЦЕВА&nbsp;&nbsp;&laquo;Теория истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        НАДЕЖДА ДОРОШЕНКО&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        НИКОЛАЙ СМОЛЕНСКИЙ&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ШАРЛЬ ЛАНГЛУА&nbsp;&nbsp;&laquo;Введение в изучение истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
            <h3>ФИЛОСОФИЯ:</h3>
            <p><a href=https://yadi.sk/d/fZVYjNLdeyAN4
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;История России конец или новое начало&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/qJHCVe8_eyAw9
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&raquo; Том1&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/exqOtX-geyC6Q
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&laquo; Том2&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=https://yadi.sk/d/38vTOgpOeyC26
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Труды&raquo;&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЕРЫГИН&nbsp;&nbsp;&laquo;Восток запад Россия (становление цивилизационного подхода)&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ИРВИН&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЛОМОНОСОВ&nbsp;&nbsp;&laquo;Опыт трансцендентальной философии истории&raquo;&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР МАЛИНОВ АЛЕКСАНДР ПРОХОРЕНКО&nbsp;&nbsp;&laquo;Философия истории в России&raquo;&nbsp;&nbsp;(DJVU-PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ПАНАРИН (под ред)&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСЕЙ ЛОСЕВ&nbsp;&nbsp;&laquo;Античная философия истории&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=
            target="_blank">АНАТОЛИЙ АЛФЕРОВ&nbsp;&nbsp;&laquo;Идея общественного прогресса. Содержание и становление&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АНДРЕЙ РОДИН&nbsp;&nbsp;&laquo;Философия и конец истории&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРНОЛЬД ТОЙНБИ&nbsp;&nbsp;&laquo;Постижение истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-PDF)</a></p>
            <p><a href=
            target="_blank">АРОН ГУРЕВИЧ&nbsp;&nbsp;&laquo;Философия и история Теория формаций и реальность истории&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРТУР ДАНТО&nbsp;&nbsp;&laquo;Аналитическая философия истории&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">ВАЛЕНТИН РЮМИН&nbsp;&nbsp;&laquo;Историософия А.Дж. Тойнби&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВАЛЬТЕР БЕНЬЯМИН&nbsp;&nbsp;&laquo;О понятии истории&raquo;&nbsp;&nbsp;( Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ИЛЬИМ&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(PDF-DJVU)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ФЕЛЛЕР&nbsp;&nbsp;&laquo;Введение в историческую антропологию.&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВИЛЬЯМ ГРИН&nbsp;&nbsp;&laquo;Каркас истории&raquo;&nbsp;&nbsp;(txt- Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВЛАДИМИР ПАНТИН&nbsp;&nbsp;&laquo;Циклы и волны глобальной истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВОЙЦЕХ ВЖОЗЕК&nbsp;&nbsp;&laquo;Историография как игра метафор - судьбы новой исторической науки&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ГЕОРГ ВИЛЬГЕЛЬМ ГЕГЕЛЬ&nbsp;&nbsp;&laquo;Философия истории (Слово о сущем)&raquo;&nbsp;&nbsp;(PDF-fb2-DJVU)</a></p>
        </div>
    <div id="clear"></div>
    <div id="footer">
        <h1>Ничего лишнего &ndash; только необходимое</h1>
        
    </div>
</div>
</body>
</html>

css-reset

CSS

/* reset.css document */
@charset "windows-1251";
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      outline: none;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      list-style:none;
    }
html, body
    {
        height: 100%;
    }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
    {
        display: block;
    }
 
ol, ul
    {
        list-style: none;
    }
 
blockquote, q
    {
        quotes: none;
    }
blockquote:before, blockquote:after, q:before, q:after
    {
        content: '';
        content: none;
    }
strong
    {
        font-weight: bold;
    }
 
table
    {
        border-collapse: collapse;
        border-spacing: 0;
    }
img
    {
        border: 0; max-width: 100%;
    }

и основной css

CSS

body
    {
        padding:0;
        margin:0;
        background:#222222;
    }
 
h1
    {   
        text-align:left;
        margin:45px 0px 0px 25px;
        font-size:68px;
        color:black;
        text-shadow:1px 1px 2px WHITE,-1px -1px 2px WHITE;
    }
h2
    {
        text-align:left;
        margin:20px 0px 0px 25px;
        font-size:23px;
        color:white;
    }
 
h4
    {
        text-align:center;
        padding:5px 0px 5px 0px;
        background:purple;
        font-size:27px;
        color:white;
    }
 
h5
    {
        text-align:right;
        margin:25px 422px 15px 0px;
        font-size: 25px;
    }
 
#container
    {
        position:relative;
        width: 95%;
        background:#323232;
        margin:100px auto;
    }
 
/*
    #str
        {
            height: 51px;
            width:100%;
            background:black;
            margin-bottom:-55px; 
            padding:0;
            border: 10px solid #f00;
        }
*/
 
#header
    {
        height: 250px;
        width:100%;
    }
 
 
#nav
    {
        float: left;
        width: 250px;
    }
 
    
/*
    .ipgW
        {
            float:right ;
            margin-right: 65px;
            margin-top: 45px;
        }   
*/
    
    .main-menu
        {
            list-style:none;
            margin:25px auto;
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px;
                    z-index:11;
                    width:170px;
                }
            
            .main-menu>li:hover .sub-menu
                {
                    display:block;
                }
 
#content
    {
        position:relative;
        margin:0 0 0 250px;
        padding:5px;
        color:#fff;;
    }
 
        #content p
            {
                padding:10px;
            }
 
 
/*
.Sschindlerr ul
    {
        font-size:18px;
        list-style-type:circle;
        text-align:left;
        padding-top:45px;
    }
 
 
.DRINKC
    {
        text-decoration:none;
        padding:18px 25px;
    }
 
.Sschindler2r ul
    {
        font-size:18px;
        list-style-type:circle;
        text-align:left;
        padding-top:45px;
    }
 
.DRINKz
    {
        text-decoration:none;
        padding:8px 25px;
    }
*/
#clear
    {
        clear:both;
        padding:0;
        margin:0;
    }
 
#footer
    {
        color:white;
        height:300px;
        border:1px solid#f00;
    }
 
/*
.ipgQ {
text-align:right;
margin:25px 422px 15px 0px;
border:3px solid #fff;
}
 
.svyaz {
background: darkblue;
border:1px solid white;  
color: #fff;
margin: 47px 0px 27px 435px;
padding: 25px;
width:23em;
height: 120px;
}
 
.svyaz p {
margin: 4em 0; 
overflow: hidden;
height: 100%;
}
 
.svyaz img {
border:2px solid white;  
float: left; 
margin-right: 2em;
}
 
.share{
width:270px;
border:1px solid white;
border-radius:2%;
margin:0 auto;
margin-top:120px;
padding:10px;
padding-left:20px;
background:blue;
}
 
.share b{
margin-right:15px;
color:white;
font-weight:normal;
text-transform:uppercase;
}
 
.social {
display:inline-block;
border:1px solid white;
border-radius:50%;
width:40px;
height:40px;
margin-right:10px;
vertical-align:middle;
line-height: 38px;
text-decoration:none;
}
 
.social-vk{
text-align:center;
color:white;
background-color:#400000;
background-position: 0 0;
}
 
.social-fb{
text-align:center;
color:white;
background-color:#400000;
background-position: -40px 0;
}
 
.social-tw{
text-align:center;
color:white;
background-color:#400000;
background-position: -80px 0;
}
*/

Еще, для красоты я изменил основной фон и фон тегов, но передать картинки (патерны) не могу.
Для видимости цвет немного отличается. Его и нужно заменить.
Здесь уже на Ваше усмотрение.

@Vors · 23.07.2015, 15:01 **[ТС]**

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

Вам нужно это исправить?
И еще они и должны быть друг под другом и по центру?

да - друг под другом и по центру
а у меня блок с контактами
прилипает собака к баннеру
[del]

к тому же в первом списке лит-ры откуда-то
взялось черное выделение пунктов списка
при наведении мыши (не планировалось вообще!)

Что сразу не ответил -прошу прощения
вырубил ноут чтоб по нему ж не настучать
со злости

не вытанцовывалось как себе представлял

за "вычищенный" код
и потраченное на мня время
спасибо

про цвета мне и раньше твердили - вероятно
от темного фона придется таки отказываться

Добавлено через 55 секунд

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

не запускал ваш код.

вирусов не запускаю чес-слово

Добавлено через 7 минут

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

кажите что нужно там расположить и как должно выг

должно было
сверху вниз соот-но одно под другим
1 текст Ничего лишнего только необходимое
2 баннер с текстом про библ-ку
3 блок контактов
4 блок соцсетей

как вар- т
блок соцсетей и блок контактов на одном уровне
соцсети слева -контакты справа
()для красоты

@Alexander519151 · 23.07.2015, 18:20

Всем привет.
Gabriel_Castro , Вы молодец! Посмотрел Ваш код, очень хорошо. (и правильно и красиво)
Все рассказали. Получается Вы заново написали весь код для сайта. (пусть это и одна страница, но на ее основе все и делается).
И мне стало интересно, т.к. Gabriel_Castro, не говорит, что нужно искать ответы в интернете, а взял и сделал.
Хочу посмотреть на конечный вариант и, возможно, что-то добавлю.
Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь?

@Gabriel_Castro · 24.07.2015, 08:31

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

про цвета мне и раньше твердили - вероятно
от темного фона придется таки отказываться

Это дело вкуса, кому как нравится. Черный, так черный. Главное как Вам нравится.

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

должно было
сверху вниз соот-но одно под другим
1 текст Ничего лишнего только необходимое
2 баннер с текстом про библ-ку
3 блок контактов
4 блок соцсетей
как вар- т
блок соцсетей и блок контактов на одном уровне
соцсети слева -контакты справа

Хорошо, сегодня сделаю. Постараюсь до 13:00 по МСК.

Добавлено через 2 часа 55 минут
Все, готово.
Посмотрите, если что-то изменить скажите.
кнопки соц. сетей картинкой и в рамке. Т.к. картинок у Вас нет, то будет отображаться только рамка.
Когда поставите картинки, уберите рамку в css.

Вот код заменить полностью с тега footer 178 строка и до конца.

HTML5

    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="block_socials">
            <div class="socials2">
                <a href="http://о-вконтакте.рф/">
                    <img src="/img/f.png" width="40" height="40" alt="f">
                </a>
                <a href="https://ru.wikipedia.org/wiki/Facebook">
                    <img src="/img/f.png" width="40" height="40" alt="f">
                </a>
                <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                    <img src="/img/f.png" width="40" height="40" alt="f">
                </a>
            </div><!--socials2-->
            
            <div class="contacts">
                <h2>
                    КОНТАКТЫ<br>
                    +7 (921) 555 33 22<br>
                    <a href="mailto:mai@htmlacadamy.ru">
                        mail@htmlacademy.ru
                    </a>
                </h2>
            </div><!--contacts-->
        </div><!--block_socials-->
    </div><!--footer-->
</div><!--container-->
</body>
</html>

И код css.
Заметить #footer и до конца, ничего не оставляя.

CSS

#footer
    {
        position:relative;
        color:white;
        height:300px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .block_socials
            {
                position:relative;
                display:block;
                width:650px;
                height:200px;
                margin:0 auto;
            }
            
            .socials2
                {
                    display:block;
                    position:relative;
                    float:left;
                    width:320px;
                    margin:0 auto;
                    padding:0;
                }
                
                    #footer .socials2 img
                        {
                            float:left;
                            margin:30px;
                            border:1px solid #f00;
                        }
            
            .contacts
                {
                    display:block;
                    position:relative;
                    float:left;
                    width:320px;
                    margin:0 auto;
                    padding:o;
                }

Вопросы, исправления - задавайте, говорите - поможем.

@Vors · 24.07.2015, 16:56 **[ТС]**

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

Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь?

notepad++

да за меня тут многие сделали очень ОЧЕНЬ много
такя и не отрицаю
и благодарить вроде не забываб

Добавлено через 1 час 15 минут

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

Вопросы, исправления - задавайте, говорите - поможем.

социальные кнопки предполагалось сделать круглыми а не квадратными
+ они были в моем "кривом"
коде покрашены в цвет "#400040"
и никакого фонового img
куда теперь в какое место кода вставить border-radius 50 процентов
к тому же буквы
VK
Fb
Tw

были ровно посередине кругов а не в левом углу
верхнем

Добавлено через 16 минут
Gabriel_Castro,
а вот картинок иконок для контактов вообще нет
хотя вот они в предыдущем моем неправильном коде

HTML5

<img src="http://www.imageup.ru/img272/2184892/ff.jpg">
+7 (921) 555 33 22
</p>
<p>
<img src="http://www.imageup.ru/img272/2184893/i.jpg">
<a href="mailto:mai@htmlacadamy.ru">mail@htmlacademy.ru</a>

Добавлено через 3 минуты

Как отменить "перемешивание" между собой в футере баннера блока контактов и блока соцсетей?

иконки к контактам
круглые соцкнопки
которые надо бы увеличить ну пусть до 65 пикс

Комментарий администратора TaatshiЗагружайте изображения и файлы на форум и прикрепляйте к сообщению.
Обновленная Памятка «Как работать в редакторе сообщений»

@Gabriel_Castro · 25.07.2015, 08:17

Хорошо, понял Вас, сегодня сделаю. До 13:00 по МСК

Добавлено через 2 часа 24 минуты
все готово.

кнопки соц сетей:
- на чистом css,
- круглые,
- при наведении плавное перетекание цвета,
- при нажатии плавное вдавливание.

Предлагаю не использовать картинки для контактов (клавиатура и конверт) - мешают.
Если очень нужно, то:
- либо табличная верстка только для footer'a
- либо большая вложенность div
из-за этого много лишнего кода.

Немного переделал код в footer'e
Убрал лишнее и убрал лишнюю вложенность.

Для кнопок соц. сетей можно сделать тень и при нажатии добиться красивого эффекта нажатия.
Попробуйте сами. Сперва тень только cybpe, при нажатии тень только сверху и плавно.

вот код, полностью меняем footer и до конца (вообще все до конца.)

HTML5

    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="contacts">
            <h2>КОНТАКТЫ</h2>
            <a href="http://о-вконтакте.рф/">
                <div class="vk">
                    VK
                </div>
            </a>
            <a href="https://ru.wikipedia.org/wiki/Facebook">
                <div class="f">
                    Fb
                </div>
            </a>
            <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                <div class="tw">
                    Tw
                </div>
            </a><br>
                +7 (921) 555 33 22<br><br><br>
            <a href="mailto:mai@htmlacadamy.ru">
                mail@htmlacademy.ru
            </a>
        </div><!--contacts-->
    </div><!--footer-->
</div><!--container-->
</body>
</html>

и css меняем footer и до конца.

CSS

#footer
    {
        position:relative;
        color:white;
        height:350px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .contacts
            {
                position:relative;
                display:block;
                width:555px;
                height:200px;
                margin:0 auto;
            }
            
                    .contacts .vk
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:10px 0 0 7px;
                            font-size:38px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .vk
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .vk
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .f
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 16px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .f
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            
                            .contacts a:active .f
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .tw
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 12px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                    
                            .contacts a:hover .tw
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .tw
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }

Вот, как-то, так.
смотрите, пробуйте.

@Vors · 26.07.2015, 15:56 **[ТС]**

Gabriel_Castro,
соцкнопки получились достаточно крупными и видными
только вот почему номер тел-на (в последствии номер джаббера
или аськи) справа от них притом чуть ли не впритык?
а емейл (впоследствии тоже совершенно понтяно иной)
ПОД НИМИ и опять же вплотную?!

@Vors · 26.07.2015, 15:58 **[ТС]**

тогда как уговорились соцкнопки и контакты под баннером о библ-ке
притом соцкнопки ближе к левом борту футера а конткакты к правому!

@Vors · 26.07.2015, 16:13 **[ТС]**

в вашем коде (влож 1)

нет блоков перехода страниц
блока комментариев
в от отличии от моего тяжелого варианта кода
(вл2)

+
в меню и соот-но субменю нет рамок
субменю слишкм далеко отстает при выпадении от
основного менб

@Vors · 26.07.2015, 16:21 **[ТС]**

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

и основной css

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

css-reset

не понимаю простите разницы и назначения reset

а также

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

не urf-8 разве??

Добавлено через 3 минуты
а вот это
<p>

Javascript

1
2
3

<a href=# target="_blank">
АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)</a>
</p>

и впрямь лучше чем

HTML5

МЕТОДОЛОГИЯ:
<li><a class="DRINKC" href=
 target="_blank">АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;«Методология истории»&nbsp;&nbsp;(fb2-PDF)</a></li>
<li><a class="DRINKC" href=

@Gabriel_Castro · 27.07.2015, 08:45

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

соцкнопки получились достаточно крупными и видными
только вот почему номер тел-на (в последствии номер джаббера
или аськи) справа от них притом чуть ли не впритык?
а емейл (впоследствии тоже совершенно понтяно иной)
ПОД НИМИ и опять же вплотную?!

У Вас по другому.
Вот мой скрин всей страницы.

тлф и E-mail строго равномерно по верикали от середины кнопок.
Буквы на кнопках ровно по центру. Зависит от размера шрифта, от названия шрифта и потом в ручную подгоняются внутренние отступы.

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

в меню и соот-но субменю нет рамок

если нужна рамка, то можно приписать в css с 62 строки. Далее я указал код с комментариями.

CSS

    .main-menu
        {
            list-style:none;
            margin:25px auto;
            border:1px solid#f00; /*рамка только для всего блока меню*/
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                    border:1px solid#0f0; /*рамка для всего меню и для каждого пункта и для под меню*/
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px; /*отступ слева для под меню*/
                    z-index:11;
                    width:170px;
                    border:1px solid#ff0; /* указывает другую рамку для под меню с пунктами*/
                }
                /*если указать все три рамки, по не красиво. Указываем одну или две, если нужно переназначить для под меню.*/

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

субменю слишкм далеко отстает при выпадении от
основного менб

У меня на скрине - сразу после основного меню.
Этот параметр указан в строке 96 в коде без применения варианта из этого ответа.
В любом случае есть комментарий в коде выше в данном ответе.

reset.css нужен для сброса параметров по умолчанию, которые есть в браузере, для очистки или удаления отступов, маркеров рамок и т.д.
У нас в коде используется тег li он, по умолчанию идет с маркерами, в меню и в других местах он нам не нужен. Поэтому на данной странице мы применили reset.css и в т.ч. избавились от этих маркеров.
reset.css каждый составляет сам для каждого сайта.
Некоторые не заморачиваются и применяют полный reset.css повсеместно.
У меня на многих сайтах указано только

CSS

html, body {
    position:relative;
    margin:0;
    padding:0;
    height:100%;
    }

и то только в main.css, в начале, и все

По поводу

HTML5

1	<meta charset="windows-1251">

На этот вопрос Вам никто точно не ответит. (... сейчас гневные высказывания посыпятся)
utf-8 универсальная кодировка, которая и должна использоваться, в соответствии со спецификациями W3C (это организация, которая разрабатывает правила для web). И по ее мнению нельзя использовать НИКАКОЙ другой язык кроме английского (латиница).
Соответственно для сайтов на русском языке (по их мнению) (nuzhno pisat tolko tak) - блин, еле написал.

Что бы на странице отображались не каракули, а русские символы (кириллица) нужно использовать (windows-1251) это кодировка русских символов.
Да, не проходит проверку на W3С, говорит ошибка в кодировке, измените на utf-8
Ну и ладно, я делаю сайты для России, а не для америки. И, соответственно текст должен быть на русском языке!

Для тех, кому не нравится, поступайте, как считаете нужным. Спорить не буду.

Далее по поводу ссылок, сразу с комментариями.

HTML5

<a href=# target="_blank">
 
<a href=# - это пустая ссылка.
target="_blank"> - этот параметр указывает, что данную ссылку нужно открывать в новом окне.

Если нужен весь код, со всеми изменениями, скажите, а то в этом сообщении уже предел.

@Vors · 27.07.2015, 13:44 **[ТС]**

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

Если нужен весь код, со всеми изменениями,

да -нужен
а что насчет комментов и переходника страниц?
у меня правильно? (вложение2)

@Gabriel_Castro · 28.07.2015, 11:54

Хорошо, вот код

HTML5

<!DOCTYPE html>
<html>
<head>
<title>страница История как наука</title>
<meta charset="windows-1251">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<!--<div id="str"></div>-->
    <div id="header">
        <img align="right" src=http://www.imageup.ru/img280/2085138/3205841.jpg class="ipgW">
        <h1>
            Sckriptoriumsz.com
        </h1>
        <h2>
            Сайт безумного &laquo;книжного крота&raquo;
        </h2>
    </div>
    <div id="nav">
        <ul class="main-menu">
            <li><a href="#">ГЛАВНАЯ</a></li>
            <li><a href="#">ОТЕЧЕСТВЕННАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ЗАРУБЕЖНАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ИСТОРИЯ КАК НАУКА</a>
                <ul class="sub-menu">
                    <li><a href="#">Вспомогательные исторические дисциплины</a></li>
                    <li><a href="#">Теория.методология и философия истории</a></li>
                </ul>
            </li>
            <li><a href="">КОНТАКТЫ</a></li>
        </ul>
    </div>
    <div id="content">
        <h4>Теория. методология и философия исторического знания</h4>
                <h3>МЕТОДОЛОГИЯ:</h3>
                <p>
                    <a href=# target="_blank">
                        АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        БОРИС МОГЛЬНИЦКИЙ&nbsp;&nbsp;&laquo;Введение в методологию истории&raquo;&nbsp;&nbsp;(DJVU-odt-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВАЛЕНТИН КОЛОМИЙЦЕВ&nbsp;&nbsp;&laquo;Методология истории (от источника к исследованию)&raquo;&nbsp;&nbsp;(Firefox Html Document-DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВИКТОР ВАЗЮЛИН&nbsp;&nbsp;&laquo;Логика истории. Вопросы теории и методологии&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ВЛАДИМИР СИДОРЦОВ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(PDF )
                    </a>
                </p>
                <p>
                    <a href=#>
                        ИВАН КОВАЛЬЧЕНКО&nbsp;&nbsp;&laquo;Методы исторического исследования&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИЗРАИЛЬ БИСК&nbsp;&nbsp;&laquo;Методология истории Курс лекций&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИОГАНН ГУСТАВ ДРОЙЗЕН&nbsp;&nbsp;&laquo;Историка. Лекции об энциклопедии и методологии истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=target="_blank">
                        ЛЕВ СКВОРЦОВ&nbsp;&nbsp;&laquo;История и антиистория К критике буржуазной философии истории&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ЛЕОНИД ЗАШКИЛЬНЯК&nbsp;&nbsp;&laquo;Методология истории от древности до современности&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ЛОРИНА РЕПИНА&nbsp;&nbsp;&laquo;Историческая наука сегодня. Теории, методы, перспективы&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ ЛАПТЕВА&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ РУМЯНЦЕВА&nbsp;&nbsp;&laquo;Теория истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        НАДЕЖДА ДОРОШЕНКО&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        НИКОЛАЙ СМОЛЕНСКИЙ&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ШАРЛЬ ЛАНГЛУА&nbsp;&nbsp;&laquo;Введение в изучение истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
            <h3>ФИЛОСОФИЯ:</h3>
            <p><a href=https://yadi.sk/d/fZVYjNLdeyAN4
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;История России конец или новое начало&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/qJHCVe8_eyAw9
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&raquo; Том1&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/exqOtX-geyC6Q
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&laquo; Том2&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=https://yadi.sk/d/38vTOgpOeyC26
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Труды&raquo;&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЕРЫГИН&nbsp;&nbsp;&laquo;Восток запад Россия (становление цивилизационного подхода)&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ИРВИН&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЛОМОНОСОВ&nbsp;&nbsp;&laquo;Опыт трансцендентальной философии истории&raquo;&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР МАЛИНОВ АЛЕКСАНДР ПРОХОРЕНКО&nbsp;&nbsp;&laquo;Философия истории в России&raquo;&nbsp;&nbsp;(DJVU-PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ПАНАРИН (под ред)&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСЕЙ ЛОСЕВ&nbsp;&nbsp;&laquo;Античная философия истории&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=
            target="_blank">АНАТОЛИЙ АЛФЕРОВ&nbsp;&nbsp;&laquo;Идея общественного прогресса. Содержание и становление&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АНДРЕЙ РОДИН&nbsp;&nbsp;&laquo;Философия и конец истории&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРНОЛЬД ТОЙНБИ&nbsp;&nbsp;&laquo;Постижение истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-PDF)</a></p>
            <p><a href=
            target="_blank">АРОН ГУРЕВИЧ&nbsp;&nbsp;&laquo;Философия и история Теория формаций и реальность истории&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРТУР ДАНТО&nbsp;&nbsp;&laquo;Аналитическая философия истории&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">ВАЛЕНТИН РЮМИН&nbsp;&nbsp;&laquo;Историософия А.Дж. Тойнби&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВАЛЬТЕР БЕНЬЯМИН&nbsp;&nbsp;&laquo;О понятии истории&raquo;&nbsp;&nbsp;( Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ИЛЬИМ&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(PDF-DJVU)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ФЕЛЛЕР&nbsp;&nbsp;&laquo;Введение в историческую антропологию.&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВИЛЬЯМ ГРИН&nbsp;&nbsp;&laquo;Каркас истории&raquo;&nbsp;&nbsp;(txt- Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВЛАДИМИР ПАНТИН&nbsp;&nbsp;&laquo;Циклы и волны глобальной истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВОЙЦЕХ ВЖОЗЕК&nbsp;&nbsp;&laquo;Историография как игра метафор - судьбы новой исторической науки&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ГЕОРГ ВИЛЬГЕЛЬМ ГЕГЕЛЬ&nbsp;&nbsp;&laquo;Философия истории (Слово о сущем)&raquo;&nbsp;&nbsp;(PDF-fb2-DJVU)</a></p>
        </div>
    <div id="clear"></div>
    
    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="contacts">
            <h2>КОНТАКТЫ</h2>
            <a href="http://о-вконтакте.рф/">
                <div class="vk">
                    VK
                </div>
            </a>
            <a href="https://ru.wikipedia.org/wiki/Facebook">
                <div class="f">
                    Fb
                </div>
            </a>
            <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                <div class="tw">
                    Tw
                </div>
            </a><br>
                +7 (921) 555 33 22<br><br><br>
            <a href="mailto:mai@htmlacadamy.ru">
                mail@htmlacademy.ru
            </a>
        </div><!--contacts-->
    </div><!--footer-->
</div><!--container-->
</body>
</html>

CSS

body
    {
        padding:0;
        margin:0;
        background:#222222;
    }
 
h1
    {   
        text-align:left;
        margin:45px 0px 0px 25px;
        font-size:68px;
        color:black;
        text-shadow:1px 1px 2px WHITE,-1px -1px 2px WHITE;
    }
h2
    {
        text-align:left;
        margin:20px 0px 0px 25px;
        font-size:23px;
        color:white;
    }
 
h4
    {
        text-align:center;
        padding:5px 0px 5px 0px;
        background:purple;
        font-size:27px;
        color:white;
    }
 
h5
    {
        text-align:right;
        margin:25px 422px 15px 0px;
        font-size: 25px;
    }
 
#container
    {
        position:relative;
        width: 95%;
        background:#323232;
        margin:100px auto;
    }
 
#header
    {
        height: 250px;
        width:100%;
    }
 
 
#nav
    {
        float: left;
        width: 250px;
    }
 
    
    .main-menu
        {
            list-style:none;
            margin:25px auto;
            border:1px solid#f00; /*рамка только для всего блока меню*/
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                    border:1px solid#0f0; /*рамка для всего меню и для каждого пункта и для под меню*/
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px; /*отступ слева для под меню*/
                    z-index:11;
                    width:170px;
                    border:1px solid#ff0; /* указывает другую рамку для под меню с пунктами*/
                }
                /*если указать все три рамки, по не красиво. Указываем одну или две, если нужно переназначить для под меню.*/
            
            .main-menu>li:hover .sub-menu
                {
                    display:block;
                }
 
#content
    {
        position:relative;
        margin:0 0 0 250px;
        padding:5px;
        color:#fff;;
    }
 
        #content p
            {
                padding:10px;
            }
 
 
#clear
    {
        clear:both;
        padding:0;
        margin:0;
    }
 
#footer
    {
        position:relative;
        color:white;
        height:350px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .contacts
            {
                position:relative;
                display:block;
                width:555px;
                height:200px;
                margin:0 auto;
            }
            
                    .contacts .vk
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:10px 0 0 7px;
                            font-size:38px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .vk
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .vk
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .f
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 16px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .f
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            
                            .contacts a:active .f
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .tw
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 12px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                    
                            .contacts a:hover .tw
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .tw
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }

по поводу ссылок

HTML5

<a href="#prev">Назад</a><!--здесь не знаю, может кто подскажет, не сталкивался-->
<a href="#1">1</a><!--здесь правильно, только ссылка пустая. нужно указать на какой файл ссылается
(вместо #1 нужно index.html если файл в этой же папке, если в другой, готорая в этой же, то folder/index.html,
если папка уровнем выше, то переход на каталог выше ../folder/index.html,
можно от корня /index.html, /folder/folder2/index.thml) имя файла привел для примера.-->
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#next" >Вперед</a>

По поводу коментариев, расскажите подробнее. Не понял задачи.

@Gabriel_Castro · 28.07.2015, 11:54

Хорошо, вот код

HTML5

<!DOCTYPE html>
<html>
<head>
<title>страница История как наука</title>
<meta charset="windows-1251">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<!--<div id="str"></div>-->
    <div id="header">
        <img align="right" src=http://www.imageup.ru/img280/2085138/3205841.jpg class="ipgW">
        <h1>
            Sckriptoriumsz.com
        </h1>
        <h2>
            Сайт безумного &laquo;книжного крота&raquo;
        </h2>
    </div>
    <div id="nav">
        <ul class="main-menu">
            <li><a href="#">ГЛАВНАЯ</a></li>
            <li><a href="#">ОТЕЧЕСТВЕННАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ЗАРУБЕЖНАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ИСТОРИЯ КАК НАУКА</a>
                <ul class="sub-menu">
                    <li><a href="#">Вспомогательные исторические дисциплины</a></li>
                    <li><a href="#">Теория.методология и философия истории</a></li>
                </ul>
            </li>
            <li><a href="">КОНТАКТЫ</a></li>
        </ul>
    </div>
    <div id="content">
        <h4>Теория. методология и философия исторического знания</h4>
                <h3>МЕТОДОЛОГИЯ:</h3>
                <p>
                    <a href=# target="_blank">
                        АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        БОРИС МОГЛЬНИЦКИЙ&nbsp;&nbsp;&laquo;Введение в методологию истории&raquo;&nbsp;&nbsp;(DJVU-odt-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВАЛЕНТИН КОЛОМИЙЦЕВ&nbsp;&nbsp;&laquo;Методология истории (от источника к исследованию)&raquo;&nbsp;&nbsp;(Firefox Html Document-DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВИКТОР ВАЗЮЛИН&nbsp;&nbsp;&laquo;Логика истории. Вопросы теории и методологии&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ВЛАДИМИР СИДОРЦОВ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(PDF )
                    </a>
                </p>
                <p>
                    <a href=#>
                        ИВАН КОВАЛЬЧЕНКО&nbsp;&nbsp;&laquo;Методы исторического исследования&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИЗРАИЛЬ БИСК&nbsp;&nbsp;&laquo;Методология истории Курс лекций&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИОГАНН ГУСТАВ ДРОЙЗЕН&nbsp;&nbsp;&laquo;Историка. Лекции об энциклопедии и методологии истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=target="_blank">
                        ЛЕВ СКВОРЦОВ&nbsp;&nbsp;&laquo;История и антиистория К критике буржуазной философии истории&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ЛЕОНИД ЗАШКИЛЬНЯК&nbsp;&nbsp;&laquo;Методология истории от древности до современности&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ЛОРИНА РЕПИНА&nbsp;&nbsp;&laquo;Историческая наука сегодня. Теории, методы, перспективы&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ ЛАПТЕВА&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ РУМЯНЦЕВА&nbsp;&nbsp;&laquo;Теория истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        НАДЕЖДА ДОРОШЕНКО&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        НИКОЛАЙ СМОЛЕНСКИЙ&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ШАРЛЬ ЛАНГЛУА&nbsp;&nbsp;&laquo;Введение в изучение истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
            <h3>ФИЛОСОФИЯ:</h3>
            <p><a href=https://yadi.sk/d/fZVYjNLdeyAN4
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;История России конец или новое начало&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/qJHCVe8_eyAw9
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&raquo; Том1&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/exqOtX-geyC6Q
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&laquo; Том2&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=https://yadi.sk/d/38vTOgpOeyC26
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Труды&raquo;&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЕРЫГИН&nbsp;&nbsp;&laquo;Восток запад Россия (становление цивилизационного подхода)&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ИРВИН&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЛОМОНОСОВ&nbsp;&nbsp;&laquo;Опыт трансцендентальной философии истории&raquo;&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР МАЛИНОВ АЛЕКСАНДР ПРОХОРЕНКО&nbsp;&nbsp;&laquo;Философия истории в России&raquo;&nbsp;&nbsp;(DJVU-PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ПАНАРИН (под ред)&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСЕЙ ЛОСЕВ&nbsp;&nbsp;&laquo;Античная философия истории&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=
            target="_blank">АНАТОЛИЙ АЛФЕРОВ&nbsp;&nbsp;&laquo;Идея общественного прогресса. Содержание и становление&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АНДРЕЙ РОДИН&nbsp;&nbsp;&laquo;Философия и конец истории&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРНОЛЬД ТОЙНБИ&nbsp;&nbsp;&laquo;Постижение истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-PDF)</a></p>
            <p><a href=
            target="_blank">АРОН ГУРЕВИЧ&nbsp;&nbsp;&laquo;Философия и история Теория формаций и реальность истории&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРТУР ДАНТО&nbsp;&nbsp;&laquo;Аналитическая философия истории&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">ВАЛЕНТИН РЮМИН&nbsp;&nbsp;&laquo;Историософия А.Дж. Тойнби&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВАЛЬТЕР БЕНЬЯМИН&nbsp;&nbsp;&laquo;О понятии истории&raquo;&nbsp;&nbsp;( Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ИЛЬИМ&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(PDF-DJVU)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ФЕЛЛЕР&nbsp;&nbsp;&laquo;Введение в историческую антропологию.&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВИЛЬЯМ ГРИН&nbsp;&nbsp;&laquo;Каркас истории&raquo;&nbsp;&nbsp;(txt- Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВЛАДИМИР ПАНТИН&nbsp;&nbsp;&laquo;Циклы и волны глобальной истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВОЙЦЕХ ВЖОЗЕК&nbsp;&nbsp;&laquo;Историография как игра метафор - судьбы новой исторической науки&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ГЕОРГ ВИЛЬГЕЛЬМ ГЕГЕЛЬ&nbsp;&nbsp;&laquo;Философия истории (Слово о сущем)&raquo;&nbsp;&nbsp;(PDF-fb2-DJVU)</a></p>
        </div>
    <div id="clear"></div>
    
    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="contacts">
            <h2>КОНТАКТЫ</h2>
            <a href="http://о-вконтакте.рф/">
                <div class="vk">
                    VK
                </div>
            </a>
            <a href="https://ru.wikipedia.org/wiki/Facebook">
                <div class="f">
                    Fb
                </div>
            </a>
            <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                <div class="tw">
                    Tw
                </div>
            </a><br>
                +7 (921) 555 33 22<br><br><br>
            <a href="mailto:mai@htmlacadamy.ru">
                mail@htmlacademy.ru
            </a>
        </div><!--contacts-->
    </div><!--footer-->
</div><!--container-->
</body>
</html>

CSS

body
    {
        padding:0;
        margin:0;
        background:#222222;
    }
 
h1
    {   
        text-align:left;
        margin:45px 0px 0px 25px;
        font-size:68px;
        color:black;
        text-shadow:1px 1px 2px WHITE,-1px -1px 2px WHITE;
    }
h2
    {
        text-align:left;
        margin:20px 0px 0px 25px;
        font-size:23px;
        color:white;
    }
 
h4
    {
        text-align:center;
        padding:5px 0px 5px 0px;
        background:purple;
        font-size:27px;
        color:white;
    }
 
h5
    {
        text-align:right;
        margin:25px 422px 15px 0px;
        font-size: 25px;
    }
 
#container
    {
        position:relative;
        width: 95%;
        background:#323232;
        margin:100px auto;
    }
 
#header
    {
        height: 250px;
        width:100%;
    }
 
 
#nav
    {
        float: left;
        width: 250px;
    }
 
    
    .main-menu
        {
            list-style:none;
            margin:25px auto;
            border:1px solid#f00; /*рамка только для всего блока меню*/
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                    border:1px solid#0f0; /*рамка для всего меню и для каждого пункта и для под меню*/
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px; /*отступ слева для под меню*/
                    z-index:11;
                    width:170px;
                    border:1px solid#ff0; /* указывает другую рамку для под меню с пунктами*/
                }
                /*если указать все три рамки, по не красиво. Указываем одну или две, если нужно переназначить для под меню.*/
            
            .main-menu>li:hover .sub-menu
                {
                    display:block;
                }
 
#content
    {
        position:relative;
        margin:0 0 0 250px;
        padding:5px;
        color:#fff;;
    }
 
        #content p
            {
                padding:10px;
            }
 
 
#clear
    {
        clear:both;
        padding:0;
        margin:0;
    }
 
#footer
    {
        position:relative;
        color:white;
        height:350px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .contacts
            {
                position:relative;
                display:block;
                width:555px;
                height:200px;
                margin:0 auto;
            }
            
                    .contacts .vk
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:10px 0 0 7px;
                            font-size:38px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .vk
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .vk
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .f
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 16px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .f
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            
                            .contacts a:active .f
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .tw
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 12px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                    
                            .contacts a:hover .tw
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .tw
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }

по поводу ссылок

HTML5

<a href="#prev">Назад</a><!--здесь не знаю, может кто подскажет, не сталкивался-->
<a href="#1">1</a><!--здесь правильно, только ссылка пустая. нужно указать на какой файл ссылается
(вместо #1 нужно index.html если файл в этой же папке, если в другой, готорая в этой же, то folder/index.html,
если папка уровнем выше, то переход на каталог выше ../folder/index.html,
можно от корня /index.html, /folder/folder2/index.thml) имя файла привел для примера.-->
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#next" >Вперед</a>

По поводу коментариев, расскажите подробнее. Не понял задачи.

@Alexander519151 · 28.07.2015, 20:51

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

Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь?

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

notepad++

Хотел бы посоветовать Adobe Dreamveawer. Вот здесь есть хорошее описание.
Через что вы редактируете код?

@Vors · 30.07.2015, 16:23 **[ТС]**

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

Хотел бы посоветовать Adobe Dreamveawer. Вот здесь есть хорошее описание.
Через что вы редактируете код?

угу гляну

а интерфейс у него можно черно-белым сделать?

Добавлено через 2 минуты

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

По поводу коментариев, расскажите подробнее. Не понял задачи.

сам код блока комментов более менее?

Добавлено через 11 минут

HTML5

<div class=" comment-author">Игорь Савицкий</div>
 <span class="comment-email"><a href=" ">mail@.ru</a></span>
  <div class=" comment-text">
Неплохая в принципе по данной тематике  подборочка литературы. Только вот не лучше ли было выбрать другой способ представления? Скажем сначала только иностранных авторов а потом уж отечественных. А то у вас все впережку как-то. Опять же работы написаны в разное время….
     <br>
  <div class=" comment-data">1 апреля</div>
    </div>

CSS

comment{
background:black;
max-width: 500px;
margin:55px 0px 55px 35px;
border:1px solid white;
padding: 20px;
}
 
.comment-avatar{
float: left;
margin-right: 15px;
border:1px solid white;
width:70px;
height:70px;
background:url("https://htmlacademy.ru/assets/course14/avatar.png") no-repeat 50% 50% #7f8c8c;
}
 
.comment-author{
font-size:16px;
font-weight:bold;
margin-bottom: 35px
color:#fff;
}
 
.comment-text{
max-width: 450px;
min-height: 120px;
margin-left: 90px;
margin-right: 5px;
margin-top: 45px
padding: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
text-align:justify;
color:white;
}
 
.comment-data{
margin-bottom: 25px
font-size:12px;
font-style: italic;
text-decoration:overline;
color:#bdc3c7;
}
 
.comment-reply{
float: right;
width:15px;
height:15px;
border:2px solid white;
background:darkorange;
}

@Gabriel_Castro · 01.08.2015, 09:16

Был занят.

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

сам код блока комментов...

Да, все правильно.
Только я бы хотел уточнить, эти комментарии Вы будете оформлять, или Вы бы хотели систему комментариев установить на сайте?

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

а интерфейс у него можно черно-белым сделать?

Да, можно. Сам работаю в Dreamweaver. Цветовую схему можно изменить как угодно.

@Vors · 01.08.2015, 16:51 **[ТС]**

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

или Вы бы хотели систему комментариев установить на сайте?

именно
а вот тут
https://htmlacademy.ru/courses/55/run/13
где я шабллон брал
данный момент не шибко уточняектся

Добавлено через 1 минуту

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

Да, можно. Сам работаю в Dreamweaver. Цветовую схему можно изменить как угодно.

ясно

Как отменить "перемешивание" между собой в футере баннера блока контактов и блока соцсетей?

Решение

Решение

Решение

Решение

@Sn1p3rOk 287 / 174 / 86 Регистрация: 19.04.2014 Сообщений: 1,095
	23.07.2015, 03:28	2
	Как отменить "перемешивание" между собой в футере баннера блока контактов и блока соцсетей? Что значит "перемешивание"? Вкратце опишите чтобы я не запускал ваш код. 0

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	23.07.2015, 15:01 [ТС]	4
	Сообщение от Gabriel_Castro Вам нужно это исправить? И еще они и должны быть друг под другом и по центру? да - друг под другом и по центру а у меня блок с контактами прилипает собака к баннеру [del] к тому же в первом списке лит-ры откуда-то взялось черное выделение пунктов списка при наведении мыши (не планировалось вообще!) Что сразу не ответил -прошу прощения вырубил ноут чтоб по нему ж не настучать со злости не вытанцовывалось как себе представлял за "вычищенный" код и потраченное на мня время *спасибо* про цвета мне и раньше твердили - вероятно от темного фона придется таки отказываться Добавлено через 55 секунд Сообщение от Sn1p3rOk не запускал ваш код. вирусов не запускаю чес-слово Добавлено через 7 минут Сообщение от Gabriel_Castro кажите что нужно там расположить и как должно выг должно было сверху вниз соот-но одно под другим 1 текст Ничего лишнего только необходимое 2 баннер с текстом про библ-ку 3 блок контактов 4 блок соцсетей как вар- т блок соцсетей и блок контактов на одном уровне соцсети слева -контакты справа ()для красоты 1

@Alexander519151 461 / 461 / 6 Регистрация: 08.05.2013 Сообщений: 239
	23.07.2015, 18:20	5
	Всем привет. Gabriel_Castro , Вы молодец! Посмотрел Ваш код, очень хорошо. (и правильно и красиво) Все рассказали. Получается Вы заново написали весь код для сайта. (пусть это и одна страница, но на ее основе все и делается). И мне стало интересно, т.к. Gabriel_Castro, не говорит, что нужно искать ответы в интернете, а взял и сделал. Хочу посмотреть на конечный вариант и, возможно, что-то добавлю. Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь? 1

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	26.07.2015, 15:56 [ТС]	9
	Gabriel_Castro, соцкнопки получились достаточно крупными и видными только вот почему номер тел-на (в последствии номер джаббера или аськи) справа от них притом чуть ли не впритык? а емейл (впоследствии тоже совершенно понтяно иной) ПОД НИМИ и опять же вплотную?! Миниатюры 0

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	26.07.2015, 15:58 [ТС]	10
	тогда как уговорились соцкнопки и контакты под баннером о библ-ке притом соцкнопки ближе к левом борту футера а конткакты к правому! 0

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	27.07.2015, 13:44 [ТС]	14
	Сообщение от Gabriel_Castro Если нужен весь код, со всеми изменениями, да -нужен а что насчет комментов и переходника страниц? у меня правильно? (вложение2) 0

@Alexander519151 461 / 461 / 6 Регистрация: 08.05.2013 Сообщений: 239
	28.07.2015, 20:51	17
	Сообщение от Alexander519151 Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь? Сообщение от Vors notepad++ Хотел бы посоветовать Adobe Dreamveawer. Вот здесь есть хорошее описание. Через что вы редактируете код? 1

@Gabriel_Castro 23 / 23 / 4 Регистрация: 06.04.2015 Сообщений: 23
	01.08.2015, 09:16	19
	Был занят. Сообщение от Vors сам код блока комментов... Да, все правильно. Только я бы хотел уточнить, эти комментарии Вы будете оформлять, или Вы бы хотели систему комментариев установить на сайте? Сообщение от Vors а интерфейс у него можно черно-белым сделать? Да, можно. Сам работаю в Dreamweaver. Цветовую схему можно изменить как угодно. 1

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	01.08.2015, 16:51 [ТС]	20
	Сообщение от Gabriel_Castro или Вы бы хотели систему комментариев установить на сайте? именно а вот тут https://htmlacademy.ru/courses/55/run/13 где я шабллон брал данный момент не шибко уточняектся Добавлено через 1 минуту Сообщение от Gabriel_Castro Да, можно. Сам работаю в Dreamweaver. Цветовую схему можно изменить как угодно. ясно 0