- 질문 게시판입니다.
Date 15/11/06 09:12:47
Name   얼그레이
File #1   rabbit.png (75.1 KB), Download : 42
File #2   markup.png (100.0 KB), Download : 41
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


목록
번호 제목 이름 날짜 조회 추천
855 게임g2a 여기서 문명5 컴플리트 사려구 하는데.. 2 아삼 16/02/22 5462 0
3893 IT/컴퓨터중국산 공기질 측정기 구매해보신분? 별빛 17/12/24 5462 0
5239 기타 부산 해운대 숙박 추천 좀 부탁드립니다 8 발그레 아이네꼬 18/08/11 5462 0
10961 IT/컴퓨터갤럭시탭S7+ 어떤가요? 7 化神 21/02/04 5462 0
11421 체육/스포츠필라테스는 3개월 이상 해야할까요?(수정) 9 셀레네 21/04/25 5462 0
12392 의료/건강허리 찜질기 추천 부탁드립니다 2 INFJ 21/10/07 5462 0
14259 기타데스크탑에 usb C 타입을 연결하는 방법은 변환잭/허브밖에 없는지요...? 5 홍당무 22/12/16 5462 0
3840 가정/육아무선 진공청소기 추천바랍니다. 11 그렇다고 했다 17/12/14 5461 0
359 기타개명을 하려고 합니다 7 줄리아 15/10/17 5460 0
9959 연애음... 자존감이 낮은 상대는 어떻게 해야 할까요? 12 [익명] 20/08/18 5460 0
726 연애적당한 한식당 추천부탁드립니다. 10 쿠바왕 16/01/15 5459 0
9643 기타01X 핸드폰 유저인데 앞으로 어떡하면 될까요? 6 오리꽥 20/06/22 5459 0
2377 IT/컴퓨터스마트폰으로 인쇄하는 법 좀 알려주세요 5 진준 17/02/21 5458 0
12919 IT/컴퓨터아이폰에 쓸 터치펜(?) 추천 부탁드려요 Yossi 22/02/02 5458 0
14730 가정/육아선택할 수 없었던 제가 왜 우는 걸까요 8 [익명] 23/04/24 5458 0
425 IT/컴퓨터css 질문입니다. 25 얼그레이 15/11/06 5457 0
982 문화/예술위로를 위한 책 추천 부탁드립니다. 8 16/04/08 5457 0
4026 의료/건강성인 ADHD는 의지로 개선이 가능한가요? 5 [익명] 18/01/18 5457 0
5038 의료/건강치아가 양치질을 세개해서 닳았다는데 6 사람사람 18/07/14 5457 0
7701 의료/건강조국 딸이 쓴 논문입니다 어느정도 수준인지 알려주실 수 있나요? 8 [익명] 19/08/20 5457 0
8250 과학녹아웃 마우스 실험에서 궁금한 부분이 있습니다. 21 호미밭의 파스꾼 19/11/13 5457 0
1859 연애어떻게 흐지부지 만드나요... 30 헤칼트 16/12/03 5456 0
11479 기타만년필 잉크 8 한겨울 21/05/02 5456 0
14656 IT/컴퓨터디지털 사이니지 질문 6 어설프고하찮은 23/04/03 5456 0
14880 의료/건강대학병원 정신과 2주 입원한것 국민건강보험으로 지원이나 환급 받을 수 있나요? 3 [익명] 23/06/02 5456 0
목록

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