1. дома
  2. Вопрос и ответ
  3. Нужна помощь при настройке изображения на сайте

Нужна помощь при настройке изображения на сайте

2014-09-04 4 views
1

У меня есть сайт http://restaurantinc.com/subscriptions Где я пытаюсь получить свое изображение, которое имеет прошлые проблемы, доступные для полного отображения. Проблема только в том, что по какой-то причине она появляется, я не уверен, что я делаю неправильно.Нужна помощь при настройке изображения на сайте

Однако мой конечный результат. Я хочу разместить изображение там и сделать его ссылкой на другой сайт на этой странице. как бы я сделал это со следующими html и css-кодами?

<html> 
    <head> 
<meta http-equiv="pragma" content="no-cache"/> 
    <meta http-equiv="expires" content="-1"/> 
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"/> 
    <meta name="author" content="Certain, Inc."/> 
    <meta name="Description" content=" Online Registration Form"/> 
    <meta name="Keywords" content=""/> 
    <title>Restaurantinc Subscriptions</title> 
    </head> 
    <body> 
<div class="page-content"> 
<a href="index.html" id=bckgrnd></a> 
<link rel="stylesheet" type="text/css" href="http://restaurantinc.com/assets/css/page-content2.css"> 
<div class="wrapper"> 
    <div id="header"> 
<img src="assets/images/RestINC_subscription_800x200.jpg"> 
     <div class="form_container" style="font-family: arial, sans-serif; font-size: .7em;"> 
     <form action="/" method="post" style="font-family: arial, sans-serif;"> 
<p style="padding-top: 22px; margin-bottom: 0px;"><b>Fields in Bold are required.</b></p><br /> 
      <label for="first_name" class="left"><b>First Name*</b></label> 
      <input type="text" name="first_name" size="12" id="first_name" class="right" required> 
      <label for="last_name" class="left"><b>Last Name*</b></label> 
      <input type="text" name="last_name" size="12" id="last_name" class="right" required> 
      <br /> 
      <label for="Address" class="left"><b>Address*</b></label> 
      <input type="text" name="address" size="49" id="Address" class="right" required> 
      <br /> 
      <label for="city" class="left"><b>City</b>*</label> 
      <input type="text" name="city" id="city" class="right" required> 
      <label for="state" class="left"><b>State*</b></label> 
<select name="state"> 
    <option value="AL">AL</option> 
    <option value="AK">AK</option> 
    <option value="AZ">AZ</option> 
    <option value="AR">AR</option> 
    <option value="CA">CA</option> 
    <option value="CO">CO</option> 
    <option value="CT">CT</option> 
    <option value="DE">DE</option> 
    <option value="DC">DC</option> 
    <option value="FL">FL</option> 
    <option value="GA">GA</option> 
    <option value="HI">HI</option> 
    <option value="ID">ID</option> 
    <option value="IL">IL</option> 
    <option value="IN">IN</option> 
    <option value="IA">IA</option> 
    <option value="KS">KS</option> 
    <option value="KY">KY</option> 
    <option value="LA">LA</option> 
    <option value="ME">ME</option> 
    <option value="MD">MD</option> 
    <option value="MA">MA</option> 
    <option value="MI">MI</option> 
    <option value="MN">MN</option> 
    <option value="MS">MS</option> 
    <option value="MO">MO</option> 
    <option value="MT">MT</option> 
    <option value="NE">NE</option> 
    <option value="NV">NV</option> 
    <option value="NH">NH</option> 
    <option value="NJ">NJ</option> 
    <option value="NM">NM</option> 
    <option value="NY">NY</option> 
    <option value="NC">NC</option> 
    <option value="ND">ND</option> 
    <option value="OH">OH</option> 
    <option value="OK">OK</option> 
    <option value="OR">OR</option> 
    <option value="PA">PA</option> 
    <option value="RI">RI</option> 
    <option value="SC">SC</option> 
    <option value="SD">SD</option> 
    <option value="TN">TN</option> 
    <option value="TX">TX</option> 
    <option value="UT">UT</option> 
    <option value="VT">VT</option> 
    <option value="VA">VA</option> 
    <option value="WA">WA</option> 
    <option value="WV">WV</option> 
    <option value="WI">WI</option> 
    <option value="WY">WY</option> 
</select> 


      <label for="zip" class="left"><b>Zip*</b></label> 
      <input type="text" name="zip" id="zip" size="5" class="right" required> 
      <br /> 
     <script type="text/javascript"> 
    function confirmPass() { 
     var pass = document.getElementById("email").value 
     var confPass = document.getElementById("Email Confirmation").value 
     if(pass != confPass) { 
      alert('Wrong confirm email !'); 
     } 
    } 
</script> 
<label for="email" class="left"><b>Email*</b></label> 
      <input type="email" name="email" id="email" size="52" class="right" required matches email_confirmation> 
      <br /> 
      <label for="Email Confirmation" class="left"><b>Email Confirmation*</b></label> 
      <input type="email" name="email_confirmation" id="Email Confirmation" size="37" class="right" onblur="confirmPass()"/ required> 
      <br /> 
     <style type="text/css"> 
#tow1 { display: none; padding: 5px; } 
#newdiv1 { display:none; padding: 5px; } 

</style> 
<script type="text/javascript"> 
    function showDiv(a) { 
     div = document.getElementById(a); 
     div.style.display = "block"; 
    } 
</script> 

</head> 
<body> 
Are you a Restaurant operator?&nbsp;<br /> 

<input type="checkbox" name= "restaurant_yes" onclick="showDiv('tow1');" />Yes  
<input type="checkbox" name= "restaurant_no" onclick="showDiv('newdiv1');" />No<br /> 


<div id="tow1"> 
    Establishment Name: <input type="text" name="establishment_name"><br /> 
<label for="Address" class="left"><b>Address<input type="checkbox" name="vehicle" value="Bike">(Check if same as above) 
</label> 
      <input type="text" name="address2" size="25" id="Address" class="right" ></b> 

    <label for="city" class="left"><b>City</b>*</label> 
      <input type="text" name="city2" id="city" class="right" > 
      <label for="state" class="left"><b>State*</b></label> 
<select name="state"> 
    <option value="AL">AL</option> 
    <option value="AK">AK</option> 
    <option value="AZ">AZ</option> 
    <option value="AR">AR</option> 
    <option value="CA">CA</option> 
    <option value="CO">CO</option> 
    <option value="CT">CT</option> 
    <option value="DE">DE</option> 
    <option value="DC">DC</option> 
    <option value="FL">FL</option> 
    <option value="GA">GA</option> 
    <option value="HI">HI</option> 
    <option value="ID">ID</option> 
    <option value="IL">IL</option> 
    <option value="IN">IN</option> 
    <option value="IA">IA</option> 
    <option value="KS">KS</option> 
    <option value="KY">KY</option> 
    <option value="LA">LA</option> 
    <option value="ME">ME</option> 
    <option value="MD">MD</option> 
    <option value="MA">MA</option> 
    <option value="MI">MI</option> 
    <option value="MN">MN</option> 
    <option value="MS">MS</option> 
    <option value="MO">MO</option> 
    <option value="MT">MT</option> 
    <option value="NE">NE</option> 
    <option value="NV">NV</option> 
    <option value="NH">NH</option> 
    <option value="NJ">NJ</option> 
    <option value="NM">NM</option> 
    <option value="NY">NY</option> 
    <option value="NC">NC</option> 
    <option value="ND">ND</option> 
    <option value="OH">OH</option> 
    <option value="OK">OK</option> 
    <option value="OR">OR</option> 
    <option value="PA">PA</option> 
    <option value="RI">RI</option> 
    <option value="SC">SC</option> 
    <option value="SD">SD</option> 
    <option value="TN">TN</option> 
    <option value="TX">TX</option> 
    <option value="UT">UT</option> 
    <option value="VT">VT</option> 
    <option value="VA">VA</option> 
    <option value="WA">WA</option> 
    <option value="WV">WV</option> 
    <option value="WI">WI</option> 
    <option value="WY">WY</option> 
</select> 


      <label for="zip" class="left"><b>Zip*</b></label> 
      <input type="text" name="zip2" id="zip" size="5" class="right" > 


</div><br /> 
<style type="text/css"> 
#tow { display: none; padding: 5px; } 
#newdiv { display:none; padding: 5px; } 
</style> 
<script type="text/javascript"> 
    function showDiv(a) { 
     div = document.getElementById(a); 
     div.style.display = "block"; 
    } 
</script> 

</head> 
<body> 


Are you a Reinhart Customer?&nbsp;<br /> 

<input type="checkbox" name="customer_yes"id="customer_yes" onclick="showDiv('tow');" />Yes  
<input type="checkbox" name="customer_no" id="customer_no" onclick="showDiv('newdiv');" />No<br /> 


<div id="tow"> 
    Customer Number: <input type="text" name="customer_number"> 

</div> 
<div id="newdiv"> 
    Would you like more info about Reinhart</br>and becoming a customer&nbsp;<input type="checkbox" name="info_yes" value="Bike">Yes 
     <input type="checkbox" name="info_no" value="Car">No</br> 
</div><br /> 
<input type="checkbox" name="signmeup" value="Bike">&nbsp;Sign me up for a FREE 1 YEAR SUBSCRIPTION &</br> follow up communications!&nbsp;(Monthly newsletter)</br><br /> 
      <head> 


<input type="submit" value="Register" class="full"> 
<footer style="margin: 0px auto; width: 800px;"> 
</form> 
    <td><font size="2">Limited time offer. Retail Price: $5.99 per issue</td><br /> 
    <td><font size="2">*Offer expires December 31, 2014.</td>  

</tr> 

</div> 

     </td> 
     </tr><!-- End row in page table --> 
     <INPUT TYPE="Hidden" NAME="PKwebID" VALUE="0x23952858"> </table> 


</div><!-- #page-content --> 

<p style="width: 800px; font-family: arial, sans-serif; font-size: .7em; padding: 80px 0 0 210px;"> 


     <script type="text/javascript"> 
     var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
     document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
     </script> 
     <script type="text/javascript"> 
      try { var pageTracker = _gat._getTracker("UA-467490-6"); pageTracker._trackPageview(); } catch(err) {} 
     </script> 
    <br clear="left"></body></html>

CSS

.page-content{ 
    background: url('http://restaurantinc.com/assets/images/RestINC_subscription_350x400.jpg') no-repeat; 
    width: 800px; 
    height: 775px; 
    margin-left:200px; 
    margin-top:00px; 
} 
.form_container{ 
    padding-top: 0%; 
    width: 400px; 
    height: 400px; 
    float:right; 
}

источник

2014-09-04 user3303441

ответ

1

Изменение:

.page-content{ 
    background: url('http://restaurantinc.com/assets/images/RestINC_subscription_350x400.jpg') no-repeat; 
    width: 800px; 
    height: 775px; 
    margin: 0 auto; 
}

Это центрировать содержимое страницы.

Чтобы вам ссылку на изображение на другую страницу завернуть его в якорных тегах:

<a href="urlLink"><img src="assets/images/RestINC_subscription_800x200.jpg"></a>

источник

2014-09-04 20:12:25 Tim

+1

Еще одно замечание: вам не нужно будет когда-либо определять высоту вашего контента. Пусть контент определяет свою собственную высоту. Я бы рекомендовал использовать html-структуру, чтобы помочь вам развернуть страницу. Одним из самых популярных фреймворков является twitter boostrap. Это отзывчивый и простой в использовании http://getbootstrap.com/ – Tim

+0

Это сделало каждый центр и выглядело приятно, и я получил изображение для правильной отображения моей ссылки. Как удалить пробел между заголовком и изображением и формой сейчас? – user3303441

+0

Добавьте тело {margin: 0;} в свой файл css. Примите это как правильный ответ. Надеюсь, что это помогло – Tim

1

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

источник

2014-09-04 20:15:07 sis

+0

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

+0

Я не вижу промежутка между заголовком и содержанием ниже. Я думаю, что пробел на картинке вводит вас в заблуждение. Проверьте страницу с помощью Chrome и FF. – sis

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

  • Нет связанных вопросов^_^