[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Картинка закругленного уголка
Форум PHP программистов > Дизайн и верстка
Rigel
14.06.2011 - 21:52
Привет, знатоки верстки! :)
Такой вот вопрос у меня:
Есть блок зеленого цвета, для закругления угла я использую изображения уголка, вставляю его таким образом:

HTML:
<div id="green_bl2"><img src="img/green_bl2.png" /></div>

CSS:
#green_bl2
{
	
	position: absolute;
	margin-top: -18px;
	margin-left: 252px;	
	border: 0;
	margin-bottom: 0;
	margin-right: 0;
	padding: 0;
}
#green_bl2 img
{
	border: 0;
	margin: 0;
	padding: 0;
}

В Firefox все выглядит отлично:
user posted image
Но в IE7 и в Opera уголок сдвигается на 1 пиксель вверх и виднеется заливка основного фона:
user posted image
Что можно сделать, чтобы отображалось одинаково во всех браузерах?



Спустя 3 часа, 3 минуты, 40 секунд (14.06.2011 - 23:56) sebastjan написал(а):
Может я не правильно всё понял, но у тебя как тоуж мудренно с углами.
Пример, опера, Лиса, ИЕ6, полёт нормальный.
Вот тебе и нижние углы и верхние.
Зелёные кубики :) 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title></head>
<style>
#blok{
	width: 200px;
	background-color: #33FFFF;
	border: 1pt solid #0000FF;
}
.ugli{
	height: 10px;
	background-color: #CC0000;
}
</style>
<body>
<div id="blok">
<div class="ugli"><img src="img/ugol.jpg" align="left"><img src="img/ugol.jpg" align="right"></div>
<div><br>KONTENT<br><br><br></div><!--kontent razdvigaet po vertikali-->
<div class="ugli"><img src="img/ugol.jpg" align="left"><img src="img/ugol.jpg" align="right"></div>
</div>
</body>
</html>

Спустя 14 минут, 33 секунды (15.06.2011 - 00:10) Rigel написал(а):
sebastjan
ах да, у меня еще условие не использовать html-выравнивание wink.gif

Спустя 12 минут, 39 секунд (15.06.2011 - 00:23) sebastjan написал(а):
Цитата (Rigel @ 14.06.2011 - 21:10)
sebastjan
ах да, у меня еще условие не использовать html-выравнивание ;)

Ах да, а немного напречься в лом что ли :angry: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title></head>
<style>
#blok{
	width: 200px;
	background-color: #33FFFF;
	border: 1pt solid #0000FF;
}
.ugli{
	height: 10px;
	background-color: #CC0000;
}
.ugli .im_1{
	float: left;
	height: 10px;
	width: 10px;
}
.ugli .im_2{
	height: 8px;
	width: 10px;
	float: right;
}
</style>
<body>
<div id="blok">
  <div class="ugli">
    <div class="im_1"><img src="img/ugol.jpg" border="0" height="10" width="10"></div>
    <div class="im_2"><img src="img/ugol.jpg" border="0" height="10" width="10"></div>
  </div>
<div><br>KONTENT<br><br><br></div><!--kontent razdvigaet po vertikali-->
<div class="ugli"><img src="img/ugol.jpg" align="left"><img src="img/ugol.jpg" align="right"></div>
</div>
</body>
</html>


Спустя 19 минут, 23 секунды (15.06.2011 - 00:42) inpost написал(а):
Rigel
не использовать HTML выравнивание? Это как?! smile.gif

Спустя 8 минут, 48 секунд (15.06.2011 - 00:51) sebastjan написал(а):
Это автор имелл ввиду использовать только стили, по крайней мери я больше не нахожу обьяснения высказыванию.

Спустя 4 минуты, 10 секунд (15.06.2011 - 00:55) Rigel написал(а):
inpost
sebastjan
align-выравнивание внутри html-тега huh.gif
чем вам высказывание не понравилось?

Спустя 4 минуты, 57 секунд (15.06.2011 - 01:00) sebastjan написал(а):
Цитата (Rigel @ 14.06.2011 - 21:55)
inpost
sebastjan
align-выравнивание внутри html-тега huh.gif
чем вам высказывание не понравилось?

Всё понравилось biggrin.gif особенно
Цитата
ах да, у меня еще условие

Иначе я и подумать не мог.

Спустя 4 минуты, 40 секунд (15.06.2011 - 01:05) Mirexzpalich написал(а):
А на бэкграунд в угол картику забить нельзя?

Спустя 7 минут, 8 секунд (15.06.2011 - 01:12) Rigel написал(а):
Mirexzpalich
нет, там такое строение, что бэкграунд уже задан в этом элементе для другого места unsure.gif

sebastjan
ну да, условие заказчика )
вроде работает пример, спасибо cool.gif

Спустя 2 часа, 34 минуты, 8 секунд (15.06.2011 - 03:46) inpost написал(а):
Rigel
а как ты сделаешь align="center" без align="center" ? smile.gif Смешно звучит smile.gif Я до сих пор не нашел решения на CSS, возможно ли вообще центровку делать для блоков без align!

Спустя 5 часов, 57 минут, 16 секунд (15.06.2011 - 09:44) sebastjan написал(а):
Rigel можно и бграундом, это же слои.
деалешь бграунд слой, помещаешь его в родительский слой и позиционируешь.
inpost тоже есть решение с позиционированием именно по центру,
блок див ставиш алигн 50% прописанный в CSS в него другой блок с отрицательным алигн -50% прописанный в CSS.
Я так обычно главный блок для всего документа позиционирую, просто и работает на все 100.
А в нём уже формирую весь документ.
-понимаю что выглядит придурковато но как раз для тех кто хочет чтб именно в стилях всё было прописанно smile.gif
Другие товарищи исмпользуют яваскрипты, короче бред это всё не понятно почему используемый, для меня загадка.

Rigel это ты ещё не показывал свой хтмл и слава богу, я уж представляю что там наворочена либитялями стилей. biggrin.gif

Спустя 1 час, 22 минуты, 32 секунды (15.06.2011 - 11:06) nugle написал(а):
inpost
если сайт спецификации не html 5 или спецификация xhtml 1.0 то можно тег <center> использовать, но это конечно не css

Спустя 9 часов, 30 минут, 27 секунд (15.06.2011 - 20:37) Mirexzpalich написал(а):
Rigel
Мона на бордер картику поставить...

Спустя 40 минут, 38 секунд (15.06.2011 - 21:17) sebastjan написал(а):
Цитата (Mirexzpalich @ 15.06.2011 - 17:37)
Rigel
Мона на бордер картику поставить...

Было бы замечательно такое свойство, но пока что броузеры не поддерживают этого.
И скорее всего ещё не мало времени пройдёт пока это свойство будет поддерживаться всеми, хотя бы ведущими броузерами.

Спустя 2 часа, 11 минут, 26 секунд (15.06.2011 - 23:29) Mirexzpalich написал(а):
sebastjan
Модеж я что-то недопонимаю... Это тогда что?

<html>
     <head>
           <style>
          .img_border{
                background:yellow;
                border: 50px double orange;
                   -moz-border-image: url("http://phpforum.ru/style_images/1/pip.gif") 25 30 10 20 repeat;
                   -webkit-border-image: url("http://phpforum.ru/style_images/1/pip.gif") 25 30 10 20 repeat;
                    border-image: url("http://phpforum.ru/style_images/1/pip.gif") 25 30 10 20 repeat;
                   width:200px;
                   height:200px;
          }
         </style>
	</head>
	<body>
		<div class="img_border" ></div>
	</body>
</html>

Спустя 23 минуты, 4 секунды (15.06.2011 - 23:52) sebastjan написал(а):
Всё правильно понимаешь, но это пока что не работает.

Попробуй у себя запустить, работать не будет ни в опере ни в лисе, я дальше и не копал.


Спустя 1 час, 32 минуты, 48 секунд (16.06.2011 - 01:25) inpost написал(а):
nugle
<center> - не валидный по w3c стандартам и устаревший тег. Его нельзя использовать для сайтов.

sebastjan
А можешь пример показать без использования align, чтобы по центру было фиксированной мною шириной.

Спустя 5 минут, 17 секунд (16.06.2011 - 01:30) sebastjan написал(а):
сейчас,минутку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
HTML{
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
BODY{
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#centr{
	position: absolute;
	height: 100%;
	width: 1px;
	left: 50%;
	top: 0px;
}
.blok1{
	background-color: #66FFFF;
	height: 100%;
	width: 1000px;
	left: -500px;
	top: 0px;
	position: absolute;
}
</style>
</head>
<body>
  <div id="centr">
      <div class="blok1">
	  <!--kontent-->
     </div>
  </div>
</body>
</html>

Спустя 20 минут, 49 секунд (16.06.2011 - 01:51) Игорь_Vasinsky написал(а):
inpost
Цитата
а как ты сделаешь align="center" без align="center" ?  Смешно звучит  Я до сих пор не нашел решения на CSS, возможно ли вообще центровку делать для блоков без align! 


body{
    text-align:center;
}

Спустя 7 минут, 51 секунда (16.06.2011 - 01:58) sebastjan написал(а):
Цитата (Игорь_Vasinsky @ 15.06.2011 - 22:51)
inpost
Цитата
а как ты сделаешь align="center" без align="center" ?  Смешно звучит  Я до сих пор не нашел решения на CSS, возможно ли вообще центровку делать для блоков без align! 


body{
    text-align:center;
}

Игорь_Vasinsky
Не пойдёт, это только для текста.



Спустя 34 секунды (16.06.2011 - 01:59) inpost написал(а):
Игорь_Vasinsky
Так позиционируется только текст, на блоки не действует. Именно поэтому ключевым было: "возможно ли вообще центровку делать для блоков без align!".

sebastjan
Интересный способ, я, конечно, использовать у себя не буду, из-за position: absolute; но всё же работает! А где ты учился верстать?

Спустя 4 минуты, 59 секунд (16.06.2011 - 02:04) sebastjan написал(а):
Да этот способ я наверное лет так 8 назад придумал для себя, другие варианты рассматривал ,но больно запутанно всё было, типа с ява скрипт и другими припомпасами отрицательного позиционирования.
Я тогда подумал ,если центровка у дива отсчитываеться от верхнего левого ула, так почему не использовать смещение которое выше показал.
Как ни странно в инети я больше ни у кого такой фишки не видел, а вроде проще и не придумаешь.
Учился в инети , копался, очень многон методом тыка доходил.
Без указания позиционирования и в других вариантах я не видел установки по центру.
Или относительное позиционирование или обсолютное без него ни как.

Спустя 40 минут, 7 секунд (16.06.2011 - 02:44) sebastjan написал(а):
Ну вот, получаеться ещё и соврал.
Вот ещё один не мой пример позиционирования по центру без абсолют.
Ещё проще моего. Работает, ИЕ, Опера, ЛИСа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
HTML{
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
BODY{
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
#aaa{
	width: 1000px;
	padding: 0;
	margin: 0 auto;
	background-color: #33FF00;
	height: 700px;
	top: 0px;
}
</style>
</head>
<body>
 <div id="aaa">
   <div>
    Content
   </div>
 </div>
</body>
</html>
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.