Fatal编程技术网
  • php/
  • Php 导航css中的徽标

Php 导航css中的徽标

php css

Php 导航css中的徽标,php,css,Php,Css,我试图在导航栏中放置一个向左浮动的徽标/图像。我已经成功地在导航中放置了一个图像，但是我没有运气让它向左浮动。谁能帮帮我吗 我希望它看起来像这样： 我有一个index.php、一个header.php和我的style.css 首先是my header.php： <!--Begin Header--> <div id="header"></div> <div id="navigation"><!--Begin Navigation--&g

我试图在导航栏中放置一个向左浮动的徽标/图像。我已经成功地在导航中放置了一个图像，但是我没有运气让它向左浮动。谁能帮帮我吗

我希望它看起来像这样：

我有一个index.php、一个header.php和我的style.css

首先是my header.php：

 <!--Begin Header-->
 <div id="header"></div>
 <div id="navigation"><!--Begin Navigation-->
  <img src="/images/toptop.jpg" width="220" height="50"/></a1>
    <ul>
    <li><a href="/">Forside</a></li>
    <li><a href="/about.php">Referencer</a></li>
    <li><a href="/contact.php">Kontakt</a></li>
  </ul>
  </div><!--End Navigation-->
  <!--End Header-->



    

  • 

  • 

  •
和index.php：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Forside</title>
 <meta name="description" content="Free PHP Website Template from Redefined Web Design"          />
 <meta name="robots" content="noindex, nofollow">
 <link href="/css/style.css" rel="stylesheet" type="text/css" media="screen, projection"         />
 </head>

 <body>
 <?php include("header.php"); ?>


 <div id="wrapper"><!--Begin Wrapper-->
 <div id="container"><!--Begin Container-->

 <div id="mainContent"><!--Begin Main Content-->
 <h1>App udvikling i aller højeste klasse!</h1>
 <p></p>
 <p>Er du interesseret i at få et uforpligtende tilbud, så skal du være mere end      velkommen til at skrive til os og beskrive dine ønsker!</p>
 <h1>Udvikling af apps - så enkelt gør vi det</h1>
 <p></p>
 </div><!--End Main Content-->

  <?php include("footer.php"); ?>


背弃
应用程序udvikling i aller højeste klasse！


我对蒂尔巴德的友谊感兴趣，而对væsåskal du væs来说，他们只是在斯克里夫到贝斯克里夫餐厅的终点

Udvikling af应用程序-såenkelt gør vi det
最后是my style.css：

  /*
  Free PHP Theme by: Redefined Web Design
  Description: Designed by <a href="http://www.redefinedwebdesign.com">Dallas Web     Design</a>
  Version: 2.0
  Author: <a href="http://www.redefinedwebdesign.com">Redefined Web Design</a>
  */

  /* Some people like to have CSS Reset files. If you choose to use one, place it here     above the general elements. */
  /* You will need to define some styles of the elements you reset below */


  /* General Elements */
  body {
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 100%; 
background: #000; 
text-align: left; 
margin: 0px;    
padding: 0px; 
color: #FFF;
 }
 #header {
height: 0px;    
background: url(/images/toppen.jpg);    
margin: 0px auto; 

 }
#navigation {
    background: url(/images/toppen.png);    
text-align:right;
    padding: 55px;
    border-bottom: 1px solid #ea7c04;}

#navigation img { float: left;
  margin: 0px 160px;
 }

#navigation ul  { float: right; 
margin: 0px 180px 0px 100px;}

#navigation ul li {
list-style: none; 
display: inline; 
padding: 0px 0px;
    margin: 30px;
}
#navigation ul li a {
color: #FFF; 
    font-size: 108%;
text-decoration: none;
    font-family: Sans-serif;
}

#navigation ul li a:hover
{
color: #ea7c04;
}

#wrapper {
margin: 0px auto;   
    background: #000 repeat-x;

}
#container {
background: url(/images/gradient.jpg); 
width: 100%;    
margin: 0px 0px auto; 
overflow: hidden;
}
#mainContent {
padding: 40px 0px 40px 180px; 
float: left; 
    min-height: 500px;
}
#sidebar {
padding: 0px 80px; 
    background: url(/images/gradient.jpg); 
float: right; 
    height: 500px;
width: 259px; 
border-left: 1px solid #ea7c04;
    margin: 40px 0px 40px;
}
#sidebar a img{
border: 0px solid #FFF;
border-radius:5px;
}
#social {
margin: 0px auto;
text-align: center;
padding: 20px 0px 10px;
}
#social a img {
padding: 0px 5px;
border: none;
}
#footer {
height: 30px; 
    background: url(/images/toppen.png);    
    text-align: center; 
margin: 0px auto; 
    font-size: 90%; 
padding: 10px 0px; 
clear: both;
    color: #FFF;
    font-family: Sans-serif;
}

 /* Typography */
