Jump to content
  • 0

Как перенести блок или что еще


Uchkum
 Share

Question

Здравствуйте Уважаемые форумчане!

Это моя первая тема.

Помогите, мне нужно перенести блоки направую сторону, чтобы не скролить полчаса, вот на этой странице:

http://www.m-instrum....php?id=contact

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

Вот код


<style type="text/css">
<!--
.text {
font-family: Tahoma;
font-size: 11px;
color: #2364a5;
text-align: left;
}
.text td{
vertical-align: top;
padding-top: 10px;
padding-left: 10px;
}
.line {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #2364A5;
}
-->
</style>
<!--ICQ
<div style="z-index:3; position:absolute; left:710px; top:-155px; width:265px;" align="right">
<table>
<tr>
<td align="right">
<span class="white">Начальник транспортного цеха: 422-897-846</span>
</td>
<td>
<img src="http://status.icq.com/online.gif?icq=422897846&img=27">
</td>
</tr>
<tr>
<td align="right">
<span class="white">База торпедных катеров: 161-509-947</span>
</td>
<td>
<img src="http://status.icq.com/online.gif?icq=161509947&img=27">
</td>
</tr>
</table>
</div>
-->
<table class="text" height="100%">
<tbody><tr>
<td class="line" align="center" width="480">
<div style="width: 480px;" align="right">
<span class="title">ВОЛГОГРАД</span>
<br><br><br>
</div>

<!--флеш-->
<script type="text/javascript">
swfobject.embedSWF("http://www.m-instrument.ru/var/upload/images/map/vlg_small_new.swf", "map1", "478", "360", "7.0.0.0", expressInstallSwfurl, flashvars, params);
</script>

<table style="height: 20px; width: 490px;">
<tbody><tr>
<td style="padding-right: 10px; padding-top: 0px;" align="right">
<a rel="shadowbox;width=1024;height=640;options={animSequence:'sync', flashBgColor:'#FFFFFF'}" href="http://www.m-instrument.ru/var/upload/images/map/vlg_big_new.swf" title="Карта Волгограда">
<img src="var/img/zoom1.gif">  Увеличить</a></td>
</tr>
</tbody></table>
<br>
<!——————MAP VOLGOGRAD——————————>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d8812fc8b2a0ee5d8&hl=ru&ie=UTF8&t=m&ll=48.67464,44.555054&spn=0.634783,1.167297&z=9&output=embed"></iframe><br><small>Просмотреть <a href="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d8812fc8b2a0ee5d8&hl=ru&ie=UTF8&t=m&ll=48.67464,44.555054&spn=0.634783,1.167297&z=9&source=embed" style="color:#0000FF;text-align:left">Волгоград</a> на карте большего размера</small>
<!—————--END MAP VOLGOGRAD————————->


<table width="480">
<tbody><tr>
<td></td>

</tr><tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlg/kr_arm.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlg/kr_arm.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Магазин «Мастер-Инструмент»</b><br>
Красноармейский район<br>
<div style="height: 20px; line-height: 20px; margin: 6px 0px; padding: 0px;"><b>Сервисный центр</b><img style="position: relative; margin: 0px 0px -5px 10px;" src="/var/img/sc.gif"></div>
<b>Телефоны:</b> (8442) 63-04-04, 63-14-14<br>
<b>Адрес:</b>
400055, г. Волгоград, ул. Фадеева, 29<br>
<b>Красноармейский район</b>, за ж/д переездом напротив<br>
<b>Время работы магазина:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 19:00<br>
<b>Суббота:</b> 9:00 - 18:00<br>
<b>Воскресенье:</b> 9:00 - 17:00.<br><br>
</td>
</tr>
<tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlg/trac.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlg/trac.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Магазин «Мастер-Инструмент»</b><br>
Тракторозаводский район
<br> <b>Телефоны:</b>
(8442) 79-33-33, 77-09-09<br>
<b>Адрес:</b>
400121, г. Волгоград, ул. Н.Отрады, 6<br>
<b>Тракторозаводский район</b>, Спартановка<br>
<b>Время работы магазина:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 19:00<br>
<b>Суббота:</b> 9:00 - 18:00<br>
<b>Воскресенье:</b> 9:00 - 17:00.<br><br>
</td>
</tr>

<tr><td></td><td width="390"><br>
</td>
</tr><tr><td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlg/dzerzh.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlg/dzerzh.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Магазин «Мастер-Инструмент»</b><br>
Дзержинский район
<br> <b>Телефоны:</b>
(8442) 55-00-99<br>
<b>Адрес:</b>
400117, г. Волгоград, бул. 30 лет Победы, 16<br>
<b>Дзержинский район</b><br>
<b>Время работы магазина:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 19:00<br>
<b>Суббота:</b> 9:00 - 18:00<br>
<b>Воскресенье:</b> 9:00 - 17:00.<br><br>
</td>
</tr>
</tbody></table>

<!--SARATOV—————————————————>
<br>
<div style="float: left;" align="left">
<span class="title">
САРАТОВ
</span>
<br>
</div>
<br>
 
<br>
 
<br>
<!——————MAP SARATOV——————————>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d8816f42a8f1be133&hl=ru&ie=UTF8&t=m&ll=51.547429,46.008382&spn=0.009341,0.018239&z=15&output=embed"></iframe><br><small>Просмотреть <a href="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d8816f42a8f1be133&hl=ru&ie=UTF8&t=m&ll=51.547429,46.008382&spn=0.009341,0.018239&z=15&source=embed" style="color:#0000FF;text-align:left">Саратов</a> на карте большего размера</small>
<!—————--END MAP SARATOV————————->

<br>

<!--флеш
<script type="text/javascript">
swfobject.embedSWF("http://www.m-instrument.ru/var/upload/images/map/vlz_small_new.swf", "map3", "450", "360", "7.0.0.0", expressInstallSwfurl, flashvars, params);
</script>


<table style="height: 20px; width: 450px;">
<tbody>
<tr>
<td style="padding-left: 10px; padding-top: 0px;" align="left">
<a rel="shadowbox;width=1015;height=760;options={animSequence:'sync', flashBgColor:'#FFFFFF'}" href="http://www.m-instrument.ru/var/upload/images/map/vlz_big_new.swf" title="Карта Волжского">
<img src="var/img/zoom1.gif">
  Увеличить
</a>
</td>
</tr>
</tbody>
</table>

<a rel="shadowbox;width=1015;height=760;options={animSequence:'sync', flashBgColor:'#FFFFFF'}" href="http://www.m-instrument.ru/var/upload/images/map/vlz_big_new.swf" title="Карта Волжского">

<div style="z-index: 2; position: relative; left: 0px; top: 0px; width: 450px; height: 360px;">
<div id="map3">
</div>
</div>
</a>
-->
<table width="490">
<tbody>
<tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/sar/saratov1.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/sar/saratov1_min.jpg" width="100">

<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody>
<tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить
</td>
</tr>
</tbody>
</table>
</a>
</td>

<td width="390">
<b>
Магазин «Мастер-Инструмент»
</b>
<br>
<br>
<b>
Телефоны:
</b>
 (8452) 29-09-00
<br>
<b>
Адрес:
</b>
 410005, г. Саратов, ул. Степана Разина, 80
<br>
<b>
Время работы магазина:
</b>
<br>
<b>
Понедельник - пятница:
</b>
 9:00 - 19:00
<br>
<b>
Суббота:
</b>
 9:00 - 18:00
<br>
<b>
Воскресенье:
</b>
 9:00 - 17:00.
<br>
<br>
</td>
</tr>
</tbody>
</table>




<!———END SARATOV——————————-->
<!———ASTRAHAN——————————-->
<div style="float: left;" align="left">
<span class="title">
АСТРАХАНЬ
</span>
<br>
<br>
</div>
<br>
 
<br>
 
<br>
<!——————MAP ASTRAHAN——————————>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d881bd20ddba006b4&hl=ru&ie=UTF8&t=m&ll=46.37114,48.078983&spn=0.005182,0.00912&z=16&output=embed"></iframe><br><small>Просмотреть <a href="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d881bd20ddba006b4&hl=ru&ie=UTF8&t=m&ll=46.37114,48.078983&spn=0.005182,0.00912&z=16&source=embed" style="color:#0000FF;text-align:left">Астрахань</a> на карте большего размера</small>
<!—————--END MAP ASTRAHAN————————->

<table width="490">
<tbody><tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlg/astrahan.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlg/astrahan.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>

<td width="390">
<b>Магазин «Мастер-Инструмент»</b><br>

<b>Телефоны:</b>
(8512) 36-44-44<br>
<b>Адрес:</b>
414041, г. Астрахань, ул.Яблочкова, 1 «а»<br>
<b>Время работы магазина:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 19:00<br>
<b>Суббота:</b> 9:00 - 18:00<br>
<b>Воскресенье:</b> 9:00 - 17:00.<br><br>
</td>
</tr>
</tbody></table>
<!———END ASTRAHAN——————————-->




<div style="float: left;" align="left">
<span class="title">КАМЫШИН</span><br>
</div>
<div align="right">
<a href="print.php?id=contactprint" title="версия для печати" target="contactprint" onclick="javascript:print=window.open('','contactprint','fullscreen=no,channelmode=no,toolbar=no,directories=no,menubar=no,scrollbars=yes,status=no,scrolling=yes,location=no,resizable=no,width=740');">
<img src="/var/img/printer.gif">
<br>
Версия для печати
</a>
</div>

<!--флеш-->
<script type="text/javascript">
swfobject.embedSWF("http://www.m-instrument.ru/var/upload/images/map/kam_small.swf", "map2", "450", "360", "7.0.0.0", expressInstallSwfurl, flashvars, params);
</script>

<table style="height: 20px; width: 450px;">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 0px;" align="left">
<a rel="shadowbox;width=1024;height=700;options={animSequence:'sync', flashBgColor:'#FFFFFF'}" href="http://www.m-instrument.ru/var/upload/images/map/kam_big.swf" title="Карта Камышина">
<img src="var/img/zoom1.gif">  Увеличить</a></td>
</tr>
</tbody></table>
<br>
<!—————MAP KAMYSHIN—————->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d8818e330cc5c8a96&hl=ru&ie=UTF8&t=h&ll=50.074067,45.397482&spn=0.00241,0.00456&z=17&output=embed"></iframe><br><small>Просмотреть <a href="https://maps.google.com/maps/ms?msa=0&msid=202549492277351161134.0004d8818e330cc5c8a96&hl=ru&ie=UTF8&t=h&ll=50.074067,45.397482&spn=0.00241,0.00456&z=17&source=embed" style="color:#0000FF;text-align:left">Камышин</a> на карте большего размера</small>
<!—————-END MAP KAMYSHIN———-->
<table width="490">
<tbody><tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/kam/mag.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/kam/mag.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Магазин «Мастер-Инструмент»</b><br>
<!—--div style="height: 20px; line-height: 20px; margin: 6px 0px; padding: 0px;"><b>Сервисный центр</b><img style="position: relative; margin: 0px 0px -5px 10px;" src="/var/img/sc.gif"—--><b>Телефоны:</b> (84457) 51-0-51, 5-27-27<br>
<b>Адрес:</b>
г. Камышин, Волгоградская обл.<br>
ул. Пролетарская, 111 «б»<br>
<b>Время работы:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 18:00<br>
<b>Суббота:</b> 9:00 - 17:00<br>
<b>Воскресенье:</b> 9:00 - 16:00<br><br>
</td>
</tr>
</tbody></table>
<br><br>
<!————-VLZ—————>
<div style="float: left;" align="left">
<span class="title">ВОЛЖСКИЙ</span><br>
</div>
<br> <br> <br>
<!--флеш-->
<script type="text/javascript">
swfobject.embedSWF("http://www.m-instrument.ru/var/upload/images/map/vlz_small_new.swf", "map3", "450", "360", "7.0.0.0", expressInstallSwfurl, flashvars, params);
</script>
<!—————--MAP——————>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ru/maps/ms?msa=0&msid=202549492277351161134.0004d87eca1eac36b733c&ie=UTF8&t=m&ll=48.779949,44.77787&spn=0.079182,0.145912&z=12&output=embed"></iframe><br><small>Просмотреть <a href="https://maps.google.ru/maps/ms?msa=0&msid=202549492277351161134.0004d87eca1eac36b733c&ie=UTF8&t=m&ll=48.779949,44.77787&spn=0.079182,0.145912&z=12&source=embed" style="color:#0000FF;text-align:left">магазин "Мастер-Инструмент"</a> на карте большего размера</small>
<!—————MAP————-->


<table width="490">
<tbody><tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlz/evrika.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlz/evrika.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Магазин «Эврика»</b><br><br> <b>Телефоны:</b>
(8443) 56-82-82, 56-39-52, 56-40-93, 56-39-53<br>
<b>Адрес:</b>
404105, г. Волжский, ул. Мира, 74б<br>
<b>23 микрорайон</b><br>
<b>Время работы магазина:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 19:00<br>
<b>Суббота:</b> 9:00 - 18:00<br>
<b>Воскресенье:</b> 9:00 - 17:00.<br><br>
</td>
</tr>

<tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlz/palitra.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlz/palitra.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Магазин «Палитра»</b><br><br> <b>Телефоны:</b>
(8443) 56-39-53<br>
<b>Адрес:</b>
404105, г. Волжский, ул. Мира, 74б<br>
<b>23 микрорайон</b><br>
<b>Время работы магазина:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 19:00<br>
<b>Суббота:</b> 9:00 - 18:00<br>
<b>Воскресенье:</b> 9:00 - 17:00.<br><br>
</td>
</tr>
<tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlz/rusich.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlz/rusich.gif" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Магазин «Мастер-Инструмент»</b><br><br>
<b>Телефоны:</b> (8443) 31-50-10<br>
<b>Адрес:</b>
г. Волжский, пр. Ленина, 67 (35 квартал)<br>
<b>Время работы магазина:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 19:00<br>
<b>Суббота:</b> 9:00 - 18:00<br>
<b>Воскресенье:</b> 9:00 - 16:00<br><br><br>
</td>
</tr>

<tr>
<td>
<a rel="shadowbox;options={counterType:'skip',continuous:true,animSequence:'sync'}" href="http://www.m-instrument.ru/var/upload/images/magaz/big/vlz/service.jpg" title="Фото магазина">
<img src="http://www.m-instrument.ru/var/upload/images/magaz/small/vlz/service.jpg" width="100">
<table style="background-image: url("var/img/zoom.gif"); height: 20px; width: 100px; color: rgb(255, 255, 255);">
<tbody><tr>
<td style="padding-left: 10px; padding-top: 4px;">Увеличить</td>
</tr>
</tbody></table>
</a>
</td>
<td width="390">
<b>Сервисный центр «Инструмент-Сервис»</b><img style="position: relative; margin: 0px 0px -5px 10px;" src="/var/img/sc.gif"><br><br>
<b>Телефоны:</b>
(8443) 55-00-99<br>
<b>Адрес:</b>
г. Волжский (пос. Рабочий) ул. Большевистская 70 б<br>
<b>Время работы:</b><br>
<b>Понедельник - пятница:</b>
9:00 - 18:00<br>
<b>Суббота:</b> 9:00 - 15:00<br>
<b>Воскресенье:</b> выходной<br><br>
</td>
</tr>


</tbody></table>


</td></tr></tbody></table>

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Извиняюсь за выражение, но там у вас ...опа. Лучше наверно переверстывать все чем переделывать то, что есть.

Чтобы было как вам нужно, следует:

1. сделать 2колонки, сейчас у вас одна в таблице с классом text в ячейке с классом line

чтобы это сделать вам можно добавить еще одну td с такими же параметрами

