2014-01-31 1 views
0

내 탐색 표시 줄에 왼쪽/왼쪽으로 떠있는 로고/이미지를 배치하려했습니다. 나는 내비게이션 안에 이미지를 배치 할 수 있었지만 운이 없으면 왼쪽으로 떠 다녔다. 누군가 나를 도울 수 있습니까?내비게이션 CSS의 로고

나는 다음과 같이하고 싶습니다 : http://tinypic.com/r/2ep56rm/8

나는의 index.php에게 header.php 내있는 style.css 있습니다.

먼저 내 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"); ?> 

내있는 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;} 

답변

2

귀하의 코드는 잘못된, 올바른 -

<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--> 

WORKING DEMO

CSS : 내가 볼

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

. 그러나 나는 그것을 왼쪽에 배치하는 것 같지 않니? float : 왼쪽 및 여백을 시도했으나 왼쪽으로 이동하지 않습니까? – Chrfugl

+0

ur img이 가운데 정렬되어 있습니까? – Anup

+0

수정 된 답변보기 ... 당신은 ur 패딩을 지워야합니다. – Anup

관련 문제