Для любителей поломать голову:)

Wertuta · January 17, 2008

Хоть я и начинала верстать сразу же "дивным" образом, но до сих пор не могу понять, КАК сделать такую штуку с помощью div'ов и css?

Задача:

html менять нельзя!!!

Потому как один html, а css для разных скинов разный.

Вот оригинальный html:

INFO

Messages Received/SPAM:
10512/71.9%
New Messages (check):
0

Local Time:
08:50:42 AM
Logged on as:
ss (logout)

А вот css, который мне даже стыдно показывать потому как он у меня не работает:

#infobox {
height: 65px;
width: 254px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 8.3pt;
top: 13px;
color: white;
float:right;
border: solid white 1px;
}
#infobox a{
font-weight: bold;
color: white;
}
#info {
background-image: url(images/accinfo_info.gif);
background-repeat: no-repeat;
float:left;
height: 64px;
width: 15px;
display:block;
z-index:3;
background-position: left top;
}
#info span{
display:none;
}
#info2 {
float:left;
margin:3px 0 0 5px;
position:relative;
}
#div {
margin:3px 0 0 5px;
float:left;
position:relative;
}
.b {
position:relative;
left:5px;
}
.left {
float:left;
text-align:right;
clear:left;
}

Помогите, пожалуйста... хоть чем-то.

Сорри, картинку починила

Dimitry Wolotko · January 17, 2008

Доступ к альбому то откройте.

Vlad · January 17, 2008

Нифига себе задачка!

Попробовал сделать фразу INFO вертикально и сломал зубы. Единственный близкий к картинке вариант работает в IE.

#info {

writing-mode: tb-rl;

filter: flipv fliph;

}

В остальных браузерах результат не отображается.

Нашел интересную статью, где этот вопрос достаточно подробно раскрыт (на англ.)

http://fantasai.inkedblade.net/style/discuss/vertical-text/

Но все упомянутые параметры CSS в современных браузерах не пашут.

Wertuta · January 17, 2008

Нифига себе задачка!
Попробовал сделать фразу INFO вертикально и сломал зубы.

Не, как раз это тут не проблема, здесь тупо вставлена картинка... а вот расположить div'ы так как на картинке у меня вообще не удается НИКАК, старая версия была написана на таблицах, там все легко и понятно... а вот новую начальство сказало: "ВСЕ НА ДИВАХ!!!!" И хоть тут тресни Ломаю голову уже не первый день...

strix · January 17, 2008

для данных справа применить надо float:right

правда, класc называться будет странно - .b, но да ладно )))

.b {
float:right
}

чтоб сделать разделительную черту, думаю, вс? же в?рстку менять надо - без этого, не знаю, как е? сделать )))

Vlad · January 17, 2008

Мда, деление не совсем логичное. Горизонтальная черта отделяет последний пункт, а дивы делят текст на блоки 2+2.

Scrum · January 17, 2008

может так ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/
 #infobox {
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 height: 65px;
 width: 254px;
 font-size: 8.3pt;
 border: solid white 1px;
 color: #fff;
 background: #636363;
 float: left;
 }
 #info {
 height: 59px;
 width: 13px;
 float: left;
 text-align: center;
 padding: 5px 3px 0 3px;
 font-weight: bold;
 border-right: 1px solid #fff;
 }
 #info2, #div {
 margin-top:3px;
 }
 .left {
 float: left;
 margin-left: 5px;
 }
 .b {
 float: right;
 margin-right: 5px;
 }

 /*]]>*/
 </style>
</head>

<body>
<div id="infobox">
 <div id="info"><span>I N F O</span></div>
 <div id="div">
 <span class="left">Messages Received/SPAM:</span>
 <span class="b">10512/71.9%</span>

 <span class="left">New Messages (<a href="#">check</a>):</span>
 <span class="b">0</span><br/>
 </div>
 <div id="info2">
 <span class="left">Local Time:</span>
 <span class="b">08:50:42 AM</span><br/>
 <span class="left">Logged on as:</span>
 <span class="b">ss (<a href="#">logout</a>)</span> </div>
 </div>
</body>

</html>

Kiar25 · January 17, 2008

)) Здесь же таблица , зачем таблицу верстать "дивным" образом ??? Или это специально, что бы мозг не застаивался?

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

А если это специально, что бы устроить мозговой штурм, почему бы не меняя кода html сделать это используя JS или PHP? LOL

Tokolist · January 17, 2008

Scrum, html менять нельзя

 #info span {
 display: none;
 }

 #info:before {
 content: "I N F O";
 }

 #info {
 background-image: expression(this.runtimeStyle.backgroundImage = 'none', this.innerHTML = 'I N F O');
 }

Dimitry Wolotko · January 17, 2008

почему бы не меняя кода html сделать это используя JS или PHP? LOL

Покажите примеры, пожалуйста.

Fu-tai · January 17, 2008

Согласен с Киар-ом 25 что здесь тбличные данные и верстать их надо таблицами!

С другой стороны если не изобретать велосипед и надо просто повторить картинку, то все куда проще:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
div {
background-color: #336699;
background-image:url(info.gif);
background-position:left;
background-repeat:no-repeat;
color:#FFF;
width:254px;
border:1px solid #FFF;
padding: 0 0 0 14px;
}
p {
border-left:1px solid #FFF;
padding: 1px 1px 1px 6px;
}
a {
color:#FFFFFF;
font-weight:bold;
text-decoration:underline;
margin: 0 2px;
}
.r {
text-align:right;
}
.bor {
border-top: 1px solid #FFF;
}
.m, .f {
margin-left: 50px;
}
.f {
margin-left: 100px;
}
.k {
margin-left: 113px;
}
.t {
margin-left: 76px;
}
</style>
</head>

<body>
<div>
<p>Messages Received/SPAM:<span class="r m">58/8.6%</span></p>
<p>New Messages (<a href="#">check</a>):<span class="r f">1</span></p>
<p>Local Time:<span class="r k">05:02:33 AM</span></p>
<p class="bor">Logged on as:<span class="r t">vacancy(<a href="#">logout</a>)</span></p>
</div>
</body>
</html>

Но и этот вариант не идеален!

Вах! просмотрел что хтмл менять нельзя ((

Но за такой хтмл надо отстреливать руки! ((((((

Задачка действительно интересная!

Tokolist · January 17, 2008

Согласен с Киар-ом 25 что здесь тбличные данные и верстать их надо таблицами!

тебе же девушка обьяснила, что это должен быть скин, который состоит из css-файла и картинок...

если уж и делать как ты, то через dl а не p и span

yopopt · January 17, 2008

Wertuta, ничего особо сложного здесь нет, но верстать надо таблицами. Помня что html менять нельзя сверстал так, хотя вариант не идеален:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Title</title>
 <style type="text/css">
 /*<![CDATA[*/
#infobox {
 background-color: #336799;
 position: relative;
 height: 66px;
 width: 254px;
 font: 8.3pt Tahoma, Arial, Helvetica, sans-serif;
 color: #fff;
 border: 1px solid #fff;
}
#infobox a{
 font-weight: bold;
 color: #fff;
}
#info {
 float: left;
 width: 10px;
 text-align: center;
 font-weight: bold; 
 padding: 5px 3px;
 border-right: 1px solid #fff;
 height: 56px;
}

/* Код Tokolist'a */
#info span {
 display: none;
}
#info:before {
 content: "I N F O";
}
#info {
 background-image: expression(this.runtimeStyle.backgroundImage = 'none', this.innerHTML = 'I N F O');
}
/* /Код Tokolist'a */

#div, #info2 {
 position: relative;
 top: 0;
 left: 0;
 height: 45px;
 margin: 0 3px 0 20px;
 padding-left: 3px;
 border-bottom: 1px solid #fff;
 line-height: 11pt;
 text-align: right;
 width: 228px;
 _margin-left: 0; /* Компенсация тр?хпиксельного бага в ие6 */
}
#info2 {
 line-height: 14.5pt;
 position: absolute;
 top: 26px;
 left: 0;
 border-bottom: 0;
 _margin-left: 20px; /* Компенсация тр?хпиксельного бага в ие6 */
}
.b {
}
.left {
 float:left;
}
 /*]]>*/
 </style>
</head>
<body>

<div id="infobox">
 <div id="info"><span>INFO</span></div>
 <div id="div">
 <span class="left">Messages Received/SPAM:</span>
 <span class="b">10512/71.9%</span><br/>
 <span class="left">New Messages (<a href="#">check</a>):</span>
 <span class="b">0</span><br/>
 </div> 
 <div id="info2"> 
 <span class="left">Local Time:</span> 
 <span class="b">08:50:42 AM</span><br/>
 <span class="left">Logged on as:</span> 
 <span class="b">ss (<a href="#">logout</a>)</span>
 </div>
</div>

</body>
</html>

В?рстка заняла около пятнадцати минут плюс десять минут ушло на исправления для ие6. Код проверен в Опере9, Фаерфокс 2, ие6, ие7 и Safari for win. Я надеюсь что Вы в н?м разбер?тесь, а не просто тупо скопируете...

P. S. Выделение "0" стоящего супротив "New Messages (check):" специально не делал, поскольку просто не представляю как кроссбраузерно это реализовать...

P. P. S. to Tokolist

Спасибо за интересный код!

P. P. P. S. Что-то сообщение два раза отправилось...

Scrum · January 18, 2008

Scrum, html менять нельзя

 #info span {
 display: none;
 }

 #info:before {
 content: "I N F O";
 }

 #info {
 background-image: expression(this.runtimeStyle.backgroundImage = 'none', this.innerHTML = 'I N F O');
 }

а я немножко )) только инфо подправил, та все равно картинка.

Tokolist +1

Kiar25 · January 18, 2008

По просьбе Dimitry Wolotko альтернативный код на php может быть кому-нибудь будет интересно:

1 Нам нужна картинка бэкгроунд - я сделал скрин и копию синего рисунка, стер все надписи, поэтому включите воображение и предсавьте верхний синий рисунок без надписей, оставил только линии подчеркивания и самое важная надпись INFO конечно же тоже остается

2 Код HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>PHP Ruulllleezzz!</title>
</head>
<body>
 <style>
 img {
 border: none;
 }
 </style>
 <img src="my.php" usemap="#navigation" />
 <map name="navigation">
 <area shape="rect" coords="100,17,150,27" href="#" alt="chek" title="chek"/>
 <area shape="rect" coords="210,50,280,60" href="#" alt="logout" title="logout"/>
 </map>
</body>
</html>

Я думаю без комментов поймут все

3Создаем скрипт который рисует наше "чудо" :

<?php
//Создаем наши строки (у нас их 4)
$str1 = 'Messages Recived/Spam';
$str2 = "New messages (check):";
$str3 = 'Local Time:';
$str4 = 'Logged on as:';

/*И наши данные (не знаю откуда их берут
поэтому я не заморачивался и написал их
как строку*/
$data1 = '58/8.6%';
$data2 = '1';
$data3 = date('H:i:s A');
$data4 = 'vacancy (logout)';

//Создаем фоновое изображение
 $im = imagecreatefromjpeg('my.jpg');
 if(!$im) exit('Дело труба, пора в запой!');
//Задаем цвет шрифта в данном случае это белый
 $white = imagecolorallocate($im, 255, 255, 255);
//Создаем наш шрифт - Tahoma (заливай к нашим файлам файл Tahoma.ttf)
 $font = 'tahoma.ttf';
//Рисуем текст
 imagettftext($im, 8, 0, 29, 15, $white, $font, $str1);
 imagettftext($im, 8, 0, 29, 27, $white, $font, $str2);
 imagettftext($im, 8, 0, 29, 40, $white, $font, $str3);
 imagettftext($im, 8, 0, 29, 60, $white, $font, $str4);
//Рисуем данные
 imagettftext($im, 9, 0, 200, 15, $white, $font, $data1);
 imagettftext($im, 9, 0, 235, 29, $white, $font, $data2);
 imagettftext($im, 9, 0, 183, 42, $white, $font, $data3);
 imagettftext($im, 9, 0, 157, 60, $white, $font, $data4);
//Ну вот и все
 header("Content-Type: image/jpeg");
 ImageJpeg($im);
 ImageDestroy($im);
?>

P.S. Dimitry Wolotko и все все все , обращайтесь комне на ТЫ

Всем спасибо и Удачи!

D.S.Denton · January 18, 2008

Kiar25, блин, опередил

правда я предпочитаю гиф - там прозрачность можно при необходимости делать

http://denton.msk.ru/tmp/signature/?img=2 тип такого

Kiar25 · January 18, 2008

Совершенно верно D.S.Denton, способ проверенный и работающий, причем в нашем примере кросс-браузерность 100% . В нашем случае нужен только background, для него не нужна прозрачность, а если рисунок сложный то без jpeg не обойтись))

yopopt · January 18, 2008

А если если у пользователя картинки выключены, то он посылается? Нафиг такие варианты. Лучше просто заменить код на более подходящий к ситуации.

Kiar25 · January 18, 2008

LoL такого если честно еще не помню, чтобы у пользователя были картинки выключены - смысл то тогда какой пользоваться браузером? Тогда бы все пользовались бы блокнотом

У меня выключены. Если надо - включаю. В Опере это удобно.

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

yopopt · January 18, 2008

У меня выключены. Если надо - включаю. В Опере это удобно.

Wertuta · January 18, 2008

Ой, спасибо ребятки - столько отзывов!!!!

Еще толком все прочитать не успела, но уже вижу, что написали кучу полезного!!!!

Сейчас буду читать и разбираться

Я надеюсь что Вы в н?м разбер?тесь, а не просто тупо скопируете...

Конечно же, по-другому и быть не може, обязательно разберусь - мне ведь очень интересно именно разобраться!!! А вот с версткой таблицами - я согласна - было бы НАМНОГО проще... но... директору кто-то сказал, что сейчас надо все таблицы заменять на дивы.. и все... и попробуй переубедить С трудом убедила, что письма с темой, размером и т.д. колонками - это все-таки ТАБЛИЦА... и дивами ее верстать глупее не придумаешь...

Scrum · January 18, 2008

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

кто то глупость ему сказал, а он повелся. Он сам то понимает в этом толк ?

Wertuta · January 18, 2008

УРА!!!!!!!!!!!:)

Я сделала!!!!!

В принципе, все равно кучу всего пришлось переделать, но в оригинале очень помог css yopopt!!!! За что спасибо огромное!!!!

Да и вообще большое спасибо всем кто отозвался, даже не знаю, чтобы я без вас делала.

И еще, конечно, в этом деле очень помогают такие программульки, как: IE Developer Toolbar и FireBug для FireFox. Даже не знаю, чтобы я без них делала. Кому интересно посмотреть на резултат, ниже приведен css:

#infobox {
height: 65px;
width: 254px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 8.3pt;
top: 13px;
color: white;
float:right;
border: solid white 1px;
}
#infobox a{
font-weight: bold;
color: white;
}
#info {
background-image: url(images/accinfo_info.gif);
background-repeat: no-repeat;
float:left;
height: 64px;
width: 15px;
background-position: left top;
}
#info span{
display:none;
}
#info2 {
top:0;
height: 45px;
line-height: 11pt;
text-align: right;
width: 228px;
float:left;
margin:3px 0 0 15px;
position:relative;
line-height: 14.5pt;
position: absolute;
top: 26px;
border-bottom: 0;
right:7px !important;
}
#div {
top:0;
left:0;
height: 45px;
padding-left: 5px;
line-height: 11pt;
text-align: right;
width: 228px;
float:left;
position:relative;
}
.b {
position:relative;
left:5px;
}
.left {
float:left;
}
#line{
height: 1px;
width: 235px;
border-top:solid white 1px;
position:absolute;
top:20px;
padding-right:0pt;
left:0;
}

P.S.:

Вах! просмотрел что хтмл менять нельзя ((
Но за такой хтмл надо отстреливать руки! ((((((
Задачка действительно интересная!

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

Kiar25 · January 18, 2008

Молодец , а начальника на курсы по основам HTML отправляй))

Tokolist · January 18, 2008

yopopt

/* FF, Opera, IE7 Safari */
#div span+span+br+span+span {
 font-weight: bold;
}

/* IE5.5, IE6 */
#div span.b {
 background-image: expression(this.runtimeStyle.backgroundImage = 'none', this.nextSibling.nextSibling ? true : this.style.fontWeight = 'bold');
}

yopopt · January 18, 2008

Спасибо, оказывается вс? просто... Никак не могу привыкнуть к expression() в css. Мысль в эту сторону даже не шевелится.

Sign In

Для любителей поломать голову:)

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information