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


목록
번호 제목 이름 날짜 조회 추천
444 IT/컴퓨터맥에서 일정 초대를 받을 때 갑자기 일정 정보가 안 보입니다. 4 F.Nietzsche 15/11/12 2634 0
430 IT/컴퓨터공유기 질문 드립니다. 7 솔지은 15/11/07 4365 0
425 IT/컴퓨터css 질문입니다. 25 얼그레이 15/11/06 3932 0
418 IT/컴퓨터본인의 파일을 Crypt0L0cker 바이러스으로 코딩했습니다 8 jsclub 15/11/05 5579 0
402 IT/컴퓨터어떤 게임을 hdd로 옮길까요? 3 헬리제의우울 15/11/01 2973 0
392 IT/컴퓨터자바스크립트 관련 질문입니다. 12 얼그레이 15/10/29 4300 0
367 IT/컴퓨터css에서 테이블 보더 주는데 공간이 생겨요 12 얼그레이 15/10/22 3345 0
363 IT/컴퓨터프로젝터 구입 관련 질문입니다. 3 소노다 우미 15/10/20 3281 0
352 IT/컴퓨터데스크탑 구매 질문입니다. 14 삼공파일 15/10/14 4150 0
349 IT/컴퓨터게이밍 노트북, Y50과 alienware 15중 어느것이 좋을까요? (+T450은 어떨까요?) 4 atcg 15/10/13 3151 0
347 IT/컴퓨터리눅스 종료후 프리징 문제입니다. 삼성그룹 15/10/13 3891 0
342 IT/컴퓨터개인 도메인을 사용하는 네이버 블로그에 접속이 안됩니다. 라싸 15/10/11 4323 0
341 IT/컴퓨터CSS 질문입니다..! 4 얼그레이 15/10/08 2781 0
339 IT/컴퓨터SSD,RAM 질문입니다. 2 삼성그룹 15/10/07 4531 0
335 IT/컴퓨터포토샵 & 일러스트레이터. 9 침묵의현자 15/10/05 3207 0
326 IT/컴퓨터변경한 ip 주소 확인 어떻게 하나요? 5 오즈 15/10/02 3708 0
325 IT/컴퓨터휴대폰 초기화 질문입니다 1 헬리제의우울 15/10/01 4461 0
323 IT/컴퓨터프린터, 2.5 외장하드, 키보드 추천 부탁드립니다. 6 한아 15/09/30 4503 0
319 IT/컴퓨터파폭 html validator 사용할 때+css 질문 10 얼그레이 15/09/28 3123 0
316 IT/컴퓨터와이파이 공유기 확장 질문입니다. 3 오즈 15/09/24 4154 0
310 IT/컴퓨터무선 헤드셋 추천 부탁드립니다. 8 Vinnydaddy 15/09/22 5143 0
299 IT/컴퓨터인터넷상에서 삭제된 이미지 다시 볼수 있는 법 없을까요? 2 관대한 개장수 15/09/18 10732 0
285 IT/컴퓨터PS4 or 컴퓨터 7 레이드 15/09/12 3777 0
278 IT/컴퓨터갑자기 윈도우7 정품인증을 받으라고 뜹니다. 8 수박이두통에게보린 15/09/07 5002 0
267 IT/컴퓨터서피스3 사용하시는 분 계신가요? 4 No.42 15/09/03 4601 0
목록

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

댓글