Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [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?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
o2w5n778
post
Post #2





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 (IMG:style_emoticons/default/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?
Go to the top of the page
+Quote Post

Posty w temacie
- o2w5n778   [HTML][CSS] Różne marginesy   14.09.2014, 17:28:01
- - rad11   Mi sie wydaje ze % nie uzywa sie w marginesach jak...   14.09.2014, 18:56:05
- - o2w5n778   musi się dać używać bo w innych przypadkach mi dzi...   14.09.2014, 19:09:15
- - trueblue   Zdejmij overflow:hidden z .content.   14.09.2014, 19:25:52
- - o2w5n778   niestety nic to nie daje Podam może inny przykład...   15.09.2014, 08:39:05
- - trueblue   margin/padding-top/bottom jest liczony na podstawi...   15.09.2014, 09:15:04
- - o2w5n778   Tylko że w przypadku gdy nadam margin top dla klas...   15.09.2014, 09:51:48
- - trueblue   Cytat(trueblue @ 15.09.2014, 10:15:04...   15.09.2014, 09:58:20

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 6.10.2025 - 14:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn