Пишите сюда если нужна помощь в составлении и оформлении таблиц и других html-блоков
Помощь по составлению html-кодов
Сообщений 101 страница 110 из 177
Поделиться10121.09.20 00:11
Герда
Спасибо Вам огромное! Я разобралась, ура!
Поделиться10221.01.22 15:58
Наверное мне сюда...
Подскажите, пожалуйста, кто-нибудь как задизайнить прозрачную картинку (штамп) так чтобы в постах она была поверх текста и чуть-чуть залазила на картинку? И желательно чтобы всё это делалось через блок:
[block=class][/block]
Чтобы было понятнее, приведу пример. Хочу оформить на своём форуме нужных и акционных персонажей как досье. Типа такого:
Вроде всё это просто сделать, но для атмосферы там не хватает штампика. А как сделать чтобы он был поверх текста и картинки я что-то не соображу.
А делать всё через фотошоп как-то не хочется. Хотелось бы обойтись кодами, если решение возможно, конечно.
Поделиться10321.01.22 16:16
Automation Baby
Картинка не отображается, поэтому пальцем в небо:
[block=template] [block=image][/block] Досье [/block]
.template { position: relative; } .image { position: absolute; background: url(url-картинки) center center no-repeat; width: 100%; height: 100%; }
Поделиться10421.01.22 16:17
Вроде всё это просто сделать, но для атмосферы там не хватает штампика. А как сделать чтобы он был поверх текста и картинки я что-то не соображу.
А делать всё через фотошоп как-то не хочется. Хотелось бы обойтись кодами, если решение возможно, конечно.
Ну как варик - на родительский блок повесить position: relative, а штампик отдельным блоком прописать через position: absolute. разместить как нравится, используя top и left значения в пикселях. Ну а чтобы было поверх и при этом не мешало тексту - pointer-events: none на блок со штампом.
Поделиться10521.01.22 16:55
Картинка не отображается, поэтому пальцем в небо
Спасибо, я попробую. Да с картинками последнее время плохо, майбб на нашем форуме что-то тестирует.
Ну как варик - на родительский блок повесить position: relative, а штампик отдельным блоком прописать через position: absolute. разместить как нравится, используя top и left значения в пикселях. Ну а чтобы было поверх и при этом не мешало тексту - pointer-events: none на блок со штампом.
Кажется поняла, да, попробую. Спасибо!
Поделиться10601.02.22 14:40
Надеюсь я правильно все нашла и пришла именно туда, куда нужно...
Здравствуйте! Возникли проблемы с таблицей для блока объявления. Борюсь и пытаюсь все исправить вот какой месяц, но в итоге если с двумя вкладками все более менее по эскизу, то с самой первой как не день, так проблемы. Вот эскиз
А вот код и мои эксперименты. Как видно, я уже просто начала все переделывать даже в <div> блоки и с помощью них пытаться все как-то вместе слепить. Возможно в этом и была ошибка, но буду очень благодарна если поможете.
<style type="text/css"> /****************************************************************** Cтиль:"таблица с вкладками" ******************************************************************/ /*Правки для Цвета фона и бордюров таблицы*/ .s-tabs>.stab,.s-tabs>span{ background:#F7F6D2; border-color: #7E7E7E!important; border:none !important; } .s-tabs{ width:799px; /*ширина таблицы*/ height:350px; display:block; padding:0px 27px 55px; align-content: center !important; border: none; background: white; } .s-tabs>.stab{ height:350px; /*высота вкладки*/ left: -10px !important; align-content: center !important; } /* Стиль "Ушка" вкладок */ .s-tabs>span{ position:relative; z-index:100; color:#626436; cursor:pointer; border: 1px solid; display:inline-block; padding:4px; height: 17px; width:259px; margin:0; margin-right:-1px; text-align:center; padding-right:4px; text-shadow: 1px 1px 2px rgba(0,0,0,.4); font: italic normal 400 13px/16.5px "Comic Sans Ms"; border: none !important; } /* Активное "Ушко" */ .s-tabs>span.selected{ color:#fff; background:#000; border-bottom-color:transparent!important; } /* Стиль вкладки(LI)*/ .s-tabs>.stab{ width:100%; margin:0; display:none; text-align:center; vertical-align:middle; border: 4px solid; left: -100px !important; padding: 0px 0px!important; } </style> <ul class="s-tabs"> <span>Новости</span><span>Соревнования</span><span>События</span> <li class="stab"> <!-- Ваш контент 1--> <table class="table-1ob"> <tr> <td colspan="2" rowspan="2"> <div class="igrok-m-blok"> <div class="month-igrok-block" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > <img class="month-igrok" src="https://i.ibb.co/9G8vNL0/35-35-1.jpg" > </div> </td> <td rowspan="2" colspan="2" class="celebretes">ячейка 3+11+4+12</td> <td rowspan="2" colspan="2" class="raspredelenie">ячейка 5+13+6+14</td> <td rowspan="5" colspan="2" class="news">ячейка 7+15+23+31+39+8+16+24+32+40</td> </tr> <tr class="nol"> </tr> <tr> <td colspan="2" class="nav-blok"> <div class="ssilka-block"> <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > <img class="ssilka" src="https://i.ibb.co/8PSFHJ2/90-15.jpg" > </div> </td> <td colspan="4" class="citats"> <div><style>#КонтентРотатор p{display:none}</style> <div id="КонтентРотатор" style="width:400px;"><!-- Ротатор произвольного контента --> <p>1-й Контент</p> <p>2-й Контент</p> <p>3-й Контент</p> <p>4-й Контент</p> <p>N-й Контент</p> </div> <script language="javascript"> var sek = 50000; // Время отображения var Nrout=$("#КонтентРотатор p").length var i=Math.round(Math.random()*(Nrout-1));RotatorMycontent(i); function RotatorMycontent(i) { $("#КонтентРотатор p").hide(); $("#КонтентРотатор p").eq(i).show(); j =Math.round(Math.random()*(Nrout-1)); timerID = setTimeout("RotatorMycontent(j)",sek);} </script></div> </td> </tr> <tr> <td colspan="4" rowspan="2" class="ep-blok"> <div class="epizod-block"> <img src="https://i.ibb.co/Wy8mp0Q/126-41.jpg" > <img src="https://i.ibb.co/LR3kSDg/126-41-1.jpg" > </div> <div class="poisk-pers"> <img src="https://i.ibb.co/DfWXRst/35-35.jpg" > <img src="https://i.ibb.co/DfWXRst/35-35.jpg" > <img src="https://i.ibb.co/DfWXRst/35-35.jpg" > <img src="https://i.ibb.co/DfWXRst/35-35.jpg" > </div> <div class="rotator"> <style>#КонтентРотатор p{display:none}</style> <div id="КонтентРотатор" style="width:400px;"><!-- Ротатор произвольного контента --> <p> <a href="http://ilvermornysayre.mybb.ru"target=_blank><img src="http://images.vfl.ru/ii/1596708852/e72333e3/31268707.gif" alt= "Llvermorny Sayre" border="0"></a> </p> <p> <a href="https://darkness.rolfor.me/" title="Marauders: Deep Into Darkness" target=_blank><img src="https://forumstatic.ru/files/001b/02/f2/80712.gif"></a> </p> <p> <a href="http://explodingsnaps.mybb.ru/"target=_blank><img src="https://i.imgur.com/tgw06aU_d.webp?maxwidth=640&shape=thumb&fidelity=medium" alt= "HP: UNFETTERED" height="31" width="88" border="0"></a> </p> <p> <a href="http://imperiumaeternum.rolka.me/" target="_blank"><img src="https://i.imgur.com/WX5beWm.gif" title="Imperium Aeternum"></a> </p> <p> <a href="https://top.mail.ru/jump?from=3214323"> <img src="https://top-fwz1.mail.ru/counter?id=3214323;t=478;l=1" style="border:0;" height="31" width="88" alt="Top.Mail.Ru" /></a> </p> <p> <a href="https://somethingold.f-rpg.me"><img src="https://i.imgur.com/D49Emq1.gif" title="DOCTOR WHO, OR THERE AND BACK AGAIN" width="88" height="31"></a> </p> <p> <a href="https://eiriamach.rusff.me/" target="_blank"><img src="https://forumstatic.ru/files/001b/0a/fd/24883.jpg" title="Éirí Amach – ролевая игра по миру ГП. 1968 год, независимость Магической Ирландии!" width="88" height="31"></a> </p> <p> <a href="http://insideout.mybb.ru/" target=_blank><img src="https://i.imgur.com/0inOxfi.png" title="Inside Out"></a> </p> <p><a href="http://ouatuntold.rusff.me/" target="blank"><img src="http://sh.uploads.ru/xuIB9.gif" class="" width="88" height="31"></a></p> </div> <script language="javascript"> function Rotator_cont(selek) { var s = 10000; // Время отображения var N=$(selek).length; var i=Math.round(Math.random()*(N-1));Rotator(i); function Rotator(i) { $(selek).hide();$(selek).eq(i).show();i++; if(i>N-1){i=0}; timerId01=setTimeout(function(){Rotator(i)},s);return;} }Rotator_cont('#КонтентРотатор p') </script> </div> </td> <td rowspan="2" colspan="2" class="admin-blok">ячейка 29+37+30+38</td> </tr> </table> </li> <li class="stab"> <!-- Ваш контент 2--> <table class="table-2ob"> <tr> <td class="facult" rowspan="2">Баллы факультетов</td> <td class="top5">Топ 5 лучших студентов</td> <td class="dekansb" rowspan="2">Деканы блок <div class="dekans"> <a class="slyzerin" target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a> <a class="grifindor" target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a> <a class="reyvenklo" target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a> <a class="hufflpuff" target="_blank"><img src="https://www.aht.li/2994070/3535C.png" /></a> <div class="zurnal"></div> </div> </td> </tr> <tr><td class="somes">Что-то</td></tr> </table> </li> <li class="stab"> <!-- Ваш контент 3--> <div class="table-3ob" > <div class="blokzag"> <div class="zaglavie" colspan="3" >Заглавье</div> </div> <div class="bloksob1"> <div class="films" rowspan="2" > <h5>Кино</h5> Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. <br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. </div> </div> <div class="bloksob"> <div class="ivents" rowspan="2" > <h5>Ивенты</h5> Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. <br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. </div> </div> <div class="bloksob2"> <div class="celebrates" rowspan="2"> <h5>Праздники</h5> Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. <br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. </div> </div> </li> </ul> <script type="text/javascript"> $('.s-tabs').each(function(){ $(this).children('span:first').addClass('selected'); $(this).children('.stab').eq(0).show(); }); $('.s-tabs>span').live('click', function(){ var a = $(this).parent('.s-tabs'); var arr = a.children('span'); var index = arr.index(this); arr.removeClass('selected'); $(this).addClass('selected'); a.children('.stab').hide(); a.children('.stab').eq(index).show(); }); </script> <style type="text/css"> .nol{ width: 0px; height: 0px; } .ssilka{ padding: 1px; margin: 1.5px; } .month-igrok{ padding:5px; } .month-igrok-block{ padding:5px; } .table-1ob{ width: 799px; height: 350px; padding:17px; background: #000000; } .admin-blok{ width: 248px; height: 97px; background: #300F0F; } .igrok-m-blok{ width: 210px; height: 105px; background: #D34E4E; margin-top:-33px; } .ep-blok{ width: 279px; height: 97px; background: #01F0B7; } .epizod-block1{ margin: 8px 6px 48px 147px; } .epizod-block2{ margin: 8px 145px 48px 8px; } .epizod-block{ position:relative; } .poisk-pers{ margin-top:5px; margin-bottom:8px; } .rotator{ margin-left:190px; } .nav-blok{ width: 208px; height: 106px; background: #FF8717; margin-top:-38px; margin-left:1px; display:grid; } .citats{ width: 317px; height: 68px; background: #FFFFFF; } .celebretes{ width: 158px; height: 135px; background: #BE1717; } .raspredelenie{ width: 160px; height: 135px; background: #29B748; } .news{ width: 222px; height: 316px; background: #9D7070; } .table-2ob{ width: 799px; height: 350px; background: #000000; } .facult{ width: 249px; height: 350px; background: #FFE70C; } .dekans{ width: 250px; height: 191px; background: #08158F; margin: 75px 25px; padding: 9px; } .slyzerin{ margin: 12px 9px 153px 214px; } .grifindor{ margin: 47px 214px 118px 9px; } .reyvenklo{ margin: 82px 9px 83px 214px; } .hufflpuff{ margin: 117px 214px 48px 9px; } .zurnal{ width: 240px; height: 18px; background: #C4C4C4; margin: 15px 19px 15px 5px; } .top5{ width: 249px; height: 175px; background: #FB0FC7; } .dekansb{ width: 303px; height: 350px; background: #C4C4C4; } .somes{ width: 249px; height: 175px; background: #0EFFF1; } </style> <style type="text/css"> .table-3ob{ width: 755px; height: 350px; background: #090000; padding:22px; text-align: center; } .zaglavie{ background: #C4C4C4; text-align: center; height: 48px; width: 417px; } .blokzag{ margin: 0px 165px 22px; } .bloksob{ margin-top: -236px; } .bloksob2{ margin-top: -236px; margin-left: 209px; } .films{ width: 202px; height: 236px; background: #FF0C0C; text-align: center; overflow-y: auto; margin-left: -10px; } .ivents{ width: 351px; height: 236px; background: #C4C4C4; text-align: center; margin: -13px 202px; overflow-y: auto; } .celebrates{ width: 202px; height: 236px; background: #7D0B0B; text-align: center; margin: -13px 354px; overflow-y: auto; } </style>
Поделиться10701.02.22 14:55
Adelisia Wales
Добра! А что конкретно у вас не выходит?
Мне кажется, такую структуру лучше гридом верстать. Это непросто, но есть разные конструкторы. Вот такой, например.
Поделиться10801.02.22 14:58
Adelisia Wales
Добра! А что конкретно у вас не выходит?
Мне кажется, такую структуру лучше гридом верстать. Это непросто, но есть разные конструкторы. Вот такой, например.
Именно главная вкладка, которая самая первая. Блоки некоторые не такого размера получаются как на эскизе, мелкие детали в блоках съезжают, что-то подправишь может все как-то уехать....То есть тут лучше попробовать все вообще с нового листа сделать?
Поделиться10901.02.22 18:35
Именно главная вкладка, которая самая первая. Блоки некоторые не такого размера получаются как на эскизе, мелкие детали в блоках съезжают, что-то подправишь может все как-то уехать....То есть тут лучше попробовать все вообще с нового листа сделать?
Я бы рекомендовал попробовать сделать с чистого листа, предварительно почитав информацию о вёрстке на grid или flex.
По грид я кинул ссылку на редактор - он нимношк непонятный, но если сильно не горит или если вы всё же решите сверстать более традиционным способом - на будущее всё ж рекомендую попрактиковаться в нём.
Можно, конечно, чуть проще сделать - на флексе. Вот тут хорошая статья про флексы: тык.
Я обычно сам верстаю на флексах, когда требуется что-то разместить равного размера на равных расстояниях, типа как картинки активистов/нужных.
Иду от большого к малому, т.е., допустим, у вас глобально сначала можно разделить таблицу на 2 половины - левую и правую. Им можно присвоить классы и сверстать через display: flex или block со значением float: left и right соответственно, например. А далее уже внутри получившихся блоков прописывать подблоки по похожему принципу.
Надеюсь, понятно объяснил.
И отступов через margin лучше избегать. При том же position: absolute удобнее пользоваться атрибутами top, bottom, left, right и соответственно со значением в пикселях.
P.S. дабы не быть голословным, вот, как пример, как бы я верстал: тык.
Поделиться11005.02.22 18:39
бродяга
Да, все понятно. Попробую разные способы, что-то да получиться. Спасибо!