2. перенести все коды блоков во вторую ячейку и тогда они будут в две колонки

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By qqruz
      Мне нужен код для автоматической публикация последних видео с нескольких каналов ютюб, что бы они шли последовательно. Я перерыл весь интернет и нечего не нашел, сам тоже пытался написать, но из-за слабого знания языка и малого количества видео не могу. Надеюсь на чью-то поддержку.
    • By fooxy96
      Здравствуйте! Нужна помощь хорошо разбирающихся людей в верстке. Написал часть сайта (html, css) адаптив. На сайте только шапка, поисковая форма, вход и корзина.
      Подскажите, что я сделал не правильно в коде.
      Какими способами можно реализвать форму поиска с кнопкой, вход, и корзину. Я понимаю что много ошибок, хоть код и не большой.
      Буду благодарен за любой отзыв и разбор.
      Спасибо!!!
      ссылка на сайт — u1071267.isp.regruhosting.ru
    • By FotGOD
      Здравствуйте. Верстаю макет, но чтото не так. Подобные верстал раньше, все было хорошо, даже сверяю, все чуть ли не под копирку написал. Но в Этом коде почему-то строки в меню слиплись и не могу их раскинуть. на рисунке как должно быть, и как выходит. Что не так делаю?
       Html:
      <div class="container"> <header class="header"> <div class="header-item"> <a href="#"><h1 class="logo">Bouncy</h1></a> <nav class="navbar"> <ul class="menu"> <li><a href="#">Hello</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Portfolio</a> </li> <li><a href="#">Team</a> </li> <li><a href="#">Blog</a> </li> <li><a href="#">Contact</a> </li> </ul> </nav> </div> </header> </div>  Css:
      .header { width: 1366px; height: 737px; background: url(../i/header.jpg) no-repeat; } .header a { text-decoration: none; } .container { width: 1366px; margin: auto; } .header-item { display: flex; flex-wrap: wrap; justify-content: space-around; } .logo { text-transform: uppercase; color: #ffffff; } .navbar { margin-top: 16px; } .menu { display: flex; justify-content: flex-end; list-style: none; } .menu a { color: #ffffff; }  


    • By plarfox
      Здравствуйте, помогите разобраться, делаем кастомные радиобаттоны, скрываем те что по умолчанию, с помощью span рисуем новые (псевдокласс :before для состояния отмеченности), стилизуем поведение в разных состояниях, :hover  :focus  :checked
         Проблема в том что после задания стилей  для :focus (которые передают обводку со скрытых радиобаттонов) эта обводка отображается не только после использования tab и нажатий с клавиатуры, но и при нажатии мышкой. В общем цель в том что-бы обводка от фокуса появлялась только при манипуляции с клавиатуры, а при нажатии с мыши и разных состояний (:hover :checked) ее не было , для них свои стили
      P. S. Изучаю пока-что HTML и CSS, надеюсь это можно сделать без Javascript
      <ul> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="one" name="radio"> <span class="radio-indicator"></span> Радиокнопка 1 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="two" name="radio"> <span class="radio-indicator"></span> Радиокнопка 2 </label> </li> <li class="filter-option"> <label><input class="visually-hidden filter-input-radio" type="radio" value="three" name="radio"> <span class="radio-indicator"></span> Радиокнопка 3 </label> </li> </ul>  
      .visually-hidden input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); } .filter-option { position: relative; margin-bottom: 25px; padding-left: 38px; } .filter-option label { cursor: pointer; } .radio-indicator { content: ""; position: absolute; top: -3px; left: 0; width: 21px; height: 21px; border: 4px solid #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-input-radio:checked + .radio-indicator::before { content: ""; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; background-color: #4d4d4d; border-radius: 50%; opacity: 0.5; } .filter-option:hover, .filter-option:hover .radio-indicator, .filter-option:hover .radio-indicator::before { color: #000000; opacity: 1; } .filter-input-radio:focus + .radio-indicator { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; opacity: 1; } .filter-input-radio:focus + .radio-indicator::before { opacity: 1; }  
    • By turre
      Здравствуйте.
      Помогите с Html и css
      Сам я начинающий и пока только учусь.
      Есть index.html к нему style.css получается криво, а надо одинаковые строчки.
      Спасибо.
      P.S. буду признателен если подскажите как сделать что бы текст был строго по центу.
      index.html
      style.css

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy