- 질문 게시판입니다.
Date 15/11/06 09:12:47
Name   얼그레이
File #1   rabbit.png (75.1 KB), Download : 26
File #2   markup.png (100.0 KB), Download : 27
Subject   css 질문입니다.




css 작업중인데 막혀서 질문드립니다.

이 css 작업을 어떻게 해야 토끼가 앞으로 오나요?
일단 항목으로 작업해서 float를 띄우긴 했는데.. 그냥 이미지를 하나로 자르는게 더 좋을까요?

<ul class="animal">
                                <li class="rabit" src="earth/rabbit.animal" alt="토끼" />
                                <li class="carrot" src="earth/carrot.food" alt="당근" />
</ul>

밑에 문서 첨부합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>rabbit and landscape</title>
        <style type="text/css">
                body{width:580px;height:450px;}
                #picture {width:573px;height:432px;border:2px solid #000;overflow:hidden;}
                #picutre #sky .animal{float:right;width:180px;height:150px;}
                #picture #earth{background:url(earth/field.earth)no-repeat 0 0;height:240px;position:relative;}
                #picture #earth .aniaml{position:absolute;left:208px;bottom:44px;}
                #picture #earth .aniaml li{float:left;}
                #picture #earth .plant .left{position:absolute;left:50px;bottom:84px;}
                #picture #earth .plant .right{position:absolute;right:20px;bottom:84px;float:left;overflow:hidden;width:165px;height:210px;}
                #picture #earth .plant .right .tree{float:left;width:20px;}
                #picture #earth .water{position:absolute;bottom:0;left:0;}
                #picture #earth .plant{position:absolute;bottom:0;right:0;}
                #picture #earth .plant li{float:left;letter-spacing:-5px;}
                #copyright{display:none;}
        </style>
</head>
<body>
        <div id="picture">
                <div id="sky">
                        <h1><img src="sky/red_sun.light" alt="sun" /></h1>
                        <div class="animal">
                                <img src="bird/five_birds.animal" alt="독수리오형제" />
                        </div>
                </div>
                <div id="earth">
                        <ul class="animal">
                                <li class="rabit" src="earth/rabbit.animal" alt="토끼" />
                                <li class="carrot" src="earth/carrot.food" alt="당근" />
                        </ul>
                        <div class="plant">
                                <div class="left">
                                        <img src="tree/tree1.plant" alt="나무" />
                                </div>
                                <div class="right">
                                        <img src="tree/two_tree.plant" width=165 height=210 alt="나무" />
                                        <img class="tree" src="tree/trees.plant" alt="나무" />
                                </div>
                        </div>
                        <div class="water">
                                <img src="water/river.water" alt="강" />
                        </div>
                        <ul class="plant">
                                <li><img src="tree/grass1.plant" alt="풀1" /></li>
                                <li><img src="tree/grass2.plant" alt="풀2" /></li>
                                <li><img src="tree/grass3.plant" alt="풀3" /></li>
                        </ul>
                </div>
                <div id="copyright">
                        <p>얼그레이</p>
                </div>
        </div>
</body>
</html>



0


목록
번호 제목 이름 날짜 조회 추천
11732 기타삼성 코엑스 근처에 맛집 추천해주세요~ 4 활활태워라 21/06/15 5156 0
425 IT/컴퓨터css 질문입니다. 25 얼그레이 15/11/06 5154 0
13130 경제전자주총 찬반투표는 기명인가요? 1 [익명] 22/03/18 5154 0
7637 진로퇴사 생각밖에 없습니다.... 조언 부탁드립니다. 14 [익명] 19/08/11 5153 0
9473 가정/육아엄마랑 수학할때만 싸워요... 10 [익명] 20/05/24 5153 0
10940 기타이런 이메일이 왔는데요 괜찬을까요?? 8 김치찌개 21/02/02 5153 0
286 의료/건강안경과 눈 관련된 질문입니다. 1 leiru 15/09/13 5152 0
4026 의료/건강성인 ADHD는 의지로 개선이 가능한가요? 5 [익명] 18/01/18 5152 0
8737 기타이런걸 만들거나 찾으려먼 어떻게 해야할까요? 5 ebling mis 20/02/05 5152 0
9535 IT/컴퓨터갑자기 어제쯤 부터 크롬에서 계속 이런 화면이 뜨는데 뭐가 문제일까요? 4 2020禁유튜브 20/06/03 5152 0
273 의료/건강아버지께 뇌 동맥류가 있답니다 7 불능 15/09/05 5151 0
1243 의료/건강감기 걸린이후 귀가 멍멍합니다. 4 류세라 16/06/29 5151 0
10301 진로꼬꼬마 신혼부부 주거플랜 설정 도와주세요ㅠㅠ 14 [익명] 20/10/21 5151 0
11769 경제친구가 소액을 빌려달라고 합니다. 23 [익명] 21/06/24 5151 0
3411 IT/컴퓨터기가 허브 제품 추천부탁드립니다. 10 애패는 엄마 17/09/23 5150 0
11402 기타공원의 비비탄총을 제재할 방법이 없을까요? 7 [익명] 21/04/22 5150 0
11421 체육/스포츠필라테스는 3개월 이상 해야할까요?(수정) 9 셀레네 21/04/25 5150 0
13250 기타자동차 수리 질문 2 오쇼 라즈니쉬 22/04/15 5150 0
2004 진로두달간 뭘 할까요? 9 syzygii 16/12/31 5149 0
6374 게임아이와 함께할 스위치 게임이 있나요 15 벨러 19/01/23 5149 0
10220 진로정장을 하나 맞춰야 됩니다. 27 [익명] 20/10/06 5149 0
2036 문화/예술다양한 노래를 접하고 싶습니다. 15 사케 17/01/05 5148 0
4190 IT/컴퓨터초3 되는 아들 노트북 질문입니다. 9 Darwin4078 18/02/21 5148 0
5216 의료/건강목근육 뭉침 관련해서 문의드립니다. 7 초코커피 18/08/07 5148 0
8535 과학물리학 사고실험 ㅡ 나무 판때기를 연장한다면 4 호타루 19/12/26 5148 0
목록

+ : 최근 2시간내에 달린 댓글
+ : 최근 4시간내에 달린 댓글

댓글