Jump to content

web_finans

Newbie
  • Posts

    12
  • Joined

  • Last visited

Posts posted by web_finans

  1. Всем доброго времени суток.

    У меня такая делема. Как можно обойтись без id, а точнее как прописать в страничке html то, что прописано в отдельном файле css.

    Сам отдельный файл css

    #menu, #menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #menu {

    width: 678px;

    margin: 0 auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;

    -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;

    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;

    }

    #menu:before,

    #menu:after {

    content: "";

    display: table;

    }

    #menu:after {

    clear: both;

    }

    #menu {

    zoom:1;

    }

    #menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #menu li:hover > a {

    color: #fafafa;

    }

    *html #menu li a:hover { /* Только для IE6 */

    color: #fafafa;

    }

    #menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*Только для IE6*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*Только для IE6*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*Только для IE6*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*Только для IE6*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    С обычным style я проблем не имею, а вот что связано например с именами id=menu, я не понимаю. Как весь этот стиль прописать в основной страничке? и обязательно в тегах <body>...</body>.

  2. работает

    var array = new Array();
    var speed = 10;
    var timer = 10;

    // Loop through all the divs in the slider parent div //
    // Calculate seach content divs height and set it to a variable //
    function slider(target,showfirst) {
    var slider = document.getElementById(target);
    var divs = slider.getElementsByTagName('div');
    var divslength = divs.length;
    for(i = 0; i < divslength; i++) {
    var div = divs[i];
    var divid = div.id;
    if(divid.indexOf("header") != -1) {
    div.onclick = new Function("processClick(this)");
    } else if(divid.indexOf("content") != -1) {
    var section = divid.replace('content-','');
    array.push(section);
    div.maxh = div.offsetHeight;
    if(showfirst == 1 && i == 1) {
    div.style.display = 'block';
    } else {
    div.style.display = 'none';
    }
    }
    }
    }

    // Process the click - expand the selected content and collapse the others //
    function processClick(div) {
    var catlength = array.length;
    for(i = 0; i < catlength; i++) {
    var section = array[i];
    var head = document.getElementById('header-' + section);
    var cont = 'content-' + section;
    var contdiv = document.getElementById(cont);
    clearInterval(contdiv.timer);
    if(head == div && contdiv.style.display == 'none') {
    contdiv.style.height = '0px';
    contdiv.style.display = 'block';
    initSlide(cont,1);
    } else if(contdiv.style.display == 'block') {
    initSlide(cont,-1);
    }
    }
    }

    // Setup the variables and call the slide function //
    function initSlide(id,dir) {
    var cont = document.getElementById(id);
    var maxh = cont.maxh;
    cont.direction = dir;
    cont.timer = setInterval("slide('" + id + "')", timer);
    }

    // Collapse or expand the div by incrementally changing the divs height and opacity //
    function slide(id) {
    var cont = document.getElementById(id);
    var maxh = cont.maxh;
    var currheight = cont.offsetHeight;
    var dist;
    if(cont.direction == 1) {
    dist = (Math.round((maxh - currheight) / speed));
    } else {
    dist = (Math.round(currheight / speed));
    }
    if(dist <= 1) {
    dist = 1;
    }
    cont.style.height = currheight + (dist * cont.direction) + 'px';
    cont.style.opacity = currheight / cont.maxh;
    cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
    if(currheight < 2 && cont.direction != 1) {
    cont.style.display = 'none';
    clearInterval(cont.timer);
    } else if(currheight > (maxh - 2) && cont.direction == 1) {
    clearInterval(cont.timer);
    }
    }

    Спасибо огромное. Нашел ошибки.

  3. дайте полностью скрипт и страницу, помогу решить.

    Html страница

    <html>

    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="myscript.js"></script>

    <link rel="stylesheet" type="text/css" href="mystyle.css" />

    </head>

    <body onload="slider('slider',0)">

    <div id="slider">

    <div class="header" id="header-1">А</div><div class="content" id="content-1"><div class="text">...</div></div>

    <div class="header" id="header-2">Б</div><div class="content" id="content-2"><div class="text">...</div></div>

    <div class="header" id="header-3">В</div><div class="content" id="content-3"><div class="text">...</div></div>

    </div>

    </body>

    </html>

    Скрипт js

    var array = new Array();

    var speed = 10;

    var timer = 10;

    // Loop through all the divs in the slider parent div //

    // Calculate seach content divs height and set it to a variable //

    function slider(target,showfirst) {

    var slider = document.getElementById(target);

    var divs = slider.getElementsByTagName('div');

    var divslength = divs.length;

    for(i = 0; i < divslength; i++) {

    var div = divs;

    var divid = div.id;

    if(divid.indexOf("header") != -1) {

    div.onclick = new Function("processClick(this)");

    } else if(divid.indexOf("content") != -1) {

    var section = divid.replace('-content','');

    array.push(section);

    div.maxh = div.offsetHeight;

    if(showfirst == 1 && i == 1) {

    div.style.display = 'block';

    } else {

    div.style.display = 'none';

    }

    }

    }

    }

    // Process the click - expand the selected content and collapse the others //

    function processClick(div) {

    var catlength = array.length;

    for(i = 0; i < catlength; i++) {

    var section = array;

    var head = document.getElementById(section + '-header');

    var cont = section + '-content';

    var contdiv = document.getElementById(cont);

    clearInterval(contdiv.timer);

    if(head == div && contdiv.style.display == 'none') {

    contdiv.style.height = '0px';

    contdiv.style.display = 'block';

    initSlide(cont,1);

    } else if(contdiv.style.display == 'block') {

    initSlide(cont,-1);

    }

    }

    }

    // Setup the variables and call the slide function //

    function initSlide(id,dir) {

    var cont = document.getElementById(id);

    var maxh = cont.maxh;

    cont.direction = dir;

    cont.timer = setInterval("slide('" + id + "')", timer);

    }

    // Collapse or expand the div by incrementally changing the divs height and opacity //

    function slide(id) {

    var cont = document.getElementById(id);

    var maxh = cont.maxh;

    var currheight = cont.offsetHeight;

    var dist;

    if(cont.direction == 1) {

    dist = (Math.round((maxh - currheight) / speed));

    } else {

    dist = (Math.round(currheight / speed));

    }

    if(dist <= 1) {

    dist = 1;

    }

    cont.style.height = currheight + (dist * cont.direction) + 'px';

    cont.style.opacity = currheight / cont.maxh;

    cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';

    if(currheight < 2 && cont.direction != 1) {

    cont.style.display = 'none';

    clearInterval(cont.timer);

    } else if(currheight > (maxh - 2) && cont.direction == 1) {

    clearInterval(cont.timer);

    }

    }

    Стили CSS

    #slider {

    width: 116px;

    color: #fff;

    font-family: Georgia;

    font-size: 14px;

    }

    .header {

    width: 110px;

    height: 20px;

    border: 2px solid #3F3F3F;

    padding: 1px;

    font-weight: bold;

    margin-top: 2px;

    cursor: pointer;

    background: url(knopka2.jpg);

    text-align: center;

    }

    .header:hover {

    background: url(knopka3.jpg);

    color: #B7B7B7;

    }

    .content {

    overflow: hidden;

    }

    .text {

    width: 200px;

    border: 2px solid #3F3F3F;

    border-top: none;

    padding: 15px;

    text-align: left;

    background: #7F7F7F;

    }

  4. Ну вроде если поменять

    var section = divid.replace('-content',''); на var section = divid.replace('content-','');

    var cont = section + '-content'; на var cont = section + 'content-';

    var head = document.getElementById(section + '-header'); на var head = document.getElementById(section + 'header-');

    должно работать

    да.. Пробовал с самого начала решения проблемы.

  5. Копался тут var section = divid.replace('-content','');

    и тут var head = document.getElementById(section + '-header');

    попробуйте заменить на 'content-' и 'header-'

    вот-вот.. менял уже.. :dash:

  6. скорей всего потому что идентификаторы используются js, вы их изменили, вот теперь блоки и не открываются. если я вас правильно понял.

    У меня тоже такая мысль (изначально была).

    Попытался поиграть с файлом js, но безрезультатно, в силу того , что писал его не я (помогли).

    Подскажите, в какую область лезть пожалуйста.

    var array = new Array();

    var speed = 10;

    var timer = 10;

    // Loop through all the divs in the slider parent div //

    // Calculate seach content divs height and set it to a variable //

    function slider(target,showfirst) {

    var slider = document.getElementById(target);

    var divs = slider.getElementsByTagName('div');

    var divslength = divs.length;

    for(i = 0; i < divslength; i++) {

    var div = divs;

    var divid = div.id;

    if(divid.indexOf("header") != -1) {

    div.onclick = new Function("processClick(this)");

    } else if(divid.indexOf("content") != -1) {

    var section = divid.replace('-content','');

    array.push(section);

    div.maxh = div.offsetHeight;

    if(showfirst == 1 && i == 1) {

    div.style.display = 'block';

    } else {

    div.style.display = 'none';

    }

    }

    }

    }

    // Process the click - expand the selected content and collapse the others //

    function processClick(div) {

    var catlength = array.length;

    for(i = 0; i < catlength; i++) {

    var section = array;

    var head = document.getElementById(section + '-header');

    var cont = section + '-content';

    var contdiv = document.getElementById(cont);

    clearInterval(contdiv.timer);

    if(head == div && contdiv.style.display == 'none') {

    contdiv.style.height = '0px';

    contdiv.style.display = 'block';

    initSlide(cont,1);

    } else if(contdiv.style.display == 'block') {

    initSlide(cont,-1);

    }

    }

    }

    // Setup the variables and call the slide function //

    function initSlide(id,dir) {

    var cont = document.getElementById(id);

    var maxh = cont.maxh;

    cont.direction = dir;

    cont.timer = setInterval("slide('" + id + "')", timer);

    }

    // Collapse or expand the div by incrementally changing the divs height and opacity //

    function slide(id) {

    var cont = document.getElementById(id);

    var maxh = cont.maxh;

    var currheight = cont.offsetHeight;

    var dist;

    if(cont.direction == 1) {

    dist = (Math.round((maxh - currheight) / speed));

    } else {

    dist = (Math.round(currheight / speed));

    }

    if(dist <= 1) {

    dist = 1;

    }

    cont.style.height = currheight + (dist * cont.direction) + 'px';

    cont.style.opacity = currheight / cont.maxh;

    cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';

    if(currheight < 2 && cont.direction != 1) {

    cont.style.display = 'none';

    clearInterval(cont.timer);

    } else if(currheight > (maxh - 2) && cont.direction == 1) {

    clearInterval(cont.timer);

    }

    }

    Копался тут var section = divid.replace('-content','');

    и тут var head = document.getElementById(section + '-header');

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

    Благодарю за отзывчивость.

    Спасибо.

    И все же проблема осталась, а точнее появилась другая:

    Таким код был до изменений, но валидацию не проходил:

    <div class="header" id="1-header">А</div><div class="content" id="1-content"><div class="text">...</div></div>

    <div class="header" id="2-header">Б</div><div class="content" id="2-content"><div class="text">...</div></div>

    <div class="header" id="3-header">В</div><div class="content" id="3-content"><div class="text">...</div></div>

    Такой код сейчас, но блоки теперь не открываются:

    <div class="header" id="header-1">А</div><div class="content" id="content-1"><div class="text">...</div></div>

    <div class="header" id="header-2">Б</div><div class="content" id="content-2"><div class="text">...</div></div>

    <div class="header" id="header-3">В</div><div class="content" id="content-3"><div class="text">...</div></div>

    Код CSS:

    #slider {

    width: 116px;

    color: #fff;

    font-family: Georgia;

    font-size: 14px;

    }

    .header {

    width: 110px;

    height: 20px;

    border: 2px solid #3F3F3F;

    padding: 1px;

    font-weight: bold;

    margin-top: 2px;

    cursor: pointer;

    background: url(knopka2.jpg);

    text-align: center;

    }

    .header:hover {

    background: url(knopka3.jpg);

    color: #B7B7B7;

    }

    .content {

    overflow: hidden;

    }

  8. Это я понимаю, но у меня их много, и все идут с одного стиля. Соответственно чтобы не было конфликта, я приписал значения в цифрах. Это можно как то обойти? Или может ставить цифры в конце идентификатора?

  9. Всем доброго времени суток.

    Не получается разобраться в проблеме с атрибутом "id"

    Line 41, Column 72: value of attribute "id" invalid: "1" cannot start a name

    …ader">А</div><div class="content" id="1-content"><div class="text">Писатели на…

    It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

  10. Всем доброго времени суток, страничка www.all-read.ru (это не реклама, тем более рекламировать нечего еще). Поставил в конце (в низу) странички ссылку на прохождение валидации.. Выходит премерно 6 ошибок. Я не понимаю этих ошибок. Помогите разобраться пожалуйста.

    Одна из ошибок у Вас на закрыт div с классом block1

    Остальные ошибки из за вставки flash

    За div спасибо, нашел... А вот с флешами проблематично, решения вроде нахожу, но с английским тяжко.

  11. Всем доброго времени суток, страничка www.all-read.ru (это не реклама, тем более рекламировать нечего еще). Поставил в конце (в низу) странички ссылку на прохождение валидации.. Выходит премерно 6 ошибок. Я не понимаю этих ошибок. Помогите разобраться пожалуйста.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy