Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Różne marginesy
o2w5n778
post
Post #1





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

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

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?


--------------------
https://pajlo.pl/
Go to the top of the page
+Quote Post
rad11
post
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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

Mi sie wydaje ze % nie uzywa sie w marginesach jak juz em cm px.
Go to the top of the page
+Quote Post
o2w5n778
post
Post #3





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

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

musi się dać używać bo w innych przypadkach mi działa, tylko tutaj nie trybi smile.gif


--------------------
https://pajlo.pl/
Go to the top of the page
+Quote Post
trueblue
post
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

Zdejmij overflow:hidden z .content.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
o2w5n778
post
Post #5





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

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

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?


--------------------
https://pajlo.pl/
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

margin/padding-top/bottom jest liczony na podstawie szerokości elementu. Ustaw po 50% szerokości to zobaczysz efekt.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
o2w5n778
post
Post #7





Grupa: Zarejestrowani
Postów: 235
Pomógł: 0
Dołączył: 10.12.2009

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

Tylko że w przypadku gdy nadam margin top dla klas left i right to wysokości są równe.


--------------------
https://pajlo.pl/
Go to the top of the page
+Quote Post
trueblue
post
Post #8





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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

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.



--------------------
https://kawalekkodu.pl
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 Aktualny czas: 21.08.2025 - 23:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn