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


목록
번호 제목 이름 날짜 조회 추천
10401 의료/건강B형 간염 예방주사 관련 9 꿀래디에이터 20/11/06 3221 0
13622 의료/건강B형간염 6개월 정기검진 병원 선택에 관해서 질문드립니다 6 Uhfu 22/07/12 2601 0
11045 의료/건강B형간염 있는 사람이 우벤자임 영양제 먹어도 괜찮나요? 2 Uhfu 21/02/15 3756 0
14712 IT/컴퓨터C, C++ 개발자가 적은 이유가 무엇인가요? 11 아침커피 23/04/18 3448 0
3156 IT/컴퓨터c++ 공부 하는데 얼마정도 걸리나요? 6 지식의늪지대 17/08/06 7611 0
7974 IT/컴퓨터c++ 에서 unordered map을 pair를 key로 사용할 때 순회 7 kaestro 19/10/03 4176 0
8492 의료/건강CA 19-9 수치 검사를 건강검진에 사용하는 이유 등에 대해서 5 [익명] 19/12/17 5031 0
10121 경제CBDC를 발행하면 마이너스 금리 부과 가능하다는데... 2 [익명] 20/09/15 2351 0
10191 IT/컴퓨터CCTV 설치 쉬운가요? 7 덕후나이트 20/09/30 3628 0
2304 IT/컴퓨터cd -> mp3 변환 방법 질문입니다. 5 줄리엣 17/02/13 2629 0
6261 기타CD 굽기 질문입니다 8 김치찌개 19/01/09 2318 0
2307 IT/컴퓨터cd 데이터 살릴 방법 없을까요? 8 줄리엣 17/02/13 2652 0
11152 IT/컴퓨터CD-ROM 이 급하게 필요합니다. 17 요일3장18절 21/03/08 6673 0
13039 기타chancellery 어떻게 번역하나요? 11 라싸 22/03/01 3001 0
5623 의료/건강cis-ab형 혈액형은 수술시 검사에도 잘 나타나나요? 13 [익명] 18/10/10 3055 0
14236 기타cjone, 해피포인트, L.point 가 함께 적립/사용되는 카드가 있을지요...? 5 홍당무 22/12/08 1967 0
3718 기타CMA 통장 질문입니다 2 김치찌개 17/11/21 2849 0
2257 IT/컴퓨터CPU 발열 문제입니다. 6 충전기 17/02/05 4798 0
10791 IT/컴퓨터cpu 쉽게이해시켜준다는 인터넷 글 아시는분 계신가얌? 5 비얌 21/01/09 2918 0
10065 IT/컴퓨터cpu 오버클럭 된건가요 ..? 3 우가 20/09/05 4303 0
1069 기타crooked는 어떻게 쓰는 단어인가요? 7 리틀미 16/05/11 5396 0
15804 의료/건강CRP수치가 높으면 많이 위험한가요?? 2 Broccoli 24/04/28 1177 0
5494 IT/컴퓨터css 질문드립니다. 9 기쁨평안 18/09/20 2737 0
502 IT/컴퓨터css 질문입니다! 2 얼그레이 15/11/18 2786 0
425 IT/컴퓨터css 질문입니다. 25 얼그레이 15/11/06 3729 0
목록

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

댓글