Нужно распределить 3 слова

[slawok]

Есть поле в котором нужно средствами css распределить три слова, должно выглядеть как на картинке, рамка это рамка моей таблицы.

С левой стороны два слова шрифт 12px
Слово 3 - 16px + bold
Слово 4 - 10px

Как средствами css расписать это, чтобы в рамке это находилось с левой стороны с небольшим отступом по горизонт, а по вертикали по середине?

Принцип виден на картинке, мне важно чтобы также выглядело и в моей таблице.

Буду премного благодарен.

[MrJenika]

<table border="1" width="450px" >
          <tr>
          <td >
                <div class="word1">Слово 1</div>
                <div id="word3">Слово 3</div> 
                <div class="word1">Слово 2</div> 
                <div id="word4">слово 4</div> 
           </td>

          </tr>
   </table>

.word1 {
    width:200px;
    float: left;
       font-size: 12px;
}

#word3 {
    width:190px;
    font-weight: bold;
    font-size: 14px;
    float:right;
    
}
#word4 {
    width:190px;
    font-size: 10px;
    float:right;
    
}

Отступы уже подправляйте с помощью padding-top ,padding-bottom и так далее, на это у меня времени сейчас малость нет(

[lenka_25]

Нужно спользовать теги fieldset и legend


<fieldset>
<legend>Заголовок</legend>
Сюда помещаемкартинку
</fieldset>

[MrJenika]

не на ту картинку смотрите lenka_25 ))
нужно чтобы было так как на внутренней картинке)

[slawok]

Сообщение от MrJenika

[CODE]
Отступы уже подправляйте с помощью padding-top ,padding-bottom и так далее, на это у меня времени сейчас малость нет(

Спасибо большое! Само то, что нужно

Есть еще вопросик, есть поле покупки товара, кол-во ({$ADD_QTY}) и кнопка ({$ADD_CART_BUTTON}), как выровнить их в одну линию по горизонтали? (приложил скрин)

Вот код:

PHP код:

<div class="add_cart_button">{$ADD_QTY}{$ADD_CART_BUTTON}
</div> 


класс:

PHP код:

.add_cart_button {
    margin: 0px;
    padding: 20px 40px 0px 70px;    
} 


Спасибо!

[MrJenika]

тем же padding'ом не забывайте что можно также использовать и отрицательные значения, например чтобы опустить кнопку ниже, можно использовать не только значение padding-top но и padding-bottom: -10px;
тут уж ловкость рук и зоркость глаз вам поможет0 подбирайте свои значения, к примеру можете вместо нуля в вашем стиле написать -15 и посмотреть что получится)

[slawok]

Сообщение от MrJenika

тем же padding'ом не забывайте что можно также использовать и отрицательные значения, например чтобы опустить кнопку ниже, можно использовать не только значение padding-top но и padding-bottom: -10px;
тут уж ловкость рук и зоркость глаз вам поможет0 подбирайте свои значения, к примеру можете вместо нуля в вашем стиле написать -15 и посмотреть что получится)

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

Я забыл указать что кнопки находятся также в другом классе, вот код:

PHP код:

<div class="content_full"><div class="add_cart_button">{$ADD_QTY}{$ADD_CART_BUTTON}
</div></div> 


Класс content_full

PHP код:

.content_full {
    background-attachment: scroll;
    background-image: url(bilder/bova-art_12.jpg);
    background-repeat: repeat-y;
    background-position: left top;
    width: 304px;
    height: 70px; 


Класс add_cart_button

PHP код:

.add_cart_button {
    margin: 0px;
    padding: 20px 40px 0px 70px;    
} 


Вот как это выглядит в сборе (см. изображение)

Также пробовал заключить в класс отдельно поле ввода кол-во и кнопку, но все безрезультатно, кнопку не поднять средствами padding выше низа поля и наоборот поле не опустить ниже чем верх кнопки, они лежат друг на друге и двигаются при изменении любого из 4-ех значений padding только по горизонтали.

Что я не правильно делаю?

[k0nami]

<div style="vertical-align:middle;"> ... </div>
попробуйте

[slawok]

Сообщение от k0nami

<div style="vertical-align:middle;"> ... </div>
попробуйте

Спасибо, я уже был сам исправил, но все-равно спасибо за совет.