수평메뉴바 왼쪽 오른쪽 정렬 마음대로 하기

demun
티스토리스킨수정/메인메뉴
2010. 9. 30. 00:10

블로그 상단에 보면 대체적으로 수평 메뉴바가 모두 있습니다. 수평메뉴바는 그만큼 용이하고 중요한 부분입니다.

디자인적으로 접근하기에 좋기 때문에 많이들 사용하지요. 제가 배포하는 블로그 스킨에도 모두 메뉴바가 존재하고 또 좀더 업그레이드된 메뉴바도 있습니다.

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

일단 질문하신분의 문제를 가지고 수정하는 방법을 알려드리겠습니다.

수평메뉴가 있는데 원하는 부분만 우측으로 옮기는 방법입니다.

그분의 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로 정렬된것을 초기화해라 라는 뜻입니다.

참고

이미지 처리하는 방법(확장자)
이미지 처리하는 방법(배경색을 입히고 이미지 그리기)
이미지 처리하는 방법(Image Replacement , Image Sprite)
스크롤을 따라다니는 플로팅 메뉴(floating menu)
사이드바에 위젯마다 테두리 넣기
사이드바에 더보기 기능 적용하기
스크롤을 따라다니는 플로팅 메뉴(floating menu)
사이드바에 위젯마다 테두리 넣기
css로 구성된 수평메뉴바 사용하기
수평 드롭다운 메뉴에 카테고리, 메뉴바 넣기
수평 드롭다운 메뉴바 달기(jquery이용)
멀티 드롭다운 메뉴 달기(Vertical CSS Menus)
사이드바에 더보기 기능 적용하기

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

개 개

demun(대문블로그)

수평메뉴바 왼쪽 오른쪽 정렬 마음대로 하기

추가.

참고

티스토리툴바