Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Odsyłacze w ramce
Forum PHP.pl > Forum > Przedszkole
klapaucius
5.06.2010, 16:22:15
Mam pytanie: jak zrobić w css coś takiego, aby każdy obrazkowy odsyłacz na stronie był w ramce? Czyli że np. jeśli tam takie coś:
[HTML] pobierz, plaintext 
  1. <a href=...><img src=...></a>
[HTML] pobierz, plaintext

To żeby obrazek ten był w ramce.
Nh2003
5.06.2010, 16:24:30
W css:

Kod
a img {
border: 1px solid #009900;
}
tehaha
5.06.2010, 16:25:18 
[HTML] pobierz, plaintext 
  1. a img{
  2. border:solid #000000 1px;
  3. }
[HTML] pobierz, plaintext
klapaucius
14.06.2010, 21:49:00
ej no bo popatrzcie. Wrzuce wam moj kod css ale i tak wątpie ze komus bedzie sie chcialo w nim grzebac. Moj problem polega na tym, że jeśli na strone wstawie jakis obrazek i dam na niego odnosnik to obrazek pojawia się w ramce(zle to wyglada itp). Nie wiem dlaczego. Nic w pliku css nie znalazlem co moglo by byc za to odpowiadac.
Oto kod css:
[HTML] pobierz, plaintext 
  1. .leftmenu {
  2. margin-left: 8px;
  3.  
  4. background-color : #333;
  5.  
  6. border : 1px solid #444;
  7.  
  8. color : #ffffff;
  9.  
  10. display : block;
  11.  
  12. padding-top : 2px;
  13.  
  14. padding-right : 2px;
  15.  
  16. padding-bottom : 2px;
  17.  
  18. padding-left : 2px;
  19.  
  20. border-style : solid;
  21.  
  22. border-top-width : 0;
  23.  
  24. border-right-width : 1px;
  25.  
  26. border-bottom-width : 1px;
  27.  
  28. border-left-width : 1px;
  29.  
  30. width : 145px;
  31.  
  32. font-weight : normal;
  33.  
  34. text-align : left;
  35.  
  36. }
  37.  
  38. .gap { line-height: 3px; }
  39.  
  40.  
  41.  
  42. .topbar { width: 100%;
  43.  
  44. 	margin-left: 8px;
  45.  
  46. 	margin-right: 8px;
  47.  
  48. 	margin-top: 8px;
  49.  
  50. 	background-color: #333;
  51.  
  52. 	border: 1px solid #444;
  53.  
  54. 	padding: 3px;
  55.  
  56. 	color: #ddd;
  57.  
  58. 	font-weight: bold;
  59.  
  60. 	font-size: 11px; }
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68. .content { width: 100%;
  69.  
  70. 	padding: 0px; }
  71.  
  72.  
  73.  
  74. .contenthead { background-color: #111;
  75.  
  76. 	border: 1px solid #444;
  77.  
  78. 	padding: 5px;
  79.  
  80. 	color: #ddd;
  81.  
  82. 	font-weight: bold;
  83.  
  84. 	font-size: 12px; }
  85.  
  86.  
  87.  
  88. .contentcontent { background-color: #333;
  89.  
  90. 	border: 1px solid #444;
  91.  
  92. 	padding: 3px;
  93.  
  94. 	color: #ddd;
  95.  
  96. 	font-size: 11px; }
  97.  
  98.  
  99. .bialy { background-color: #FFFFFF;
  100.  
  101. 	border: 1px solid #444;
  102.  
  103. 	padding: 3px;
  104.  
  105. 	color: #000000;
  106.  
  107. 	width: 20%;
  108.  
  109. 	font-weight: normal;
  110.  
  111. 	font-size: 12px; }
  112.  
  113. .bialy:hover {
  114.         background-color: #EEEEEE;
  115.  
  116.         font-weight: bold;
  117. }
  118.  
  119. .bar_a{
  120.  
  121. 	width: 160px;
  122.  
  123. 	border: 1px solid #000000;
  124.  
  125. 	background-color:#666666;
  126.  
  127. }
  128.  
  129. .bar_exp{
  130.  
  131. 	width: 200px;
  132.  
  133. 	border: 1px solid #000000;
  134.  
  135. 	background-color:#666666;
  136.  
  137. }
  138.  
  139. .bar_hp{
  140.  
  141. 	font-size: 10px;
  142.  
  143. 	background-color:#FF0000;
  144.  
  145. }
  146. .bar_energy{
  147.  
  148. 	font-size: 10px;
  149.  
  150. 	background-color:#0000FF;
  151.  
  152. }
  153. .bar_awake{
  154.  
  155. 	font-size: 10px;
  156.  
  157. 	background-color:#008000;
  158.  
  159. }
  160. .bar_nerve{
  161.  
  162. 	font-size: 10px;
  163.  
  164. 	background-color:#FFFF00;
  165.  
  166. }
  167. .bar_exp{
  168.  
  169. 	font-size: 10px;
  170.  
  171. 	background-color:#800080;
  172.  
  173. }
  174.  
  175.  
  176. body {
  177.  
  178. margin: auto;
  179.  
  180. border: 1px solid #333;
  181.  
  182. width: 800px;
  183.  
  184. background-color: #000000;
  185.  
  186. font-family : Arial, Helvetica, sans-serif;
  187.  
  188. font-weight : normal;
  189.  
  190. }
  191.  
  192.  
  193.  
  194.  
  195.  
  196. h1 , h2 , h3 , h4 , h5 , h6 {
  197.  
  198. font-family : "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
  199.  
  200. font-weight : normal;
  201.  
  202. }
  203.  
  204.  
  205.  
  206. .head, .headbox , .dynabox , a.leftmenu , a.topmenu {
  207.  
  208. margin-left: 8px;
  209.  
  210. font-weight : bold;
  211.  
  212. text-decoration : none;
  213.  
  214. font-size : 80%;
  215.  
  216. font-family : Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
  217.  
  218. }
  219.  
  220.  
  221.  
  222. a 																	{color : #000000; }
  223.  
  224. .body a:hover, .dynabox .headbox a:hover							{color : #ffffff; }
  225.  
  226.  
  227.  
  228. .pos0														{background-color : #ffffff; color : #000000; }
  229.  
  230. .pos1 {background-color : #1E1E1E;}
  231.  
  232. .mainbox , .dynabox , a.leftmenu:link , a.leftmenu:visited 	{background-color : #333; border : 1px solid #444; color : #ffffff; }
  233.  
  234. .pos2 , .topnav , a.leftmenu:hover 									{background-color : #333; color : #ffcc00; border : 1px solid #444; }
  235.  
  236.  
  237.  
  238.  
  239.  
  240. .neg0 																{background-color : #000000; }
  241.  
  242. .neg1 , a.topmenu:hover												{background-color : #4d75a0; color : #ffffff; border : #000000; }
  243.  
  244. .neg2 , .headbox , a.topmenu:link , a.topmenu:visited 				{background-color : #7d9fc4; color : #ffffff; border : #000000; }
  245.  
  246.  
  247.  
  248. a.leftmenu:link {
  249.  
  250. display : block;
  251.  
  252. padding-top : 2px;
  253.  
  254. padding-right : 2px;
  255.  
  256. padding-bottom : 2px;
  257.  
  258. padding-left : 2px;
  259.  
  260. border-style : solid;
  261.  
  262. border-top-width : 0;
  263.  
  264. border-right-width : 1px;
  265.  
  266. border-bottom-width : 1px;
  267.  
  268. border-left-width : 1px;
  269.  
  270. width : 145px;
  271.  
  272. font-weight : normal;
  273.  
  274. text-align : left;
  275.  
  276. }
  277.  
  278.  
  279.  
  280. a.leftmenu:hover {
  281.  
  282. display : block;
  283.  
  284. padding-top : 2px;
  285.  
  286. padding-right : 2px;
  287.  
  288. padding-bottom : 2px;
  289.  
  290. padding-left : 2px;
  291.  
  292. border-style : solid;
  293.  
  294. border-top-width : 0;
  295.  
  296. border-right-width : 1px;
  297.  
  298. border-bottom-width : 1px;
  299.  
  300. border-left-width : 1px;
  301.  
  302. width : 145px;
  303.  
  304. font-weight : normal;
  305.  
  306. text-align : left;
  307.  
  308. }
  309.  
  310.  
  311.  
  312. a.leftmenu:visited {
  313.  
  314. display : block;
  315.  
  316. padding-top : 2px;
  317.  
  318. padding-right : 2px;
  319.  
  320. padding-bottom : 2px;
  321.  
  322. padding-left : 2px;
  323.  
  324. border-style : solid;
  325.  
  326. border-top-width : 0;
  327.  
  328. border-right-width : 1px;
  329.  
  330. border-bottom-width : 1px;
  331.  
  332. border-left-width : 1px;
  333.  
  334. width : 145px;
  335.  
  336. font-weight : normal;
  337.  
  338. text-align : left;
  339.  
  340. }
  341.  
  342.  
  343.  
  344. a.topmenu:link {
  345.  
  346. display : inline;
  347.  
  348. padding-top : 5px;
  349.  
  350. padding-right : 0;
  351.  
  352. padding-bottom : 5px;
  353.  
  354. padding-left : 0;
  355.  
  356. border-style : solid;
  357.  
  358. border-top-width : 0;
  359.  
  360. border-right-width : 0;
  361.  
  362. border-bottom-width : 0;
  363.  
  364. border-left-width : 1px;
  365.  
  366. text-align : center;
  367.  
  368. }
  369.  
  370.  
  371.  
  372. a.topmenu:hover {
  373.  
  374. background-color : #4d75a0;
  375.  
  376. display : inline;
  377.  
  378. padding-top : 5px;
  379.  
  380. padding-right : 0;
  381.  
  382. padding-bottom : 5px;
  383.  
  384. padding-left : 0;
  385.  
  386. border-style : solid;
  387.  
  388. border-top-width : 0;
  389.  
  390. border-right-width : 0;
  391.  
  392. border-bottom-width : 0;
  393.  
  394. border-left-width : 1px;
  395.  
  396. text-align : center;
  397.  
  398. }
  399.  
  400.  
  401.  
  402. a.topmenu:visited {
  403.  
  404. display : inline;
  405.  
  406. padding-top : 5px;
  407.  
  408. padding-right : 0;
  409.  
  410. padding-bottom : 5px;
  411.  
  412. padding-left : 0;
  413.  
  414. border-style : solid;
  415.  
  416. border-top-width : 0;
  417.  
  418. border-right-width : 0;
  419.  
  420. border-bottom-width : 0;
  421.  
  422. border-left-width : 1px;
  423.  
  424. text-align : center;
  425.  
  426. }
  427.  
  428.  
  429.  
  430. .headbox {
  431.  
  432.  
  433.  
  434. background-color: #111;
  435.  
  436. border: 1px solid #444;
  437.  
  438. padding: 5px;
  439.  
  440. color: #ddd;
  441.  
  442.  
  443.  
  444. display : block;
  445.  
  446. padding: 5;
  447.  
  448. width : 139px;
  449.  
  450. text-align : left;
  451.  
  452. }
  453.  
  454.  
  455.  
  456. .topbox {
  457.  
  458. margin-left: 8px;
  459.  
  460. margin-right: 8px;
  461.  
  462. margin-top: 8px;
  463.  
  464. color: #ffffff;
  465.  
  466. border: 1px solid #333;
  467.  
  468. background-color: #000000;
  469.  
  470. height : 158px;
  471.  
  472.  
  473.  
  474. padding-right : 5px;
  475.  
  476. padding-bottom : 0;
  477.  
  478. }
  479.  
  480.  
  481.  
  482. .topnav {
  483.  
  484. border : solid ;
  485.  
  486. border-width : 0 1px 1px;
  487.  
  488. padding-top : 3px;
  489.  
  490. padding-bottom : 0;
  491.  
  492. }
  493.  
  494.  
  495.  
  496. .mainbox {
  497.  
  498. border: none;
  499. background-color: #1E1E1E;
  500.  
  501. border-width : 1px 0 1px 1px;
  502.  
  503. padding-top : 5px;
  504.  
  505. padding-left : 5px;
  506.  
  507. padding-right : 5px;
  508.  
  509. padding-bottom : 5px;
  510.  
  511. }
  512.  
  513.  
  514.  
  515. .mainbox p a {
  516.  
  517. font-weight : bold;
  518.  
  519. font-size : 90%;
  520.  
  521. }
  522.  
  523.  
  524.  
  525. .dynabox {
  526.  
  527. border: 1px solid #333;
  528.  
  529. text-align : center;
  530.  
  531. }
  532.  
  533.  
  534.  
  535. .dynabox .headbox {
  536.  
  537. border-style : dashed;
  538.  
  539. border-top-style : solid;
  540.  
  541. border-right-width : 0;
  542.  
  543. border-left-width : 0;
  544.  
  545. padding-top : 3px;
  546.  
  547. padding-left : 0;
  548.  
  549. padding-right : 0;
  550.  
  551. padding-bottom : 3px;
  552.  
  553. }
  554.  
  555.  
  556.  
  557. .dynacontent {
  558.  
  559. padding-top : 3px;
  560.  
  561. padding-left : 5px;
  562.  
  563. padding-right : 5px;
  564.  
  565. padding-bottom : 3px;
  566.  
  567. text-align : left;
  568.  
  569. font-size : 70%;
  570.  
  571. font-weight : normal;
  572.  
  573. }
  574.  
  575.  
  576.  
  577. a{
  578.  
  579. 	color: #FFCC00;
  580.  
  581. }
  582.  
  583. a:hover{
  584.  
  585. 	color: #FFFF33;
  586.  
  587. }
  588. b#nazwa{
  589.         font-size : large;
  590. }
  591. table#eq{
  592.     background-color: #FFFFFF;
  593.     border-collapse: collapse;
  594.     border:  1px solid #444;
  595. }
  596. .eqtrue{
  597.         width: 50px;
  598.         height: 50px;
  599.         border:  1px solid #FFFFFF;
  600.         background-color: #000000;
  601.         text-align: center;
  602. }
  603. .eqfalse{
  604.         width: 50px;
  605.         height: 50px;
  606.         border:  1px solid #FFFFFF;
  607.         background-color: #000000;
  608. }
  609. .szalik{
  610.         width: 200px;
  611.         height: 36px;
  612.         border:  1px solid #FFFFFF;
  613.         background-color: #000000;
  614. }
  615. .eqtrue:hover{
  616.         border:  1px solid #FFFFFF;
  617.         background-color: #444;
  618.         text-align: center;
  619. }
  620. .szalik:hover{
  621.         border:  1px solid #FFFFFF;
  622.         background-color: #444;
  623.         text-align: center;
  624. }
  625. .lekkie_obramowanie{
  626.     border-collapse: collapse;
  627.     border:  3px solid #444;
  628.     text-align: center;
  629. }
  630. .lekkie_obramowanie2{
  631.     border-collapse: collapse;
  632.     border:  3px solid #444;
  633.     text-align: left;
  634. }
[HTML] pobierz, plaintext
erix
15.06.2010, 14:01:07
Cytat
Wrzuce wam moj kod css ale i tak wątpie ze komus bedzie sie chcialo w nim grzebac.

No i masz rację, więc po co? tongue.gif Trzeba było puścić to gdzieś, na żywo.

Cytat
jakis obrazek i dam na niego odnosnik to obrazek pojawia się w ramce(zle to wyglada itp). Nie wiem dlaczego

Jest to domyślne zachowanie przeglądarek.

Wystarczy:
[CSS] pobierz, plaintext 
  1. a img { border: 0 }
[CSS] pobierz, plaintext
klapaucius
15.06.2010, 20:24:15
Cytat(erix @ 15.06.2010, 15:01:07 ) *
No i masz rację, więc po co? tongue.gif Trzeba było puścić to gdzieś, na żywo.


Jest to domyślne zachowanie przeglądarek.

Wystarczy:
[CSS] pobierz, plaintext 
  1. a img { border: 0 }
[CSS] pobierz, plaintext

Działa!!! Wielkie dzięki!!!!! ;*
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.