Помощь с версткой

rus_phantom · June 19, 2013

Прошу помочь с версткой. Я ее уже почти сделал, но все выглядит очень криво, на костылях. Пишу для Blackberry PB используя bbUI.js, но это почти ничего не меняет. В идеале все должно выглядеть так:

Вот что у меня получилось своими силами:


<div data-bb-type="round-panel" style=" margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; border-radius:8px; box-shadow: 0px 0px 0px 6px #f6f6f6, 0px 0px 0px 7px #cccccc; padding:10px;">
<div data-bb-type="label" width="800px" id="story" style="display:inline-block; width:800px;" >Default Story<br><br><br><br>dddddddd<br>aaa<br><br><br><br>qqqqq<br>zzzzzzz</div>
<div align="right" style="vertical-align:top; display:inline-block;  border-left: 10px solid gray;">
<div><button height="50%" type="button" onclick="alert('Hello world!')"><img src="images/rate_up.png" style="vertical-align: middle"></button></div>
<div><button type="button" onclick="alert('Hello world!')"><img src="images/rate_down.png" style="vertical-align: middle"></button></div>
</div>
</div>

И вот как это выглядит:

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

Заранее спасибо

lexskal · June 20, 2013

<html>

<head>

</head>

<body>

Default Story<br><br><br><br>dddddddd<br>aaa<br><br><br><br>qqqqq<br>zzzzzzz

</div>

<div>

</button>

</div>

<div>

</button>

</div>

</body>

</html>

Может так? попробуй....

а, пардон)))))) ща подумаем)))))

уже завтра.... нужно переписать.....

Edited June 20, 2013 by lexskal

lexskal · June 20, 2013

</head>

<body>

<li data-bb-type="label" style="display: table-cell; vertical-align: middle;min-width: 400px;">Default Story<br><br><br><br>dddddddd<br>aaa<br><br><br><br>qqqqq<br>zzzzzzz</li>

</button>

</div>

</button>

</div>

</li>

</ul>

</body>

</html>

вот так.... Годиться?

похоже я зря border в divы забил... вот другая версия

<html>

<head>

</head>

<body>

<li style="display: table-cell; vertical-align: middle;min-width: 400px;">Default Story<br><br><br><br>dddddddd<br>aaa<br><br><br><br>qqqqq<br>zzzzzzz</li>

</button>

</button>

</li>

</ul>

</body>

</html>

lexskal · June 20, 2013

</head>

<body>

<li style="display: table-cell; vertical-align: middle;min-width: 400px;padding: 10px;">Default Story<br><br><br><br>dddddddd<br>aaa<br><br><br><br>qqqqq<br>zzzzzzz</li>

</button>

</button>

</li>

</ul>

</body>

</html>

или вот так....чуть почище

rus_phantom · June 20, 2013

Уже ночью нашел информацию о display: table-cell, но было уже очень поздно. Получилось правда чище, но все равно проблемы остались:

Кнопки оказались все равно слева, но это я думаю можно легко поправить. Самая большая проблема в том что кнопки оказываются не растянутыми. Я удалил оттуда картинку, заменив ее на background-color:red и background-color:green и кнопки оказываются очень маленькими

UPD:

Вроде получилось сделать то, что я хотел. Итоговый код:


<div style=" margin: 20px 10px; border-radius:8px; box-shadow: 0 0 0 6px #f6f6f6, 0 0 0 7px #cccccc; padding: 0;">
        <div style="display: table-cell; vertical-align: middle;min-width: 800px;padding: 10px;">Default Story<br><br><br><br>dddddddd<br>aaa<br><br><br><br>qqqqq<br>zzzzzzz</div>
        <div height="100%" style="width=150px; display: table-cell;border-left: 7px solid #ababab;">
            <button height="52%" width="140px" type="button" onclick="alert('Hello world!')" style="width:140px; height:52%;background-color:red;"/>

            <button height="52%" width="140px" type="button" onclick="alert('Hello world!')" style="width:140px; height:52%; background-color:green; "/>
       </div> 
    </div>

Спасибо за помощь

Edited June 20, 2013 by rus_phantom

lexskal · June 20, 2013

Уже ночью нашел информацию о display: table-cell, но было уже очень поздно. Получилось правда чище, но все равно проблемы остались:
Кнопки оказались все равно слева, но это я думаю можно легко поправить. Самая большая проблема в том что кнопки оказываются не растянутыми. Я удалил оттуда картинку, заменив ее на background-color:red и background-color:green и кнопки оказываются очень маленькими
UPD:
Вроде получилось сделать то, что я хотел. Итоговый код:
<div style=" margin: 20px 10px; border-radius:8px; box-shadow: 0 0 0 6px #f6f6f6, 0 0 0 7px #cccccc; padding: 0;">
<div style="display: table-cell; vertical-align: middle;min-width: 800px;padding: 10px;">Default Story<br><br><br><br>dddddddd<br>aaa<br><br><br><br>qqqqq<br>zzzzzzz</div>
<div height="100%" style="width=150px; display: table-cell;border-left: 7px solid #ababab;">
<button height="52%" width="140px" type="button" onclick="alert('Hello world!')" style="width:140px; height:52%;background-color:red;"/>

<button height="52%" width="140px" type="button" onclick="alert('Hello world!')" style="width:140px; height:52%; background-color:green; "/>
</div>
</div>
Спасибо за помощь

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

Sign In

Помощь с версткой

Question

rus_phantom

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

lexskal

Link to comment

Share on other sites

lexskal

Link to comment

Share on other sites

lexskal

Link to comment

Share on other sites

rus_phantom

Link to comment

Share on other sites

lexskal

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information