背景图片＆amp;第

时间：2016-03-14 22:37:40

标签： html css

我正在开发一个不仅有背景图片而且还有图标的页面。我已将背景图像放在主内容页面而不是正文上。我正在尝试重新创建我在past中完成的类似功能，我在背景图像前面有文章，没有任何问题。但now，文章内容被推到了底部，我无法弄清楚为什么会这样。

我也试图将图标缩小到可预算的尺寸，但我无法弄清楚为什么它们不会缩小。

HTML代码为：

<body>
<header id="header-wrapper">
    <div id="header" class="header">
        <div id="h1">
            <h1 id="england"><span style="text-transform: uppercase">England-Trambley</span></h1>
          <img src="assets/toothAtom.png" alt="tooth atom" id="tooth-atom"/>        
            <h1 id="dental"><span style="font-variant: small-caps;">Dental Practice</span></h1>         
        </div>

        <div id="menu">
            <ul class="no_bullets">
              <li class="active"><a href="index.html" title="Homepage">Homepage</a></li>
                <li><a href="practice.html" title="Our Practice">Our Practice</a></li>
                <li><a href="services.html" title="Dental Services">Dental Services</a></li>
                <li><a href="procedure.html" title="Procedure">Procedure</a></li>
                <li><a href="time.html" title="Office Hours">Office Hours</a></li>
                <li><a href="form.html" title="Form">Form</a></li>
            </ul>
        </div>
    </div>
</header>
<section class="body-wrapper" id="body-wrapper">
    <header>
        <h2 id="shadow"><span style="text-transform: uppercase"></span></h2>
    </header>
    <div>
        <img class="tooth" id="tooth" src="assets/tooth.png" alt="tooth"/>          
    </div>
    <div id="regular">
        <nav class="sidebar">
            <ul class="sidebar">
                <li class="current"><a href="index.html" title="About Us">About Us</a></li>
                <li><a href="/" onclick="return false;" title="Meet the Staff"  >Meet the Staff</a>
                    <ul class="sidebar">
                        <li><a href="/" onclick="return false;" title="Staff"  >Jan Trambley-Lammers </a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Allison England</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Marc Beck</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Carrie Ball</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Steve Vinning</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Lucien Sgro</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Mark Owens</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Marsha Beck</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Billy De Oahu</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Simone Vining</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >Amy Kenda</a></li>
                        <li><a href="/" onclick="return false;" title="Staff"  >D. P. Englund</a></li>
                    </ul>
                </li>
                <li><a href="/" onclick="return false;" title="Questions and Answers"  >Q's &amp; A's</a></li>
            </ul>
        </nav>
    </div>
</section>
<footer>
    <ul id="social-media-icons">
        <li><a href="/" onclick="return false;" title="England-Trambley Dental Practice Myspace Page"><img id="icon-myspace" src="assets/myspace.png" alt="MySpace Icon"/></a></li>
        <li><a href="/" onclick="return false;" title="England-Trambley Dental Practice Facebook Page"><img id="icon-facebook" src="assets/facebook.png" alt="Facebook Icon"/></a></li>
        <li><a href="/" onclick="return false;" title="England-Trambley Dental Practice YouTube Page"><img id="icon-youtube" src="assets/youtube.png" alt="YouTube Icon"/></a></li>
        <li><a href="/" onclick="return false;" title="England-Trambley Dental Practice TWitter Page"><img id="icon-twitter" src="assets/twitter.png" alt="Twitter Icon"/></a></li>
        <li><a href="/" onclick="return false;" title="England-Trambley Dental Practice Tumblr Page"><img id="icon-tumblr" src="assets/tumblr.png" alt="Tumblr Icon"/></a></li>
        <li><a href="/" onclick="return false;" title="England-Trambley Dental Practice Snapchat Page"><img id="icon-snapchat" src="assets/snapchat.png" alt="Snapchat Icon"/></a></li>
        <li><a href="/" onclick="return false;" title="England-Trambley Dental Practice Google+ Page"><img id="icon-googleplus" src="assets/google-plus.png" alt="Google+ Icon"/></a></li>
        <li></li>
    </ul>

    <br/>

    <p id="copyright">
        Copyright &#169;
        <script type="text/javascript">
            now=new Date();
            year=now.getFullYear(); 
        </script> 
        <script type="text/javascript">
            document.write(year);
        </script>
         | All Rights Reserved <br/>
    <!-- #BeginDate format:Am1a -->March 14, 2016 1:31 PM<!-- #EndDate -->
    </p>
</footer>
</body>

CSS：

div, body, ul, nav, section, article, p, logo, footer, header {
    display: block;
}

body {
    height: 100%;
    margin: 0px auto;
    padding: 0px;
    background: #2056ac;
    width: 100%;
}

/*bullet removel*/
ul.no_bullets, ul.contact, ul.instructions, .link{
    list-style: none;
    text-decoration: none;
}

/* Links */
a.link {
    text-decoration: none;
    color: #0000FF;
}

a:hover {
    color: #fff200;
    text-decoration: none;
}

 a:visited {
    color: #FF0000;
    text-decoration: none;
}

/***************************************************
            Headings
****************************************************/
/***** h1 *****/
#england {
    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
    font-size: 40px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    text-align: center;
    line-height: 5px;
    color: #FFFFFF;
}

#dental {
    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
    font-size: 35px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    text-align: center;
    line-height: 5px;
    color: #FFFFFF;
}

/***** h2 *****/
#shadow {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-align: center;
    text-shadow: 0px 5px 10px rgba(0,0,0,.5);
    color: #2056ac;
}

/***** h4 *****/
h4 {
    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
    font-size: 1.11em;
    line-height: normal;
    margin-bottom: 0px;
}

/***************************************************
                    Header
****************************************************/
/***** header-wrapper *****/
#header-wrapper {
    overflow: hidden;
    background: #2056ac;
    width: 100%;
}

#header {
    text-align: center;
}

#container {
    width: 100%;
    margin: 0px auto;
}

/***** navigation *****/
#menu {
    font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
    text-align: center;
    height: 70px;
}

#menu ul {
    display: inline-block;
    padding: 0em 2em;
    text-align: center;
    font-size: 1.25em;
}

#menu li {
    display: inline-block;
}

#menu li a, #menu li span {
    display: inline-block;
    padding: 0em 1em;
    text-decoration: none;
    font-size: 0.90em;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 60px;
    outline: 0;
    color: #FFFFFF;
}

#menu li:hover a, #menu li.active a, #menu li.active span {
    background: #FFFFFF;
    border-radius: 7px 7px 0px 0px;
    color: #2056ac;
}

/***************************************************
            body wrapper
****************************************************/
/***** main content *****/
#body-wrapper {
    position: static;
    overflow: hidden;
    width: 100%;
    z-index: 1;
    background-color: #FFFFFF;
    padding-bottom: 13px;
}


/***** Article *****/
article.ghost  {
    color: #000000;
    width: 700px;
    z-index: 1;
    line-height: normal;
    padding: 0px;
    margin: 0px;
}

/***** paragraph *****/
p.paragraph {
    font-family: Georgia, serif;
    font-weight: normal;
    font-size: .95em;
    text-align: justify;
    margin: 0px 0px 1px;
    padding-top: 0px;
}

em {
    font-style: oblique;
}

.link  {
    color: #0000ff;
}

.link  a {
    color: #0000ff;
}

.link a:hover {
    color: #fff200;
}

.link a:visited {
    color: #ff0000;
}

/***** sidebar *****/
.sidebar {
    list-style: none;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    float: right;
}

/*** all ul ***/
.sidebar ul {
    list-style-type: none; /*bullet removel*/
    list-style: none; /*bullet removel*/
    text-decoration: none; /*bullet removel*/
}

/*** all li ***/
.sidebar li {
    position: relative;
}

/*** all a ***/
.sidebar a {
    display:    block;
    font-family: Georgia, serif;
    font-size: .94em;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    text-decoration:none;
    background-color: #2056ac;
    color: #FFFFFF;
    border: 1px solid #2056ac;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    width: 270px;
    padding: 3px;
    margin: 0px 0px 5px; /* Added Spacing Margin */
    transition: all 0.3s;
    z-index: 500;
}

/*** all a:hover ***/
.sidebar li:hover > a{
    background-color: #FFFFFF;
    color: #2056ac;
    border: 1px solid #2056ac;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

/*** hides inner ul ***/
.sidebar ul ul {
    position:absolute;
    right:0%;
    top:0;
    visibility:hidden;
    margin-right: 130%;
    opacity:0;
    transition: transform 0.3s;
    transform: translateX(80px); /*positions dropdown to left*/
    z-index: 500;
}

/*** inner ul show ***/
.sidebar li:hover > ul{
    right: 1%;
    visibility:visible;
    opacity:1;
}

/*** current page ***/
li.current a {
    background-color: #FFFFFF;
    color: #2056ac;
    border: 1px solid #2056ac;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

li.current a:hover {
    background-color: #2056ac;
    color: #FFFFFF;
    border: 1px solid #2056ac;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

/***************************************************
                    Footer
****************************************************/
footer {
    color: #FFFFFF;
    overflow: hidden;
    padding: 1em 0em 2em;
    border-top: 25px solid #1a4ea0;
    text-align: center;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    background-color: #2056ac;
    width: 100%;
}

/***** Social Icons *****/
#social-media-icons {
    margin: 0;
    padding: .45em 0em 0em 0em;
    height: 36px;
    list-style: none;
}

#social-media-icons  li {
    display: inline-block;
    padding: 0em 0.10em;
    height: 36px;
}

#social-media-icons li span {
    display: none;
    height: 36px;
    margin: 0;
    padding: 0;
}

#social-media-icons  li a {
    color: #FFFFFF;
}

#social-media-icons  li a:before {
    display: inline-block;
    background: #2056ac;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: rgba(255,255,255,1);
}

/***** copyright *****/
#copyright {
    font-family: Georgia, serif;
    letter-spacing: 1px;
    line-height: none;
    font-size: 0.90em;
    color: #FFFFFF;
}

/***** logo *****/
#tooth-atom {
    height: 75px;
    margin: 0px auto;
}

/***** background image *****/

section img.tooth {
    background-image: url(assets/tooth.png);
    background-repeat: no-repeat;
    background-position: static;
    opacity: .15;
    height: 540px;
        background-size: contain;   
    background-attachment: fixed;
        position: absolute;
    margin: 0px auto;
}

#tooth {
    text-align: center;
    margin: 0px auto;
    padding-left: 30%;
}

我还有jsfiddle

0 个答案:

没有答案
相关问题
最新问题