- 질문 게시판입니다.
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


목록
번호 제목 이름 날짜 조회 추천
14170 기타어느 직장이든 6개월 1년이상일때 제일 힘든 시기일까요? 13 셀레네 22/11/22 5163 0
381 기타휴대폰 광고문자 해석이 안되네요. 8 레코드 15/10/24 5162 0
8715 의료/건강우한폐렴에 에이즈치료제가 쓰인다는데 인위적으로 만든 것일까요? 25 [익명] 20/02/01 5162 0
9953 문화/예술다음에 먹을 원두 8 ebling mis 20/08/17 5162 0
11091 IT/컴퓨터태블릿 추천해주세요! 15 지와타네호 21/02/23 5162 0
13527 기타티켓몬스터 사이트 접속 잘 되시나요? 12 어제내린비 22/06/23 5162 0
1968 홍차넷정모에서 있었던 일을 홍차넷 커뮤니티상에서 이야기하는게 허용될까요? 21 알료사 16/12/25 5161 0
15017 IT/컴퓨터디즈니플러스 관련 4 켈로그김 23/07/11 5161 0
3220 IT/컴퓨터갤럭시/LG 폰 중에서 추천 해 주세요. 16 soul 17/08/17 5160 0
6405 과학일상 생활의 숫자 흐름에 패턴이 없는 것을 증명할 수 있나요? 10 흥차넷 19/01/28 5160 0
12471 기타볶음밥 질문입니다 3 김치찌개 21/10/26 5160 0
12523 IT/컴퓨터mp4가 재생 안되는 컴퓨터는 없겠죠? 5 2020禁유튜브 21/11/05 5160 0
13921 가정/육아사회성이 떨어지는 아이 11 [익명] 22/09/27 5160 0
1648 홍차넷홍차넷에 데스크탑으로 접속할때 3 원추리 16/10/13 5159 0
4668 문화/예술영화감상 목적으로 넷플릭스 괜찮나요? 9 천도령 18/05/21 5159 0
9643 기타01X 핸드폰 유저인데 앞으로 어떡하면 될까요? 6 오리꽥 20/06/22 5159 0
12324 기타속초 대게 및 관광 관련질문 6 거소 21/09/27 5159 0
13109 기타오미크론 증상 질문입니다 3 김치찌개 22/03/14 5159 0
8005 IT/컴퓨터윈도우10 설치 후 깨진 압축파일 살리는 방법 3 잘살자 19/10/09 5158 0
425 IT/컴퓨터css 질문입니다. 25 얼그레이 15/11/06 5157 0
2189 의료/건강현미는 왜 체중 감량에 도움이 되나요? 8 수성펜 17/01/26 5157 0
7289 문화/예술한국 공포영화중 볼만한 거 있을까요 ? 21 이노우에나오야 19/06/11 5157 0
8884 IT/컴퓨터개발자용 무선 키보드 추천 받습니다 4 흥차넷 20/02/29 5157 0
11527 법률개인사업자에게 소송하는 방법 문의드립니다 4 헬리제의우울 21/05/13 5157 0
11732 기타삼성 코엑스 근처에 맛집 추천해주세요~ 4 활활태워라 21/06/15 5157 0
목록

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

댓글