CSS의 위치 문제

Question

글쎄, 내가 사이트를 개발 중이고 CSS 문제로이 문제를 해결할 수 있도록 도와주세요.

최종 결과는 다음 이미지를 참조하십시오.

http://i51.tinypic.com/5bwpee.jpg

그래서 실제로는 다음과 같은 코드에 난 그라데이션 이미지를 사용하여 배경을 오버 플로우 패턴 화상을 사용 .. 그

<div id="header"> 
    <div class="pattern"></div> <!-- .pattern --> 
    <div id="wrapper"> 
     <div class="topHeader"> 

     </div> 
    </div> 
</div> <!-- #header --> 

및 CSS처럼 번호.

#header { 
    width:100%; 
    height:150px; 
    background:url(images/header_gradient.png) repeat-x; 
} 

.pattern { 
    width:100%; 
    height:150px; 
    background:url(images/header_transparent.png) repeat; 
} 

#wrapper { 
    width:1200px; 
    margin:0 auto; 
    background-color:#F00; 
    height:100px; 
} 

그렇게 친절하게 내가 위치를 시도

.. 제가 헤더의 중앙에 로고 및 저자 세부 사항을 설정하는 방법 것으로이 문제를 해결하는 데 도움이 바랍니다하지만 어쩌면 그것은 잘못.

---

지금 내가 결과 아래에있는 내 코드를 편집 할 수 있지만 여전히 가지고 문제

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="pattern"></div> 
    <div id="main"> 
     <img src="http://i52.tinypic.com/16i6z9d.jpg" /> 
    </div> 
</div> 

CSS

#wrapper { 
    position:relative; 
} 

#header { 
    width:100%; 
    height:150px; 
    background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x; 
} 

#pattern { 
    width:100%; 
    height:150px; 
    background:url(http://i51.tinypic.com/ao75eg.jpg) repeat; 
    position:absolute; 
    top:0px; 
} 

#main { 
    width:1200px; 
    margin:0 auto; 
    margin-top:-103px; 
} 

#main img { 
    z-index:5px; 
} 

모든 여전히 가지고 문제를 수행 한 후 모든 레이어를 통해 #pattern . 제발이 문제를 해결하도록 친절하게 도와주세요.

감사합니다.

Answer 1

로고 및 사이트 이름 콘텐츠 용 div를 만듭니다. position:relative; left: 400px 또는 필요한 거리만큼 오른쪽으로 div를 이동하십시오.
로고와 사이트 네임을 나란히 배치하여 나란히 배치하십시오. 컨테이너 div (#logoandsitename)를 overflow:auto;으로 설정하여 부동 소수점을 포함합니다.

HTML

<div id="header"> 
    <div class="pattern"></div> <!-- .pattern --> 
     <div id="wrapper"> 
     <div class="topHeader"> 
      <div id="logoandsitename"> 
       <img src="img.source" /> 
       <span id="sitename">Your Site Name</span> 
      </div> 
     </div> 
    </div> 
</div> <!-- #header --> 

CSS 거의 당신이 찾고있는 것을

#logoandsitename { 
    overflow: auto; 
    width: 300px; 
    height: 100px; 
    position: relative; 
    left: 300px; 
} 

#logoandsitename img { 
    float:left; 
} 

#sitename { 
    float:left; 
    font-size: 40px; 
} 

?

Answer 2

왜 "너비 : 1200px"가 필요한가요? #wrapper에?

왜이 html을 사용해 보지 않으시겠습니까?

<div id="header"> 
    <div id="wrapper"> 
     <div class="topHeader"> 
      <div id="logo">Logo</div> 
      <div id="author">Author Details</div> 
     </div> 
    </div> 
    <div class="pattern"></div> <!-- .pattern --> 
</div> <!-- #header --> 

이 CSS :

로고 및 저자 세부 사항에 DIV

#header { 
    width:100%; 
    height:150px; 
    background:url(images/header_gradient.png) repeat-x; 
} 

.pattern { 
    width:100%; 
    height:150px; 
    background:url(images/header_transparent.png) repeat; 
} 

#wrapper { 
    width:1200px; 
    margin:0 auto; 
    background-color:#F00; 
    height:100px; 
} 
#logo, #author{ 
    width:200px; 
    height:50px; 
    float:left; 
} 
#author{ 
margin-left:20px; 
} 
.topHeader{ 
    width:500px; 
    margin:0 auto; 
}