절대 위치 대 XHTML/CSS의 부동 소수점

Question

.psd를 XHTML로 변환하고 래퍼의 모든 너비에 걸쳐 메뉴 막대가있는 둥근 모서리가있는 메뉴 막대가 있습니다. 중간에 하나는 repeat-x로 설정됩니다.

예를 들어 나는이 있습니다

<div id="tagline" class="grid_16"><!-- begin tagline --> 
      <div class="left"></div> 
      <div class="center"> 
       <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2> 
      </div> 
      <div class="right"></div> 
</div><!-- end tagline --> 


#tagline {background:url(images/tagline.jpg) repeat-x top; height:96px;} 

#tagline .center {width:930px; float:left;} 
#tagline .left {background:url(images/taglineLeft.jpg) repeat-x top left; width:10px; height:96px; float:left;} 
#tagline .right {background:url(images/taglineRight.jpg) repeat-x top right; width:10px; height:96px; float:right;} 

내가 끝을 위치에 대한 부동 소수점을 사용하고, 나의 질문은 플로트 또는 위치하여 최적의 솔루션입니다 것입니다 : 절대. 이전 브라우저에서 문제가 발생하지 않기를 바란다.

감사합니다.

Answer 1

. 이 같은 것 :

<div id="tagline"> 
    <div  style="background-image: url(images/tagline.jpg);  background-repeat: repeat-x;"> 
    <div style="background-image: url(images/taglineLeft.jpg); background-repeat: no-repeat; background-position: left;"> 
     <div style="background-image: url(images/taglineRight.jpg); background-repeat: no-repeat; background-position: right;"> 
      <h2>Here goes your tagline. Two lines to write a message that best describes your business or your style if you use this theme as a portfolio.</h2> 
     </div> 
    </div> 
    </div> 
</div> 

절대 위치의 부동 소수점이 필요하지 않습니다. 나는 명확성을 위해 스타일을 인라 인했다. 가장 바깥 쪽 DIV에 너비와 높이를 설정하는 것을 잊지 마십시오. 이 팁은 this article에서 영감을 받았습니다.

Answer 2

코드가 대부분 정확합니다. float은 정상적으로 작동하지만 모든 요소를 ​​왼쪽으로 플로팅해야합니다. 마지막 하나를 띄우지 마라. 네가 생각하는대로하지 마라.

---

는 말 : 당신은 배경 이미지, 배경 반복 및 배경 위치 세트 중첩 된 div를 시도 할 수 있습니다

#tagline .right { ... float:left;}