Question

我遇到的问题：

当我决定从css上取下边框时，标题区域会变小（我不想发生这种情况）。 - 我想在不移动任何东西的情况下取下边界线。

当我将图像放入标题时（它会拉伸并且无法正确显示）。同样在图像上，我想放置一个文本是可能的吗？

另外，如果你进入菜单页面，你会看到缩略图没有对齐，为什么会这样？

以下是网站：http://younani.com/finalsite/finalindex.html

这是我的css：

#header {
    text-align: center;
    background: url('bg1.gif');
}

#container {
    width: 960px;
    margin: 0 auto;
    background-color: #FAFAFA;
    color: #003300;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url('backgroundflower5.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#h2 {
    text-align: center;
}

#container {
    width: 960px;
    margin: 0 auto;
}

#container div {
    border: 1px solid;
}

#center2 {
    float: left;
    margin: 10px 0 10px 20px;
    min-width: 200px;
    width: 494px;
    border-radius: 8px;
}

#left,#center,#right {
    float: left;
    margin: 10px 0 10px 20px;
    min-width: 200px;
}

#center {
    font-family: Josefin Slab;
    background-color: #FFFFFF;
    width: 494px;
    border-radius: 8px;
    text-align: center;
}

.clear {
    clear: both;
}

#right {
    font-family: Josefin Slab;
    font-weight: bold;
    border-radius: 8px;
    background-color: #FFFFFF;
}

#left a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    display: block;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #ffffff 0%,
        #2a07ed);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#ffffff),
        to(#2a07ed));
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    border: 3px solid #ffffff;
    -moz-box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(026,020,219,1);
    -webkit-box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(026,020,219,1);
    box-shadow: 0px 3px 11px rgba(000,000,000,0.5),
        inset 0px 0px 1px rgba(026,020,219,1);
    text-shadow: 0px -1px 0px rgba(000,000,000,0.2),
        0px 1px 0px rgba(255,255,255,0.3);
}

#left a:link {
    background-color: #E6E6E6;
}

#left a:visited {
    background-color: #E6E6E6;
}

#left a:hover {
    border: 3px inset #333333;
}

#left ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
}

#footer {
    text-align: center;
    font-family: Audimat;
    clear: both;
    width: 38%;
    border-radius: 8px;
    background-color: white;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

以下是我的主页的相关HTML：

<div id="container" class="clearfix">
    <!-- Header -->
    <div id="header">
        <h1>Younani Flowers</h1>
    </div>
    <!-- Left Column -->
    <div id="left">
    <ul>
        <li><a href="finalindex.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="occasions.html">Occasions</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
        </ul>
    </div>
    <!-- Center Column -->
    <div id="center">
        HELLLLLO :D :D
    </div>
    <!-- Right Column -->
    <div id="right">
    <p><span style="text-decoration: underline;"><strong>Birth Month Flowers</strong></span></p>

    <p>January Carnation</p>
    <p>February Iris</p>
    <p>March Daffodil</p>
    <p>April Daisy</p>
    <p>May Lily</p>
    <p>June Rose</p>
    <p>July Delphinium</p>
    <p>August Dahlia</p>
    <p>September Aster</p>
    <p>October Calendula</p>
    <p>November Chrysanthe</p>
    <p>December Poinsettia</p>
    </div>
    <!-- Footer -->
    <div id="footer" class="clear">
    <div class="nav">
        <b>
                <a href="finalindex.html">Home</a>
        &nbsp;&nbsp;
                <a href="menu.html">Menu</a>
        &nbsp;&nbsp;
                <a href="occasions.html">Occasions</a>
        &nbsp;&nbsp;
                <a href="aboutus.html">About Us</a>
        &nbsp;&nbsp;
                <a href="contactus.html">Contact Us</a>
        &nbsp;&nbsp;
            </b>
    </div>
    </div>
</div>
<!-- #container -->

Answer 1

<div id="header" style="float: left; width: 100%;">
   <h1>Younani Flowers</h1>
</div>

------ -----或

应用clearfix

 <div id="header" class="clearfix">
   <h1>Younani Flowers</h1>
 </div>

http://www.webtoolkit.info/css-clearfix.html

HTML标头和边框问题

1 个答案: