Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Div pod divem
adam882
post
Post #1





Grupa: Zarejestrowani
Postów: 289
Pomógł: 1
Dołączył: 2.11.2007

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

Witam

Chcę wykombinować, aby bloki <div> znajdowały się obok siebie, ale również nie miały przerw pod sobą. Mam taki kod:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  4. <title>Tytuł</title>
  5. <style type="text/css">
  6. .blok{width:100px; border:1px solid #dedede; margin:5px; padding:5px; float:left;
  7. </style>
  8. </head>
  9. <body>
  10. <div style="width:400px;">
  11. 	<div class="blok">sds</div>
  12. 	<div class="blok">aaa<br />aaa<br />adasdsadsad</div>
  13. 	<div class="blok">cccc<br />ccc</div>
  14. 	<div class="blok">ddd<br />ddd<br />ddd<br />ddd</div>
  15. 	<div class="blok">eeee</div>
  16. 	<div class="blok">eee<br />ee</div>
  17. </div>
  18. </body>
  19. </html>
  20.  
[HTML] pobierz, plaintext

Ma ktoś może jakieś pomysły?
Go to the top of the page
+Quote Post
kefirek
post
Post #2





Grupa: Zarejestrowani
Postów: 781
Pomógł: 256
Dołączył: 29.06.2008

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



display:inline;

Ten post edytował kefirek 28.06.2011, 16:57:25
Go to the top of the page
+Quote Post
adam882
post
Post #3





Grupa: Zarejestrowani
Postów: 289
Pomógł: 1
Dołączył: 2.11.2007

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

nie działa
Go to the top of the page
+Quote Post
Daimos
post
Post #4





Grupa: Zarejestrowani
Postów: 1 319
Pomógł: 118
Dołączył: 26.11.2003
Skąd: Lublin

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

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. .blok{width:100px; border:1px solid #dedede; margin:5px; padding:5px; float:left;
  3. </style>
[HTML] pobierz, plaintext

No przecież widać wyraźnie, że ustaliłeś marginesy 5px no i obramowanie 1px dla każdego diva z klasą .blok
To dziwisz się, że są oddalone? No i na końcu dlaczego nie zamknąłeś klamerki? Zmień to na:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. .blok{width:90px; border:none; margin:0; padding:5px; float:left;}
  3. </style>
[HTML] pobierz, plaintext

I nie będziesz miał odstępu, a width celowo 90px, zamiast 100, bo padding 5px doda Ci do szerokości, więc na Twoich stylach w sumie uzyskujesz 110px na diva

Ten post edytował Daimos 28.06.2011, 17:26:13
Go to the top of the page
+Quote Post
adam882
post
Post #5





Grupa: Zarejestrowani
Postów: 289
Pomógł: 1
Dołączył: 2.11.2007

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

chodzi mi bardziej o te przerwy pod divami. Widziałem kilka stronek, na których nie było odstępów pomiędzy górnym, a dolnym blokiem, ale nie wiem jak to zrobić.
Go to the top of the page
+Quote Post
Daimos
post
Post #6





Grupa: Zarejestrowani
Postów: 1 319
Pomógł: 118
Dołączył: 26.11.2003
Skąd: Lublin

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

Chłopie, napisałem Ci co zrobić, żeby nie było przerw pod divami, sprawdziłeś?
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  4. <title>Tytuł</title>
  5. <style type="text/css">
  6. .bezprzerwy{width:100px; border:1px solid #dedede; margin:0;}
  7. </style>
  8. </head>
  9. <body>
  10. <div class="bezprzerwy">sds</div>
  11. <div class="bezprzerwy">sds2</div>
  12. <div class="bezprzerwy">sds3</div>
  13. </body>
  14. </html>
[HTML] pobierz, plaintext

Zobacz, widzisz tu jakieś przerwy? Wstaw to sobie w HTML. Nie ma przerw, bo jest margines na 0, no to w czym masz problem? Sprawdź najpierw

Ten post edytował Daimos 28.06.2011, 17:33:34
Go to the top of the page
+Quote Post
adam882
post
Post #7





Grupa: Zarejestrowani
Postów: 289
Pomógł: 1
Dołączył: 2.11.2007

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

Może źle sprecyzowałem pytanie, ale w każdym razie dzięki za pomoc. Chodziło mi mniej więcej o coś takiego: http://img204.imageshack.us/img204/8438/41530154.jpg . Nigdy nie uczyłem się css i rozwiązanie może okazać się bardzo proste, ale póki co myślę nad zrobieniem 3 kolumn z divów, w które będę wrzucać bloki.
Go to the top of the page
+Quote Post
Daimos
post
Post #8





Grupa: Zarejestrowani
Postów: 1 319
Pomógł: 118
Dołączył: 26.11.2003
Skąd: Lublin

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

No to bardzo źle "precyzujesz" pytanie (tak czas teraźniejszy). Bo w sumie dalej nie wiem o co Tobie chodzi. Czy chodzi Ci o odstęp który zaznaczyłeś tym czarnym paskiem?
Pamiętaj, że w każdym divie, ustaliłeś margines całkowity (czyli góra, prawa, dół i lewa) więc dlatego te odstępy na dole będą, daj w tych Twoich divach margin-top: 5px; zamiast margin: 5px; i nie będzie go na dole
Go to the top of the page
+Quote Post
yta
post
Post #9





Grupa: Zarejestrowani
Postów: 201
Pomógł: 3
Dołączył: 10.04.2010

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

Zobacz człowieczku tak najprościej , możesz także kombinować z marginesami i floatami (IMG:style_emoticons/default/smile.gif) 

[HTML] pobierz, plaintext 
  1.  
  2. <html>
  3. <head>
  4. <style type="text/css">
  5.  
  6. .sds { width:40px; height:20px; border:2px solid black; position:relative; left:10px; }
  7. .aaa { width:40px; height:20px; border:2px solid black ; position:relative; left:10px; top:5px;}
  8. .ccc { width:40px; height:20px; border:2px solid black ; position:relative; left:10px; top:10px; }
  9. .ddd { width:40px; height:20px; border:2px solid black ; position:relative; left:60px; top:-70px; }
  10. .eee {  width:40px; height:20px; border:2px solid black ; position:relative; left:60px; top:-60px; }
  11. .eeef { width:40px; height:20px; border:2px solid black ; position:relative; left:110px; top:-120px; }
  12.  
  13. </style>
  14.  
  15. </head>
  16. <body>
  17.  
  18. <div class="sds">sds</div>
  19. <div class="aaa">aaa</div>
  20. <div class="ccc">ccc</div>
  21. <div class="ddd">ddd</div>
  22. <div class="eee">eee</div>
  23. <div class="eeef">eeef</div> 
  24.  
  25. </body>
  26.  
  27. </html>
  28.  
[HTML] pobierz, plaintext


Tutaj ustaw odpowiednie wielkści elementom i ładnie sobie poustawiasz (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« 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: 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: 24.08.2025 - 11:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn