fenix_63

Всем привет. Народ, может кто сталкивался. Нужно сверстать нестандартный input, а именно вот такой: https://fotki.yandex.ru/next/users/tltfenix/album/74102/view/988639 Помогите пожалуйста, а то я уже голову сломал, ну не знаю как этот инпут на 2 части делить. ((

satantx Спасибо огромное!!! Всё заработало как надо !!!

Всем привет! Народ, подскажите пожалуйста как мне сделать вот такое: https://fotki.yandex.ru/next/users/tltfenix/album/74102/view/977127 Сейчас у меня только вот так получилось: https://fotki.yandex.ru/next/users/tltfenix/album/74102/view/977128 Исходник: <div class="callback"> <div class="callback_name"> <input type="text" name="name" placeholder="Ваше имя"> </div> <div class="callback_phone"> <input type="text" name="phone" placeholder="Ваш телефон"> </div> <div class="callback_order"> <input type="button" class="flat" value="Заказать звонок" name="request_call"> </div> </div>CSS: .header > .callback{ position:relative; margin-left:540px; margin-top:45px; width:815px; height:100px; background-color:#ffffff; opacity: 0.55; }.callback_name, .callback_phone, .callback_order{ width:250px; height:50px; float:left; } .callback_name{ margin-left:25px; }.callback_phone, .callback_order{ margin-left:10px; } .callback_name, .callback_phone{ margin-top:25px; background-color: #ffffff; } .callback_order{ margin-top:20px; height:60px; } input[name="name"]{ border:none; outline:none; -webkit-appearance:none; width: 250px; height: 50px; vertical-align: middle; font-family:Segoe UI Light; font-size: 16px; color: #222222; padding-left:15px; } input[name="phone"]{ border:none; outline:none; -webkit-appearance:none; width: 250px; height: 50px; vertical-align: middle; font-family:Segoe UI Light; font-size: 16px; color: #222222; padding-left:15px; } input[name="request_call"]{ width:250px; height:60px; border:none; outline:none; background-color: #0099ff; font-family:Segoe UI Light; font-size: 24px; color: #ffffff; margin:0 auto; }Я уже голову сломал, не знаю как эту прозрачность НЕ на все вложенные блоки распространить, а только на один.

Конечно читал

background исправил, ссылки в теги li добавил. Активный пункт меню пока стилизовать не стал, только небольшую подсветку для a:hover сделал. Не совсем понятно ка реализовать размеры блоков в зависимости от наполнения контента. Размеры шрифтов если брать как в шаблоне, то не влезет на страницу всё, поэтому подгонял. Буду допиливать дальше )

Понял, спс. В общем я доктайп добавил, % убрал. Макет статичный стал. Слайдер такой потому что как я понял просто картинки другие нужны. У меня тоже была идея попробовать начать делать адаптивную верстку, но думаю надо начинать от простого к сложному. Подскажите ещё ошибки

Народ, всем привет, в общем я только начал изучать верстку. Взял шаблон вот тут: http://www.graphicsfuel.com/wp-content/uploads/2010/09/corporatix.jpg Хотел сделать резиновую верстку, но когда меняю размеры браузера, всё совсем плохо становится. Разместил свои наработки вот тут: http://togliatty.ucoz.ru/ Это моя первая наработка. Прошу опытных людей указать мне на мои недоработки, недочеты, грубые ошибки, и способ их исправления. Заранее благодарен.

RuslanHeYca4ev быстро ты макет меняешь, я утром заходил, меню слева длинное было, а сейчас уже 4 пункта только осталось ))). Кстати, я на укозе тож домен себе зарегал, http://togliatty.ucoz.ru хочу зайти в панель управления через uID, а у меня постоянно туда не пускает. Появляется всплывающее окно с надписью "Ошибка сервера, попробуйте позже". Как туда зайти - ума не приложу.

Я тоже за. Сам новичок, хочу побыстрее освоить это. Уже даже 1-й вопрос есть )))

ок, буду осваивать это дальше )

Ну я гуглил, написано было что для относительного выравнивания родительскому блоку нужно присвоить значение свойства position: relative для того чтобы все вложенные в него блоки позиционировались относительно его, а не относительно окна браузера. Я поэтому и спрашиваю как можно сделать. Если не позиционированием, то как ???

С горизонтальными блоками разобрался, теперь со вложенными не получается (((. Использую относительное позиционирование. Нижняя часть вложенного блока почему то выходит за рамки родительского, причем независимо от того, развернут браузер во весь экран или немного ужат. Помогите пожалуйста люди добрые, вот скриншот: http://fotki.yandex.ru/users/tltfenix/view/964330 <html><head><title>Заголовок страницы</title><link rel="stylesheet" href="css/style.css" type="text/css"></head><body><div class="container"> ... ... <div class="layout"> <div id="blurb"> 123 </div> </div> <div class="footer">Подвал сайта</div></div></body></html>CSS: .container{margin-left:auto;margin-right:auto;min-height:100%;border: 2px solid black;}.layout{position:relative;margin-left:5px;margin-right:5px;margin-top:5px;border: 2px solid black;min-height:45%;}#blurb{position:absolute;left:20%;margin: 5px auto; /*top 5px bottom 5px*/border: 2px solid black;width:60%;height:100%;}...

Понял, буду иметь ввиду. Но в этом примере макет с колонками, а у меня макет, в котором 4 горизонтальных блока, а в них уже вложенные вертикальные блоки. Так вот я с горизонтальными разобраться не могу. Вот мой шаблон Corporatix: http://www.graphicsfuel.com/2010/09/corporate-business-website-psd-template/

А как их правильно верстать? Я только-только начинаю

Всем привет! Народ, я вот только начал изучать верстку. Набросал несколько блоков <div>. Если менять размер браузера по ширине - то тут всё нормально отображается, а вот если менять по высоте, то нижний блок (footer) съезжает вниз, и выходит за пределы контейнера, в котором он расположен. И кстати 2-й снизу блок также съезжает, если браузер уж очень сильно сжать по вертикали. Подскажите как это можно исправить. HTML: <html><head><title>Заголовок страницы</title><link rel="stylesheet" href="css/style.css" type="text/css"></head><body><div class="container"> <div class="top"> </div> <div id="header"> </div> <div id="content"> </div> <div class="footer"> </div> </div></body></html>CSS: .container{margin-left:auto;margin-right:auto;height:100%;border: 2px solid black;}.top{position:relative;margin-left:5px;margin-right:5px;height:10%;margin-top:10px;border: 2px solid black;}#header, #content{position:relative;margin-left:5px;margin-right:5px;margin-top:5px;border: 2px solid black;height:25%;}#content{margin-top:5px;height:50%;}.footer{position:relative;margin-top:5px;margin-bottom:auto;margin-left:5px;margin-right:5px;border: 2px solid black;height:10%;}