Click here to Skip to main content
13,349,293 members (56,285 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
Hey guys, right now i have 4 li's which all start on the left hand side of my webpage but i want to move them in the middle of the page and then put my logo in the middle of those 2 but i have no idea what code to implement on my html and css to do this. Right now i have set my li's to float: left; but when i try to set it to center the whole layout of them changes and they go one below each other. Can anyone help me out please. Below i have included my whole html and css code.
<!DOCTYPE html> 
		<html>
		<head> 
		<title>Muhammed's Webpage</title> 
			
		<link rel="stylesheet" type="text/css" href="Homepage.css">

		<script type="text/javascript" href="Homepage.js"> </script> 

		<link href='https://fonts.googleapis.com/css?family=Raleway:700

		|Arya:400,700|Nunito:700' rel='stylesheet' type='text/css'>
		
		</head>
		
		<body> 
		<div id="page">
		
		<div id="navbar"> 
		<ul> 
		<li><a href="#BasicInfo"> Basic Information</a></li> 
        <li><a href="#CV"> CV</a></li>
        <li><a href="#Portfolio"> Portfolio</a></li> 
        <li><a href="#Report"> Report</a></li>
		</ul>

		</div>
		
		<div id="intro"> 
		<h1> Muhammed Hussain </h1> 
		
		<h2 id="tagline"> I am a Computer Science student </h2>
		</div> 
		
		<div class="text" id="Basic Information"> 
		<h3 class="headers"> Basic Information </h3> 
		<p>In this section i will have some information about myself. <br> 
		For my finished website i'd like to make it responsive, so that it alters and readjusts 
		well to different screen sizes. I'd also like to include a gallery that uses javascript as
		i haven't used any javascript on this site yet. <br> 
		<br> 
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
		 
		</br></br></br></p>
		</div> 
		
		<div class="text" id="CV"> 
		<h3 class="headers"> CV </h3>
		<p> 
		Here i will have my twitter, instagram and facebook feed <br>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
		dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
		pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
		fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
		a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
		Cras dapibus. Vivamus elementum semper nisi.
		</br></p>
		</div>
		
		<div class="text" id="Portfolio">
		<h3 class="headers"> Portfolio </h3> 
		<p>
		Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
		sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
		Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat 
		massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
		enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
		mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. 
	    </br></p>
	    </div>


	    <div class="text" id="Report">
		<h3 class="headers"> Report </h3> 
		<p>
		Here i will showcase some of my current projects and completed projects. <br>Lorem ipsum dolor
		sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
		Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat 
		massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In
		enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
		mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. 
	    </br></p>
	    </div>

		<br>
        <br>

		</body>
		</html>


#page {
	margin: auto;
	max-width: 85%; 
	font-family: 'Arya', sans-serif;
	color: white;
	padding-top: 45px;
}

#intro { 
	padding-top: 50px;
	font-family: 'Nunito', sans-serif;
	text-transform: uppercase;
	height: 300px; 
	background-image: url("GoldsmithsPic.jpg.jpg");
	background-repeat: repeat-x;
	background-position: bottom right;
	/*background-color: #5c5c5c; */
	font-family: 'Signika', sans-serif;
	text-align: center;
	padding-left: 10px;
}	
h1 {
	font-size: 5em;
	color: black;
	letter-spacing: 10px;
	padding-top: 40px; 
	margin: 0;
}

h2 {
	font-size: 5em;
	color: black;
	letter-spacing: 5px;
	padding-top: 40px; 
	margin: 0;
}

#tagline {
	font-size:1.5em; 
	padding-top: 0px; 
	letter-spacing: 4px;
	margin: 0;
}
#title {
	font-family: 'Raleway', sans-serif;
	text-transform: uppercase;
	color: #434343;
}
#navbar {
	position: fixed; 
	top: 0; 
	left: 0; 
	right:0;
	z-index: 9999;
	width: 100%;
	max-width: 85%;
	margin-left: 7%;
	opacity: 0.8;

}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top; 10px;
 	overflow: hidden;
 	background-color: white;
 	margin-bottom: 20px;
}
li {
	float: left;
}
li a {
	display: block;
	color: #5c5c5c;
	text-align: center;
	padding: 14px 16px; 
	text-decoration: none;
	text-transform: uppercase; 
	font-family: 'Raleway', sans-serif;
}
li a:hover {
	background-color: #5c5c5c;
	color: white; 
}
.headers {
	font-family: 'Arya', sans-serif;
	font-weight: 700;
	font-size: 2em;
	padding-left: 10px;
	padding-bottom: 0;
	margin-bottom: 0;
}
.text {
	background-color: #5c5c5c;
}
p {
	text-indent: 3%; 
	max-width: 95%;
	margin: auto;
}
h3 {
	max-width: 95%;
	margin-left: 5px;
}</br></br></div>
Posted 17-Dec-15 4:59am
Updated 17-Dec-15 5:00am
CHill60200.3K
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web01 | 2.8.180111.1 | Last Updated 17 Dec 2015
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100