リストの隣に写真を固定したい。

この添付ファイルのようにリストの隣に写真を固定しようとして、position:absolute で調整したんですけど、それだとユーザーがウィンドウを小さくしたりすると場所が変わります。他にどのような方法があるのでしょうか？？お願いします。

html
1<!-- Assignment 18 % COMP112 Tomofumi Kimura index page-->
2<!DOCTYPE html>
3<html lang="en">
4	<head>
5	<!-- kimto341 child care-->
6		<meta charset = "UTF-8">
7		<link rel="stylesheet" type = "text/css" href="style.css">
8		<title>Child Care HomePage</title>
9	</head>
10	<body>
11	<!-- Main Heading-->
12	<div id = "header">
13	<h1>Welcome to Mama Bear Child Care</h1>
14	</div>
15	<!-- Navigation Area -->
16	<div id = "nav">
17	<ul>
18		<li><a class="active" href="index.html">Home</a></li>
19		<li><a href = "philosophy.html">Our Philosophy</a></li>
20		<li class = "dropdown"><a href="javascript:void(0)" class = "dropbtn">Our Centre</a>
21		<div class = "dropdown-content">
22		<a href="accelerated_programme.html">Mama Bear Accelerated Programme</a>
23		<a href="environment.html">Our Environment</a>
24		<a href="goals.html">Our Goals</a>
25		</div>
26		</li>
27
28
29		<li><a href="childs_day.html">The Childs Day</a></li>
30		<li><a href="settling.html">Settling in</a></li>
31		<li><a href = "staff.html">Our Staff</a></li>
32		
33	</ul>
34	</div>
35
36	<!-- Contact Area -->
37	<div id = "contacts">
38		<h3 id="contact_us">Contact Us</h3>
39		<h4>If you have any questions about the Mama Bear please contact us at:</h4>
40			<ul>
41				<li><address><a href="mailto:enquiries@mamaBear.co.nz">enquiries@mamaBear.co.nz</a></address></li>
42				<li>123 Salmon Lake Lane</li>
43				<li>Big Bear City</li>
44			</ul>
45	</div>
46	<!-- Main Area -->
47	<div class="content">
48		<h2>Our Philosophy</h2>
49
50		<ul id = "philo_list">
51			<li id = "list1">We believe in positive respectful partnerships between <br>children, families, caregivers and teachers where we value our community's diversity.</li>
52			<li id = "list2">We aim to support children's learning through a stimulating prepared environment that<br> nurtures and develops dispositions for learning and provides opportunities for success,<br> challenges, individual interests, and freedom of choice.</li>
53
54			<li id = "list3">Our community fosters contextual, collaborative and reciprocal learning, where teachers are facilitators, carers and friends of the children.</li>
55			<li id="list4">We empower children to be independent, competent, confident,<br> compassionate and responsible human beings, and most importantly to have fun in the process.</li>
56
57			<li id = "download">You can download <a href = "../prospectus.pdf" download="prospectus_file"><strong><span>the Mama Bear Child Care Prospectus(pdf)</span></strong></a>,<br> which contains much of the information from this web site in print form. </li>
58
59
60			
61		</ul>
62		<figure id = "baby">
63		<img src = "../Images/babypaint.jpg">
64		</figure>
65	</div>
66	<!-- Footer area -->
67	<div id = "footer">
68		<footer>This website was created for a University project.  The content is largely fictional and no services are actually being offered.</footer>
69		
70	</div>
71		
72	</body>
73</html>

css
1/* COMP112 Assignment 18% tkimura Tomofumi Kimura stylesheet*/ 
2body{
3	background-color:rgb(224, 200, 202);
4	margin:0px;
5}
6
7/* main heading*/
8#header h1{
9	background-color:red;
10	text-align: center;
11	width:100%;
12	margin:0px;
13	padding:20px;
14	position:fixed;
15	top:0;
16	left:0;
17	right:0;
18}
19/* Navigation whole area */
20#nav{
21	background-color:rgb(87, 209, 204);
22	position:fixed;
23	top:75px;
24	left:0;
25	right:0;
26	width:100%;
27	margin:0px;
28}
29/* Navigation whole ul ara */
30#nav ul{
31	max-width:100%;
32	list-style-type:none;
33	padding:0;
34	margin-top:0px;
35	margin-left:150px;
36	margin-right:auto;
37	margin-bottom:auto;
38	overflow:hidden;
39	background-color:inherit;
40}
41/* Navigation list area*/
42#nav li{
43	float:left;
44	
45
46}
47
48/* Navigation list link, DropDown menu*/
49#nav li a, .dropbtn{
50	display:block;
51	color:inherit;
52	text-align:center;
53	padding:14px 30px 10px 30px;
54	text-decoration: none;
55
56
57}
58/* when user move the pointer to the place */
59#nav li a:hover, .dropdown:hover .dropbtn{
60	background-color:yellow;
61}
62
63#nav li.dropdown{
64	display:block;
65}
66/* drop down area*/
67.dropdown-content{
68	display:none;
69	position:absolute;
70	background-color:#f9f9f9;
71	min-width:100px;
72	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
73	z-index: 1;
74}
75/* drop down list element*/
76.dropdown-content a{
77	color:black;
78	padding:12px 16px;
79	text-decoration: none;
80	display:block;
81	text-align:left;
82}
83/* when mouse is over the drop down list element */
84.dropdown-content a:hover{
85	background-color:#f1f1f1;
86}
87
88.dropdown:hover .dropdown-content{
89	display:inline;
90}
91
92/* Contact Us Area*/
93
94#contacts{
95	position:fixed;
96	right:10px;
97	float:right;
98	width:220px;
99	margin-left:20px;
100	border-radius:25px;
101	border:2px solid #73AD21;
102	background-color:yellow;
103	padding:10px;
104}
105#contact_us{
106	color:red;
107}
108
109/* Main Area*/
110.content{
111	margin-top:170px;
112	margin-right:20px;
113	
114	height:auto;
115
116}
117
118
119/* h2 Mama Bear CHild Care heading */
120.content h2{
121	text-align: center;
122	color:rgb(0, 102,255);
123}
124.content h3{
125	text-align: center;
126
127}
128.content h4{
129	text-align:center;
130
131}
132.content span{
133	color:red;
134}
135#attention{
136	text-align:center;
137	background-color:rgb(153,204,255);
138	border:dotted 2px ;
139	padding-left:-10px;
140	border-radius: 40px;
141}
142
143/* Education Services UList*/
144.content ul{
145	margin:auto;
146	border-radius: 50px;
147	border:2px solid #73AD21;
148	padding:40px;
149	padding-top:10px;
150	
151	height:140px;
152	background-color:rgb(153,204,255);
153	list-style-image: url('../Images/list_image/icn_12.gif');
154}
155.content li{
156	padding:20px;
157}
158/* Philosophy page List */
159#philo_list{
160	border-radius:50%;
161	background-color:white;
162	width:800px;
163	height:500px;
164}
165#philo_list li{
166	margin-left:30px;
167	font-size:15px;
168}
169/* First list in philosophy List */
170#philo_list #list1{
171	margin-left:130px;
172	margin-top:50px;
173}
174/* Second list in philosophy List*/
175#philo_list #list2{
176	margin-left:160px;
177}
178/* Third List in philosophy List*/
179#philo_list #list3{
180	margin-left:180px;
181}
182
183/* Fourth List in philosophy List*/
184#philo_list #list4{
185	margin-left:200px;
186}
187
188/* Fifth List in philosophy List*/
189#philo_list #download{
190	margin-left:200px;
191	color:blue;
192}
193#philo_list #download span{
194	color:red;
195	text-decoration: underline;
196
197}
198
199#baby{
200	position:absolute;
201	bottom:150px;
202	left:160px;
203}
204
205/* Staff page List*/
206
207.content #teachers{
208	background-color:none;
209}
210.content #teachers li{
211	list-style-image: none;
212	padding:5px;
213
214
215}
216
217/* Footer area*/
218
219#footer{
220	margin-top:30px;
221	margin-right:0px;
222	position:relative;
223	background-color:rgb(87, 209, 204);
224	color:inherit;
225	padding:30px;
226	width:100%;
227	height:10px;
228}

行動規範の内容に同意します

回答2件

ベストアンサー

先程の回答はなしで、
backgroundに指定するのはどうでしょうか。

css
1#philo_list {
2   background-image: url(../Images/babypaint.jpg);
3   background-repeat: no-repeat;
4   background-position: 50px center; /*値は修正してください*/
5}

投稿2017/05/16 08:21

yukabyo

総合スコア135

TomofumiKimura

2017/05/16 08:33

円の後ろ側に行ってしまいます。

yukabyo

2017/05/16 08:36

私がテストしたところきちんと表示されているようなのです。どのような状況かわからず、、申し訳ありませんm(__)m

TomofumiKimura

2017/05/16 08:41

え、本当ですか？？

yukabyo

2017/05/16 08:42

https://jsfiddle.net/o6jz2yo4/ こんな感じでしょうか？m(__)m

TomofumiKimura

2017/05/16 08:44

あ、できました。ありがとうございました。！！！！

yukabyo

2017/05/16 08:45

よかったです(*^^*)いろいろすみませんm(__)m

行動規範の内容に同意します

こんにちは～
positionを使用するのであれば
position:absoluteの基準点にしたい位置にposition:relativeをつけてあげればいいじゃないかと思います

このように一個divを作って囲んでから

html
1<div class="hoge">
2        <ul id = "philo_list">
3            <li id = "list1">We believe in positive respectful partnerships between <br>children, families, caregivers and teachers where we value our community's diversity.</li>
4            <li id = "list2">We aim to support children's learning through a stimulating prepared environment that<br> nurtures and develops dispositions for learning and provides opportunities for success,<br> challenges, individual interests, and freedom of choice.</li>
5
6            <li id = "list3">Our community fosters contextual, collaborative and reciprocal learning, where teachers are facilitators, carers and friends of the children.</li>
7            <li id="list4">We empower children to be independent, competent, confident,<br> compassionate and responsible human beings, and most importantly to have fun in the process.</li>
8
9            <li id = "download">You can download <a href = "../prospectus.pdf" download="prospectus_file"><strong><span>the Mama Bear Child Care Prospectus(pdf)</span></strong></a>,<br> which contains much of the information from this web site in print form. </li>
10
11
12
13        </ul>
14        <figure id = "baby">
15        <img src = "../Images/babypaint.jpg">
16        </figure>
17</div>

CSSに追加、変更

css
1.hoge {
2   position: relative;
3   width: 800px;
4   height: 500px;
5   margin: auto;
6}
7
8#baby {
9   position:absolute;
10   bottom:0; /* ここの値は修正してください */
11   left:0; /* ここの値は修正してください */
12}
13