Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Różne marginesy
Forum PHP.pl > Forum > Przedszkole
o2w5n778
14.09.2014, 17:28:01
Cześć!
Mam problem z wartościami marginesów, które są nierówne.
Dla prawego i lewego panelu nadałem marginesy górne po 3%. Niestety odstęp w prawym panelu jest o wiele mniejszy niż w lewym. Natomiast jeżeli ustawię marginesy np. 10px to są one takie same.
[HTML] pobierz, plaintext 
  1. .mainContent {
  2.     width: 70%;
  3.     float: left;
  4. }
  5.  
  6. .content {
  7.     background: #fff;
  8.     overflow: hidden;
  9.     border-radius: 5px;
  10.     -moz-border-radius: 5px;
  11.     -webkit-border-radius: 5px;
  12.     margin: 3% 3% 0 0;
  13. }
  14.  
  15. .sidebar {
  16.     float: left;
  17.     width: 30%;
  18. }
  19.  
  20. .rightSidebar {
  21.     background: #fff;
  22.     border-radius: 5px;
  23.     -moz-border-radius: 5px;
  24.     -webkit-border-radius: 5px;
  25.     margin: 3% 0 0 0;
  26. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1.  
  2.         <div class="mainContent">
  3.             <article class="content">
  4.                 <header>
  5.                     <h1>Aktualności</h1>
  6.                 </header>
  7.                 <content>
  8.                     <p>Lorem ipsum dolor sit amet dolor. Ut sagittis luctus, ante ipsum enim, sagittis vel, ipsum. Vestibulum consectetuer egestas, nunc posuere eget, bibendum a, bibendum ipsum ut leo non arcu. In id odio eget elit. Aenean aliquet. In hendrerit sed, eros. Vivamus elit a diam. Duis quam placerat elementum consequat. Cum sociis natoque penatibus et malesuada quis, accumsan congue, sem ipsum, vel eros porttitor egestas. Praesent feugiat. Cum sociis natoque penatibus et interdum vehicula. Vivamus pede. Nulla aliquet in, ipsum. Praesent feugiat. Proin ultrices urna, id lorem nec augue.</p>
  9.                 </content>
  10.             </article>
  11.         </div>
  12.  
  13.         <aside class="sidebar">
  14.             <div class="rightSidebar">
  15.                 <h1>Informacje</h1>
  16.                 <p>Lorem ipsum dolor sit amet magna. Nulla interdum elementum. Nam ut nulla ut orci consequat eu, vulputate aliquam euismod pede turpis id.</p>
  17.             </div>
  18.  
  19.             <div class="rightSidebar">
  20.                 <h1>Informacje</h1>
  21.                 <p>Lorem ipsum dolor sit amet magna. Nulla interdum elementum. Nam ut nulla ut orci consequat eu, vulputate aliquam euismod pede turpis id.</p>
  22.             </div>
  23.         </aside>
  24.  
[HTML] pobierz, plaintext

Zależy mi na nadaniu marginesów procentowych i aby były one takie same w obu panelach. W czym tkwi problem?
rad11
14.09.2014, 18:56:05
Mi sie wydaje ze % nie uzywa sie w marginesach jak juz em cm px.
o2w5n778
14.09.2014, 19:09:15
musi się dać używać bo w innych przypadkach mi działa, tylko tutaj nie trybi smile.gif
trueblue
14.09.2014, 19:25:52
Zdejmij overflow:hidden z .content.
o2w5n778
15.09.2014, 08:39:05
niestety nic to nie daje

Podam może inny przykład smile.gif
[HTML] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <title>TODO supply a title</title>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <link rel="stylesheet" href="style.css" type="text/css">
  7.     </head>
  8.     <body>
  9.         <div class="mainContainer">
  10.             <div class="left">
  11.                 <div id="insideleft">
  12.                     insleft
  13.                 </div>
  14.             </div>
  15.             <div class="right">
  16.                 <div class="insideright">
  17.                     insright
  18.                 </div>
  19.             </div>
  20.         </div>
  21.     </body>
  22. </html>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. .mainContainer {
  2.     width: 80%;
  3.     margin: 0 auto;
  4. }
  5.  
  6. .left {
  7.     width: 30%;
  8.     background: red;
  9.     float: left;
  10. }
  11.  
  12. .insideleft {
  13.     margin: 5% 0 0 0;
  14. }
  15.  
  16. .right {
  17.     width: 70%;
  18.     background: gray;
  19.     float: left;
  20.     margin: 5% 0 0 0;
  21. }
  22.  
  23. .insideright {
  24.     margin: 5% 0 0 0;
  25. }
[HTML] pobierz, plaintext

Chcę aby dla klas insideleft i insideright dać górny margines po 5%. Niestety w przypadku insideleft jest on kilkakrotnie mniejszy niż w insideright. W czym tkwi problem?
trueblue
15.09.2014, 09:15:04
margin/padding-top/bottom jest liczony na podstawie szerokości elementu. Ustaw po 50% szerokości to zobaczysz efekt.
o2w5n778
15.09.2014, 09:51:48
Tylko że w przypadku gdy nadam margin top dla klas left i right to wysokości są równe.
trueblue
15.09.2014, 09:58:20
Cytat(trueblue @ 15.09.2014, 10:15:04 ) *
margin/padding-top/bottom jest liczony na podstawie szerokości elementu. Ustaw po 50% szerokości to zobaczysz efekt.

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.