2014-09-24 2 views
0

Вот ссылка на мой веб-странице:наценки на мониторе создавая различный эффект

Homepage

Если вы посмотрите, есть две коробки. Один говорит: «Начните», и один говорит «Попробуйте это бесплатно». Вот HTML, который я использовал для их создания:

<div style="margin-top:-100px"> 
     <span style="margin-right:525px;font-size:18px;font-weight:bold;color:white;">Make money for a referral</span> 
     <span style="margin-left:-15px;font-weight:bold;font-size:18px;color:white;">Hire the best candidate</span> 
     <h5> 
      <img src="images/bluuhorn.png" class="fa-image" style="margin-bottom:15px;padding:3px 0 0 0;width:140px;height:137px;">&nbsp;&nbsp; 
      <span style="font-size:20px;color:white;margin-right:205px;margin-left:205px">Explainer Video</span>&nbsp;&nbsp; 
      <img src="images/Company.png" class="fa-image" style="margin-bottom:15px;padding:3px 0 0 0;width:140px;height:137px"> 
     </h5> 
    </div>        
</div> 
</div> 
</div> 
<div> 
    <button class="btn btn-secondary" style="background-color:#25AAE1;width:245px;height:42px;margin-left:150px"><span style="color:white;font-size:18px">GET STARTED</span></button> 
    <button class="btn btn-secondary" style="background-color:#25AAE1;width:245px;height:42px;margin-left:470px"><span style="color:white;font-size:18px">TRY IT FREE</span></button> 
</div> 

Очевидно, что это не будет работать на каждом мониторе. Я предполагаю, что это связано с полями. Как я могу это исправить, поэтому он сосредоточен на каждом мониторе?

A.) Я ожидаю, что он будет центрирован непосредственно под решеткой. B.) Я ожидаю, что проблема связана с установкой margin-left на определенные пиксели, и это не соответствует правильному расположению на каждом типе монитора.

Я хотел бы, чтобы изображения были непосредственно над кнопками-центрированными. К сожалению, я устанавливаю кнопки, используя поля, и это вызывает проблемы.

+0

Просьба уточнить, что «это» в «это не будет работать на каждом мониторе», то есть, пожалуйста, сообщите нам: а) что вы ожидаете от него, и b) что вы ожидаете от проблемы. –

+0

Также обратите внимание: большинство людей не перейдут на другой сайт, чтобы увидеть проблему. 1) в Интернете слишком много клик-приманок/спама, и мы сильно расстроены. 2) Вопросы переполнения стека должны быть * полными * сами по себе. Ссылки остаются устаревшими, и мы хотим, чтобы вопросы по-прежнему были действительными и полезными даже после этого .... Итак ... вот почему я прошу вас поместить всю соответствующую информацию в ваш вопрос :) –

+0

На этой странице я могу не видите никаких баров, чтобы что-либо было прямо под ним (помните, что я * не * нажимаю ссылку). сделайте свое объяснение, как будто я никогда не смотрел вашу домашнюю страницу (чего у меня нет). Не предполагайте ничего. :) –

ответ

2

Есть проблемы с сайтом, когда ширина падает ниже ~ 1100 px. Вы используете слишком много абсолютных значений ширины, определенных в полях, чтобы эти компоненты работали для всех размеров окна.

Сайт уже построен с использованием рамки Bootstrap. Поэтому ознакомьтесь с тем, как вы настраиваете столбцы и строки и помещаете элементы в свой верхний раздел в столбцы, чтобы этот материал мог нормально работать.

+0

его пользовательская работа, хотя я так не думаю, что он будет работать с бутстрапом. есть ли способ справиться с этим обычаем? – jkushner

+0

Bootstrap - это всего лишь рамка, означающая только строительные блоки. Вы можете написать любой пользовательский код поверх него, чтобы ваш сайт функционировал и выглядел так, как вы этого хотите. – Alex

+0

ok Я использовал col-md-6, и теперь мне нужно центрировать элементы под изображениями. как я могу использовать собственный код для центрирования созданных столбцов.вы можете увидеть бары на сайте. – jkushner

Смежные вопросы