CSS佈局方法：圓角不是CSS3＆圖像沿（不只是角落）

我需要使CSS佈局具有最小寬度和最小高度，但將擴大到瀏覽器大小的80％。
主div會有圓角（使用圖像，因爲不支持CSS3） - 但是，也有圖像在頂部和底部以及左側和右側的角落之間運行。這也提供了陰影效果。
挑戰是因爲我有div這個位置：相對和我的角落然後是位置：絕對（所有這一點都很好），但是我希望我的中間圖像擴大以填充角落之間的空間。除了這不能正常工作外，它會延伸到div的末尾。
我對一種全新的方法開放，我在下面包括圖像和代碼，但隨意解決使用代碼使用背景顏色與使用我的圖像。

wireframe 下面是容器中的圖像：

下面是一些代碼...

HTML ：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <div class="pageWrapper"> 
     <div class="contentWrapper"> 
      <span class="top-left"></span> 
      <span class="top-middle"></span> 
      <span class="top-right"></span> 
      <span class="bottom-left"></span> 
      <span class="bottom-middle"></span> 
      <span class="bottom-right"></span> 
      <div class="content"> 
       <p> 
        Lorem ipsum dotor sit amet, consectetur adipiscing elit. 
        Ut viverra lectus vitae est ullamcorper a tempus est commodo. 
        Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum. 
        Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus. 
        Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque 
        vitae ullamcorper mauris venenatis. 
       </p> 
      </div> 
     </div> 
    </div> 
</body>

CSS：

body { 
background-color: #eeeee7; 
} 

.pageWrapper { 
margin: 0px auto;  /* centers the div horizontally */ 
min-width: 900px; 
min-height: 430px; 
height: 80%; 
width: 80%; 
background-color: red; 
} 

.contentWrapper { 
position: relative;  /* makes our corners absolute relative to our container not our browser window */ 
background-color: yellow; 
height: 100%; 
width: 100%; 
padding-right: 34px; 
padding-left: 34px; 
padding-top: 155px; 
} 

.top-left, 
.top-right { 
position: absolute; 
height: 155px; 
width: 34px; 
background-color: blue; 
} 

.bottom-left, 
.bottom-right { 
position: absolute; 
height: 29px; 
width: 34px; 
} 

.top-left { 
top: 0; 
left: 0; 
background-image:url('images/cornerLeftTop.jpg'); 
} 
.top-right { 
top: 0; 
right: 0; 
background-image:url('images/cornerRightTop.jpg'); 
} 
.bottom-left { 
bottom: 0; 
left: 0; 
background-image:url('images/cornerBottomLeft.jpg'); 
} 
.bottom-right { 
bottom: 0; 
right: 0; 
background-image:url('images/cornerBottomRight.jpg'); 
} 
.top-middle { 
position: absolute; 
top: 0; 
left: 34px; 
height: 155px; 
width: 100%; 
background-image:url('images/headerMiddle.jpg'); 
} 

.bottom-middle { 
position: absolute; 
bottom: 0; 
height: 29px; 
width: 100%; 
background-image:url('images/footerMiddle.jpg'); 
} 

.middle-left { 

} 

.middle-right {

}

來源

2012-11-07 Matt

我的問題是「爲什麼會出現對CSS3不支持？」這種方法已經過時了。我建議：答：使用CSS3，並降級到 tgormtx

我需要支持舊瀏覽器...不是我的要求，我的工作場所 – Matt

這爲我工作，我還在完善最小寬度不< IE 8的工作我知道有現代化如何做到這一點。但是，我工作的地方，仍然必須支持一些即6個用戶。這工作！

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <div class="pageWrapper"> 
     <div class="contentWrapper">  
      <div class="headerMiddle"> 
      </div> 
      <span class="top-left"></span> 
      <span class="top-right"></span> 
      <div class="contentRight"> 
      </div>         
      <div class="contentLeft"> 
      </div> 
      <div class="content">     
       <p> 
        Lorem ipsum dotor sit amet, consectetur adipiscing elit. 
        Ut viverra lectus vitae est ullamcorper a tempus est commodo. 
        Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum. 
        Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus. 
        Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque 
        vitae ullamcorper mauris venenatis. 
       </p> 
       <p> 
        Lorem ipsum dotor sit amet, consectetur adipiscing elit. 
        Ut viverra lectus vitae est ullamcorper a tempus est commodo. 
        Phasellus et pulvinar risus. Cras quis aliquet odio. Ut condimentum porta mi ultrices elementum. 
        Maecenas feugiat magna at tellus convallis congue. Aenean tincidunt rutrum varius. Aenean nec eros id odio dapibus faucibus. 
        Pellentesque blandit gravida erat id sodales. Etiam nunc odio, pharetra nec aliquam a, gravida at metus. Nullam dapibus vulputate blandit. 
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ullamcorper lectus ut sapien scelerisque 
        vitae ullamcorper mauris venenatis. 
       </p>      
      </div> 

      <div class="footerMiddle"> 
      </div> 
      <span class="bottom-left"></span> 
      <span class="bottom-right"></span>  
     </div> 
    </div> 
</body>

body { 
    background-color: #eeeee7; 
    text-align:center; 
} 

.pageWrapper { 
    margin: 0px auto;  /* centers the div horizontally */ 
    min-width: 900px; 
    height: 768px; 
    width: 80%; 
} 

.contentWrapper { 
    position: relative;  /* makes our corners absolute relative to our container not our browser window */ 
    background-color: white; 
    height: 100%; 
    width: 100%; 
    padding-top: 155px; 
    text-align: left; 
} 

.content { 
    padding: 75px; 
} 

.headerMiddle { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 155px; 
    width: 100%; 
    background-image:url('images/headerMiddle.jpg'); 
} 

.footerMiddle { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    height: 29px; 
    width: 100%; 
    background-image:url('images/footerMiddle.jpg');  
} 

.contentLeft { 
    float: left; 
    height: 100%; 
    width: 34px; 
    background-image:url('images/contentLeft.jpg'); 
} 

.contentRight { 
    float: right; 
    height: 100%; 
    width: 34px; 
    background-image:url('images/contentRight.jpg'); 
} 

.top-left, 
.top-right { 
    position: absolute; 
    height: 155px; 
    width: 34px; 
    background-color: blue; 
} 

.top-left { 
    top: 0; 
    left: 0; 
    background-image:url('images/cornerLeftTop.jpg'); 
} 

.top-right { 
    top: 0; 
    right: 0; 
    background-image:url('images/cornerRightTop.jpg'); 
} 

.bottom-left, 
.bottom-right { 
    position: absolute; 
    height: 29px; 
    width: 34px; 
} 

.bottom-left { 
    bottom: 0; 
    left: 0; 
    background-image:url('images/cornerBottomLeft.jpg'); 
} 
.bottom-right { 
    bottom: 0; 
    right: 0; 
    background-image:url('images/cornerBottomRight.jpg'); 
} 

.minWidth { 
    width: 600px; 
    height:1px; 
}

來源

2012-11-08 20:33:35 Matt

我通過添加doctype <！DOCTYPE html>來解決ie問題，所以即。沒有進入怪癖模式。 – Matt

CSS佈局方法：圓角不是CSS3＆圖像沿（不只是角落）

回答

相關問題