Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] zaokraglone rogi
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
skowron-line
13.09.2006, 12:38:10
2 fotki do porownania
pod FFklik ff
pod IEklik ie

no chyba wszyscy widza o co chodzi czy ktos moze mi powiedzic czym to jest spowdowane
dodam ze do zaokraglania uzywamnifty moze to jest wina ze za duzo zaokraglam??raptem 3

z gory dziekuje i pozdrawiam
s_w_ir
13.09.2006, 12:40:54
Nie wiem co to jest to czego tam używasz ale poszukaj w cssie -moz-border-radious:
edit:
Przejżałem te obrazki raz jeszcze, i wygląda tak jakby ktoś zastosował szereg divów do zakrąglenia rogów, a najwidoczniej IE padł przy rozgryzieniu tego, ale sprawdź pierwsą opcje.
skowron-line
13.09.2006, 12:53:47
http://htmlhelp.shl.pl/css/atrybuty/mozborderradius.php
nie dziala pod IE

dla przyszlych pokolen CSS
s_w_ir
13.09.2006, 13:19:45
Bo to nie ma działać pod IE, to jest rozszerzenie silników mozilli(Gecko) zgodne z CSS3. Sprawdziłeś co i jak z kodem? DIvy czy radious?
gekon
13.09.2006, 14:13:51
Pokaz kod tego swojego cudeńka.
skowron-line
13.09.2006, 15:24:09 
[HTML] pobierz, plaintext 
  1. doctype i meta
  2. <link rel="stylesheet" type="text/css" href="niftyCorners.css">
  3. <link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
  4. <script type="text/javascript" src="nifty.js"></script>
  5. <script type="text/javascript">
  6. window.onload=function(){
  7. if(!NiftyCheck())
  8.     return;
  9. Rounded("div#out","#9BC5EB","white");
  10. Rounded("div#right","#6898C8","#9BC5EB");
  11. Rounded("div#left","#6898C8","#9BC5EB");
  12. }
  13. </script>
  14.  
  15. </head>
  16. <body>
  17. <div id="realtop">
  18. 	<a href="#" title="strona glowna"><img src="ikony/home.gif"></a>
  19. 	<a href="#" title="kontakt"><img src="ikony/mail.gif"></a>
  20. </div>
  21. <div id="out">
  22. 	<div id="in">
  23. 		<div id="top">
  24. 			jakies rysunek
  25. 		</div>
  26. 			<ul id="navlist">
  27. lista
  28. 			</ul>
  29. 		<div id="container">
  30. <!-- tabelka jest po zeby sie nie kisilo looknijcie jak jest bez niej-->	
  31. 		<table>
  32. 				<tr>
  33. 					<td class="td_left" valign="top">
  34. 						<div id="left">
  35. 							<h3 class="h3_left">Aktualnosci</h3>
  36. 							<div id="text">
  37. 								<h3 class="h3_tytul">tytul</h3>
  38. 								<p class="tresc">
  39. tekst
  40. </p>
  41. <p class="data">25/07/2006 17:12:42</p>
  42. 							</div>	
  43. 						</div>
  44. 					</td>
  45. 					<td class="td_right" valign="top">
  46. 						<div id="right">
  47. 							<h3 class="h3_right">kontakt</h3>
  48. 							<p class="kontakt">
  49. tekst
  50. 							</p>
  51. 						</div>
  52. 					</td>
  53. 				</tr>
  54. 			</table>
  55. 		</div>
  56. 	</div>
  57. </div>
  58. <div id="stopka">
  59.   jakies cos
  60. </div>
[HTML] pobierz, plaintext

i css
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. body {
  3. 	background-color:#9BC5EB;
  4. 	margin:0;
  5. }
  6. #in {
  7. 	background-color:#6898C8;
  8. 	margin:2px;
  9. }
  10. #out {
  11. 	background-color:white;
  12. 	width:80%;
  13. 	margin:auto;
  14. }
  15. #realtop {
  16. 	width:80%;
  17. 	text-align:right;
  18. 	margin:auto;
  19. }	
  20. #top {
  21. 	background-color:white;
  22. 	margin:auto;
  23. }
  24. #navlist li
  25. {
  26. 	display: inline;
  27. 	list-style-type: none;
  28. 	padding-right:20px;
  29. }
  30. #navlist li a {
  31. 	text-decoration:none;
  32. 	font-style:italic;
  33. 	color:black;
  34. }
  35. #nawilist a:link {
  36. 	color:black;
  37. }
  38. #navlist li a:hover {
  39. 	color:green;
  40. 	border-bottom:4px solid green;
  41. }
  42. #nalist li a:visited {
  43. 	color:black;
  44. 	border-bottom:4px solid green;
  45. }
  46. #main_left {
  47. 	width:50%;
  48. 	background-color:pink;
  49. }
  50. #container {
  51. 	margin-left:20px;
  52. 	margin-right:20px;
  53. }
  54. table {
  55. 	width:100%;
  56. 	border:0;
  57. }
  58. .td_left {
  59. 	width:70%;
  60. }
  61. .td_right {
  62. 	width:30%;
  63. }
  64. #left {
  65. 	width:99%;
  66. 	background-color:#9BC5EB;
  67. }
  68. #right {
  69. 	width:99%;
  70. 	background-color:#9BC5EB;
  71. 	font-weight:bold;
  72. }
  73. .h3_left {
  74. 	background-color:silver;
  75. 	width:60%;
  76. 	padding-left:20px;
  77. }
  78. .h3_right {
  79. 	background-color:silver;
  80. 	width:60%;
  81. 	padding-left:20px;
  82. }
  83. #text {
  84. 	padding:5px;
  85. 	margin:5px;
  86. 	background-color:pink;
  87. 	margin-bottom:5px;
  88. }
  89. .h3_tytul {
  90. 	color:gray;	
  91. }
  92. .tresc:first-letter {
  93. 	font-size:25px;
  94. 	color:red;
  95. }
  96. .tresc {
  97. 	line-height:25px;
  98. 	text-indent:30px;
  99. 	margin-bottom:0;
  100. }
  101. .data {
  102. 	text-align:right;
  103. 	color:gray;
  104. 	font-size:10px;
  105. 	margin-top:0;
  106. 	margin-bottom:0;
  107. }
  108. #stopka {
  109. 	width:80%;
  110. 	text-align:right;
  111. 	color:gray;
  112. 	margin:auto;
  113. }
  114. .kontakt {
  115. 	text-align:center;
  116. 	margin:0;
  117. }
  118. img {
  119. 	border:0;
  120. }
  121. </style>
[HTML] pobierz, plaintext


przepraszam za tak wielka ilosc kodu staralem sie uciac to co nie potrzebne
s_w_ir
13.09.2006, 15:30:35
A to czasem nie to Ci robi round?
Kod
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div#out","#9BC5EB","white");
Rounded("div#right","#6898C8","#9BC5EB");
Rounded("div#left","#6898C8","#9BC5EB");
}
</script>
skowron-line
13.09.2006, 15:42:21
tak podalem link na ten skrypt w 1 poscie
s_w_ir
13.09.2006, 16:11:12
Przepraszam, widze że od początku spaprałem: nie przeczytałem uważnie ani nie zbadałem dokładnie tego co użyłeś. Teraz troche przeglądnołem i moge Ci zalecić żebyś spróbował się wzorować na tym http://www.html.it/articoli/niftycube/NiftyCube.zip
przykład nifty11.html
My4tic
13.09.2006, 16:30:33
Moim zdaniem to wszystko jest stanowczo przekombinowane. Tyle kodu żeby zrobić zaokręglenie... To samo można osiągnąć używając jednego DIV'a i dwóch IMG.
skowron-line
13.09.2006, 21:23:24
Cytat(My4tic @ 13.09.2006, 15:30:33 ) *
Moim zdaniem to wszystko jest stanowczo przekombinowane. Tyle kodu żeby zrobić zaokręglenie... To samo można osiągnąć używając jednego DIV'a i dwóch IMG.


no ale ja nie moge sie rozpedzac z img na tej stronie wiec chwytam sie brzytwy
mariuszn3
14.09.2006, 02:29:15
Nifty jako tako działa tylko na w miarę prostych układach.. przy bardziej złożonym css'ie lubi się wykrzaczać.. nie traktowałbym tego rozwiązania poważnie.. naprawdę obrazek i div'y i po bólu..
skowron-line
14.09.2006, 07:48:42
Cytat(s_w_ir @ 13.09.2006, 15:11:12 ) *
http://www.html.it/articoli/niftycube/NiftyCube.zip
przykład nifty11.html


no i o to chodzilo
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.