Помогите советом

mnstrsound · March 18, 2013

Здравствуйте, начал учиться верстать. Скачал макет, там есть такой блок. Как лучше всего реализовать?

lolka84 · March 19, 2013

div'ы + inline-block's или float

mnstrsound · March 19, 2013

Можно поподробнее чуть.

Вот мой код


.top-uslugi{
font-family: Tahoma, Geneva, sans-serif;
font-size: 8pt;
color: #a9a9a9;
height: 64px;
}
.top-uslugi img{
float:left;
border: 0px;
width: 101px;
height: 64px;
}
.top-uslugi h1{
font-family: Myriad-Pro-Cond;
font-size: 12pt;
font-weight: 300;
}
.top-uslugi span{
color: #0099cc;
position:relative;
display:block;
}

и HTML


<div class="top-uslugi">
			 <img src="img/proektirovanie.jpg" alt="Проектирование" />
			 <h1>ПРОЕКТИРОВАНИЕ</h1>
				 Комплексная разработка
				 <span><a href = "">ПОДРОБНЕЕ</a></span>
		 </div>

и результат (для одного элемента) . Такой код мне не нравиться и надо прижать ссылку подробнее к низу изображения.

Edited March 19, 2013 by mnstrsound

lolka84 · March 19, 2013

Про padding и margin слышали ?

mnstrsound · March 19, 2013

Про padding и margin слышали ?

Слышали, добавлял к span атрибуты bottom: 0; padding-bottom: 0, margin-bottom: 0; - не помогло

lolka84 · March 19, 2013

Стесняюсь спросить: а чем вообще может помочь в данном случае padding-bottom: 0; или margin-bottom: 0; у спана ?

Edited March 19, 2013 by lolka84

mnstrsound · March 19, 2013

Стесняюсь спросить: а чем вообще может помочь в данном случае padding-bottom: 0; или margin-bottom: 0; у спана ?

Я уже говорил вначале, что только начал. padding - bottom и margin-bottom были методом тыка.

Могли бы дать дельный совет, примерный алгоритм действий, а не повышать ЧСВ.

lolka84 · March 19, 2013

Начинают обычно с теории. Если вы не знаете, сколько будет 2+2 грубо говоря, то объяснять что-то более сложное нет никакого смысла.

За все время, что мы тут с вами беседуем, давно можно было бы открыть гугл и спросить у него, как сделать отступ у элемента. На крайний случай можно было бы прямо на этом сайте открыть справочник и почитать, что такое padding и что такое margin.

mnstrsound · March 19, 2013

читал я. знаю, что такое паддинг и марджин. Мне нужно узнать, каким образом привязать НИЗ ссылки к НИЗу изображения. Вот и все) я тут залез и display: block для изображения. Вы хоть с высоты своего опыта скажите, в верном направлении я двигаюсь? Мне интересен чистый, лаконичный код, без лишней воды.

lolka84 · March 19, 2013

Если б знали, не стали бы городить у спана padding-bottom: 0; или margin-bottom: 0; для того, что бы подвинуть его вниз.

Причем спан вам нужно подвинуть не к низу изображения, а к низу блока, в котором этот спан расположен. Для этого ему нужно задать отступ от элемента, который расположен выше него.

mnstrsound · March 19, 2013

Если б знали, не стали бы городить у спана padding-bottom: 0; или margin-bottom: 0; для того, что бы подвинуть его вниз.
Причем спан вам нужно подвинуть не к низу изображения, а к низу блока, в котором этот спан расположен. Для этого ему нужно задать отступ от элемента, который расположен выше него.

Выше него текст, как видно на изображении, если вдруг строчек будет больше одной, то, если задать отступ в пикселах сверху ссылки, то ссылка тоже съедет вниз.

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

lolka84 · March 19, 2013

Ссылка в любом случае съедет вниз, если ее будут толкать туда несколько строк текста, ей деваться будет некуда.

ILL-JAH · March 19, 2013


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>ololo</title>
    <style type="text/css">
      * { margin: 0; padding: 0; }
      .top-uslugi { font-family: Tahoma, Geneva, sans-serif; font-size: 8pt; color: #a9a9a9; height: 64px; }
      .top-uslugi img { float: left; border: 0px; width: 101px; height: 64px; margin-right: 10px; }
      .top-uslugi h1 { font-family: Myriad-Pro-Cond; font-size: 12pt; font-weight: 300; }
      .top-uslugi a { color: #0099cc; display: block; margin-top: 16px; }
    </style>
  </head>
  <body>
    <div class="top-uslugi">
      <img src="img/proektirovanie.jpg" alt="Проектирование" />
      <h1>ПРОЕКТИРОВАНИЕ</h1>
      Комплексная разработка
      <a href = "/">ПОДРОБНЕЕ</a>
    </div>
  </body>
</html>

Edited March 19, 2013 by ILL-JAH

Березовский · March 19, 2013

Пример) http://berezovsky.org.ua/jquery/test2.html

michas47 · March 19, 2013

Для класса в котором ссылка укажи:

position: relative; bottom: 0;

mnstrsound · March 20, 2013

Вот HTML кусок кода


<div class="uslugi">
		    <div class="uslugi-item">
			    <div>
				 <img class="item" src="img/proektirovanie.jpg" alt="Проектирование" />
			    </div>
			    <div class="uslugi-item-desc">
				 <h1>ПРОЕКТИРОВАНИЕ</h1>
				  Комплексная разработка
			    </div>
			    <div class="uslugi-item-uri">
				 <a href = "">ПОДРОБНЕЕ</a>
			    </div>
		    </div>
		    <div class="uslugi-item">
			    <div>
				 <img class="item" src="img/proizvodstvo.jpg" alt="Производство" />
			    </div>
			    <div class="uslugi-item-desc">
				 <h1>ПРОИЗВОДСТВО</h1>
				  Строительные работы
			    </div>
			    <div class="uslugi-item-uri">
				 <a href = "">ПОДРОБНЕЕ</a>
			    </div>
		    </div>
		 </div>

Вот КСС


.uslugi{
margin-top: 20px;
}
.uslugi-item{
margin-right: 30px;
}
.item{
padding-right: 20px;
float: left;
}
.uslugi-item-desc{
font-family: Tahoma, Geneva, sans-serif;
font-size:10pt;
color:#666
}
.uslugi-item-desc h1{
font-family: Myriad-Pro-Cond;
font-size: 12pt;
font-weight: 300;
}
.uslugi-item-uri{
margin-top: 10px;
}
.uslugi-item-uri a{
font-family: Tahoma, Geneva, sans-serif;
font-size:10pt;
color: #0099cc;
}

Вот результат:

Если добавить свойство float: left к классу uslugi-item, то результат становаится таким:

Почему сбивается форматирование внутри блока?

Николя223 · March 20, 2013

помимо флоат, укажите данному классу ширину и высоту!

mnstrsound · March 20, 2013

помимо флоат, укажите данному классу ширину и высоту!

Помогло, а чтобы в зависимости от содержимого менялась ширина блока и высота, то надо делать через inline-block?

SelenIT · March 20, 2013

К сожалению, отрисовка вложенных флоатов - слабое место браузеров. Можно оставить float для самих блоков , а внутри располагать картинку и текст с помощью inline-block или table-cell.

mnstrsound · March 20, 2013

К сожалению, отрисовка вложенных флоатов - слабое место браузеров. Можно оставить float для самих блоков , а внутри располагать картинку и текст с помощью inline-block или table-cell.

Спасибо большое!

Теперь бы еще посмотреть оптимальный код, который будет обладать еще и резиновостью )

Николя223 · March 20, 2013

Из той ссылки

5. Какая же отсюда мораль?

Из объективных свойств реальности трудно делать практические выводы, но по личной просьбе кэролловской Герцогини — черкну пару-тройку:

Несмотря на давнюю историю поддержки и использования, «белых пятен» и «подводных камней» в свойствах float и clear пока, увы, хватает.
Любые инструменты желательно использовать по назначению. Как ни крути, float-ы не предназначены для раскладки колонок и т.п., их исконное назначение — небольшие врезки (иллюстрации, пояснения и т.п.), и с этой задачей они справляются «на ура».

Может тогда лучше вообще вместо флоатов использовать display:table-cell ? вот вам и резина

mnstrsound · March 23, 2013

Теперь еще один вопрос)

Есть такой блок:

И мой результат:

Как выровнять блоки, чтобы они заняли все пространство между стрелками(автоматически, марджином не охота)?

HTML:


<a href=""><img id="arrow-right" src="img/arrow-right.png" alt="Следующее изображение" /></a>
			    <a href=""><img id="arrow-left" src="img/arrow-left.png" alt="Следующее изображение" /></a>
			 <ul>
				 <li>
					 <img src="img/project.jpg" alt="Наши проекты" />
					    <p><a href="">СТРОЕНИЕ</a></p>
					    <p><span class="city">Город: Москва</span></p>
					    <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p>
					   </li>
				    <li>
					 <img src="img/project.jpg" alt="Наши проекты" />
					    <p><a href="">СТРОЕНИЕ</a></p>
					    <p><span class="city">Город: Москва</span></p>
					    <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p>
					   </li>
				    <li>
					 <img src="img/project.jpg" alt="Наши проекты" />
					    <p><a href="">СТРОЕНИЕ</a></p>
					    <p><span class="city">Город: Москва</span></p>
					    <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p>
					   </li>
				    <li>
					 <img src="img/project.jpg" alt="Наши проекты" />
					    <p><a href="">СТРОЕНИЕ</a></p>
					    <p><span class="city">Город: Москва</span></p>
					    <p><span class="city">Цена: </span><span class="price">1.500000</span> руб.</b></p>
					   </li>
			    </ul>

CSS:


#arrow-right{
float:right;
padding-top:40px;
}
#arrow-left{
float:left;
padding-top:40px;
}
.our-projects ul{
width: 940px;
display:block;
}
.our-projects li{
    width: auto;
    height: auto;
border: 0;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}

.our-projects li img{
float: none;
}
.our-projects li a{
display: block;
font-weight: 800;
padding-top: 5px;
font-size: 11px;
color: #09c;
}
.city {
font-style:italic;
}
.price {
font-weight:700;
color: #1f1f1f;
}
.our-projects p{
line-height: 0.1;
}

Kray Storm · March 23, 2013

Как выровнять блоки, чтобы они заняли все пространство между стрелками?

Можно при помощи таблицы:

Элемент <ul> сделать display:table; с width:100%; и обязательно table-layout:fixed;.

Пунктам <li> задать display:table-cell; и выровнять содержимое по центру.

Контент внутри <li> можно поместить в блок (с display:block;) для удобства.

Родителю <ul> задать ширину и выравнивание.

Получим таблицу, растянутую по всей ширине, с автоматическим делением на равные по ширине колонки.

mnstrsound · March 23, 2013

Как выровнять блоки, чтобы они заняли все пространство между стрелками?
Можно при помощи таблицы:
Элемент <ul> сделать display:table; с width:100%; и обязательно table-layout:fixed;.
Пунктам <li> задать display:table-cell; и выровнять содержимое по центру.
Контент внутри <li> можно поместить в блок (с display:block;) для удобства.
Родителю <ul> задать ширину и выравнивание.
Получим таблицу, растянутую по всей ширине, с автоматическим делением на равные по ширине колонки.

Не катит. Рабочий код можете написать? Заранее благодарен

Николя223 · March 23, 2013

если я правильно понимаю - это карусель. в этом случае - ширина LI фиксированна. Смысл в том, чтобы при прокрутке небыло разброса по ширине.

Узнаете ширину блока, и делите на 4. (сколько клеток должно входить в область видимости) и задавайте LI требуемую ширину))

mnstrsound · March 24, 2013

Еще сюда же.

Есть такой блок

Мой вариант

br ислючительно для наглядности моей проблемки)

Нижние блоки надо уместить туда, где стоит br

HTML {


			 <div class="article">
				 <div class="article-top">
					 <h1>Стройматериалы</h1>
					    <a href=""><img src="img/all-articles.png" alt="Все записи"/></a>
				    </div>
				    <div class="article-bottom">
				    <br />
					 <div class="leftSide">
						 <img src="img/article-img.jpg" alt="Особняк" />
						    <p class="article-link">
							 <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a>
						    </p>
							 <p class="article-options">
								 <a href="">09.08.2010 14:59</a>
								 <a href="">11 комментариев</a>
								 <a href="">157 просмотров</a>
						    </p>
						    <p>
							 Последние годы замечается рост урологических и онкологических заболеваний. Причины разнообразны.
							    Среди них вода, которую мы ежедневно пьём. Лично я употребляю минеральную воду “Ресан” и рекомендую
								 её своим пациентам против образования камней в почках и желчевыводящих путях
						    </p>
					    </div>
					    <div class="rightSide">
						 <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br />
						    <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br />
						    <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br />
						    <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br />
						    <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br />
						    <a href="">Новая дрель “Аристарх-3000” поступит в продажу в мае</a><br />
					    </div>
				    </div>
			    </div>

CSS


#content .article {
width: 740px;
float: left;
}
#content .article .article-top {
width: 740px;
border: 2px solid #d4d4d4;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
height: 47px;
background-color:#eaeaea;
}
#content .article .article-top h1 {
float: left;
font-size: 18px;
margin-left: 18px;
font-weight: 500;
color: #4e4e4e;
}
#content .article .article-top img {
float: right;
margin-top: 7px;
margin-right: 7px;
width: 109px;
height: 31px;
}
#content .article .article-bottom {
width: 740px;
border: 2px solid #d4d4d4;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top: 0;
background-color:#fff;
}
#content .article .article-bottom .leftSide {
width: 380px;
padding: 5px;
border: 0;
float: left;
}
#content .article .article-bottom .leftSide img {
margin: 10px 0 0 10px;
}
#content .article .article-bottom .leftSide .article-link a {
font-size: 14px;
color: #508f09;
text-decoration: underline;
}
#content .article .article-bottom .leftSide .article-link a:hover {
text-decoration: none;
}
#content .article .article-bottom .leftSide .article-options a {
font-size: 11px;
color: #999999;
}
#content .article .article-bottom .leftSide .article-options a:hover {
text-decoration: underline;
}
#content .article .article-bottom .rightSide {
width: 340px;
padding: 5px;
border: 0;
float: right;
}

#content .article .article-bottom .rightSide a {
font-size: 14px;
color: #508f09;
text-decoration: underline;
}
#content .article .article-bottom .rightSide a:hover {
/*font-size: 14px;
color: #508f09;*/
text-decoration: none;
}

Sign In

Помогите советом

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information