개발 Q&A

제목 [초보] cssmenumaker 에서 가지고온 menu css 조작에 관하여 질문드립니다
글쓴이 가잇 작성시각 2014/06/15 23:45:23
댓글 : 3 추천 : 0 스크랩 : 0 조회수 : 16450   RSS
안녕하세요 CI 를 이용하여 홈페이지 제작에 몰두중인 초보 개발자 입니다.

글 쓴 것은 다름이아니오라, 완성된 홈페이지 레이아웃을 다시 정리하기 위해

cssmenumarker 라는 사이트 에서 menu bar 소스를 받아서 기존 홈페이지에 적용 중인데요.

그곳에 반나절을 매달려도 풀리지 않는 의문점이 있어서 저녁 늦게 질문글을 올리게 되었습니다.


[질문]

1. 링크
http://cssmenumaker.com/builder/2163371

로 들어가보면,  Home, Product, About, Content 가 있습니다.

2. 질문내용
소스를 받아 홈페이지에 적용한 후, 네비게이션 바 왼편과 오른편에,
'마우스 오버해도 파란색으로 변하지 않는 링크 텍스트' 와 '버튼' 을 삽입하고 싶은데. 태그 안에 들어가버리면, 텍스트가 사라져버립니다.

현재 메뉴바의 모습과 제가 원하는 결과물의 구조는 이렇습니다

3. 현재
설명1

4. 원하는 결과물
설명2


와 같이, 네비게이션 왼편과 오른편에, 마우스오버 ( 마우스가 메뉴 위에 올라가는 행위 ) 해도 색상이 변하지 않는 영역에 해당되는 링크나, 버튼이나, 텍스트를 넣고 싶은데

넣으려고 시도를 하면 메뉴바에 가려져 보이지 않게 되어 너무 답답합니다..
z-index 때문인가 해서 사투를 벌여도 답이 안보오는게 답답하기만 합니다.


5. 시도 
맨 앞쪽의 '리뉴얼된홈페이지로이동하려면이곳을클릭' 쪽을 div 태그로 삽입해버리면

설명3
 


와 같이 마우스오버 시에 메뉴의 버튼처럼 백그라운드 색상이 표시가 되어버립니다.
메뉴들과는 별개인 link text 를 걸고 싶은데 말이지요..

또한 메뉴바와는 별개인 오브젝트를 추가하면 메뉴바가 그것을 덮어버립니다.
(버튼이미지, 텍스트, div, span 기타 등등..)


제가 궁금한 것은 여기까지이고, 요약을 하자면 저 위에 menu bar 양쪽에 태그로 쌓여진 메뉴들과는 별개로 텍스트와 버튼이나 이미지를 넣으려 함에어떤 처리를 해주어야 하는지 궁금합니다

 


소스는 http://cssmenumaker.com/builder/2163371 로 가시면 보이시지만
혹시몰라  텍스트파일에 저장하여 파일 첨부 하겠습니다.


긴 글 읽어주셔서 감사합니다.

 다음글 fck에디터 문서모드 호환관련질문..도와주세요 (4)
 이전글 웹호스팅에git 설치해보신분 계신가요? (2)

댓글

한대승(불의회상) / 2014/06/16 09:08:09 / 추천 0
질문 이동 합니다.
변종원(웅파) / 2014/06/16 10:17:16 / 추천 0
적용한 소스를 올려주시는게 좋을 것 같네요.

요즘은 브라우저의 개발자도구가 잘되어 있어서 크롬이나 파이어폭스에서 요소검사로 보시면 
해당요소에 적용된 css를 볼 수 있습니다. 파이어폭스의 경우 수정하면 화면에 수정된 내용도 반영이 되어
볼 수 있구요.

위처럼 적용이 안된다면 선언한 것보다 상위 css가 있을 겁니다. 
가잇 / 2014/06/18 19:45:33 / 추천 0

<ul><li> 리스트에 포함시키고
active 효과를 주지 않도록 css를 수정하니
의도대로 만들어 졌습니다

답변 해주셔서 감사드립니다..^^