Кажется, не могу получить правильную позицию

0

Поэтому я просто хочу сказать извинения за беспорядочный код, я очень старался с этим. В основном, я хочу, чтобы между вами было 3 изображения, которые я позже сделаю кликабельными, и серый фон позади них. Затем я хочу включить текст под изображениями. Любая помощь?

HTML

Премиум магазин

   <table id="table1" >
   <tr id="imgs">
    <div id="tablet">
   <table border="0";>
      <td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/></td>
   <td><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/></td>
   <td><img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro->            </icons8-metro->style/128/Business-Shop-icon.png"/></td>
        </div>
   </tr>
   <td> 
         Contact a representative!
   </td>
   <td>
       Deliver to your house!
   </td>
   <td>
       Locate a store!
   </td>

    </table>

CSS

#backgroundH
{
  width: 100%;
  height: 50px;
  background-color: #dddddd;
  position: absolute;
}

#header
{
  top: -50px;
  color: black;   
  font-family: "Courier New";
  text-align: center;
}

body
{
  background-color: #cccccc;
}

#table1
{
  width: 500px;
  height: 200px;
  background-color: #d9d9d9;
  position: fixed;
  margin-left: -250px;
  margin-top: -100px;
  top:50%;
  left:50%;
}

td
{
  width: 10px;
  height: 450px;
  position: relative;
  margin-left: -5px;
  margin-top: -225px;
  top: 35%;
  left: 3%;
}

Также, пожалуйста, укажите, что я сделал неправильно! Мне трудно понять позиционирование, в частности, как добавить аккуратную настройку. (Если кто-то может скайп со мной, у меня есть некоторые вопросы..: P skype-ikorey1)

Спасибо всем за помощь и чтение. Я действительно ценю все отзывы.

  • 0
    пожалуйста, используйте JSFidle, чтобы помочь нам лучше
  • 0
    @vishnu jsfiddle.net/tVy8q
Показать ещё 3 комментария
Теги:

3 ответа

0 
<html lang="en">
  <head>
      <style type="text/css">
    .img-with-text { float: left; text-align: center}
    </style>
  </head>


  <body>    
    <div class="container">
    <div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt=""   width="200" height="230" style="border: 2px solid black;" />
    <p>Anup<br />9096969903<br /><a href="mailto:[email protected]">Email Carl Call</a>  </p>
    </div>
    <div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
    <p>Anup<br />9096969903<br /><a href="mailto:[email protected]">Email Sjon Gentry</a></p>
    </div>
    <div class="img-with-text"><img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" border="0" alt="" width="200" height="230" style="border: 2px solid black;" />
    <p>Anup<br />9096969903<br /><a href="mailto:[email protected]">Email John Mabery</a> </p>
    </div>    
    </div>

<!-- End of your code -->
    <p style="clear: both">Something more here </p>
Поделиться
0

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

HTML

<div id="container">
    <figure>
       <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png"/>
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
    <figure>
      <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png"/>
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>
    <figure>
      <img src="http://icons.iconarchive.com/icons/visualpharm/<icons8-metro->            </icons8-metro->style/128/Business-Shop-icon.png"/>
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
    </figure>

</div>

CSS

#container{
   background:#ccc;
}

#container figure{
   float:left
}
Поделиться
0

Как насчет этого..

    <table id="table1">
    <tr id="imgs">
        <td>
            <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Assistant-icon.png" />
            <p class="content">
                Contact a representative!
            </p>
        </td>

        <td>
            <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Delivery-icon.png" />
            <p class="content">
                Deliver to your house!
            </p>
        </td>

        <td>
            <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/128/Business-Shop-icon.png" />
            <p class="content">
                Locate a store!
            </p>
        </td>
    </tr>
</table>

и css

body {
        background-color: #cccccc;
    }

    #table1 {
        width: 500px;
        height: 200px;
        background-color: #d9d9d9;
        position: fixed;
        margin-left: -250px;
        margin-top: -100px;
        top: 50%;
        left: 50%;
    }

    tr {
        width: 10px;
        height: 450px;
        position: relative;
        margin-left: -5px;
        margin-top: -225px;
        top: 35%;
        left: 3%;
    }

    td.content {
        position: absolute;
    }

и для деталей позиции подробно объясняются в w3schools

что очень поможет нам.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню