0

I'm creating a banner for a website. I'm stubbornly trying to do it with HTML5/CSS3 rather than making an image. The banner has an opaque background image that spans the entire width of the page wrapper (set to 80% screen width). Over that I have three elements: a logo and two lines of text. I have placed the three where I want them my making them absolute and using top, left, etc. I also placed these three elements in their own div. I would like to center them over the background image. I've tried setting auto margins on either side (the preferred way in css3, but it's not working.

Actually, it would also be great to be able to not only center the group of three (logo, line 1, line 2) but to be able to move them around together as an absolute element. Is that possible?

http://jsfiddle.net/abalter/965Mj/1/

* HTML *

<div id="wrapper">
    <header>
        <div id="background-image"></div>
        <div id="header-group">
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
             <h1 id="line1">check it out!</h1>

             <h1 id="line2">Home Inspection</h1>

        </div>
    </header>
</div>

* CSS *

#wrapper {
    background-color: Wheat;
    width: 1280px;
    /* doing that because jsfiddle viewport is not the entire page width.*/
    /* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {
    position: relative;
    width: 100%;
    height: 180px;
    background-color: White;
}
header #background-image {
    background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
}
#header-group {
    margin: 0 auto 0 auto;
}
#house-logo {
    position: absolute;
    float: left;
    height: 160px;
    top:10px;
    left: 10px;
}
#line1 {
    display: block;
    position: absolute;
    left: 220px;
    top: -15px;
    padding: 0;
    margin: 0;
    font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
    font-size: 7em;
    color: FireBrick;
}
#line2 {
    display: block;
    position: absolute;
    left: 185px;
    bottom: 1px;
    margin: 0;
    padding: 0;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}
4

1 回答 1

0 
#wrapper {
background-color: Wheat;
width: 1280px;
/* doing that because jsfiddle viewport is not the entire page width.*/
/* in real life, the wrapper extends below the banner -- that is where the main part of the website is */
}
header {

width: 100%;
height: 180px;
background-color: White;
margin:0 auto;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
text-align: center;
 display: table;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}

#house-logo {
 display: table;
float: left;
height: 160px;
padding-left: 10em;


}
#line1 {
display: table;

text-align: center;
padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
 #line2 {



    margin: 0;
    padding-right: 6em;
    font-family:"Trebuchet", sans-serif;
    font-size: 4em;
}

和

<div id="wrapper">
<header>
    <div id="background-image">

 <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
         <h1 id="line1">check it out!</h1>

         <h1 id="line2">Home Inspection</h1>

    </div>
</header>
</div>

///////////////// 编辑面向评论///////////////

 <!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>

<body>
 <div id="wrapper">
    <header>
        <div id="background-image"></div>
        <div id="header-group" >
            <img id="house-logo" src="http://arielbalter.com/cio/img/CheckItOutHouseNoBackground.png " />
             <h1 id="line1">check it out!</h1>

             <h1 id="line2">Home Inspection</h1>

        </div>
    </header>
  </div>

</body>
</html>

和 .......

#wrapper {
background-color: Wheat;
width: 1280px;
}   
header {

width: 100%;
height: 215px;
background-color: White;
}
header #background-image {
background-image: url("http://arielbalter.com/cio/img/3tab_slanted.jpg");
height: 215px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.3;
position: absolute;

}
#header-group {
margin: 0 auto;


}
#house-logo {

float: left;
height: 160px;
padding-left: 30%;    
}
#line1 {

padding: 0;
margin: 0;
font-family:"KGLoveSomebody", "Comic Sans MS", sans-serif;
font-size: 7em;
color: FireBrick;
}
#line2 {


display:inline;
font-family:"Trebuchet", sans-serif;
font-size: 3.7em;
}

注意：它并不完全适合您提供的代码。我必须将标题的高度扩展到 215px 以适应“line2”，如果您需要较小的高度尺寸，您可以尝试使用第 2 行 css。

于 2013-08-30T23:15:39.097 回答