여러 CSS에 큰 로고 쌓기

나는 머리글, 중간 상자 (머리글 아래에 큰 사각형 상자) 및 바닥 글이있는 기본 웹 디자인을 사용합니다.여러 CSS에 큰 로고 쌓기

중간과 머리글을 모두 차지하는 로고가있어서 이미지를 올바르게 조각하는 방법을 찾는 데 어려움을 겪고 있습니다. 가운데와 머리글 모두 단색이지만 로고가 더 넓습니다. 이 스타일을 CSS에 적용 할 수있는 방법이 있으며 로고가 여러 CSS의 위에 놓여 있습니까? 사각형 로고가 아니므로 Photoshop에서 조각을 그릴 수는 없습니다.

감사합니다.

CSS : 절대 :

* { 
    margin: 0px; 
    padding: 0px; 
} 
#wrapper { 
    height: 1.1in; 
    width: 100%; 
    background-color: #0277bc; 
    position: relative; 
} 
#wrapper #logo { 
    position: relative; 
    top: 200px; 
    left: 200px; 

}

출처

2011-01-28 Sapp

위치와 함께이 작업을 수행합니다.

#wrapper {position: relative;}

그런 다음 당신의 로고 래퍼

#logo {position: absolute; top: 200px; left: 200px;}

의 왼쪽 상단 모서리로하는 것이 상대적으로 ID와 위치를주고 당신이 주변에 모든 콘텐츠를 ID가 래퍼가 가정 보기. 부정적인 여백 : 당신은 그것을 절대 위치에 대한 대안 응답으로 어떤 장소

출처

2011-01-28 17:27:07 Jeepstone

로고가 실제로 중간 영역의 머리글과 부분을 오버레이합니다. 내가 사용중인 코드로 원래 게시물을 편집했습니다. – Sapp

나는 당신이 내 대답을 받아 들인 것을보고, 당신은 그 해결책에 행복합니까? – Jeepstone

에서 사이트의 컨텐츠를 오버레이 경우 PNG 로고를해야 할 수도 있습니다

#logo 
{ 
    margin: -25px 0; 
}

이 당신이 텍스트 정렬로 img를 정렬 할 수 있습니다, 또는 그것을 가지고 : 헤더가 100 픽셀 높이 및 로고 키가 150 픽셀 인 경우

, 당신은 사용하여 수직으로 로고를 중심으로 수 텍스트와 인라인

출처

2011-01-28 21:34:31 zzzzBov

너비가 100 % 인 머리글과 바닥 글을 사용하면 머리글과 바닥 글의 해상도와 고정 높이에 관계없이 사용자 화면의 너비가 확장됩니다. 페이지의 중심을 (고정 된 길이/높이의 테이블로 생각하십시오.) 동일한 방식으로 테이블 위에 항상 로고가 포함되도록하고 싶지만 헤더는 항상 같은 위치에 있어야합니다. 여유? – Sapp

'text-align : center;'는 헤더의'img '를 가운데에 맞 춥니 다. 음수 여백은 헤더를 수직으로 이스케이프 처리하기위한 것입니다. – zzzzBov

내 까다로운 문제 중 하나는 내가 가지고있는 로고가 대칭이 아니라는 것입니다 ... 그것은 물체를 던지는 사람이고 그 물체 (로고가 손에서 나오는 흔적과 함께)는 로고의 일부입니다. .so 내 png는 내가 사용해야하는 흔적 아래 및 위에 많은 공백을 가지고 있지만 그것이 의미가있는 경우 png가 전체 이미지를 차지하는 것처럼 사각형입니다. 내 로고 위에 직접 콘텐츠를 추가 할 수 있어야합니다. – Sapp

여러 CSS에 큰 로고 쌓기

답변

관련 문제