묻고답하기
기본 레이아웃의 메뉴를 투명하게 만드는 방법은 무엇입니까?
2008.05.14 16:21
http://yoonfam.net/zbxe/main
가족들끼리 드나들면서 아이들 크는 사진 올리는 정도의 용도로 사용하는 가족홈페이지를 만들고자 합니다.
이전에는 그누보드를 사용했었는데, 방식이 완전히 다른데다가 지식이 없다보니까 튜토리얼 따라가기만으로도 충분히 버겁네요.
암튼, 워낙 많은 분들께서 친절한 설명과 함께 공개해주신 여러 툴들로 대강 가족들 드나들만한 공간은 만들었습니다.
물론 아무것도 없이 제로보드 자체가 제공하는 것들만 가지고 페이지 구성을 한것에 지나지 않지만요.
문제는, 상단 로고부분과 배경이미지 부분입니다.
아이들과 조카들의 사진을 여러개 만들어서 게시판상단에 붙이거나 레이아웃 상단에 붙이려고 했는데, 링크된것과 같은 문제가 있습니다.
1.
상단 배경이미지를 윈도우창 크기와 관계 없이 제로보드 레이아웃 중앙에 정렬시켜두는 방법이 궁금합니다.
요즘은 와이드모니터를 많이 쓰다보니까 창을 키웠을때 홈페이지가 중앙에 딱 가지런히 정렬되면 좋겠는데, 상단 이미지가 옆으로 무한 반복되더라구요.
이거 잡는다고 이틀 밤샜습니다. ㅠㅠ
암튼 이건 레이아웃 편집에서 어찌어찌 수정을 했습니다.
그림폭을 980으로 만들었는데도 창을 늘리면 그림이 좌측으로 당겨지면서 로고를 가립니다.
2.
링크화면대로, 메뉴바가 그림을 가립니다. 메뉴바를 투명하게 만드는 방법이 있으면 좀 가르쳐주세요.
사실 이게 제일 큰 고민입니다.
이틀밤을 새면서 별짓을 다해봐도 방법이 없습니다. ㅠㅠ
부작용인지 전화위복인지.. 암튼 이거 공부한다고 자료실의 별별위젯을 다 설치했습니다. ^^;
3.
화이트스킨을 사용하니까 배경이미지 위에 검은줄이 그대로 남아 있습니다.
제홈페이지에서는 아이들 모자위를 가로질러 지나가는 두꺼운 선이 되어버렸습니다.
이것도 삭제할 수 있다면 방법을 좀 가르쳐 주세요.
4.
선택된 메뉴에 마우스를 두고 있으면 커서에 난리가 납니다.
레인보우링크위젯을 비활성시키면 문제가 없는데요, 이것은 해결할 방법이 있습니까?
가족들끼리 드나들면서 아이들 크는 사진 올리는 정도의 용도로 사용하는 가족홈페이지를 만들고자 합니다.
이전에는 그누보드를 사용했었는데, 방식이 완전히 다른데다가 지식이 없다보니까 튜토리얼 따라가기만으로도 충분히 버겁네요.
암튼, 워낙 많은 분들께서 친절한 설명과 함께 공개해주신 여러 툴들로 대강 가족들 드나들만한 공간은 만들었습니다.
물론 아무것도 없이 제로보드 자체가 제공하는 것들만 가지고 페이지 구성을 한것에 지나지 않지만요.
문제는, 상단 로고부분과 배경이미지 부분입니다.
아이들과 조카들의 사진을 여러개 만들어서 게시판상단에 붙이거나 레이아웃 상단에 붙이려고 했는데, 링크된것과 같은 문제가 있습니다.
1.
상단 배경이미지를 윈도우창 크기와 관계 없이 제로보드 레이아웃 중앙에 정렬시켜두는 방법이 궁금합니다.
요즘은 와이드모니터를 많이 쓰다보니까 창을 키웠을때 홈페이지가 중앙에 딱 가지런히 정렬되면 좋겠는데, 상단 이미지가 옆으로 무한 반복되더라구요.
이거 잡는다고 이틀 밤샜습니다. ㅠㅠ
암튼 이건 레이아웃 편집에서 어찌어찌 수정을 했습니다.
그림폭을 980으로 만들었는데도 창을 늘리면 그림이 좌측으로 당겨지면서 로고를 가립니다.
2.
링크화면대로, 메뉴바가 그림을 가립니다. 메뉴바를 투명하게 만드는 방법이 있으면 좀 가르쳐주세요.
사실 이게 제일 큰 고민입니다.
이틀밤을 새면서 별짓을 다해봐도 방법이 없습니다. ㅠㅠ
부작용인지 전화위복인지.. 암튼 이거 공부한다고 자료실의 별별위젯을 다 설치했습니다. ^^;
3.
화이트스킨을 사용하니까 배경이미지 위에 검은줄이 그대로 남아 있습니다.
제홈페이지에서는 아이들 모자위를 가로질러 지나가는 두꺼운 선이 되어버렸습니다.
이것도 삭제할 수 있다면 방법을 좀 가르쳐 주세요.
4.
선택된 메뉴에 마우스를 두고 있으면 커서에 난리가 납니다.
레인보우링크위젯을 비활성시키면 문제가 없는데요, 이것은 해결할 방법이 있습니까?
댓글 2
-
우야꼬
2008.05.14 21:11
-
.gif)
오늘까지 꼬박 삼일을 고생한 문젠데.. 진심으로 감사드립니다.
상단그림만 어찌어찌 고민해보면 될것도 같고.. ^^;
그나저나, 기타로 추가해주신 부분들.. 정말정말 감사합니다.
제 원본과 수치가 조금씩 다르길래 그냥 적어주신거 그대로 붙여서 오렌지부분만 다시 삭제했습니다.
그랬더니 메뉴글꼴이 두꺼워졌고, 테두리도 없이 댕그라니 있던 메뉴선택바도 치워졌네요.
거듭 감사하다는 인사 드립니다.
좋은 저녁(?) 되세요~
#header { position:relative; width:978px; height:114px; border-top:6px solid #323232; border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; background:url(../images/white/bgHeader.png) no-repeat right bottom; margin-bottom:25px; z-index:99;}
오렌지 부분 삭제하시고요.
3. 위에 검은줄은 white.css에(18번째줄)
#header { position:relative; width:978px; height:114px; border-top:6px solid #323232; border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; background:url(../images/white/bgHeader.png) no-repeat right bottom; margin-bottom:25px; z-index:99;}
오렌지부분 삭제 또는 border-top:0px 로 수정하시구요. (참고로 파란색은 좌측세로라인이구요. 빨간색은 우측세로라인입니다.)
4. 글쎄요?? 제화면에서는 마우스커서 큰변화가 없어서...
기타. white.css(34번째줄)
#gnb li a { display:block; float:left; padding:12px 0px 0px 0px; background:url(../images/default/bgGnbOff.gif) no-repeat center top; width:82px; height:20px; color:#727272; white-space:nowrap; text-align:center; font-weight:bold; text-decoration:none; }
(36번째줄)
#gnb li a:focus { color:#000000; background:url(../images/default/bgGnbOn.gif) no-repeat center top; }
(37번째줄)
#gnb li.on a { font-weight:bold; color:#000000; background:url(../images/default/bgGnbOn.gif) no-repeat center top;}
오렌지부분 삭제하시는게 더 좋을것 같네요...