Forum PHP.pl > [HTML][CSS] Div pod divem

Pomoc - Szukaj - Użytkownicy - Kalendarz

adam882

28.06.2011, 16:47:53

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 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Tytuł</title>
<style type="text/css">
.blok{width:100px; border:1px solid #dedede; margin:5px; padding:5px; float:left;
</style>
</head>
<body>
<div style="width:400px;">
	<div class="blok">sds</div>
	<div class="blok">aaa<br />aaa<br />adasdsadsad</div>
	<div class="blok">cccc<br />ccc</div>
	<div class="blok">ddd<br />ddd<br />ddd<br />ddd</div>
	<div class="blok">eeee</div>
	<div class="blok">eee<br />ee</div>
</div>
</body>
</html>
 
[HTML] pobierz, plaintext

Ma ktoś może jakieś pomysły?

kefirek

28.06.2011, 16:55:52

display:inline;

adam882

28.06.2011, 17:16:46

nie działa

Daimos

28.06.2011, 17:20:38

[HTML] pobierz, plaintext 
<style type="text/css">
.blok{width:100px; border:1px solid #dedede; margin:5px; padding:5px; float:left;
</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 
<style type="text/css">
.blok{width:90px; border:none; margin:0; padding:5px; float:left;}
</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

adam882

28.06.2011, 17:30:23

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ć.

Daimos

28.06.2011, 17:33:04

Chłopie, napisałem Ci co zrobić, żeby nie było przerw pod divami, sprawdziłeś?

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Tytuł</title>
<style type="text/css">
.bezprzerwy{width:100px; border:1px solid #dedede; margin:0;}
</style>
</head>
<body>
<div class="bezprzerwy">sds</div>
<div class="bezprzerwy">sds2</div>
<div class="bezprzerwy">sds3</div>
</body>
</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

adam882

28.06.2011, 17:50:18

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.

Daimos

28.06.2011, 18:03:54

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

yta

28.06.2011, 20:10:09

Zobacz człowieczku tak najprościej , możesz także kombinować z marginesami i floatami

[HTML] pobierz, plaintext 
 
<html>
<head>
<style type="text/css">
 
.sds { width:40px; height:20px; border:2px solid black; position:relative; left:10px; }
.aaa { width:40px; height:20px; border:2px solid black ; position:relative; left:10px; top:5px;}
.ccc { width:40px; height:20px; border:2px solid black ; position:relative; left:10px; top:10px; }
.ddd { width:40px; height:20px; border:2px solid black ; position:relative; left:60px; top:-70px; }
.eee {  width:40px; height:20px; border:2px solid black ; position:relative; left:60px; top:-60px; }
.eeef { width:40px; height:20px; border:2px solid black ; position:relative; left:110px; top:-120px; }
 
</style>
 
</head>
<body>
 
<div class="sds">sds</div>
<div class="aaa">aaa</div>
<div class="ccc">ccc</div>
<div class="ddd">ddd</div>
<div class="eee">eee</div>
<div class="eeef">eeef</div> 
 
</body>
 
</html>
 
[HTML] pobierz, plaintext

Tutaj ustaw odpowiednie wielkści elementom i ładnie sobie poustawiasz

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.