div와 함께 텍스트 위치 지정 - 무작위로 패딩을 추가하는 것 같습니다

내 새롭고 경험이없는이 변명을 용서하십시오.div와 함께 텍스트 위치 지정 - 무작위로 패딩을 추가하는 것 같습니다

어떤 이유에서든 내 레이아웃의 "주 콘텐츠"div (본문)에있는 텍스트가 왼쪽에 추가하는 패딩 또는 다른 모양처럼 보이지만 CSS에는 아무 것도 없습니다. 컨테이너는 페이지의 올바른 너비와 위치이지만 모든 텍스트에 들여 쓰기와 같이 200px 정도의 텍스트가 시작됩니다.

왜 그런지 모르겠습니다. 누구든지 어떤 생각을 가지고 있습니까? # 메인 콘텐츠가 작동하지만, 영향을 줄 수 있으므로 모든 코드 (각 섹션 내부의 글자 빼기)를 포함했습니다. 나는 알지, 나는 우둔하다는 것을 알고있다. #masthead의 bg와 같은 폭이 1200 픽셀이고 텍스트가 전체 영역을 채우고 싶습니다.

<!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> 
<title></title> 
<link href="mycss.css" rel="stylesheet" type="text/css"/> 
</head> 
<body> 
<div id="container"> 
<div id="masthead"></div> 
<div id="top-nav"></div> 
<div id="left-nav"></div> 
</div> 
<div id="main-content"></div> 
<div id="footer"></div> 
</body> 
</html>

업데이트 :

body { 
     font-family: Georgia, "Times New Roman", Times, serif; 
     color: #FFFFFF; 
     background-color: #333333; 
     padding: 0px; 
     margin: 0px;} 
    #container { 
     background-color: #333333; 
     width: 1200px; 
     margin: 10px auto 10px auto;} 
    #masthead { 
     background-position: center; 
     height: 500px; 
     width: 1200px; 
     background-image: url('banner.jpg'); 
     background-color: #ffffff; 
     background-repeat: no-repeat;} 
    #left-nav { 
     text-align: left; 
     position: relative; 
     top: -400px; 
     margin: 20px 0px 10px 0px; 
     width: 180px; 
     float: left; 
     border: 2px solid #000000; 
     color: #FFFFFF; 
     font-family: corbel, helvetica, arial; 
     font-size: 14px; 
     font-weight: normal; 
     height: auto; 
     line-height: 11px; 
     text-shadow: 0 0 3px #8D6D6F; 
     background-color: #333333; 
     left: 20px; 
     opacity: 0.8; 
     filter: Alpha(opacity=80); /* IE8 and earlier */; 
     padding-top:5px; 
     padding-bottom:5px; 
     padding-right:5px; 
     padding-left:5px;} 
    #main-content { 
     background-color: #666666; 
     font-family: "Palatino Linotype"; 
     margin:auto; 
     width:1200px;} 
    #right-content { 
     background-color: #666666; 
     font-family: "Palatino Linotype"; 
     margin:auto; 
     width:200px;} 
    #footer { 
     border-top: 2px solid #006600; 
     clear: both; 
     padding: 10px 0 px; 
     text-align: center;} 
    #top-nav ul { 
     text-align: center; 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px;} 
    #top-nav ul li { 
     opacity: 1.0; 
     display: inline;} 
    #top-nav ul li a { 
     color: #000000; 
     font-family: Impact, Charcoal, sans-serif; 
     background-color: #CCCCCC; 
     padding: .2em 1em .2em 1em; 
     opacity: 1; 
     filter: Alpha(opacity=100); /* IE8 and earlier */;} 
    #top-nav ul li a:hover { 
     border-color: 99BF99; 
    color: #000000; 
    background-color: CCFFCC; 
    border-width: 1px; 
    border-style: solid;} 
h1 { 
    font: 30px Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;}

그리고 여기에는 HTML의 나는 분명히 추가 : 두 텍스트의 위치 문제를 해결 메인 컨텐츠로. 그러나 현재 주 콘텐츠 전체가 몇 인치 아래로 이동합니다. 그것에 대한 아이디어가 있습니까? 나는 당신의 문제를 복제하고 CSS를 내 # 메인 컨텐츠로

clear: both;

를 추가 할 필요가 생각했습니다 http://jsfiddle.net/r7yCa/

출처

2014-02-13 user3307787

에게 당신을 여기

은 jsFiddle입니다 문제가 나타나지 않을 때까지 jsFiddle을 만들고 코드를 제거 할 수 있습니다. 그렇다면 당신은 그것을 일으키는 것에 대한 좋은 후보자가 있습니다. 그 후에 jsFiddle을 게시하면 도움이 될 것입니다. – kapa

왼쪽 탐색 div가 왼쪽으로 떠 있었고 선택을 취소하지 않았기 때문입니다. – j08691

또한 position : relative를 사용하여 레이아웃을 직접 제어하지 마십시오. 수레를 올바르게 사용하는 방법을 알아 내야합니다. –

#main-content { 
    background-color: #666666; 
    font-family: "Palatino Linotype"; 
    margin:auto; 
    clear: both; 
    width:1200px;}

출처

2014-02-13 21:31:47 Stu1986C

흠. 왼쪽 탐색 메뉴에서 부동을 제거하는 것과 같은 결과가 있습니다. (주석에서 말했고 질문, 미안). 메인 컨텐츠 내의 텍스트를 수정하지만 메인 컨텐츠는 페이지에서 몇 인치 아래로 이동하여 큰 차이를 남깁니다. – user3307787

div와 함께 텍스트 위치 지정 - 무작위로 패딩을 추가하는 것 같습니다

답변

관련 문제