블로그 상단에 보면 대체적으로 수평 메뉴바가 모두 있습니다. 수평메뉴바는 그만큼 용이하고 중요한 부분입니다.
디자인적으로 접근하기에 좋기 때문에 많이들 사용하지요. 제가 배포하는 블로그 스킨에도 모두 메뉴바가 존재하고 또 좀더 업그레이드된 메뉴바도 있습니다.

업그레이드된 메뉴바는 자바스크립트를 사용한 펼쳐지는 메뉴바를 말합니다.

일단 질문하신분의 문제를 가지고 수정하는 방법을 알려드리겠습니다.
수평메뉴가 있는데 원하는 부분만 우측으로 옮기는 방법입니다.

그분의 html 은 대략 아래와 같습니다.
다른 스킨도 이와 비슷하니 참고하시면 됩니다.

<div id="menu">
	<ul>
	  <li></li>
	<li class="tab_admin">
		<a href="[#\#_owner_url_##]">
		  <b><span>Admin</span></b><em></em>
		</a>
	  </li>
	  <li class="tab_tag">
		<a href="[#\#_taglog_link_##]tag">
		  <b><span>Tag</span></b><em></em>
		</a>
	  </li>
	  <li class="tab_guestbook">
		<a href="[#\#_guestbook_link_##]">
		  <b><span>GuestBook</span></b><em></em>
		</a>
	  </li>
	  <li class="tab_notice">
		<a href="[#\#_blog_link_##]notice">
		  <b><span>Notice</span></b><em></em>
		</a>
	  </li>
	<li class="tab_write">
		<a href="[#\#_owner_url_##]/entry/post">
		  <b><span>Write</span></b><em></em>
		</a>
	  </li>
	<li></li>
	<li class="tab_page">
		<a href="[#\#_blog_link_##]">
		  <b><span>Home</span></b><em></em>
		</a>
	  </li>
	</ul>
</div>

자 잘 보셧지요. 대략 비슷하니 참고하시고 24번째줄에 제가 하이라이팅을 해놨습니다. 이분의 질문은 이 부분만 우측으로 보내는것입니다.

일단 css 부분을 보고 다시 이어갑니다. 여기에 스타일은 대략 아래와 같습니다.

#menu {
float:left;
list-style-type:none;
margin:0 0 1em;
padding:8px 0 0 10px;
white-space:nowrap;
width:100%;
}


하이라이팅 된곳 즉 2번줄에 보면 float:left 라고 있습니다. 이건 #menu 를 왼쪽으로 정렬하라는 이야기입니다.
그리고 menu 안에 a링크에 해당하는 부분의 css 를 보면 #menu a{float:left;}가 있을겁니다.
실질적으로 눈에 보이는 관리자,글쓰기,공지사항....이런것들은 menu 안에 li 안에 a링크입니다.

이건 #menu 라는 id 안에 a 링크에 해당하는 것을 왼쪽으로 차곡 차곡 정렬하라는 이야기 입니다.
그래서 위의 html 에 보시면 li a 에 해당하는 Admin , Tag , GuestBook .... 등등이 왼쪽으로 즉 옆에 붙어있습니다.
즉,
admin tag guestbook 이런식입니다.

admin
tag
guestbook
이런식이 아니구요,

여기에 해당하는 a 링크에 대해 좀더 자세하게 이야기하면 a 링크에 해당하는 스타일을 보면 padding라는 부분이 있습니다. 이건 여백을 말하는데요. 글자의 크기+여백이 바로 a 링크 한개의 크기에 해당됩니다. 
그 크기가 끝나면 왼쪽으로 또 한개가 붙고, 또 한개가 붙고 하는 형식입니다.
즉 아래처럼 생깁니다.


그럼 #menu a 에 해당하는 부분들이 전부 float:left 로 정렬이 되있는데 어떻게 내가 원하는것만 우측으로 옮기는냐???

예를들어 여기서는 write 에 해당하는 부분만 우측으로 옮기겠습니다.
html 에 보시면 <li class="tab_write"> 라는 부분이 있습니다. 따로 추가하지 않고도 이걸 이용하는겁니다.
바로 class 입니다.

자 그럼 이건 #menu 안에 li 안에 tab_write 라는 클래스 입니다.
요걸 우측으로 보내려면 아래처럼 지정합니다.

#menu li.tab_write{float:right;}

아주 간단하죠^^
전부 왼쪽으로 정렬이 되어있는데 이것만 우측으로 옮기는 겁니다. 위의 한줄이 바로 결론입니다.
수정전과 후를 보시죠.

수정전

수정후


이 경우를 보면 메뉴 전체 아이디 즉 div id="menu" 에 float:left 가 적용이 되어 있습니다.
이건 menu 박스 전체를 좌측으로 배치하라는 이야기입니다.

그다음 menu a 에도 float:left 가 적용이 되어 있씁니다.
이건 menu 안에 a 링크 전부를 세로로 배치하지 말고 좌측으로 차곡 차곡 쌓으라는 이야기 입니다.

헌데 위에서 li 에 적용한것은 즉 #menu li.tab_write{float:right;} 는 li 중에서 tab_write 클래스를 가진것을 우측으로 정렬하라는 이야기입니다.
즉 이적용이 안되는것은 한단계 위에서 적용한 #menu a{float:left;}가 적용이 되어서 다시 좌측정렬이 됩니다.


추가.

float는 버그가 있습니다. 검색하면 나오겠지만 잘 사용하셔야 합니다.
그리고 우측정렬하면 하위 메뉴도 우측으로 정렬이 될때가 있습니다.
그럴때는 하위메뉴에 clear:right 라고 하나 추가해주면 됩니다. 이건 right로 정렬된것을 초기화해라 라는 뜻입니다.

