Mozilla 한국 커뮤니티

테스트하고 있는 소스와 결과를 보실 수 있도록 올려두었습니다.

위쪽은 실제 코딩결과를 보여주고 있습니다.
아래 3개의 그림은 3가지 브라우져에서 본 모슴을 캡쳐 한겁니다

http://user.chol.com/~citywork/question ... error.html

브라우져별로 너무 달라서 어찌해야할지 모르겠습니다.

그나마 Opera가 원하는 목표에 가장 근접하고 있지만 메뉴부분을 우측하단에 딱!
붙여야하는데 이건 또 어떻게 해야할지 모르겠습니다.

어떻게 하면 원하는데로 레이아웃을 만들 수 있을까요?

사소한 의견 한마디씩이라도 건네주시면 고맙겠습니다.

부나비 wrote:그나마 Opera가 원하는 목표에 가장 근접하고 있지만 메뉴부분을 우측하단에 딱!
붙여야하는데 이건 또 어떻게 해야할지 모르겠습니다.

정확히 원하는 디자인을 올려보세요.
상상력의 한계도 있고, 다른 상상을 할 수도 있습니다.

관가져주셔서 감사하구요.
위의 동일한 주소에 원하는 디자인을 대략적으로 그려두었습니다.
제가 코딩한것에서 무엇이 잘못된건지 모르겠네요..

열심히 공부해야겠습니다.

제 스타일로 고쳐봤는데요, 파이어폭스2, IE6, 오페라9에서 확인했습니다.

Code: Select all

  <div id="inner">
    <h1><a href="" title="">제목</a></h1>
    <ul id="menuUL">
      <li><a href="" title="">TestMenu1</a></li>
      <li><a href="" title="">TestMenu2</a></li>
      <li><a href="" title="">연습용메뉴3</a></li>
    </ul>
    <div class="clear"></div>
  </div>

Code: Select all

#inner * { margin: 0; padding: 0; }
.clear { clear: both; }
h1 { float: left; }
h1 a { display: block; width: 146px; height: 38px; background: url("logosample.gif") no-repeat; text-indent: -999em; }
#menuUL { float: right; list-style: none; }
#menuUL li { float: left; height: 38px; padding: 0 1px; }
#menuUL a { display: block; padding: 0 12px; margin-top: 12px; height: 26px; white-space: nowrap; background-color: #2779a0; color: #fff; text-decoration: none; font-weight: bold; }
* html #menuUL a { width: 1%; }

덧. <div class="clear"></div>를 빼는 대신 P.I.E.에서 소개한 방법을 쓸 수도 있습니다.

답변해주셔서 감사합니다.
보여주신 소스를 가지고 조금씩 고쳐보며 연구하고 있습니다.

그런데

Code: Select all

* html #menuUL a { width: 1%; }

이 부분이 어떤 역할을 하고있는지 잘 모르겠는데...
좀 알려주시겠습니까?

Code: Select all

* html #menuUL a { width: 1%; }

IE에서는 <a>를 블록으로 표시되게 하고 height 속성을 지정했더니 width가 100%가 되더군요(이게 정확히 어떤 버그인지는 알아보지 못했습니다). white-space: nowrap으로 줄바꿈을 막고 width를 줄여서 크기를 딱 맞게 했습니다. 크기를 따로 고정하신다면 필요없는 겁니다.

Mozilla 한국 커뮤니티

도와주세요...

도와주세요...

Re: 도와주세요...

이렇게 해봤습니다.

아 그 건요..