묻고답하기
div태그에서 왼쪽, 위 정렬을 했는데도 이상해요 ㅠ
2008.01.18 14:12
div태그에서 왼쪽, 위 정렬을 했는데도 이상해요 ㅠ
소스입니닷,
layout.html
css.css
음, css파일에서 text-align을 left로, vertical-align을 top으로 설정해서
테이블에서 왼쪽,위 정렬하듯이 했는데요..
막상 화면상에서 보면 이렇게 안습으로 나와요..
테이블에서 큰맘먹고 웹표준으로 전향하려고 하는데요,,
이런것에서부터 막히네요 ㅠㅠ
어떻게 해야할까요? 도와주세요..!
소스입니닷,
layout.html
<!--%import("./css/css.css")-->
<div id="header">
<img src="images/layout_01.gif" width="150" height="138" alt="" /><img src="images/layout_02.gif" width="21" height="138" alt="" /><img src="images/layout_03.gif" width="486" height="138" alt="" /><a href="/"><img src="images/layout_04.gif" width="354" height="138" alt="--에 오신것을 환영합니다 ^ㅇ^" /><a>
</div>
<div id="menu">
<img src="images/layout_06.gif" width="150" height="89" alt=""><a href="/board/top"><img src="images/layout_10.gif" width="150" height="23" alt=""></a><a href="/board/outer"><img src="images/layout_11.gif" width="150" height="23" alt=""></a><img src="images/layout_12.gif" width="150" height="23" alt=""><img src="images/layout_13.gif" width="150" height="23" alt=""><img src="images/layout_14.gif" width="150" height="23" alt=""><img src="images/layout_15.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><a href="/board/login"><img src="images/layout_17.gif" width="150" height="23" alt="login"></a><a href="http://보안검열.com/board/?mid=login&act=dispMemberSignUpForm"><img src="images/layout_18.gif" width="150" height="23" alt=""></a><img src="images/layout_19.gif" width="150" height="23" alt=""><img src="images/layout_20.gif" width="150" height="23" alt=""><img src="images/layout_21.gif" width="150" height="23" alt=""><img src="images/layout_22.gif" width="150" height="23" alt=""><img src="images/layout_23.gif" width="150" height="23" alt=""><img src="images/layout_24.gif" width="150" height="23" alt=""><img src="images/layout_25.gif" width="150" height="23" alt=""><img src="images/layout_26.gif" width="150" height="23" alt=""><a href="http://minihp.cyworld.com/pims/main/pims_main.asp?tid=보안검열" target="_blank"><img src="images/layout_27.gif" width="150" height="23" alt=""></a><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_28.gif" width="150" height="80" alt=""><img src="images/layout_29.gif" width="150" height="85" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt=""><img src="images/layout_16.gif" width="150" height="23" alt="">
</div>css.css
@charset "utf-8";
/* CSS Document */
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
body {
/* background-color: #5A5D5A; */
}
div#header {
width: 1024px;
text-align: left;
vertical-align: top;
clear: right;
}
div#menu {
width: 150px;
float: left;
text-align: left;
vertical-align: top;
}
div#content {
float: right;
text-align: left;
vertical-align: top;
clear: right;
}
div#footer {
text-align: left;
vertical-align: top;
}음, css파일에서 text-align을 left로, vertical-align을 top으로 설정해서
테이블에서 왼쪽,위 정렬하듯이 했는데요..
막상 화면상에서 보면 이렇게 안습으로 나와요..
테이블에서 큰맘먹고 웹표준으로 전향하려고 하는데요,,
이런것에서부터 막히네요 ㅠㅠ
어떻게 해야할까요? 도와주세요..!
댓글 7
-
windows 98이 아니구요 ^^;;
이 컴퓨터가 제 컴이 아니라 ,, 설명하기가 좀 깁니다만, 해볼게요.
당분간 큰외삼촌댁에서 살게 되어서.. 지금 외삼촌댁인데요.
windowsXP 입니다. CPU는 인텔 셀러론 2.60GHz구요.. 여기까진 봐줄만한데요,
램이 504MB라고 적혀있네요 ㅡㅡㅋ
256MB였는데 언제 저 모르는새에 업그레이드 했나봐요..
근데 512도 아니고 504MB라..;
아무튼 그래서 XP에다가 IE7을 돌리는데 렉이 너무 심하더라구요 ㅡㅡㅋ;
그래서 테마만 '고전'테마로 바꿨습니닼 ㅋ,,;
테마만 바꿔줘도 메모리를 적게 먹는다고 하길래요..
본의아니게 낚시(?)를 했네요... 죄송요 ㅋㅋ
죽이는건 맞습니다..
사양이 좋아서 죽는게 아니라.. 속도가 느려터져 죽습니닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ -
안되네요 ㅠ_ㅠ; 감사합니다..~
-
virtuaplay
2008.01.18 16:17
<a href="링크"><img src="경로"></a> 사이마다 <br />을 넣어보세요.
더 좋은 방법은 아래와 같이 ul, li 리스트태그를 사용하여 좀더 구조적이고 간결하게 만들 수 있습니다.
<ul class="menu"> <li><a href="링크"><img src="경로"></a> </li> <li><a href="링크"><img src="경로"></a> </li> <li><a href="링크"><img src="경로"></a> </li> ... </ul>
그리고 css에
ul.menu, ul.menu li { margin:0; padding:0;}을 적용해보세요. -
넵, 한번 해볼게요.
그럼 menu부분 div는 어떻게 해야하나요?
그리고 메뉴 왼쪽에 점이 붙는건 어떻게 해결해야할까요? -
text-decoration:none; 추가.
-
virtuaplay
2008.01.18 17:17
<div id="menu">
<ul class="menu">
</li><a href="#"><img 태그></a></li>
</li><a href="#"><img 태그></a></li>
...
</ul>
</div>
이렇게 넣으시면 되구요.
점은 아마도 <li>태그에 기본적으로 붙은 불릿을 말씀하시는 것 같네요.
음.. 깜빡했네요.
#menu ul.menu,
#menu ul.menu li { margin:0; padding:0; list-style-type:none; }
로 해보세요.
그리고
text-align:left와 vertical-align:top은 특별히 지정하지 않아도 좌측, 상단이 기본입니다.
지우셔도 될 듯 하네요.
나름의 설명(?)을 들어가기 전에 경고드리자면, 전 css를 제 손으로 처음 코딩한 게 그저께라는 걸 알려드립니다.
음, 그래서 별 쓸모있는 건 말씀 못 드리고... css에서 menu의 코딩에 margin을 0으로 주는 코드를 추가해 보시어요.
이미지들 내버려 두면 알아서 마진 0으로 잡히는 데 왜 그런 지는 모르겠고, 아무튼 그럼 강제로 지정해봐야죠. 그리고 이미지들에 border를 0으로 하시고요.
전 css쓰기 전에 메뉴 이렇게 잡았었는 데 될런 지 모르겠군요.