Jump to content

FitTech

User
  • Posts

    65
  • Joined

  • Last visited

Posts posted by FitTech

  1. Насколько я понял, ты в ссылку блочный элемент (параграф) засунул?

    Что бы стрелка появилась используй background, так надежней.

    а по поводу кода стрелки - ты шрифт этих кодов подключал?

    Да, запихнул параграф, уже просто не знал как всё сделать..

  2. Здравствуйте!

    Есть ссылка, а в ней текст выделен через <p>, ссылке заданы размеры и отображение блоком.

    При наведении, нужно чтобы блок и текст стал зелёным цветом, а после не выходя за рамки блока должна стрелка добавляться.

    Два варианта думал: первый это вырезать стрелка в фотошопе и сделать бэкграунд, а второй просто добавить текст(код стрелки в html), только ничего не получается вторым способом, как реализовать?
    p:hover:after ? или как?

  3. Вставляй через :before и позиционируй абсолютно.

     

     

    Прочтите сообщение выше и попробуйте сами.

    Если не получится:

    http://jsfiddle.net/0jta2u58/1/

    Разделите кнопку по частям и эти части поместите в соответствующие места(синий и зеленый прямоугольники(понятное дело у меня размеры на глаз).

    Достаточно кроссбраузерный код, если вам конечно не нужны IE ниже 8ки.

    Всё отлично получилось, спасибо, а как решить вопрос такой:

    Когда просто бегаю по меню(сверху  в низ), то вид не очень красивый, оно всё прыгает быстро, как можно решить?

  4. Здравствуйте! Вот макет:

    a90e9390d369.jpg

    Делаю меню и есть вопрос по зеленой картинке там где Контакты, собственно нужна помощь как ее реализовать.

     

    В макете она разделена на две части:

     

    Оригинал:

    d37b38f75e9b.png

     

    4bdbbccae866.png

     

    Теперь части:

     

    Первая

     

    e7d6604e0fbe.png

     

    Вторая

     

    0166bbd03b92.png

     

     

    Между элементами списка высота фиксирована.

     

    Вот как я попробовал решить задачу:

    <ul class="menu">		<li class="black-list"><a href="#">Главная страница</a></li>		<li class="black-list active" ><a href="#">Контакты</a></li>		<li class="black-list"><a href="#">Наш прейскурант</a></li>		<li class="black-list"><a href="#">Стоматологический словарь</a></li>.....
    /* Стиль ко всему списку */.menu{	margin-top: 26px;	list-style: none;	font-family: Arial;	color: black;}/* Отступы между элементами */.menu li{margin-bottom: 17px;}/* Контакты */.active{	background: url("img/contacts.png") no-repeat; /* Поставил изображение как фон */	height: 50px; 	width: 300px; 	position: relative; 	left: -20px; 	padding-left: 19px;	padding-top: 4px;	margin-bottom: 4px !important;}/* цвет текста в Контакты */.active a{	color: white;}

    Вот что получается:
    804102746bb9.png

    То что нужно, но отступ между Контакты и следующим элементом слишком велик, а уменьшить не получится потому что высота картинки задана.

     

    Подскажите пожалуйста как правильно решить задачку.

  5.  

    В самый верх добавь

     

    .block1, .block2, block3{

        vertical-align:top;
    }
     
    и для обёртки никогда не назначай фиксированную высоту, лучше вообще её не указывать или пиши её так: min-height

     

    для обертки и блоков указал высоту для себя чтобы видеть сетку)

     

    Спасибо, помогло!

  6. Извините, сделал ошибку в названии темы :(
     

    Подскажите в чем проблема?

    Вот есть расположение блоков:

    ae171b169c8b.jpg

    <!DOCTYPE html><html><head>	<title>Дантист</title>	<link rel="stylesheet" type="text/css" href="style.css">	<meta charset="utf-8"></head><body><div class="container">	<div class="block1">		<a href="#"><img src="img/logo.png"></a>	</div>	<div class="block2"></div>	<div class="block3"></div></div></body></html>

    и css
     

    *{	padding: 0;	margin: 0;}.container{	width: 1070px;	margin-left: auto;	margin-right: auto;	background-color: #f5f5f5;	height: 1000px;	margin-top: 34px;	}.block1{	width: 267px;	height: 1000px;	background-color: grey;	margin-left: 8px;	display: inline-block;}.block2{	width:  486px;	height: 1000px;	margin-left: 20px;	margin-right: 30px;	background-color: yellow;	display: inline-block;}.block3{	width: 251px;	height: 1000px;	background-color: green;	display: inline-block;}

    Но когда я в .block1 добавляю <a href=''#''><img src="img.png"></a>, то вот что получается
    3bc460fec8b6.jpg

    Почему так?

  7.  

    Я бы хотел получить подсказку как правильнее сделать в том или ином моменте
    почитайте основные ошибки коллег в этой теме. Чьи посты были до вас. Большая часть ошибок повторяющаяся.  

     

    Так и сделаю, спасибо ;)

  8.  

    я знаю в нем очень много ошибок начиная с самого простого
    раз знаете, зачем спрашивать?

     

    Сами посмотрите на свой сайт. Половину блоков, особенно форма, уехали кто куда.

    Тени по бокам разные.

     

    Кнопки соц. сетей лесенками. 

     

    Я бы хотел получить подсказку как правильнее сделать в том или ином моменте.

    Это явно не <input>, а <textarea>. Кнопки соц. сетей как-то не ровно расположены или так должно быть? А где сам макет?

    Понял, спасибо

  9.  

    Здравствуйте! Подскажите пожалуйста, где можно скачать psd макет сайта и его исходный код чтобы видеть как в том или другом месте сверстано и сравнивать свое.

    Заранее благодарен!

    google - free template

     

    Лишь бы написать...

×
×
  • 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