이미지가 정확한 위치에 없습니다.

저는 지금까지 세 개의 이미지가있는 html과 css 파일을 만들었습니다. 제목, 내비게이션 및 컨텐트 및 탐색을위한 정렬되지 않은 목록이 있습니다.이미지가 정확한 위치에 없습니다.

제목과 탐색 이미지의 중앙에 150px의 여백을두고 싶습니다. 완벽 해 보입니다. 그런 다음 콘텐츠 이미지를 추가하고 CSS를 작성합니다. 그러나 미리보기를하면 모든 이미지가 페이지의 가운데로 (세로로) 이동하므로이 문제의 원인을 볼 수 없습니다.

다음은 HTML 코드입니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>The Internet</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="container"> 

    <div id="top"> 
    <div id="title"> 

    </div><!--Title End--> 

    <div id="nav"> 
      <ul class="nav-links"> 
       <li><a href="#"> Home </a></li> 
      </ul><!--Nav Links End--> 

    </div><!--Navigation End--> 

    </div><!--Top End--> 

    <div id="content"> 

    </div><!--Content End--> 

    <div id="footer"> 

    </div><!--Fotter End--> 

</div><!--Container End--> 
</body> 

</html>

그리고 여기에 CSS 코드입니다 :

* { 
    margin: 0px; 
    padding: 0px; 
    border: none; 
} 

body { 
    background-image: url(images/background.png); 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    color: #ffffff; 
} 

#container { 
margin: auto; 
width: 100% 
} 

#top { 
float: left; 
width: 100%; 
height: 80px; 
margin-top: 150px; 
} 

#title { 
background-image: url(images/title.png); 
float: center; 
width: 311px; 
height: 80px; 
margin-top: auto; 
margin-left: 20%; 
margin-right: auto; 
} 

#nav { 
background-image: url(images/navigation.png); 
float: center; 
width: 362px; 
height: 50px; 
margin-left: auto; 
margin-right: 20%; 
margin-top: -50px; 
} 

#content { 
background-image: url(images/content.png); 
float: center; 
width: 724px; 
height: 500px; 
margin-top: 250px; 
margin-left: auto; 
margin-right: auto; 
}

사전에 감사!

출처

2009-11-11 Mozaz

언제든지 pastebin.com과 같은 것을 사용할 수 있습니다. 그리고 예, 문제를 해결하려면 샘플 코드가 필요합니다. – Franz

실제로 코드를 SO 내에 보관하는 것이 좋습니다. 그래야 코드를 최소한으로 줄일 수 있습니다. – Noldorin

@ Noldorin, 나는 샘플 코드가 * 여기 * 여야한다는 것을 이해하고 Franz에게 투표했지만, 우리가 어딘가에서 볼 수있는 데모 사이트를 갖는 것이 좋을 것입니다. 어느 쪽이 pastebin.com이 들어 왔는지입니다. –

귀하의 float: center;이 페이지의 흐름을 벗어납니다. 대신 background-position을 사용하여 이미지를 div에 배치 할 수 있습니다.

출처

2009-11-11 20:14:31 Chris

고마워요! 문제가 정렬되었습니다! :) – Mozaz

이미지가 정확한 위치에 없습니다.

답변

관련 문제