2010-08-05 2 views
1

alt text http://i37.tinypic.com/a5et6f.png로고 대신 이미지 대신 CSS를 사용하는 이유는 무엇입니까?

좋아, 그래서 위의 이미지는 내가하려는 일에 대한 이미지입니다. 당신은 로고가 페이지의 매우 맨 꼭대기에 도달하는 단단한 배경을 가지고있는 것을 본다. (맨 위에 하얀색이 없다.) 그것이 내가하려는 것이다. 내 <h1> 로고는 위에 것, 그래서 난 그냥, 이미지와 위치가 그것을 랩퍼를 추가 할 수 있습니다 확신

<body> 
<div id="wrapper"> 
    <div id="divider"> 
    <h1>NAME/SLOGAN</h1> 
    <ul class="underlinemenu"> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">ABOUT</a></li> 
    <li><a href="#">SUBSCRIBE</a></li> 
    <li><a href="#">FAQ</a></li> 
    <li><a href="#">CONTACT</a></li> 
    <li><a href="#">LOGIN</a></li> 
    </ul> 
    </div> <!-- end divider --> 

,하지만 난 생각 :

이는 그 부분에 대한 내 HTML입니다 그것은 꽤 비효율적입니다.

검은 색과 흰색의 단색 두 가지가 있습니다. CSS로 할 수 없습니까?

내가 그것을하려고했을 때 나는 "블록"으로 끝났다. .. 내가 원했던 것이 아니라. 맨 위에는 여전히 흰색이있었습니다. 예를 들어, 누군가가 종이를 잘라내어 (검정색 인 경우) 말이되는 것이 더 좋기를 바랍니다.

+0

을 조정하려면 너무 경우 인라인 블록을? 그렇지 않으면 우리 모두가 추측하고 있습니다. – Emily

답변

3

당신은 당신이 본문에 패딩이없는 있는지 확인해야합니다

body { padding: 0; } 

이 콘텐츠는 모든 방법 창의 맨 상단으로 이동합니다 보장합니다.

+0

이 코드를 더 확장하여 코드를 시작한다고 가정 해보십시오. * {margin : 0; 패딩 : 0; }. 난 항상 기본 패딩 및 여백으로 싸우지 않을 때 더 쉽게 디자인 할 수있는 것으로 나타났습니다. – riwalk

+0

패딩이 없다면 ... h1.logo { background-color : # 000000; } 을 사용해야하나요? – MW2000

+1

@ MW2000 : 정확함. @ Stargazer712 : 나는'* {margin : 0; 패딩 : 0; } ","* "해결책은 양식 컨트롤 등을 망칠 수 있기 때문에"적절한 "[CSS 재설정] (http://meyerweb.com/eric/tools/css/reset/) 파일을 사용합니다. –

1

우선, h1, #divider, #wrapper 또는 body에 여백 또는 패딩이 있는지 확인하십시오. 그렇다면 0px로 설정하십시오.

로고는 div를 사용하여 너비/높이 및 배경 이미지 속성을 설정할 수 있습니다.

+0

배경색 속성을 의미합니까? 나는 이미지를 사용하고 싶지 않다. – MW2000

+0

@ MW2000 글쎄, 이걸하는 또 다른 방법입니다. h1.logo {배경색 : # 000000; color : #ffffff} 트릭을 수행합니다. –

1

는 글로벌 공백 리셋있다 :

* { 
    margin: 0; 
    padding: 0; 
} 

기본 마진과 패딩을 제거하고 당신은 원치 않는 틈이 없습니다. 주의해야 할 점은 사이트의 모든 간격 (예 : 목록, 제목 등)을 지정해야한다는 것입니다. 대신 어떻게 <span class="logo">LOGO</span>

및 CSS 파일에 넣고 사용에 대한 귀하의 로고에 대한 <h1>LOGO</h1>를 사용

0

?

.logo { 
margin:0; 
padding:0; 
background:black; 
color:white; 
font-size:2em; } 

당신은 너비, 높이 및 표시 추가 할 수 있습니다 : 당신은 당신이 몸, 래퍼, 분배기 및 H1에 대한 귀하의 CSS를 게시 할 수 로고 상자 크기

+0

아야. 죄송합니다. 누군가를 불쾌하게하는 것은 아닙니다. – KMW

관련 문제