Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]rozjeżdżające się zakładki
ABDOO
post 14.06.2014, 11:14:50
Post #1





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 11.02.2013

Ostrzeżenie: (0%)
-----

Witam,
układ dwóch zakładek zrobionych na input radio w fierefoxie doprowadza do najeżdżania label na div z treścią, a w chromie się rozjeżdża tworząc minimalną, ale jednak lukę O_o
Ktoś coś może widzi, czego ja nie widzę, co pomogłoby zlikwidować problem

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .tabs {
  5.       position: relative;   
  6.       height: 300px; /* This part sucks */
  7.       clear: both;
  8.       margin: 25px 0;
  9.     }
  10.     .tab {
  11.       float: left;
  12.     }
  13.     .tab label {
  14.       background: rgba(113, 139, 176, 0.8); 
  15.       padding: 8px 50px; 
  16.       border: 0px solid rgba(48, 80, 127, 0.5); 
  17.       margin-right: 15px; 
  18.       margin-left: -1px;
  19.       position: relative;
  20.       left: 1px; 
  21.     }
  22.     .tab [type=radio] {
  23.       display: none;   
  24.     }
  25.     .content {
  26.       position: absolute;
  27.       display:none;
  28.       top: 28px;
  29.       left: 0;
  30.       background: rgba(48, 80, 127, 0.8);
  31.       right: 0;
  32.       bottom: 0;
  33.       padding: 0px 20px;
  34.       border: 0px solid #30507f; 
  35.     }
  36.     [type=radio]:checked ~ label {
  37.       background: rgba(48, 80, 127, 0.8);
  38.       border-bottom: 0px solid rgba(48, 80, 127, 0.8);
  39.       z-index: 2;
  40.  
  41.     }
  42.     [type=radio]:checked ~ label ~ .content {
  43.       z-index: 1;
  44.       display:block
  45.     }
  46.  
  47. </style>
  48. </head>
  49. <body>
  50. <div class="tabs">
  51.  
  52.        <div class="tab">
  53.            <input type="radio" id="tab-1" name="tab-group-1" checked>
  54.            <label for="tab-1">BUY</label>
  55.  
  56.            <div class="content">
  57.                		<jdoc:include type="modules" name="buy" style="xhtml" />
  58.  
  59.            </div> 
  60.        </div>
  61.  
  62.        <div class="tab">
  63.            <input type="radio" id="tab-2" name="tab-group-1">
  64.            <label for="tab-2">RENT</label>
  65.  
  66.            <div class="content">
  67.               <jdoc:include type="modules" name="rent" style="xhtml" />
  68.            </div> 
  69.        </div>
  70. </body>
  71. </html>
[HTML] pobierz, plaintext




Go to the top of the page
+Quote Post
fate
post 14.06.2014, 19:58:41
Post #2





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

zrobić font-size w px


--------------------
Sklep ubrania lniane dla dzieci promocje
Go to the top of the page
+Quote Post
ABDOO
post 16.06.2014, 10:08:36
Post #3





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 11.02.2013

Ostrzeżenie: (0%)
-----

pomogło ustawienie wysokości dla elementu label i dodanie display:inline-block smile.gif
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 11:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn