한 줄 (하나 또는 두 단어)이 한 외부로 흘러갑니다.

저는 CSS에 새로운 것이므로 어리석은 문제라면 용서해주십시오.한 줄 (하나 또는 두 단어)이 한 외부로 흘러갑니다.

나는 내부에 너비의 33.33 %의 3 개의 임베디드 div가있는 꼬리말을 만들었습니다. 어떤 이유에서 내가 각 div에 넣고있는 텍스트는 div의 아래쪽에서 1/2 정도입니다. 이것은 나를 미치게 만든다. 누군가 이것이 왜 일어나는지 설명해 주시겠습니까? 여기

<! DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 strict//EN" "http://www.3org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html lang="EN" dir="ltr" xmlns="http://www.w3org/1999/xhtml"> 

<head> 

<meta http-equiv="content-type" 
content="text/xml; charset=utf-8" /> 

<title>www.BLeeOBS.com</title> 

<link rel = "stylesheet" 
type = "text/css" 
href = "twoCol.css" /> 

</head> 

<body background="images/brick.jpg"> 

<div id="body"> 

<div id="head"> 
<h1>B. Lee Oil Burner Service</h1> 
</div> 

<div id="head_right"> 
<h1></h1> 
</div> 

<div id="left"> 
<h2></h2> 
</div> 

<div id="right"> 
<h2></h2> 
</div> 

<div id="footer"> 

    <div id="footer1"> 
    <h3>Fully Insured</h3> 
    </div> 

    <div id="footer2"> 
    <h3>HIC# PA088378</h3> 
    </div> 

    <div id="footer3"> 
    <h3>©2013</h3> 
    </div> 

</div> 

</div> 

</body> 

</html>

내 CSS입니다 : 여기

내 XHTML이다

#body { 
margin-left: auto; 
margin-right: auto; 
background-image: url("images/bggradient.jpg"); 
text-align: center; 
background-repeat: repeat-x; 
width: 768px; 
height: 1024px; 
} 
#head { 
background-image: url("images/horizontalpipe.png"); 
background-repeat: repeat-x; 
float: left; 
height: 90px; 
width: 678px; 
} 
#head_right { 
background-image: url("images/elbow.png"); 
float: left; 
width: 90px; 
height:90px; 
} 
#left { 
float: left; 
height: 904px; 
width: 678px; 
} 
#right { 
background-image: url("images/verticalpipe.png"); 
background-repeat: repeat-y; 
float: left; 
width: 90px; 
height: 904px; 
} 
#footer { 
background-color: gray; 
color: white; 
height: 30px; 
width: 768px; 
clear: both; 
} 
#footer1 { 
height: 30px; 
float: left; 
width: 33.33%; 
} 
#footer2 { 
height: 20px; 
float: left; 
width: 33.33%; 
} 
#footer3 { 
height: 20px; 
width: 33.33%; 
float: left; 
}

내 페이지가 무슨 일이 일어나고 있는지 보려면 여기를 볼 수 있습니다

: 는 http://www.bleeobs.com/bricksswf.html

흰색 텍스트가 있어야한다 전체적으로 회색 박스 (내 div)에 있지만, 볼 수 있듯이 중간에 있습니다.

또한 헤더의 "B. Lee Oil Burner Service"텍스트를 가져오고 싶습니다. 패딩 설정은 전혀 도움이되지 않습니다.

도움을 주시면 감사하겠습니다. 그러나 여백이 "사용자 에이전트 스타일"에 의해 설정되는 이유

출처

2013-03-18 Phil Pthee B. Lee

브라우저에서 적용되는 모든 기본 CSS를 덮어 쓰는'reset.css'을 사용하십시오. –

잘 모르겠어요 여기 참조 : 직접 수정

h3 { margin: 0 }

또는 그러나 당신을 설정하는 것입니다

inspector

원하는. 이 Chrome user agent stylesheet overwriting my site style에 따르면 올바른 픽스를 조사하는 것이 좋습니다. 문서의 맨 위에 원하는 내용이있을 수도 있고 (어쩌면 HTML 5 일 수도 있습니다) 어딘가에 CSS가 깨져있을 수도 있습니다.

편집 : 재설정해야 할 기본 브라우저 스타일에 대해 Adrift가 맞을 수 있습니다. 그가 제안하는 것처럼 reset.css를 사용할 수 있습니다.

출처

2013-03-18 03:20:44

빠른 응답을 보내 주셔서 감사합니다. 지금 제대로 작동하고있는 것 같습니다. –

한 줄 (하나 또는 두 단어)이 한 외부로 흘러갑니다.

답변

관련 문제