2014-10-20 124 views
-1

我一直在试图用我的代码做两件事,首先我一直试图摆脱我选择的导航链接下面的小恼人的行,也试图漂浮标题和页脚的权利,而不会丢失我的页眉和页脚背景。填充和浮动问题与导航栏

我已经添加了一些基本的PHP到我的html来提高效率。是否有人可以快速查看我的代码,我已经花了几个小时在脑海中绞尽脑汁,开始认为我真的在想这个问题。在此先感谢:d

/********************************************* 
 
Header & Footer 
 
*********************************************/ 
 
.header, 
 
.footer { 
 
\t max-width: 80%; 
 
\t background: #191A1C; 
 
\t margin: auto; 
 
} 
 
.header .nav, 
 
.footer .nav{ 
 
\t text-align: center; 
 

 
} 
 
.header .nav ul, 
 
.footer .nav ul { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: auto 0; 
 
} 
 
.header .nav li, 
 
.footer .nav li{ 
 
\t display: inline-block; 
 
} 
 

 
/********************************************* 
 
Links 
 
*********************************************/ 
 
.header .nav li a:link, 
 
.header .nav li a:visited, 
 
.footer .nav li a:link, 
 
.footer .nav li a:visited { 
 
    text-decoration: none; 
 
\t background: #404247; 
 
\t color: #E8EBF5; 
 
} 
 
.header .nav li, 
 
.header .nav li a:link, 
 
.header .nav li a:visited{ 
 
\t padding: 1em 2em; 
 
} 
 
.footer .nav li, 
 
.footer .nav li a:link, 
 
.footer .nav li a:visited{ 
 
\t padding: 0.5em 1em; 
 
} 
 
.header .nav li a:hover, 
 
.footer .nav li a:hover { 
 
    text-decoration: underline; 
 
} 
 

 
/********************************************* 
 
Selected Links 
 
*********************************************/ 
 
.header .nav li.home_on a, 
 
.footer .nav li.home_on a{ 
 
\t background: #BC4663; 
 
} 
 
.header .nav li.portfolio_on a, 
 
.footer .nav li.portfolio_on a{ 
 
\t background: #80C7F2; 
 
} 
 
.header .nav li.aboutMe_on a, 
 
.footer .nav li.aboutMe_on a{ 
 
\t background: #CCC331; 
 
} 
 
.header .nav li.contactMe_on a, 
 
.footer .nav li.contactMe_on a{ 
 
\t background: #64CE97; 
 
}
<html> 
 
<head> 
 
\t <title><?php echo $pageTitle; ?></title> 
 
\t <link rel="stylesheet" href="css/nav.css" type="text/css"> 
 
</head> 
 
<body> 
 
\t <div class="header"> 
 
\t \t <ul class="nav"> 
 
\t \t \t <li class="home <?php if ($section == "home") {echo "home_on";} ?>"><a href="index.php">Home</a></li> 
 
\t \t \t <li class="portfolio <?php if ($section == "portfolio") {echo "portfolio_on";} ?>"><a href="portfolio.php">Portfolio</a></li> 
 
\t \t \t <li class="aboutMe <?php if ($section == "aboutMe") {echo "aboutME_on";} ?>"><a href="aboutMe.php">About Me</a></li> 
 
\t \t \t <li class="contactMe <?php if ($section == "contactMe") {echo "contactMe_on";} ?>"><a href="contactMe.php">Contact Me</a></li> 
 
\t \t </ul> 
 
\t </div> 
 

回答

0

我已经或多或少进行排序,我遇到的问题。为了将我的导航栏浮动到右侧,同时保持我的背景完好无损,我必须将其包装在容器中,然后重新安排我的一些CSS。我还在我的头文件后添加了一个:after声明,以清除导航后会浮动的任何内容。

/********************************************* 
 
Header & Footer 
 
*********************************************/ 
 
.wrapper{ 
 
\t max-width: 80%; 
 
\t margin: auto; 
 
} 
 
.header, 
 
.footer { 
 
\t background: #191A1C; 
 
} 
 
.header:after, 
 
.footer:after { 
 
\t content:""; 
 
\t height:0; 
 
\t display:block; 
 
\t visibility:hidden; 
 
\t clear:both; 
 
} 
 
.header .nav, 
 
.footer .nav{ 
 
\t text-align: center; 
 
\t float: right; 
 
\t margin: 0; 
 
} 
 
.header .nav ul, 
 
.footer .nav ul { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: auto 0; 
 
} 
 
.header .nav li, 
 
.footer .nav li{ 
 
\t display: inline-block; 
 
}
<html> 
 
<head> 
 
\t <title><?php echo $pageTitle; ?></title> 
 
\t <link rel="stylesheet" href="css/nav.css" type="text/css"> 
 
</head> 
 
<body> 
 
\t <div class="header"> 
 
\t \t <div class="wrapper"> 
 
\t \t \t <ul class="nav"> 
 
\t \t \t \t <li class="home <?php if ($section == "home") {echo "home_on";} ?>"><a href="index.php">Home</a></li> 
 
\t \t \t \t <li class="portfolio <?php if ($section == "portfolio") {echo "portfolio_on";} ?>"><a href="portfolio.php">Portfolio</a></li> 
 
\t \t \t \t <li class="aboutMe <?php if ($section == "aboutMe") {echo "aboutME_on";} ?>"><a href="aboutMe.php">About Me</a></li> 
 
\t \t \t \t <li class="contactMe <?php if ($section == "contactMe") {echo "contactMe_on";} ?>"><a href="contactMe.php">Contact Me</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="content">