-
Posts
91 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Евгений_SB
-
-
Ребят Здравствуйте помогите пожалуйста, верстаю макет столкнулся с такой проблемой
есть форма входа в шапке мне нужно расположить её в 1 ряд пока она так
в psd макете вот так
код html
<form name="input" method="post" action="#"> <p>Логин</p> <input name="login" type="text" class="logPas"> <p>Пароль</p> <input name="password" type="password" class="logPas"> <br> <input name="submit" type="submit">
в коде css пока написал так
}input:focus { outline:none;}.logPas { width: 90px; border-radius: 4px; border: 1px #98a7b5 solid;}
поскажите как сделать её в одну строку float:left работает не так как нужно , пока гуглил некоторые советовали обернуть каждый тег формы в div . но насколько я знаю всовывать дивы туда где можно обойтись css не есть хорошо ,может я что то упустил ,подскажите как решить,заранее спасибо)))
-
-
Из за верхнего маржина в 10px, примененного для ul
спасибо большое )))
-
Ребят есть меню http://jsfiddle.net/ при наведении мыши на пункт выпадающего меню оно пропадает, никак не пойму где ошибка
<nav>
<ul>
<li><a href="#">link</a>
<ul>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a>
<ul>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
<li><a href="#">linc</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>* {
margin:0px;
padding: 0px;
}
nav {
background: #eee;
margin: 20px;
}
nav ul{
list-style: none;
position: absolute;
}
nav ul ul {
display: none;
}
nav ul li:hover>ul{
display:block;
width: 110px;
height: 40px;
}
nav ul li {
background: #0086cf;
display: inline-block;
width: 110px;
height: 40px;
margin-top: 10px;
line-height: 40px;
text-align: center;
border-radius: 3px;
border:1px solid #04537f;
}
nav ul li a {
text-decoration: none;
text-transform: uppercase;
font-family: 14px Tahoma;
color: #fff;
} -
можно text-chadow использовать и сделать сколько угодно обводок а вообще на сайте урок был .вот нашел http://htmlbook.ru/blog/ramki-i-granicy
-
Хм.....Именно такой формы не нашел и практически во всех используют JS. видимо сделать на чистом css такую кнопочку нельзя,я с css пока не очень хорошо лажу а JS это темный лес для меня.видимо я выбрал сложный макет уже 3 дня не могу банальную шапку сверстать.
-
Здравствуйте ребят .при верстке макета возник вопрос с кнопками в форме (см скрин ниже выделены красным цветом) google так и не дал вразумительного ответа по поводу того как их редактировать и можно ли их в обще редактировать с помощью css
и как вставить эту оранжевую картинку впереди текста
у меня получается так (см скрин ниже) как ни старался вставить картинку в форму не смог.она либо перекрывает текст.либо залезает за рамку формы вниз.как от центровать её тоже не разобрался
у меня получилось так
итог) 1вопрос? Как изменить картинку кнопки (если возможно )
2 вопрос? как вставить картинку (если возможно)
3 вопрос? Как отцентровать текст по центру формы
ps.Спасибо всем огромное за ранее.
вот код
HTML
<html><head><meta charset="utf-8"><title>Документ без названия</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><!--макет полностью --><div id="maket"><!--шапка макета --><div id="heder"> <div class="logo"> <a href="#" title="HOME" target="index.html"> <img src="images/GoodInc_02.png" width="191" height="69"> </a> </div> <!--блоки формы --> <div class="cell_1"> <select name="nav" size="1" class="nav_1"> <option value="NewsLetter" selected="selected"> Newsletter</option> <option value="NewsLetter">Newsletter1</option> <option value="NewsLetter">Newsletter2</option> <option value="NewsLetter">Newsletter3</option> </select> </div> <div class="cell_2"> <select name="nav" size="1" class="nav_2"> <option value="NewsLetter" selected="selected"> Newsletter</option> <option value="NewsLetter">Newsletter1</option> <option value="NewsLetter">Newsletter2</option> <option value="NewsLetter">Newsletter3</option> </select> </div></div></div></body></html>
CSS
* { margin: 0px; padding: 0px;}body { background: #eee;}/*макет-полностью страница*/#maket { display:block; width: 980px; height: 100%; margin: 0 auto;}/*Блок шапки*/#heder { width: 980px; height: 70px; background: #373737;}/*логотип*/.logo { display: block; float: left;}/*блоки формы списка*/.cell_1 { display: block; float: left; width: 120px; height: 70px; padding-left: 390px; padding-top: 20px;}.cell_2 { display: block; float: left; width: 120px; height: 70px; padding-left: 20px; padding-top: 20px;}.nav_1 { width: 120px; height: 25px; border-radius: 1px solid #bbb; color: #777;}.nav_2 { width: 120px; height: 25px; border-radius: 1px solid #bbb; color: #777;}
-
Ребят здравствуйте .я только учусь взял PSD из бесплатных шаблонов и пробую верстать,в принципе после прочтения уроков на вашем сайте за несколько дней смог сверстать маленькое меню.а здесь застопорился все мое меню почему то кривое .думаю напутал с отступами и размерами, не найду только где.
Вот так должно быть
как у меня получилось.
не совсем понял как поставить такие черточки между меню как на первом скрине, возможно это у меня из за неправильных отступов такие
вот код
ps. Подскажите пожалуйста ребят.заранее спасибо
HTML
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Maket</title> <link rel="stylesheet" href="style.css"></head><div id="maket"> <div class="heder-top"> <div class="logo"> <a href="#"><img src="images/GoodInc_02.png"></a> </div> <div class="nevsletter"> <p>Newsletter</p> </div> <div class="Contakt"> <p>Contact</p> </div></div> <div class = "clear"></div> <div class="navigation"> <div class="icon"></div> <div> <ul class="navigations"> <li><a href="#">Portfolio</a></li> <li><a href="#">Services</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="quiclinks"></div> <div class="dropdown"></div> <div class = "clear"></div> </div><body> </body></html>
CSS
* { margin: 0px; padding: 0px;}body { background: #ebebeb;}#maket { width: 938px; height: 100%; margin: 0 auto;}.heder-top { margin: 0px; padding: 0px; background: #373737; width: 938px; height: 67px;}.logo { float: left; margin-right: 300px;}.nevsletter { display:inline-block; width: 172px; height: 35px; background-image: url(images/nav_05.png); padding-left: 10px; margin-right: 20px; margin-top: 15px; line-height: 30px; color: #bbb; text-align: center;}.Contakt { display: inline-block; width: 172px; height: 35px; background-image: url(images/nav_05.png); padding-left: 10px; margin-right: 20px; margin-top: 15px; line-height: 30px; color: #bbb; text-align: center}.clear { clear:both; content:""; display:block; height:0; font-size:0; overflow: hidden;}.navigation { background: #474747; width: 938px; height: 65px; display: inline-block; margin-top: -5px;}.icon { background-image: url(images/icon_09.png); float: left; width: 50px; height: 65px;}li:hover { border-bottom: 5px solid #f26c4f; }.navigations li:before { content: "|"; color: #fff; padding-right: 2px;}.navigations li { display: inline-block; list-style: none; margin: 2px; padding: 10px; height: 37px; width: 50px;}.navigations li a { list-style: none; margin: 10px; color: #eee; text-decoration: none; font: 12px Arial; line-height: 40px; }
Форма входа в 1 ряд
in HTML Coding
Posted · Edited by Евгений_SB
да спасибо воспользовался вашим советом помогло)))