Jump to content

ar.

Newbie
  • Posts

    8
  • Joined

  • Last visited

ar.'s Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Как поместить кнопку в окно ввода и выровнять по правую строну окна? форма
  2. Всё верно, спасибо большое.
  3. К сожалению не помогло.
  4. Не могу убрать верхний отступ у фоновой картинки в хэдере с помощью margin. Не могу въехать почему При установке position: absolute; верхний отступ убирается, но тогда не выравнивается по центру по горизонтали. Буду очень благодарен за ответы! Прошу не сильно ругаться Ниже код: - body { background-color: #f8ebb8; margin: 0 auto; width: 100%; } [b]div#header-all { background: url('../img/header-all.jpg') no-repeat; background-color: #f8ebb8; margin: 0 auto; position: relative; height: 406px; width: 1200px; } <body> <div id="header-all"><!--Хэдер--> <div id="header-1"> <!--Верхние кнопки+Поисковая форма--> <p id="action-button"> <!--Верхние кнопки--> <a href="#help" title="Live help">Live hel</a> <a href="#login" title="Login/Register">Login/Register</a> </p> <form action="#search" method="post" id="search-form"> <!--Поисковая форма--> <p> <input type="text" name="query" value="Search" /> <input type="submit" name="submit" value="Search!" /> </p> </form> <!--Поисковая форма--> </div><!--Верхние кнопки+Поисковая форма--> <div id="logo" > <!--Логотип(картинка+надпись)--> <h1><a href="#home" title="Home Page">herbal treats</a></h1> </div><!--Логотип(картинка+надпись)--> </div><!--Хэдер-->
  5. я собственно крайне редко бездумно что либо делаю )) и моя думность в данном случае заключалась в том, что я думал что something.png подразумевает любую картинку с расширением .png ) "не сможет переопределить заданный через идентификатор стиль." у меня естественный вопрос почему? - только не посылайте меня к талмудам,я и так их стараюсь читать. Это работает .active {background-repeat: no-repeat !important;} Только вопрос - что делалет значение!important? А это #tabname_1.active {background: url('something.png') no-repeat;} получается всё равно дубляж, раз делать его нужно для каждого элемента. Ну собственно вопрос про часть имени id я так и не услышал. А вообще спасибо вам за помощь! пока всё работает
  6. Не сработал не один из вариантов, кроме тех что у меня были. А что на счёт вопрос об имени id селектора? Ниже весь код html - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>New Beautyfull Tabs from Belyash</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".selectTabs").each(function () { var tmp = $(this); console.log($(tmp).find(" .lineTabs li")); $(tmp).find(".lineTabs li").each(function (i) { $(tmp).find(".lineTabs li:eq("+i+") a").click(function(){ var tab_id=i+1; $(tmp).find(".lineTabs li a").removeClass("active"); $(this).addClass("active"); $(tmp).find(".content div").stop(false,false).hide(); $(tmp).find(".tab"+tab_id).stop(false,false).show(); return false; }) }) }) }) </script> </head> <body> <div id="wrap"> <div class="selectTabs"> <ul class="lineTabs"> <li><a id='tabname_6' href="#" class="active">HOMEPAGE</a></li> <li><a id='tabname_5' href="#">HERBS</a></li> <li><a id='tabname_4' href="#">TEAS</a></li> <li><a id='tabname_3' href="#">SPICE</a></li> <li><a id='tabname_2' href="#">AROMATHERAPY</a></li> <li><a id='tabname_1' href="#">SHOPPING GUIDE</a></li> </ul> <div class="content"> <div class="tab1"> <h3>Напишите мне</h3> <form action="#"> <label for="name">Ваше имя</label><br /> <input name="name" type="text" /><br /> <label for="email">Ваш E-mail</label><br /> <input name="email" type="text" /><br /> <label for="comment"">Текст сообщения</label><br /> <textarea name="comment"></textarea> </form> </div> <div class="tab2"> <h3>Contrary to popular</h3> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p> <h3>Richard McClintock</h3> <p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p> <h3>Lorem Ipsum</h3> <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div> <div class="tab3"> <img src="images/giraf.jpg" /> </div> <div class="tab4" style="display:block;"> <img src="images/zayac.jpg" style="float: left; padding-right: 15px;" /> <p>Зайцы (лат. Leporidae) — семейство млекопитающих из отряда зайцеобразных, включающее в себя собственно зайцев (главным образом род Lepus, но также Pronolagus и Caprolagus) и кроликов (остальные роды). Зайцы распространены по всему миру, кроме Австралии и отдаленных островов, на многие из которых ввезены людьми. Отличаются от пищух развитыми задними конечностями, длинными ушами и наличием короткого хвоста.</p> </div> </div> </div> </div> <div style="position: absolute; bottom: 5px; left: 5px;"> <a style="color: rgb(27, 100, 220); font: 12px arial;" href="http://web4develop.ru">web4develop.ru</a> </div> </body> </html> css- html, body{ background:#aaa url(images/bg.png); color:#00557F; font:normal 14px Verdana; margin:0px; padding:0px; } h3{ border-bottom:1px solid #4c9ac3; } form, label, input, textarea{ font-size:11px; } input{ background:#BBD9FA; border:1px solid #4c9ac3; height:12px; margin:0px 0px 5px 0px; width:150px; } textarea{ background:#BBD9FA; border:1px solid #4c9ac3; height:36px; width:460px; } #wrap{ margin:30px auto; width:1000px; } .lineTabs{ height:30px; list-style:none; margin:0px auto; padding:0px; padding-right:30px; padding-left:10px; width:auto; } .lineTabs li{ display:block; float:right; margin:0px; padding:0px; position:relative; overflow:visible; text-align:center; width:110px; } .lineTabs li a{ background-repeat: no-repeat; color:#600; display:block; font:normal 14px Verdana; height:46px; margin:0px -10px; outline:none; padding:7px 20px; position:relative; text-decoration:none; width:90px; } .lineTabs li a.active{ background-repeat: no-repeat; color: #600; font-weight: bold; } .lineTabs li a:hover{ color: #600; font-weight: bold; } .active {background-repeat: no-repeat;} #element {background: url('something.png') no-repeat;} #tabname_1.active{ background:url(images/ShoppingGuide.png); } #tabname_2.active{ background:url(images/Aromatherapy.png); } #tabname_3.active{ background:url(images/Spise.png); } #tabname_4.active{ background:url(images/Teas.png); } #tabname_5.active{ background:url(images/Herbs.png); } #tabname_6.active{ background:url(images/Homepage.png); } .content{ background:white; border:1px solid #4c9ac3; display:block; float:left; clear:left; height:auto; margin:0px; padding:10px; position:relative; text-align:justify; width:460px; } .content div{ background:white; display:none; height:auto; float:left; clear:both; left:0px; margin:0px; padding:0px; position:static; top:0px; width:100%; } .content div p{ margin:5px 0px; padding:0px; } .selectTabs{ float:left; margin:5px; }
  7. Добрый день. Подскажите как правильно прописать свойство background-repeat, а то у меня кроме как указанным ниже способом не получается (много дубляжа при этом)? И ещё, подскажите можно ли (и как) использовать не полностью имя селектора id, а только его часть, например вместо tabname_3, просто tabname... и чтоб стиль применялся ко всем селекторам id начинающихся с этого имени? Извините, но не мог найти ответа возможно на не сложную задачу. С уважением Артём. html- ================ <div id="wrap"> <div class="selectTabs"> <ul class="lineTabs"> <li><a id='tabname_6' href="#">SHOPPING GUIDE</a></li> <li><a id='tabname_5' href="#">AROMATHERAPY</a></li> <li><a id='tabname_4' href="#">SPICE</a></li> <li><a id='tabname_3' href="#">TEAS</a></li> <li><a id='tabname_2' href="#">HERBS</a></li> <li><a id='tabname_1' href="#" class="active">HOMEPAGE</a></li> ================ css- ================ #tabname_1.active{ background:url(images/Homepage.png); background-repeat: no-repeat; } #tabname_2.active{ background:url(images/Herbs.png); background-repeat: no-repeat; } #tabname_3.active{ background:url(images/Teas.png); } ================
×
×
  • 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