Question

我使用的是在网上找到的液体布局。我为我的生活无法获得导航中的链接和页脚中的内容。任何帮助将不胜感激。

我添加了很多css，因为每个id都与流体布局相关。我不确定在这一点上可以改变什么而不会导致页面对齐。

谢谢！

的jsfiddle

HTML

<body>
<div id="header">   
<ul>
    <li>nav</li>
    <li>nav</li>
    <li>nav</li>
    <li>nav</li>
</ul>
</div><!-- CLOSING HEADER DIV -->

<div class="colmask threecol"><!-- colmask threecol start -->
    <div class="colmid"><!-- colmid start -->
        <div class="colleft"><!-- colleft start -->

            <div class="col1"><!-- col1 start -->
                <h2>Hola senior bienvenidas a la web</h2>           
                <p>Aperiri deleniti efficiendi cu usu, pro brute tollit ut. Duo fierent splendide deterruisset in, nullam reprehendunt te vix. Ne his assum vitae aliquam. Vitae offendit oportere te eum, in sea audire praesent efficiendi. No harum democritum usu, vim vero nostrud verterem ut.
</p>        </div><!-- col1 end -->

            <div class="col2"><!-- col2 start -->               
                <h2>Hola senior bienvenidas a la web</h2>           
                <p>Semper volumus ei vel, quo albucius adipisci ut. Nec cu adipiscing definiebas. Vel habeo eripuit at, aeterno suscipit splendide usu et, etiam utamur impetus has cu. Has decore suscipiantur te. Vel at semper quaestio, per no viris accusamus intellegebat.</p>                
                </div><!-- col2 end -->

            <div class="col3"><!-- col3 start -->               
                <h2>Hola senior bienvenidas a la web</h2>           
                <p>Aperiri deleniti efficiendi cu usu, pro brute tollit ut. Duo fierent splendide deterruisset in,
                <h3>Hola senior bienvenidas a la web</h3>
                <p>Aperiri deleniti efficiendi cu usu, pro brute tollit ut. Duo fierent splendide deterruisset in, nullam reprehendunt </p>             
            </div><!--  col3 end -->

        </div><!-- colleft end -->
    </div><!-- colmid end -->
</div><!-- colmask threecol end -->

<footer>
    <p><strong>THIS IS THE FOOTER</strong></p>
</footer>

</body>
</html>

CSS

body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px;        /* Minimum width of layout - remove line if not required */
                    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
img {
    margin:10px 0 5px;
}
#ads img {
    display:block;
    padding-top:10px;
}


/* Header styles */ /* Header styles */ /* Header styles */ /* Header styles */ /* Header styles */ /* Header styles */
#header {
    clear:both;
    margin: 0 auto;
    width:100%;
    border-bottom:1px solid #000;

}

#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#000;
    text-decoration:none;
    position:relative;
    left:15px;
    line-height:1.3em;
}
#header ul li a:hover {
    background:#369;
    color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}

/* column container */ /* column container */ /* column container */ /* column container */ /* column container */ 
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}

/* common column settings */ /* common column settings */ /* common column settings */ /* common column settings */ 
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;         /* width of page */
    position:relative;
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;  /* no left and right padding on columns, we just make them narrower instead 
                    only padding top and bottom is included here, make it whatever value you need */
    overflow:hidden;
}

/* 3 Column settings */ /* 3 Column settings */ /* 3 Column settings */ /* 3 Column settings */ /* 3 Column settings */
.threecol {
    background:#eee;        /* right column background colour */
}
.threecol .colmid {
    right:25%;          /* width of the right column */
    background:#fff;        /* center column background colour */
}
.threecol .colleft {
    right:50%;          /* width of the middle column */
    background:#f4f4f4; /* left column background colour */
}
.threecol .col1 {
    width:46%;          /* width of center column content (column width minus padding on either side) */
    left:102%;          /* 100% plus left padding of center column */
}
.threecol .col2 {
    width:21%;          /* Width of left column content (column width minus padding on either side) */
    left:31%;           /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
    width:21%;          /* Width of right column content (column width minus padding on either side) */
    left:85%;           /* Please make note of the brackets here:
                    (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* Footer styles */ /* Footer styles */ /* Footer styles */ /* Footer styles */ /* Footer styles */ /* Footer styles */
footer {
    clear:both;
    position: absolute;
    bottom: 0;
    width:100%;
    height: 100px;
    border-top:1px solid #000;

}

footer p {
    padding:10px;
    margin: 0 auto;
    width: 100%;

}

Answer 1

#header ul {
  text-align: center;
}

footer p {
  text-align: center
}

将导航栏和页脚中的内容居中

1 个答案: