Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Róg strony HTML/CSS
Forum PHP.pl > Forum > Przedszkole
krystianr
4.08.2010, 18:03:06
Jak zrobić za pomocą HTML/CSS taki róg zamiast takiego
kapuch
4.08.2010, 18:06:43 
[CSS] pobierz, plaintext 
  1. .okno {
  2. -webkit-border-radius: 10px; 
  3. -khtml-border-radius: 10px;  
  4. -moz-border-radius: 10px; 
  5. border-radius: 10px;
  6. }
[CSS] pobierz, plaintext

Ale to nie dziala w IE, sa tez inne (pewniejsze) sposoby, np. http://blog-lisu.eu/2010/01/29/css3-zaokraglanie-rogow/
krystianr
4.08.2010, 18:17:03
Mi to w ogóle niechce chodzić, daje
Kod
<table class="box">cos tam
cos tam
</table>

i w css daje ten kod to mi nie zaokrągla stylu
kapuch
4.08.2010, 18:23:31
1. Jakiej przegladarki uzywasz, bo pisalem ze pod IE to nie dziala
2. Uzywasz prawidlowych naglowkow? Np.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
[HTML] pobierz, plaintext

3. Nadales tej klasie border? ( border: 1px solid #000; )
4. Pomiedzy <table></table> wypadalo by jeszcze wstawic <tr><td>cos tam</td></tr>

Masz tu kompletnego gotowca, bo wyjdzie szybciej:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Zaokraglone rogi</title>
  6. <style type="text/css">
  7. .okno {
  8. border: 1px solid black;
  9. -webkit-border-radius: 10px; 
  10. -khtml-border-radius: 10px;  
  11. -moz-border-radius: 10px; 
  12. border-radius: 10px;
  13. }
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <table class="okno">
  19. <tr><td>aaa</td><td>bbb</td></tr>
  20. <tr><td>aaa</td><td>bbb</td></tr>
  21. <tr><td>aaa</td><td>bbb</td></tr>
  22. <tr><td>aaa</td><td>bbb</td></tr>
  23. </table>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext

Dziala pod:
- Firefox'em
- Chrome
- Opera

Nie dziala pod IE 8 i starszych.
PS. Pod tymi przegladarkami sprawdzalem, wiec tutaj jestem na 100% pewien, a co do reszty to nie wiem.
krystianr
4.08.2010, 18:38:06
Używam opery

moja strona wygląda tak :
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>bla bla bla</title>
  6. 	<link href="http://krystianr.xaa.pl/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  7.     <link rel="stylesheet" href="krystianr.css" type="text/css">
  8.   </head>
  9.   <body>
  10.     <table  width="80%" cellspacing="0" cellpadding="7" border="0" align="center">
  11.       <tr>
  12.         <td class="bodyline">
  13.           <table width="100%" cellspacing="0" cellpadding="8" border="0" align="center">
  14.             <tr>
  15.               <td>
  16.                 <img src="images/logo.gif" alt="">
  17.               </td>
  18.               <td align="center" width="100%" valign="middle">
  19.                 <span class="maintitle">
  20.                   phpBB
  21.                 </span><br>
  22.                 <span class="gen">
  23.                   bla bla bla<br><br>
  24.                 </span>
  25.                 <table cellspacing="0" cellpadding="2" border="0">
  26.                   <tr>
  27.                     <td align="center" valign="top">
  28.                       <span class="mainmenu">
  29.                         <a href="o_mnie.php" class="mainmenu"><img src="images/o_mnie.gif" alt="" border="0" height="13" hspace="3" width="12">O mnie</a> 
  30. 						<a href="oferta.php" class="mainmenu"><img src="images/oferta.gif" alt="" border="0" height="13" hspace="3" width="12">Oferta</a> 
  31. 						<a href="cennik.php" class="mainmenu"><img src="images/cennik.gif" alt="" border="0" height="13" hspace="3" width="12">Cennik</a> 
  32. 						<a href="wykonane.php" class="mainmenu"><img src="images/wykonane.gif" alt="" border="0" height="13" hspace="3" width="12">Wykonane Zlecenia</a> <br>
  33.                         <a href="linki.php" class="mainmenu"><img src="images/linki.gif" alt="" border="0" height="13" hspace="3" width="12">Linki</a> 
  34.                         <a href="kontakt.php" class="mainmenu"><img src="images/kontakt.gif" alt="" border="0" height="13" hspace="3" width="12">Kontakt</a> 
  35. 						<a href="poradniki.php" class="mainmenu"><img src="images/poradniki.gif" alt="" border="0" height="13" hspace="3" width="12">Poradniki</a> 
  36. 						<a href="do_pobrania.php" class="mainmenu"><img src="images/do_pobrania.gif" alt="" border="0" height="13" hspace="3" width="12">Download</a> 
  37. 						<a href="moje_mody.php" class="mainmenu"><img src="images/opinie.gif" alt="" border="0" height="13" hspace="3" width="12">Moje Modyfikacje</a> 
  38.                       </span>
  39.                     </td>
  40.                   </tr>
  41.                 </table>
  42.               </td>
  43.             </tr>
  44.             <tr>
  45.               <td height="25" align="center" valign="top">
  46.                 <span class="mainmenu"></span>
  47.               </td>
  48.             </tr>
  49.           </table>
  50. <span class="nav" style="color: rgb(255, 102, 0);">
  51.   <a href="index.php" class="nav">phpBB support by krystianr ->  Strona Główna</a>
  52. </span>
  53. <div id="hm" style="display: ''; position: relative;">
  54.   <span style="line-height:5px;">
  55.     <br>
  56.   </span>
  57.   <table width="100%" class="forumline" cellspacing="1" cellpadding="3" border="0" class="forumline" align="center">
  58.     <tr>
  59.       <th class="thCornerL" height="25" class="forumline" style="cursor: pointer" >Strona Główna</th>
  60.     </tr>
  61.     <tr>
  62.       <td class="row1">
  63.         <div class="add" align="center">
  64. <b><font size="3" color="green">Z braku czasu nie będę wykonywał żadnych zleceń </font></b><br>
  65. <b>Lista zleceń jakie mogę wykonać</b> : <a href="oferta.php">KLIK</a><br>
  66.  
  67.         </div>
  68.       </td>
  69.     </tr>
  70.   </table>
  71. </div>
  72.         <div align="center" class="copyright"><br>
  73.           <center>
  74. 			Copyright &copy by <b><a href="http://krystianr.xaa.pl">krystianr</a></b> 2010<br>
  75.             Styl <b>subSilver</b> modyfikacja by <b><a href="http://krystianr.xaa.pl">krystianr</a></b><br><br>
  76. 			<a href="http://krystianr.xaa.pl/forum"><font color="green">Forum</font></a><br>
  77. 			<b>Kopiowanie wszelkich treści zawartych na portfolio bez zgody autora zabronione!</b><br>
  78. 			<font color="red" size="0">Ostatnia aktualizacja <b>2010-08-04</b></font><br>
  79. 			<a href="http://www.licznikiodwiedzin.pl" title="Odwiedzin liczniki"><img src="http://www.licznikiodwiedzin.pl/licznik.php?user=krystianr93" alt="Liczniki na stonę" border="0"></a>
  80. 					<div align="right">
  81. <a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Poprawny CSS!"></a>
  82. <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-html401" alt="Poprawny HTML 4.01"></a>
  83. </div>
  84.             </center>
  85.           </div>
  86.         </td>
  87.       </tr>
  88.     </table>
  89.   </body>
  90. </html>
[HTML] pobierz, plaintext
everth
4.08.2010, 18:41:08
Pod normalne przeglądarki używasz regułek CSSa które podał ci @kapuch, pod IE możesz użyć tego (wymaga jQuery i JS).
kapuch
4.08.2010, 18:46:30
Ciezko cokolwiek powiedziec o tym kodzie, bo nie pokazales css'a, wiec nie wiem co dana klasa soba reprezentuje :]
krystianr
5.08.2010, 09:20:52
Cytat(kapuch @ 4.08.2010, 19:46:30 ) *
Ciezko cokolwiek powiedziec o tym kodzie, bo nie pokazales css'a, wiec nie wiem co dana klasa soba reprezentuje :]


oto css : http://krystianr.xaa.pl/krystianr.css
kapuch
5.08.2010, 10:37:09
Cytat(krystianr @ 5.08.2010, 10:20:52 ) *
oto css : http://krystianr.xaa.pl/krystianr.css

No ok, ale gdzie w tym css masz:
Kod
border: 1px solid #000;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;  
-moz-border-radius: 10px;
border-radius: 10px;

questionmark.gif
Bo nie widze, wiec jak ma ci to dzialac?
krystianr
5.08.2010, 11:16:52
nie mam tego bo robiłem to na localhost
kapuch
5.08.2010, 11:21:22
No to ciezko powiedziec cokolwiek, skoro nie wiem gdzie ty to wstawiasz.
Dzialac musi, tzn. ze wstawiasz to zle, badz nie do tej klasy co trzeba i dlatego chcialem zobaczyc kod.
krystianr
5.08.2010, 11:50:58
tutaj jest demo : http://stronadtestow.ugu.pl/templates/index.php
css : http://stronadtestow.ugu.pl/templates/krystianr.css
kapuch
5.08.2010, 12:12:06
No i nie widzisz ze zaokraglilo rogi?
Zaokraglilo, tyle ze wewnatrz jest jeszcze jedna tabela z bez zaokraglania.
Popracuj nad tym, dostales gotowca, teraz to tylko kwestia prob.

PS. Podpowiem tylko, ze zmien nazwe klasy z okno na np. zaokraglanie i dodaj ja do kazdego elementu ktory chcesz zaokraglic.
Nawet jesli ten element ma juz przypisana klase to mozna dodac mu druga poprzez class="pierwszaKlasa drugaKlasa"
Czyli np. class="corner zaokragloneRogi" i wtedy taki element posiada dwie klasy.
Teraz wszystko w Twoich rekach, dostales gotowa klase, nic tylko podstawic ja w odpowiednie miejsce, przeciez nikt nie bedzie Ci przerabial calego szablonu.
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.