머리글 맞춰보기 화면 너비

지금 내 머리글이 화면에 잘 보이지만 머리글이 너무 넓어서 스크롤하면 이해할 수 있을까요? 내 너비를 100 %로 설정 했으므로 놓친 부분이 있습니까? 이것은 코드입니다. HTML :머리글 맞춰보기 화면 너비

#header { 
width: 100%; 
margin-left: auto; 
height: 172px; 
margin-right: auto; 
margin-top: -10px; 
background-color: #ffffff;} 

.mainheader 
{ 
border: 0px; 
position: relative; 
z-index: 2; 
top: -185px; 
left: 265px; 
} 
.phone 
{ 
position: relative; 
top: -85px; 
left: -2230px} 
.email 
{ 
position: relative; 
top: -75px; 
left: -2195px}

웹 사이트는 http://kerryaltmantest.info

감사합니다 : 여기

<div id="header"> 
<center> 
<table border="0" width="950px"> 
    <tbody> 
    <tr> 
    <td> 
     <div class="mainRunner"><img class="background" height="200px" src="http://i.imgur.com/1laWPRb.png" width="3000px" /> <img class="mainheader" height="150" src="http://i.imgur.com/sdqMfWT.png" width="500" /></div> 
     </td> 
     <td> 
     <div class="contactinfo"><img class="phone" height="40" src="http://i.imgur.com/5Wew8PC.png" width="250" /> <a href="mailto:[email protected]"><img class="email" height="30" src="http://i.imgur.com/bXs6aht.png" width="200" /> </a></div></div> 
     </td> 
    </tr> 
</tbody> 
</table>

그리고는 CSS입니다!

출처

2014-06-13 user3693564

, 내가 생각하는 몇 가지 문제입니다 될거야 (1) 헤더 이미지의 폭이 3000px (2)'.email'와''남은 .phone' : -2230px' 및 'left : -2195px'. 당신의 문제를 해결하는 방법을 잘 모르겠다 - 만약 당신이 [jsfiddle] (http://jsfiddle.net)을 제공했다면 더 쉬울 것이다. 그러나 나는 당신이이 거대한 px 값을 재고 할 필요가 있다고 생각한다. –

멍청하다. mainRunner에 대한 상대적인 규칙 http://jsfiddle.net/SG7Sb/1/ – jmercier

감사합니다. 고맙습니다. 나는 너비가 문제라는 것을 논리적으로 알고있다. 그러나 이미지를 작게 만들면 더 높은 화면 해상도에서 헤더가 화면의 왼쪽에 도달하지 않습니다. 말이 돼? – user3693564

당신은 div을 다음과 같이 가지고 있습니다.

<div class="mainRunner"> 
    <img class="background" height="200px" src="http://i.imgur.com/1laWPRb.png" width="3000px"> 
    <img class="mainheader" height="150" src="http://i.imgur.com/sdqMfWT.png" width="500"> 
</div>

그것의 너비 때문에 첫 번째 이미지의 폭 width="3000px의 3000px이다. 그것을 고치십시오. 첫 번째 이미지는이 이미지에

<img class="background" height="200px" src="http://i.imgur.com/1laWPRb.png" width="3000px">

확인 width="3000px".

출처

2014-06-13 22:32:21

나는 그것이 논리적으로 문제라는 것을 안다. 그러나 이미지를 작게 만들면 더 높은 화면 해상도에서 헤더가 화면의 왼쪽에 도달하지 않습니다. 말이 돼? – user3693564

아니에요, 당신은'헤더'의 너비를'100 %'로 설정할 수 있습니다. 당신의'css/style' 문제를 이해하는 것은 불가능 합니다만, 당신이 제대로 구현하지 않았다고 생각합니다. 여전히 레이아웃에서'table'을 사용하고 있습니다! –

img 대신 반복되는 표의 배경 이미지로 배경색 이미지를 사용하고 테이블 너비를 100 %로 설정합니다. 그냥 코드를보고하여

table 
{ 
background-image: url("http://i.imgur.com/1laWPRb.png"); 
background-repeat: repeat; 
width:100%; 
}

출처

2014-06-13 23:52:17 Raja

머리글 맞춰보기 화면 너비

답변

관련 문제