CSS 헤더 이미지 "스택 됨"

잠시 동안 내 웹 사이트에서이 문제가 발생하여 그림을 사용하여 머리글 작업을하고 있었고 그 위로 마우스를 가져 가면 그림이 바뀌지 만 끝나면 그림이 바뀝니다.CSS 헤더 이미지 "스택 됨"

CSS의 코딩 : "홈", "뉴스", "로그인", "등록"과 "연락처"퍼팅, 내가 대신 서로 옆에 모두의, 모두는 다음과 같이 최대 스택 것으로 나타났습니다 : #menubar { 너비 : 50 %; 여백 : 0 자동 0 자동;

.home { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 0 0; 
} 
.home:hover { 
    background-position: 0 100; 
} 
/***************************************************/ 
.news { 
display: block; 
    width: 240px; 
height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: -240 top; 
} 
.news:hover { 
    background-position: -240 bottom; 
} 
/***************************************************/ 
.register { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 480 top ; 
} 
.register:hover { 
    background-position: 480 bottom; 
} 

/***************************************************/ 
.play { /*login*/ 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 720 top; 
} 
.play:hover { 
    background-position: 720 bottom; 
} 

/***************************************************/ 
.contact { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 240 top ; 
} 
.contact:hover { 
    background-position: 240 bottom; 
} 

/***************************************************/

}

귀하의 문제는 일반적으로 그 원인이되는 unfloated, 서로가 서로 (대신 서로 옆에) 위에 쌓인하려면 옆에 여러 블록 요소 목록에서 유래

The HTML coding

출처

2013-12-08 ToontownFred

당신은 [jsFiddle] (http://jsfiddle.net/)이 재현 할 수 있습니까? – brandonscript

'.home, .news, .register, .play, .contact {float : left; }'에 추가하고'background-position'에 숫자 옆에'px'를 추가하십시오. – mdesdev

@ r3mus 간단한 솔루션을 선호합니다 ( – ToontownFred

달성하고자하는 목표를 달성하기 위해 가능한 많은 방법이 있습니다.

1. 당신은 당신의 CSS 정의에 다음과 같은 속성을 적용하여 요소 떠 있습니다 서로 옆에

의 요소를 부동 :

float: left;

수 left을 반면를 여기에 그들 중 두 가지 right 또는 none 이어도됩니다.

정상적으로 정렬 된 요소 목록이 있고 서로 인접하여 float이되도록하려면 float:left을 사용할 수 있습니다.

모든 CSS 정의 (.news, .register 등)에 float: left을 추가하십시오. 영향을받는 모든 요소에

.floatLeft { 
    float: left; 
}

와 클래스를 적용 :

더 깨끗한 방법은 CSS 클래스를 생성하는 것입니다 당신이 <a> 요소를 사용하기 때문에, 그러나

<a class="floatLeft" href=""></a>

, 당신 요소를 차단하도록 만들 수 있습니다. 적용 :

ca n 도움이된다.

일반적으로 메뉴 컨테이너에 <ul> 요소를 사용하고 메뉴 버튼에 <li> 요소를 사용하는 것이 좋습니다. <li> 태그 안에 여전히 <a> 개의 요소를 사용할 수 있습니다.

부모 컨테이너는 서로 옆에있는 자식 요소를 나열 할 수있는 충분한 너비를 허용해야합니다. 그렇지 않으면 떠 다니는 요소가 다음 '줄'에 들어가야합니다.

Learn about floats here.

2.inline-block

사용하여 당신은 사용할 수 있습니다

디스플레이 : 인라인 블록 모든 메뉴 버튼을

, 당신이 서로 옆에 여러 요소를 표시 할 수 있습니다. 메뉴 컨테이너에

white-space: nowrap

:이 방법을 사용하는 경우

, 당신은 설정해야 할 수도 있습니다 명심.

또한 수직 정렬 문제로 실행될 수 있습니다 -이 경우의 사용 : 각 요소 (당신이 필요에 따라 top 또는 middle 또는 bottom)에

vertical-align: top

추가 정보

You can learn about the above two methods by following this link

출처

2013-12-08 23:16:53 SquareCat

CSS 헤더 이미지 "스택 됨"

답변

관련 문제