h1, h2, h3, h4, h5, h6 {font-family: Sans-serif; width: 650px;
}
h3, h4, h5, h6 {font-family: Sans-serif; width: 650px;
font-style:italic;}
h1 {font-size: 160%;
margin: 0px 0px 20px;
color: #000;}
h2 {font-size: 100%;
margin: 0px 0px 20px;
color: #000;}
h3 {font-size: 120%;
margin: 0px 0px 20px;}

p {font-size: 90%;
width: 650px;
margin: 0px 0px 20px;
color: #000;
font-family: Sans-serif;}

p9 {font-family: Sans-serif;
font-weight:bold;
color: #000;
margin: 0px 0px 0px;
line-height: 1.7;
font-size: 90%;}

p10 {font-family: Sans-serif;
line-height: 1.5;
font-size: 90%;
color: #000;}

p11 {font-family: Sans-serif;
font-weight:bold;
color: #000;
margin: 0px 0px 20px;
line-height: 2.0;
font-size: 90%;
}

p12 {font-family: Sans-serif;
font-weight:bold;
color: #000;
margin: 0px 0px 0px;
line-height: 2.0;
font-size: 95%;
}

p13 {font-size: 90%;
margin: 0px 10px 0px;
color: #FFF;
font-family: Sans-serif;}

p14 {font-size: 100%;
margin: 0px 10px 0px;
color: #ea7c04;
font-family: Sans-serif;}

li{font-size: 90%;
margin: 0px 20px 20px;
color: #000;}

a {text-decoration: none; color: #000;}
a1 {text-decoration: none; color: #000;
margin: 0px 0px 0px;}
#sidebar h3 {font-size: 110%; margin-bottom: -7px;}

/*
免费PHP主题：重新定义的网页设计
说明：设计人
版本：2.0
作者：
*/
/*有些人喜欢CSS重置文件。如果选择使用一个，请将其放置在常规元素上方*/
/*您需要定义以下重置的图元的某些样式*/
/*一般要素*/
身体{
字体系列：Verdana、Arial、Helvetica、无衬线；
字体大小：100%；
背景：#000；
文本对齐：左对齐；
边际：0px；
填充：0px；
颜色：#FFF；
}
#标题{
高度：0px；
背景：url（/images/toppen.jpg）；
保证金：0px自动；
}
#航行{
背景：url（/images/toppen.png）；
文本对齐：右对齐；
填充：55px；
边框底部：1px实心#ea7c04；}
#导航img{float:左；
利润率：0px 160px；
}
#导航ul{float:右；
边距：0px 180px 0px 100px；}
#导航ulli{
列表样式：无；
显示：内联；
填充：0px 0px；
利润率：30像素；
}
#导航ulli a{
颜色：#FFF；
字号：108%；
文字装饰：无；
字体系列：无衬线；
}
#导航：悬停
{
颜色：#ea7c04；
}
#包装纸{
保证金：0px自动；
背景：#000重复-x；
}
#容器{
背景：url（/images/gradient.jpg）；
宽度：100%；
保证金：0px 0px自动；
溢出：隐藏；
}
#主要内容{
填充：40px 0px 40px 180px；
浮动：左；
最小高度：500px；
}
#边栏{
填充：0px 80px；
背景：url（/images/gradient.jpg）；
浮动：对；
高度：500px；
宽度：259px；
左边框：1px实心#ea7c04；
利润率：40px 0px 40px；
}
#侧栏a img{
边框：0px实心#FFF；
边界半径：5px；
}
#社会的{
保证金：0px自动；
文本对齐：居中；
填充：20px 0px 10px；
}
#社会管理{
填充：0px 5px；
边界：无；
}
#页脚{
高度：30px；
背景：url（/images/toppen.png）；
文本对齐：居中；
保证金：0px自动；
字体大小：90%；
填充：10px 0px；
明确：两者皆有；
颜色：#FFF；
字体系列：无衬线；
}
/*印刷术*/
h1，h2，h3，h4，h5，h6{字体系列：无衬线；宽度：650px；
}
h3，h4，h5，h6{字体系列：无衬线；宽度：650px；
字体样式：斜体；}
h1{字体大小：160%；
利润率：0px 0px 20px；
颜色：#000；}
h2{字体大小：100%；
利润率：0px 0px 20px；
颜色：#000；}
h3{字体大小：120%；
边距：0px 0px 20px；}
字体大小：90%；
宽度：650px；
利润率：0px 0px 20px；
颜色：#000；
字体系列：无衬线；}
p9{字体系列：无衬线；
字体大小：粗体；
颜色：#000；
保证金：0px 0px 0px；
线高：1.7；
字体大小：90%；}
p10{字体系列：无衬线；
线高：1.5；
字体大小：90%；
颜色：#000；}
p11{字体系列：无衬线；
字体大小：粗体；
颜色：#000；
利润率：0px 0px 20px；
线高：2.0；
字体大小：90%；
}
p12{字体系列：无衬线；
字体大小：粗体；
颜色：#000；
保证金：0px 0px 0px；
线高：2.0；
字体大小：95%；
}
p13{字体大小：90%；
保证金：0px 10px 0px；
颜色：#FFF；
字体系列：无衬线；}
p14{字体大小：100%；
保证金：0px 10px 0px；
颜色：#ea7c04；
字体系列：无衬线；}
字体大小：90%；
保证金：0px 20px 20px；
颜色：#000；}
a{文本装饰：无；颜色：#000；}
a1{文字装饰：无；颜色：#000；
边距：0px 0px 0px；}
#侧边栏h3{字体大小：110%；页边距底部：-7px；}
您的代码不正确，请按如下方式更正：-

<div id="header"></div>
  <div id="navigation"><!--Begin Navigation-->
  <img src="/images/face.jpg" width="200" height="100"/>
  <ul>        
    <li><a href="/">Forside</a></li>
    <li><a href="/about.php">Referencer</a></li>
    <li><a href="/contact.php">Kontakt</a></li>
  </ul>
  </div><!--End Navigation-->
我们的答案应该合并。
mergeAnswers（你的，我的）我明白了。但我似乎不能把它放在左边？您尝试过浮动：左，也有边距，但它不会向左移动吗？您的
img
是否居中对齐？请查看编辑后的答案…您需要清除您的
填充
。它现在位于左侧。如果可能的话，我希望它与导航栏中的文本对齐。我好像不明白？

#navigation {
   padding: 0px;
}
#navigation img { float: left; }
#navigation ul  { float: right; }



#navigation img {float: left;}