Ibzz Ibzz - 5 months ago 11
HTML Question

Adding nav links on either(both) sides of an image

Having a lot of trouble with this, I think i'm almost there. This is what it looks like so far however its now uneven (the image logo is more to the right and not in the center anymore. I'm trying to get it so that the image is in the center and 2 links on either side of it. Click here for image

HTML:

Current code:

<div id="navbar">
<ul>
<li>Home</li>
<li>The Collective</li>
<img src="images/jc.jpg">
<li>About</li>
<li>Store</li>
</ul>
</div>


CSS:

#navbar li {
display: inline;
padding-right: 40px;
}


Sorry I'm fairly new to all of this and any help would be greatly appreciated!

Answer

#container{
	background-color:white;
	width: 1250px;
	margin-left: auto;
	margin-right: auto;
	
	
}

#header{
	background-color: black;
	color: white;
	text-align:center;
	width: 1250px;
	height:200px;
	
}

body {
	background-color:#EEE;
}

#navbar li {
 
	display: inline;
	padding-right: 40px;
}

#content {
	padding: 10px;	
}

#main1 {
	width: 400px;
	float:left;
	border-style:solid;
	border-width:2px;
	padding:10px;
	margin-left:150px;
 	
	
	
}
#main2 {
	width:400px;
	float: right;
	border-style:solid;
	border-width:2px;
	padding:10px;
	margin-right:150px;
}

#footer {
	clear:both;
	text-align:center;
	padding:10px;
}
<html>
<head>
	<title> JC4ME Homepage </title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
	<div id="container">
		
		<div id="header">
			<div id="navbar">
				<ul>
					<li>Home</li>
					<li>The Collective</li>
					<li><img src="http://s33.postimg.org/xc68nnswf/image.jpg"></li>
					<li>About</li>
					<li>Store</li>
					</ul>
			</div>
		</div>
		
		<div id="content">
			<div id="main1">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

			</div>
			<div id="main2">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		
		<div id="footer">
			Copyright &copy; 2016 Ibz 
		</div>
	</div>
		
</body>

</html>

Put image inside <li> tag

<div id="navbar">
  <ul>
    <li>Home</li>
    <li>The Collective</li>
    <li><img src="images/jc.jpg"></li>
    <li>About</li>
    <li>Store</li>
  </ul>
</div>
Comments