php - Logo in Navigation css
423
I have tried to place a logo/image floating left, inside my navigation bar. I have managed to place a image inside the navigation, but i have had no luck trying to make it float left. Can someone please help me.
I would like it to look like this: http://tinypic.com/r/2ep56rm/8
I have a index.php a header.php and my style.css.
First 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-->
and 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"); ?>
and last 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;}
Answer
Solution:
Your code is incorrect, Correct it as follows :-
WORKING DEMO
CSS :
Answer
Solution: