2010-08-23 10 views
1

내 div 상자에 div 상자의 오른쪽 가장자리를 따라 "raquo"(») 위치가 있지만 그 안에 하이퍼 링크가 포함되지 않도록하고 싶습니다.CSS - div "background-text"대신 background-image

내 사업부 상자가 여기에 하이퍼 링크입니다 이

.episode-nav .alignright a { 
    margin-bottom:7px; 
    margin-top:7px; 
    width:274px; 
    padding:5px 0px; 
    background:#2A2A2A; 
    text-align:center; 
    border:1px solid #1B1B1B; 
    float:right; 
} 

이 무엇을

을 수행 할 수 있습니다 내 CSS는?

+3

어떻게 DIV 대신 목록을 사용하는 방법에 대한. 이것은 메뉴를위한 것입니까? –

+0

HTML 및 CSS 코드의 실례가 도움이 될 것입니다. :) – Kyle

답변

2

실제로 » 작업을 진행하는 등이 지금

<ul id="menu"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
</ul> 

와 같이 사용해야 올바른 마크 업 목록입니다 메뉴를 만들려고 시도하는 경우. 그것을하는 두 가지 방법이 있습니다. 추가 span»을 추가하여 앵커 또는 목록 안에 넣거나 CSS :after 의사 요소를 사용하여 콘텐츠를 생성 할 수 있습니다. 이 두 번째 방법은 브라우저 지원이 적어 논쟁의 여지가 있습니다. 이 컨텐츠를 생성하기 위해 content 속성을 사용하는 방법 http://jsfiddle.net/aQSVp/

주의 사항 :

http://reference.sitepoint.com/css/pseudoelement-after 여기에 행동 두 가지 방법의 데모를 살펴 유무 : 여기 :after 의사 요소에서보세요.

#after a:after { 
    content: '»'; 
    float: right; 
    margin-right: 10px; 
} 
+0

구형 브라우저에서는 지원되지 않습니다. –

+0

@ 프랭크 - 아니, 그 이유는 내가 대안을 제공했기 때문이다. ': after' 메소드는 생성 된 엘리먼트가'span' 메소드와 달리 DOM에 주입되지 않기 때문에 잠재적으로 더 깨끗합니다. –

+0

글쎄, 네가 맞다. IE6에 5 ~ 7.5 %의 사용자가있다. 그래서 배경 이미지를 추천했다. –

0

저는 '배경 텍스트'로 원하는 것을 이해하고 있는지 100 % 확신하지 못했습니다. 단순히 앞에 >>가있는 링크를 원하면 div에서이 작업을 수행하십시오.

<span>&raquo;<a href="...">This is a link</a></span> 

스팬의 스타일에 "white-space : nowrap"을 추가 할 수 있습니다.

1

약간의 래스터 래스터 이미지를 만들어 배경 이미지로 사용하십시오.

0

이 질문은 이미 오래된 질문이며 이미 답변이 있지만이 문제에 대한 CSS 해결책이 있습니다.

li에서 :before을 사용하면 의 16 진수 코드를 사용하여 &raquo; 일 수 있습니다. Demo here.

HTML :

<ul> 
    <li>List element 1</li> 
    <li>List element 2</li> 
    <li>List element 3</li> 
    <li>List element 4</li> 
</ul> 

CSS :

ul 
{ 
    list-style: none; 
} 

li:before 
{ 
    content: '\BB '; 
}