[CSS]Rociąganie nadrzędnego diva w zależności od podrzędnego Opcje

[punoljoe]

Wiem , że temat jest odgrzewany , ale po kilkuuuu dobrych godzinach rozkminiania tego banalnego problemu mam dość. Chciałem rozciągnąć div#c1 i potem w ten sam sposób div#d1. Zróbmy jeden , a drugi będzie analogicznie rozwiązany.

[HTML] pobierz, plaintext 
 
 
<div id="x">
<div id="y"><br />PL | GB | D | FR | S &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br /></div>
 
<div id="z" ><br /> </div>
<div id="a" > <br /></div>
<div id="b" ><br /><br /> </div>
<div id="c" > 
<div id="c1" > 
 <br /><br /><br /><br /><br /><br />
</div>
</div> 
 
<div id="d" >
<div id="d1" >
 <br /><br /><br /><br /><br /><br /><br /><br />
</div>
 </div>
 
<div id="e" > <br /></div>
<div id="f" > <br /><br /><br /><br /></div>
 
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
html,body {
     background-color:orange;
     margin:auto;
width: 100%;
height:100%;
     text-decoration:none;
	  font-family:  Verdana;
	  line-height: 10px;
     }
 
div {
   margin: auto;
    border  : none;
    padding : auto;
 
}
 
#x {
width:100%;
}
 
#y {
background-color:#000;
width: 100%;
text-align: right;
clear: left;
float: left;
}
 
#z { 
width: 100%;
background-color:#FFF;
clear: left;
float: left;
}
 
#a { 
width: 100%;
background-color:#04B486;
clear: left;
float: left;
}
 
#b { 
width: 100%;
background-color:#007777;
clear: left;
float: left;
}
 
#c { 
overflow: hidden;
width: 100%;
clear: left;
float: left;
background-color:#FFF;
}
#c1 { 
width: 1000px;
background-color: red;
position:absolute;
left:50%;
margin-left:-500px;
}
 
 
#d { 
width: 100%;
background-color:brown;
 
  margin: auto;
        float : none;
display: block;
margin: auto;
padding:auto;
 
 
}
 
 
 
#e { 
width: 100%;
background-color:#FFF;
clear: left;
float: left;
}
 
#f { 
clear: both;
width: 100%;
background-color:#FFF;
}
[CSS] pobierz, plaintext 

próbowałem rozwiązania polegającego na wstawieniu clear:both;

[HTML] pobierz, plaintext 
<div id="c" > 
<div id="c1" > 
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="clear: both;"></div>
</div>
[HTML] pobierz, plaintext 

a nawet wynalazek typu :

[JAVASCRIPT] pobierz, plaintext 
function setheight() {
        if(document.getElementById('c1').offsetHeight > document.getElementById('c').offsetHeight) {
        document.getElementById('c').style.height = document.getElementById('c1').offsetHeight+'px';
        }}
[JAVASCRIPT] pobierz, plaintext 

jednak wciąż nie działa...
ktoś potrafi pomóc?

[Damonsson]

Co znaczy nie działa?

#c1 rozciąga się jak stare gacie na płocie.

Ten post edytował Damonsson 10.07.2012, 20:01:57

[punoljoe]

ale #c za nim nie spaceruje ... chcę aby rozciągało #c ... a tym samym kolejne dwa divy , które są później będą prawidłowo wyświatkone. Dane rozciągają #c1 , a div #c nie reaguje. Próbowałem przypisać wysokość #c przez pobranie przy pomocy js wartości wysokosci z #c1. No ale też nie zadziałało :/

Ten post edytował punoljoe 10.07.2012, 20:09:04

[Damonsson]

No to nie rozciąga się #c a nie #c1 jak napisałeś wyżej

DLatego, że pozycjonujesz #c1 absolute.

Co chcesz osiągnąć? Po co Ci div w divie?

Może próbujesz zrobić coś niepotrzebnie naokoło.

Ten post edytował Damonsson 10.07.2012, 20:12:36

[punoljoe]

na jednym z pasków chcę zrobić menu ( id="c1" ) a na drugim zawartość strony (id="d1"). Wcześniejsze i późniejsze to paseki na których są linki do wyboru języków , grafiki itd. Chcę div w divie, aby c1 i d1 wypośrodkować z szerokością 1000px. Po to też position : absolute;

Ten post edytował punoljoe 10.07.2012, 20:21:44

[Damonsson]

Nic z tego nie rozumiem sorry ;P

Najlepiej jakbyś pokazał grafikę jak to ma wyglądać.

Absolute używa się bardzo rzadko, a na pewno nie do wyśrodkowania elementów.

[kristaps]

Trochę trudno to zrozumieć, pewnie dlatego, że dopiero zaczynasz. Spróbuj przedstawić to w jakimś programie graficznym, od biedy może być paint.

Edit: Damonsson mnie ubiegł, no i to całkiem sporo.

Ten post edytował kristaps 10.07.2012, 20:37:25

[punoljoe]

http://www.fotosik.pl/pokaz_obrazek/1c51ba581fd4112f.html#

to czerwone pole , to div#c1. Z miejsca z którego się zaczyna (pomiędzy niebieskim a brązowym) powinien być pasek biały z div#c. (pod czerwonym + po bokach)

_______________________________
to jest rzeczywisty prtscr stanu obecnego.

Ten post edytował punoljoe 10.07.2012, 20:43:06

[droslaw]

Nie stosuje się tu pozycjonowanie absolutnego, Odpowiednie marginesy załatwią sprawę.
http://jsfiddle.net/bZDuP/1/

[punoljoe]

poważnie? ! Jeszcze raz przeanalizuję , uproszczę i wrzucę, bo mnie to umęczyło. DZIĘKUJĘ DROSLAW. Bardzo mi pomogłeś.

style.css

[CSS] pobierz, plaintext 
html,body {
     margin:0;
	 padding:0;
	  text-decoration:none;
	  font-family:  Verdana;
	  line-height: 10px;
     }
 
div {
margin: auto;
border  :0;
padding:0;
}
 
#x {
width:100%;
}
 
#y {
margin:0;
background-color:#000;
width: 100%;
text-align: right;
clear: left;
float: left;
}
 
#z { 
margin:0;
width: 100%;
background-color:#FFF;
clear: left;
float: left;
}
 
#a { 
margin:0;
width: 100%;
background-color:#04B486;
 
}
 
#b { 
margin:0;
width: 100%;
background-color:#007777;
 
}
 
#c { 
 margin:0;
overflow: hidden;
width: 100%;
background-color:#FFF;
}
#c1 { 
margin:auto;
width: 1000px;
background-color: red;
}
 
 
#d { 
margin:0;
width: 100%;
background-color:brown;
overflow: hidden;
}
#d1 { 
margin:auto;
width: 1000px;
background-color:green;
 
}
 
 
#e { 
margin:0;
width: 100%;
background-color:#bbb;
}
 
#f { 
margin:0;
clear: both;
width: 100%;
background-color:#ddd;
bottom: 0;
position:fixed;
 
}
[CSS] pobierz, plaintext 

index.html

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 
<head>
	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
<META HTTP-EQUIV="Creation-date" CONTENT="2012.06.03">
<META NAME="Description" CONTENT="">
<META NAME="Author" CONTENT="punoljoe">
<META NAME="Generator" CONTENT="">
<TITLE> </TITLE>
<link rel="shortcut icon" href="img/ikona.ico">
 
<link rel='stylesheet' type='text/css' id='styl' href='style.css'/>
 
</HEAD>
<body>
 
<div id="x">
	<div id="y"><br />PL | GB | D | FR | S        <br /><br /></div>
 
	<div id="z" ><br /> </div>
	<div id="a" > <br /></div>
	<div id="b" ><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div>
	<div id="c" > 
		<div id="c1" > 
		<br /><br /><br /><br />
		</div>
	</div> 
 
	<div id="d" >
		<div id="d1" >
		<br /><br /><br /><br /><br /><br />
		</div>
	</div>
 
	<div id="e" > <br /><br /></div>
	<div id="f" > <br /><br /><br /><br /><br /><br /></div>
 
</div>
 
</BODY>
</HTML>
[HTML] pobierz, plaintext 

Szkielet stronki , gdzie:
div#x - główny kontener
div#y - kontener językowy (tak ładnie sobie go nazywam )
div#z,a,b,c,d,e,f- divy będące kolejno pod sobą na 100% strony;
div#c1 i div#d1 - są to divy wypośrodkowane, o szerokości 1000px. Wraz z zawartością w nich rozwijają się rodzice , czyli div#c i div#d.

dodam tutaj kilka uwag (dla większości zapewne oczywistych), które mogą się przydać ludziom przechodzącym z tabelek na divy (tak jak ja się z tym męczyłem,męczę). Tak więc jeśli chcecie wypośrodkować div, są conajmniej dwie metody. Pierwsza sprawdza się przy rozwijaniu rodzica, druga nie ( z racji position:absolute;). 1) ramka wypośrodkowane ma mieć margin:auto; ,reszta margin:0; 2) position:absolute; left:50%; margin-left:-500px; (gdy pole wypośrodkowane ma 1000px).

Czy klauzury
clear: left;
float: left;
są konieczne? raczej nie, ale tak działa i nie szkodzi

Szkoląc się z css w kontekście divów napotkałem informację, że divy nie reagują na procentowe odniesienia, jeśli w nadrzędnym kontenerze nie ma podanego wymiaru. Tak więc prawdopodobnie przy określeniach np. 29% ... nie będzie działało. Chyba...

za laicki post wybaczcie, ale dziś przeszukałem duży kawałek internetu... licząc właśnie po cichu, że coś takiego znajdę... nie znalazłem. Tak więc sam go teraz dumnie dodam Pozdrawiam i jeszcze raz dzięki za pomoc dla Droslawa ... i innym za chęci.

Ten post edytował punoljoe 10.07.2012, 22:47:52