[CSS]Przyleganie do prawej krawedzi elementu nadrzednego Opcje

[DerekDX]

Panowie mam strasznie głupie pytanie, az wstyd mi o tym pisac.

Jak zrobic aby element przylegal do prawej krawedzi elementu nadrzenego.

mam 2 elementy ktore sa zamieszczone w divie i chcialbym aby jeden z nich przylegal do lewej krawedzi elementu nadrzednego a drogi do prawej

[luck]

[CSS] pobierz, plaintext 
float:left
[CSS] pobierz, plaintext 

oraz

[CSS] pobierz, plaintext 
float:right
[CSS] pobierz, plaintext 

[DerekDX]

No wlasnie próbowalem z wykorzystaniem tej funkcji ale nadal nie dziala to jak bym chciał

Mojm celem jest stworzenie czegos takiego.



Uploaded with ImageShack.us

mój css wyglada tak:

[CSS] pobierz, plaintext 
div#tresc {
display:block;
margin-left: 10%;
margin-right: 10%;
background-color:#36F;
positon:absolute; top:120px;
display:block;
}
 
div#tabela {
position:absolute;top: 120px; 
float:right;
display:block;
width:70%;
float:right;
margin-left: 10px;
background-color:#909;
}
 
div#menu {
width: auto;
position:absolute; top: 120px; left:0px;
float:left;
display:block;
background-color:#300;
z-index:-5
}
[CSS] pobierz, plaintext 

gdzie div#tresc jest rodzicem a menu i tabela jest dziecmi

w HTMLu wyglada to tak:

[HTML] pobierz, plaintext 
<div id="tresc">
<div id="menu"></div>
<div id="tabela"></div>
</div>
[HTML] pobierz, plaintext 

[mortus]

Albo używasz pozycjonowania (absolutnego, relatywnego), albo stosujesz atrybut opływania (float).

[krzysztof_kf]

Ale nabazgrane masz przykład pozdrawiam .

[CSS] pobierz, plaintext 
 
<style type="text/css">
 
body {
margin: 0;
}
 
#content {
width: 800px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #3399ff;
border-right: 1px solid #3399ff;
}
 
#content-left {
width:200px;
height: 200px;
margin: 100px 0 0 0;
float: left;
border: 1px solid #ff0000;
}
 
#content-right {
width:500px;
height: 500px;
margin: 100px 0 0 96px;
float: left;
border: 1px solid #ff0000;
}
</style>
<div id="content">
<div id="content-left"></div>
<div id="content-right"></div>
[CSS] pobierz, plaintext 

[luck]

Poza tym co napisał kolega @mortus, popraw literówkę w div#tresc (chodzi o "position"). Usuń pozycjonowanie absolutne dla osadzonych warstw i wtedy już sobie pewnie poradzisz.

[DerekDX]

dzieki po usunieciu pozycjonowania wszystko chodzi jak nalezy

Możecie mi jeszcze podpowiedzic jak ustawic te dwa elementy w jednej lini?

[krzysztof_kf]

tzw pokaż kod

[DerekDX]

[CSS] pobierz, plaintext 
div#tresc {
	margin-top:120px;
	width:1000px;
margin-left: auto;
margin-right: auto;
background-color:#36F;
positon:absolute; top:120px;
display:block;
vertical-align:text-top;
}
[CSS] pobierz, plaintext 

[CSS] pobierz, plaintext 
div#tabela {
	float:left;
	display:block;
	width:85%;
	float:right;
	margin-left: 10px;
	background-color:#909;
 
}
[CSS] pobierz, plaintext 

[CSS] pobierz, plaintext 
div#menu {
 
width:15%;
float:left;
display:block;
clear:none;
}
[CSS] pobierz, plaintext 

a tak to wyglada po stronie htmla

[HTML] pobierz, plaintext 
<div id="tresc">
<div id="menu"></div>
<div id="tabela"></div>
</div>
[HTML] pobierz, plaintext 

[krzysztof_kf]

w selektorze zmień na same float: left; bo dałeś właśnie to i drugi raz float: right;

[CSS] pobierz, plaintext 
 
div#tabela {
float: left;
[CSS] pobierz, plaintext 

Ten post edytował krzysztof_kf 30.04.2010, 22:44:24

[mortus]

@krzysztof_kf A co to zmieni?

Chodzi o to, że szerokość twoich div-ów zagnieżdżonych 15% (menu width) + 85% (tabela width) + 10px (tabela margin-left) przekracza szerokość elementu nadrzędnego o 10px.
Zamiast używać margin-left można elementowi div o id tabela nadać po prostu 84% lub 83% szerokości, choć jeśli szerokość nadrzędnego diva jest określona (tak jak w tym przypadku jest to 1000px), to równie dobrze można zastosować konkretne wartości szerokości (menu width: 150px;, tabela width: 840px; bez margin-left).

PS: Jeśli szerokość Twojej całej strony ma wynosić 1000px, to musisz wiedzieć, że w niektórych przeglądarkach od razu pojawi się pionowy pasek przewijania, jeżeli ktoś korzysta z rozdzielczości 1024x768px, a wiele osób z takiej rozdzielczości korzysta. Proponuję zawczasu zmniejszyć szerokość nadrzędnego div-a o 20, 30px.

Ten post edytował mortus 30.04.2010, 22:55:46

[DerekDX]

@krzysztof_kf A co to zmieni?

Chodzi o to, że szerokość twoich div-ów zagnieżdżonych 15% (menu width) + 85% (tabela width) + 10px (tabela margin-left) przekracza szerokość elementu nadrzędnego o 10px.
Zamiast używać margin-left można elementowi div o id tabela nadać po prostu 84% lub 83% szerokości, choć jeśli szerokość nadrzędnego diva jest określona (tak jak w tym przypadku jest to 1000px), to równie dobrze można zastosować konkretne wartości szerokości (menu width: 150px;, tabela width: 840px; bez margin-left).

PS: Jeśli szerokość Twojej całej strony ma wynosić 1000px, to musisz wiedzieć, że w niektórych przeglądarkach od razu pojawi się pionowy pasek przewijania, jeżeli ktoś korzysta z rozdzielczości 1024x768px, a wiele osób z takiej rozdzielczości korzysta. Proponuję od razu zmniejszyć szerokość nadrzędnego div-a o 20, 30px.

w sumie masz racje to sa pozostałości po wczesniejszej wesji cssa dzieki na podpowidz i bede musial bardziej przygldac sie kodowi bo popelniam wiele bledow ktore nie powinny sie zdarzac

[krzysztof_kf]

@mortus dzięki za poprawkę pomyliło mi się z ustawieniem elementów w linii

[CSS] pobierz, plaintext 
<style type="text/css">
div#tresc {
	margin-top:120px;
	width:1000px;
margin-left: auto;
margin-right: auto;
background-color:#36F;
positon:absolute; top:120px;
display:block;
vertical-align:text-top;
}
 
div#tabela {
	width:85%;
	float:left;
	background-color:#909;
 
}
 
div#menu {
 
width:13%;
height: 200px;
float:left;
}
 
</style>
 
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="tresc">
<div id="menu"></div>
<div id="tabela"></div>
[HTML] pobierz, plaintext