Witam,


proszę o pomoc w konstruowaniu definicji diva, który będzie miał wymuszone położenie względem nadrzędnego diva.

Bardziej obrazowo:

http://www.treningbiegacza.home.pl/roztoka/index.php


Chodzi mi o to aby poszczególne artykuły nie nachodziły na siebie, kiedy jest mniej treści oraz aby ten div "dodane przez..." zawsze był pod fotką.

[HTML] pobierz, plaintext 
.podpis{
	position:relative;
	color:#b9ceda;
	padding: 0;
	margin-top: 50px;
	margin-bottom:10px;
	text-align: right;
}
[HTML] pobierz, plaintext 

Zrezygnuj z position:relative; będzie łatwiej to ustawić.

<div id="pozycjoner">
<img>
<div> podpis</div>
</div>
I pozycjonujesz sobie pozycjonera tak jak chcesz.

Zrobiłabym tak

Artykuł dałabym w divie. Wewnątrz dałabym dwa divy jeden zawierałby img i podpis, który będzie się ustawiał pod nim. Drugi div zawierałby treść. Oba względem siebie np float: left więc ustawią się jeden obok drugiego.

To może napiszę jak mam to zrobione:

[HTML] pobierz, plaintext 
<div class="tresc">
<h1></h1>
<p class="h-t">DATA</p>
<div class="p-tr">TREŚĆ ARTYKUŁU</div>
<div class="podpis">PODPIS POD ARTYKUŁEM</div>
<div class="postlist-pager">PAGER</div>
</div>
[HTML] pobierz, plaintext 

Co ciekawe pod IE7 wyświetla się poprawnie, jedynie pod Firefoxem nie chce działać tak jakbym sobie tego życzył. To jakiś cud

Nie cud, tylko coś skopałeś bo to pod FF zwykle wyświetla się prawidłowo a pod IE nie. Pokaż style do tych pudełek. Acha, a gdzie jest obrazek? w którym pudełku?

Jedna uwaga znacznik <h1> powinien być na podstronie tylko w jednym miejscy. Tytuły artykułów wpakuj w h2 albo wyższy w zależności czy jakieś <hx> jeszcze gdzieś na tej stronie wykorzystujesz.

Obrazek jest w TREŚĆ ARTYKUŁU. To jest wszystko wyciągane z bazy danych i raczej muszę to załatwić w ten sposób, że jego położenie pozostanie niezmienione, bo nie uśmiecha mi się zmiana treści każdego artykułu w bazie, choć jeśli trzeba będzie...

[HTML] pobierz, plaintext 
@charset "utf-8";
/* CSS Document */
a{
	text-decoration:underline;
	color:#fff;
}
a:hover{
	color:#FF9900;
	text-decoration:none;
}
body{
	background:#183445;
	font-family:Verdana, Arial, Helvetica, sans-serif, Helvetica, sans-serif;
	margin:0;
	padding:0;
}
 
.pds{
	width:963px;
	position:relative;
	margin:0 auto;
 
}
.s{
background:url(images/tlo.jpg) repeat-y;
 
}
.t1{
	height:129px; position:relative;
}
.t1 div { position:absolute;}
.png{
 
	z-index:5; 
 
}
.img_mov{
 
	right:17px;
}
.m_s{ background:url(images/t3.jpg) no-repeat; height:48px; padding-left:30px; font-family:Arial, Helvetica, sans-serif;}
.m_s ul{
	display:inline;
	list-style:none;
 
}
.m_s ul li{
	float:left;
	display:inline;
	width:130px;
}
.m_s a{
	text-align:center;
	display:block;
	color:#CCCCCC;
	font-style:italic;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;
	background:url(images/m_bok.jpg) no-repeat center right;
	padding:16px 14px 16px 10px;
}
.m_s a:hover{
	background:url(images/mc2.jpg);
	color:#FFCC00;
}
 
 
img{ border:0;}
 
.left{
	width:233px;
	padding-left:21px;
	float:left;
}
 
.tekst{
 
	color:#fff;
	font-size:12px;
	line-height:15px;
}
.tresc{
	padding:25px;
}
.tekst h1{
	font-size:16px; 
	color:#fff;
	border-bottom:1px solid #406E89;
	margin:4px 0px;
	padding:8px 0px;
 
}
.tekst a{
	color:#fff;
	text-decoration:none;
}
.tekst a:hover{
	color:#FF9900;
}
 
.ng1{
	background:url(images/ng1.jpg) no-repeat;
	text-align:right; 
	font-size:18px; 
	color:#E2ECEF;
	padding:14px 30px 30px 10px;
}
 
.right{
	width:691px;
	float:left;
}
.menu{
	padding:5px 10px;
}
.menu ul{
	list-style:none;
	display:block;
	padding:5px;
	margin:0px;
 
}
.menu ul li{ padding:8px 0px 8px 25px; 
	border-bottom:1px solid #F4F5F7;
	display:block;
	background:url(images/m_img.jpg) left center no-repeat;
}
.menu a{
	display:block;
	text-decoration:none;
	color:#3D6883;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.menu a:hover{
	color:#FF6600;
}
 
.m-tekst{
	font-size:12px; 
	color:#666666; 
	padding:10px 15px;
}
.nowosci{
	background:url(images/n-tlo.gif);
	position:relative;
}
.nowosci1{
	position:absolute;
	top:20px; 
	left:140px;
	width:330px;
	font-size:12px;
	color:#fff;
}
.n-p{
	position:absolute;
	right:30px;
	top:20px;
	border:1px solid #2D5D76;
}
 
.h-t{
	color:#b9ceda;
	padding:0;
	margin:0;
	margin-bottom:10px;
}
.kategorie{
	color:#b9ceda;
	padding:0;
	margin:0;
	margin-bottom:10px;
	text-align: right;
}
.p-tr{
	width:650px;
	position:relative;
}
.p-tr img{
	border:3px solid #224559;
	margin:10px;
}
.p-tr ul{
	margin:5px 0px;
	background:#264e66;
	padding:10px 30px;
	width:60%;
}
.p-img{
	position:absolute;
	right:-180px;
}
.p-img img{
	border:2px solid #274C62;
}
.m-d{
	background:#264e66 url(images/m-d.gif) repeat-x;
	padding:20px;
}
 
.komentarze{
	padding:10px;
}
.komentarze input, .komentarze textarea{
	padding:4px;
	font-size:11px;
	color:#ffeea8;
	background:#183445;
	border:1px solid #54819c;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
 
.postlist-pager {
	text-align: right;
	margin-top: 30px;
	border-top: 1px solid silver;
}
 
 
 
.podpis{
	position:relative;
	color:#b9ceda;
	padding: 0;
	margin-top: 10px;
	margin-bottom:10px;
	text-align: right;
}
[HTML] pobierz, plaintext 

Masz tu:
http://blog.bexlab.pl/tutorials/artykul.html

Układ jaki Ci jest potrzebny. Działa pod FF i IE7. Popatrz na środek. Układ pudełek i style. Bordery dodane, żeby było widać co jest gdzie.

Dziękuję bardzo. O to mi chodziło. Dodałem tylko zapis:

[HTML] pobierz, plaintext 
clear:both;
[HTML] pobierz, plaintext 

Może ktoś tylko sprawdzić czy pod IE6 też jest ok??

Gdzie był potrzebny jeszcze?

Tylko tu go dałem:

[HTML] pobierz, plaintext 
.podpis{
	clear:both;
	color:#b9ceda;
	padding: 0;
	margin-top: 10px;
	margin-bottom:10px;
	text-align: right;
}
[HTML] pobierz, plaintext 

Pod IE6 jest OK.