Верстка (css) - Страница 2 - ICQ

**benjas** · 02.05.2009, 22:34

vo4tap, я тоже юзаю дримвиевер,и иногда интайп)

а на счет масштабирования -
на первой картинке прекрасно видно что футер прижат к нижнему краю.
а вот на второй картинке видно что если браузер не фулскрин то футер уходит вниз.

первая картинка http://pikucha.ru/88777
вторая картинка http://pikucha.ru/88778

**vo4tap** · 02.05.2009, 23:08

mff44, я сам догадался через 30 секунд как запостил =))) попробовал картинку через текс алигн центровать.. получилось... тут же стер счообщение и попросил дихарда удалить =)) но видать ты очень быстрый и прочитал =)))

benjas, на счет твоих картинок могу показать свои картинки, в которых в опере все зашибись, а вот ФФ чуть чуть косячит...

кстати в ИЕ отступ то как раз нормально отображен ;)

PHP код:


			
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>vo4tap.info</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" charset="windows-1251" />

<link href="style.css" type="text/css" rel="stylesheet">

<META Name= Author content="vo4tap">

<META Name="Description" content= "vo4tap's blog"> 

<META Name="Document-state" content ="Dynamic">

<META Name="Keywords" content="vo4tap, blog, life, блог, вочтап, почтампт, почтамт, почтамп"> 

<META Name="Revisit" content="5">

<META name=Robots content="index, follow"> 

<META Name="URL" content= "http://www.vo4tap.info">

<META HTTP-EQUIV="Content-language" content ="ru">



<style>

* {padding: 0; margin: 0;}

html {height: 100%; min-width: 700px;}

body {background-color: #121212; margin:0; padding:0; min-height: 100%; height: 100%; min-width: 700px; }

body p {font-family: Tahoma; font-size: 12px; color: #c5c5c5;}

body img {border:0; }

#left ul {list-style-image:url(img/style-image.gif); padding:0px 10px 0px 20px;}

#left li {font-family: Tahoma; font-size: 12px; color: #c5c5c5; padding:0;}

#block {position:absolute; left:50%; width:700px; margin-left:-350px; height: auto; min-height: 100%; min-width: 700px; background-image:url(img/bg_block.gif); background-repeat:repeat-y}

#header {width:700px;}

#left {width:200px; float:left; background-image:url(img/bg_left.gif); background-repeat:repeat-y; padding-bottom:45px; }

#content {width:500px; float:left; background-image:url(img/right_border.gif); background-position:right; background-repeat:repeat-y; background-color:#191919; padding: 0px 0px 45px 0px; }

#12 {padding: 15px 15px 45px 15px;}

#footer {text-align:center; position: absolute; bottom:0; width:700px; height:45px; background-image:url(img/footer.gif);}

#footer img {padding: 7px 0px 7px 15px; opacity: 0.1; }

#footer img:hover {opacity: 1.0;}

#gorizont_nav { text-align:center; background-image:url(img/gorizont_bg.gif); background-repeat:repeat-x; height:25px; width:100%;}

#gorizont_nav li {display:inline; font-weight: bold;

}

a:link {color: #3cdf06;    text-decoration: none;}

a:visited {    color: #3cdf06; text-decoration: none;}

a:hover {color: #b6fc9f; text-decoration: underline;}

.title {font-size: 14px; font-weight: bold;}

.green_title { height:24px; width:200px; background-image:url(img/green_line.gif); background-repeat:no-repeat; padding:0px; margin:0px;}

.green_title p {margin:10px 0px 6px 25px; color: #a5c59d; font-size: 12px;  font-weight: bold;}



</style>

</head>

<body>



<!--block-->

<div id="block">



<!--header-->

    <div id="header"><a href="http://vo4tap.asechka.ru/vo4/"><img src="img/header.gif" alt="Картинка шапки"></a></div>

    

<!--left-->

    <div id="left"><img src="img/utilits.gif" alt="Утилиты" width="200" height="52">

        <ul>

            <li><a href="#">Первый элемент</a></li>

            <li><a href="#">Текст</a></li>

            <li><a href="#">Первый элемент</a></li>

            <li><a href="#">второй элемент</a></li>

            <li><a href="#">Первый элемент</a></li>

           </ul>

    <div class="green_title"><p>Заголовочек</p></div>

        <ul>

            <li><a href="#">Первый элемент</a></li>

            <li><a href="#">второй элемент</a></li>

            <li><a href="#">Первый элемент</a></li>

            <li><a href="#">второй элемент</a></li>

            <li><a href="#">Первый элемент</a></li>

           </ul>

    </div>

<!--left END-->



<!--content-->

    <div id="content">



<!--gorizont_nav-->

        <div id="gorizont_nav">

              <ul>

                <li><a href="#">Первый</a></li> |

                <li><a href="#">Второй</a></li> |

                <li><a href="#">Третий</a></li> |

                <li><a href="#">Четвертый</a></li> |

                <li><a href="#">Пятый</a></li> |

          </ul>

        </div>

<!--gorizont_nav END-->



<div id="12">

<p>

            <span class="title">ЗаголовОК очень ОК            </span>

            <br>

              <a href="#">Текст Content Text Контент</a>"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.

"Билайн", МТС и "Мегафон" 10 апреля совместно запустили по всей стране услугу "Чат", которая позволяет абонентам без ограничений по времени и трафику обмениваться мгновенными сообщениями. Об этом сообщается в пресс-релизах всех трех компаний.</p>

</div>





</div>

<!--content END-->



<!--footer-->

    <div id="footer">

    <img src="http://pic.ipicture.ru/uploads/090430/DxMSRB10S7.gif">

    <img src="http://pic.ipicture.ru/uploads/090430/DxMSRB10S7.gif">

    <img src="http://pic.ipicture.ru/uploads/090430/DxMSRB10S7.gif">

    <img src="http://pic.ipicture.ru/uploads/090430/DxMSRB10S7.gif">

    <img src="http://pic.ipicture.ru/uploads/090430/DxMSRB10S7.gif">

    <img src="http://pic.ipicture.ru/uploads/090430/DxMSRB10S7.gif">

  </div>

<!--footer END-->



</div>

<!--block END-->

</body>

</html>

http://vo4tap.asechka.ru/vo4/ тут залил, обновил

Добавлено через 3 часа 51 минуту

Цитата:

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

4) Пропиши на CSS правило для тега <p> быть красным цветом только в том случае, если у него есть родительский контейнер <div>.

PHP код:


			
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>vo4tap.info</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" charset="windows-1251" />

<link href="style.css" type="text/css" rel="stylesheet">

<META Name= Author content="vo4tap">

<META Name="Description" content= "vo4tap's blog"> 

<META Name="Document-state" content ="Dynamic">

<META Name="Keywords" content="vo4tap, blog, life, блог, вочтап, почтампт, почтамт, почтамп"> 

<META Name="Revisit" content="5">

<META name=Robots content="index, follow"> 

<META Name="URL" content= "http://www.vo4tap.info">

<META HTTP-EQUIV="Content-language" content ="ru">



<style>

#divtag {}

p { color:#FF0000}

div p {color: #0000FF}

</style>

</head>

<body>







<p>тэг не в диве</p>

<div id="divtag">

  <p>тэг в диве</p>

</div>

</body>

</html>

Цитата:

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

Сделай таблице и ячейкам одна-пиксельную румку на CSS.

PHP код:


			
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>vo4tap.info</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" charset="windows-1251" />

<link href="style.css" type="text/css" rel="stylesheet">

<META Name= Author content="vo4tap">

<META Name="Description" content= "vo4tap's blog"> 

<META Name="Document-state" content ="Dynamic">

<META Name="Keywords" content="vo4tap, blog, life, блог, вочтап, почтампт, почтамт, почтамп"> 

<META Name="Revisit" content="5">

<META name=Robots content="index, follow"> 

<META Name="URL" content= "http://www.vo4tap.info">

<META HTTP-EQUIV="Content-language" content ="ru">



<style>

table, td { border-color:#FF0000; border-width:1px}





</style>

</head>

<body>



<table width="100%" border="0">

  <tr>

    <td>1</td>

    <td>2</td>

    <td>3</td>

    <td>4</td>

  </tr>

  <tr>

    <td>1</td>

    <td>2</td>

    <td>3</td>

    <td>4</td>

  </tr>

</table>





</body>

</html>

1) Сделай так, чтобы текст не складывался, при уменьшении окна браузера.
не понимаю что ты хочешь, что бы я сделал =)) так что ли???

PHP код:


			
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>vo4tap.info</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" charset="windows-1251" />

<link href="style.css" type="text/css" rel="stylesheet">

<META Name= Author content="vo4tap">

<META Name="Description" content= "vo4tap's blog"> 

<META Name="Document-state" content ="Dynamic">

<META Name="Keywords" content="vo4tap, blog, life, блог, вочтап, почтампт, почтамт, почтамп"> 

<META Name="Revisit" content="5">

<META name=Robots content="index, follow"> 

<META Name="URL" content= "http://www.vo4tap.info">

<META HTTP-EQUIV="Content-language" content ="ru">



<style>

#block { min-width:700px; width:700px;}



</style>

</head>

<body>

<div id="block">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div>







</body>

</html>

2) Сделай альтернативу тегу <li> на CSS.
не знаю как.... =(((
можешь тонко намекнуть =) но не говорить =))

**mff** · 03.05.2009, 21:12

Цитата:

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

1) Сделай так, чтобы текст не складывался, при уменьшении окна браузера.
не понимаю что ты хочешь, что бы я сделал =)) так что ли???

Сдесь я имел ввиду альтернативу малоиспользуемому, но важному тегу <nobr> ;)
А про min-width, min-height, max-width и max-height забудь, их IE5.5 и IE6.0 не поддерживают :(

**mff** · 18.05.2009, 16:49

vo4tap, кстати вот нашел, исходник где футер внизу =)

**foreximany** · 12.06.2009, 17:05

Доброй ночи... 2 дня сидел писал аккуратненько, верстал шаблон через CSS и таблицы...В итоге вот что получилось справа опера 9.6, слева ИЕ 7... И код с странички и CSS... в FireFox тоже самое что и в опере, подскажите где я наступаю на граблю по сотне раз?CSSCODE

**vo4tap** · 12.06.2009, 17:34

foreximany, нихрена нет картинок и кода...

**mff** · 12.06.2009, 20:03

foreximany, давай коды! Отъюзаем сейчас!

**EastoN** · 26.06.2009, 22:52

Вообщем ТС ок. Наверстал дохрена всего и наверстал очень ок. Просил чтобы его завалили заданиями, пушо ща каникулы и ему скучно. А на улице мама гулять не разрешает, поетому он сидит и верстает людям саеты.
Очень советую к нему обращаться.

**vo4tap** · 16.10.2009, 17:51

http://vo4tap.asechka.ru/vo4/
Подскажите как футер к низу опустить, как выровнять картинки внизу футера по центу,как убрать не понятно откуда взявшуюся полоску между хэдэром и основной частью?
ну и вообще что не так? что можно было бы сделать лучше?

02.05.2009, 22:34	#26
benjas Участник Регистрация: 21.04.2008 Сообщений: 172 ICQ: 5888889 Репутация: 141	vo4tap, я тоже юзаю дримвиевер,и иногда интайп) а на счет масштабирования - на первой картинке прекрасно видно что футер прижат к нижнему краю. а вот на второй картинке видно что если браузер не фулскрин то футер уходит вниз. первая картинка http://pikucha.ru/88777 вторая картинка http://pikucha.ru/88778 Последний раз редактировалось benjas; 02.05.2009 в 22:43.

12.06.2009, 17:05	#30
foreximany Участник Регистрация: 10.06.2009 Сообщений: 2 Репутация: -5	Верстка css Доброй ночи... 2 дня сидел писал аккуратненько, верстал шаблон через CSS и таблицы...В итоге вот что получилось справа опера 9.6, слева ИЕ 7... И код с странички и CSS... в FireFox тоже самое что и в опере, подскажите где я наступаю на граблю по сотне раз?CSSCODE

12.06.2009, 17:34	#31
vo4tap Почемучка Регистрация: 04.01.2006 Сообщений: 1,380 ICQ: 200665 Репутация: 4264	foreximany, нихрена нет картинок и кода... __________________ vo4tapoblog , Очень красивую страничку увидите, если откроете! Продажа от МЕНЯ? Нереально, но ФАКТ! Оптовикам скидки.

12.06.2009, 20:03	#32
mff Участник Регистрация: 29.05.2008 Сообщений: 465 ICQ: 400000010 Репутация: 2409	foreximany, давай коды! Отъюзаем сейчас! __________________ ⚺ онлайн тв

16.10.2009, 17:51	#34
vo4tap Почемучка Регистрация: 04.01.2006 Сообщений: 1,380 ICQ: 200665 Репутация: 4264	http://vo4tap.asechka.ru/vo4/ Подскажите как футер к низу опустить, как выровнять картинки внизу футера по центу,как убрать не понятно откуда взявшуюся полоску между хэдэром и основной частью? ну и вообще что не так? что можно было бы сделать лучше? __________________ vo4tapoblog , Очень красивую страничку увидите, если откроете! Продажа от МЕНЯ? Нереально, но ФАКТ! Оптовикам скидки.

26.06.2009, 22:52	#33
EastoN Участник Регистрация: 29.03.2008 Сообщений: 216 ICQ: 476322846 Репутация: 673	Вообщем ТС ок. Наверстал дохрена всего и наверстал очень ок. Просил чтобы его завалили заданиями, пушо ща каникулы и ему скучно. А на улице мама гулять не разрешает, поетому он сидит и верстает людям саеты. Очень советую к нему обращаться.