!! 도움이 되셨다면 추천을...마우스를 올려보세요. 우측아이콘은 즐겨찾기 !!

올블로그추천 블로그코리아 추천 한RSS추가 구글리더기에 추가 마이야후에 추가 트위터 팔로우하기 펌플에 북마크하기 미투데이친구추가 즐겨찾기추가

신고

댓글

  1. 2010.09.30 07:10 신고 BlogIcon 해커 C  댓글주소  수정/삭제  댓글쓰기

    처음 블로그 하면서, 드롭메뉴에 많이 관심을 가졌는데 ㅎㅎ..

    그때도, 이 정렬때문에 많은 고민을 했었어요 ㅋㅋ~

    메뉴를 이제 달고 꾸미는 분들께 도움될꺼 같아 좋네요 ㅎㅎ

    저처럼,,, 노가다 하는 일이 없었으면 하는.... ㅋ

    즐거운 하루 되세요 ~~!!!

    • BlogIcon 대문 demun 2010.10.02 07:57 신고  댓글주소  수정/삭제

      저도 기존에 나와있는 드롭다운 메뉴를 거의 모두 적용해보고 테스트해보고,,,,노가다 좀 했습니다....

      그러다보니 이건 이렇게 사용하면 되고, 저건 저렇게 사용하면 되더라구요...조금 노하우가 생긴걸까요 ㅎㅎㅎㅎㅎㅎ

  2. 2010.09.30 20:43  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2010.10.02 08:18 신고  댓글주소  수정/삭제

      빠른시간내에 아는것을 전달하는것이 그리 쉽지많은 않군요.
      정확하게 그리고 쉽게 알아들을수 있도록 전달하려 했는데....무리였나 봅니다.

      제가봐도 쉽게 전달한거 같지는 않군요.
      몇글자 수정했습니다.

      그새 스킨을 바꾸셧나봅니다. 그전 스킨이 아니라 메뉴가 다르네요.

      님이 하실것은 #menu li.tab_write{float:right;} 한줄만 추가하면 될텐데요?

  3. 2010.10.03 18:32  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2010.10.03 22:05 신고  댓글주소  수정/삭제

      한번 html 과 css 를 모두 저한테 보내주세요. 그럼 제가 시간나는대로 수정해드릴게요.

      그리고 저도 나이먹어서 블로그하게 됐습니다.
      그리고 블로그 하는 사람들 나이 다 많습니다.

      블로그하면서 저도 시간 많이 잡아먹었어요.집사람한테 혼나기도 하구요...

      저 또한 술을 엄청 좋아합니다.
      지역이 어디신지??
      전 안산입니다. 3달만 지나면 40살이 됩니다.ㅎㅎㅎㅎ

      근방에 있으면 소주한잔 하는것도 좋을거라고 생각합니다.

      처음엔 다 못합니다. 저도 물론 그랬구요...
      너무 걱정하지 마세요.

      html 과 css 를 모두 파일로 text로 저장하셔서 포스팅을 하세요. 파일첨부해서 그리고 그 주소를 저한테 알려주세요.
      수정을 원하는 부분하고 같이요....제가 힘좀 써보죠.ㅎㅎ

  4. 2010.10.04 01:00 신고 BlogIcon 雨酒  댓글주소  수정/삭제  댓글쓰기

    대문님 안녕하세요..
    다른곳에서 훔쳐다 ㅋㅋㅋ... 다시 스킨을 적용해 보았습니다..
    스타일에서 width 값을 주었더니 대문님 말씀데로 바로 적용이 되더군요..

    다시 width 값을 빼면 적용이 안되고요...
    대문님 덕분에 한가지 배우게 되었습니다...고맙습니다.

    대문님 하고 한잔 할 수 있는 기회가 주어지면 저야 말로 정말 해피한 기회가 되겠지요...
    대문님 댁이 안산 이시군요 ..
    저는 서울이랍니다...그리고 나이는 토꺵이 해에 나왔답니다..(제가 형님이네요..ㅎㅎㅎ).
    언젠가 기회가 주어지면 정말 꼭 뵙도록 하겠습니다.

    대문님께 스킨수정 의뢰건은 나름데로 조목조목 정리해서 올리도록 하겠습니다... 이맇게 마음 써 주시니 정말 고맙습니다...틀림없이 대문님은 복 받으실겁니다...일면식도 없는 관계에서 상대의 고민거리를 해결 해 주는 일이 얼마나 가치 있는 일이겠습니까..

    지금 이 시간에 서울은 비가 오고 있네요
    비가 올땐 그에 맞는 정서가 제겐 오래된 습관이 되었습니다...
    그래서 오늘도 지척지척 내리는 비를 핑계로 한잔 하고 있답니다.

    나머지 일은 집에 가서 깨진 스킨 보고 뒤비져야 겠습니다...ㅋㅋㅋ
    무슨 말인지 아시죠?
    고맙습니다...

    • BlogIcon 대문 demun 2010.10.04 08:53 신고  댓글주소  수정/삭제

      왜 아니겠습니까?
      제가 블로그를 첨 시작할때.....
      제일먼저 부딛치는 일중에 하나가 바로 스킨에 관한 것입니다.
      광고 코드하나 넣을려고해도 뭘 알아야 넣지요...
      어디에 넣은지도 모르고...

      스킨제작자나 관련글을 쓴사람한테 물어보고, 또 물어보고....나중에는 미안도 하고..원하는대로 잘 알려주지도 않고....

      급기야 공부하기 시작해지요^^
      그맘 압니다.ㅎㅎㅎㅎ
      서울 어디세요?