Wymuszenie położenia div Opcje

[primo]

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 

[JoShiMa]

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

[wookieb]

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

[JoShiMa]

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.

[primo]

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował primo 29.08.2008, 10:17:30

[JoShiMa]

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

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.

[primo]

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 

[JoShiMa]

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.

[primo]

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??

[JoShiMa]

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

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

Gdzie był potrzebny jeszcze?

[primo]

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 

[Kreton]

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??

Pod IE6 jest OK.