Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page centering tabs

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-05-2012, 03:41 AM   PM User | #1
Charisma
Regular Coder

 
Join Date: Oct 2011
Posts: 118
Thanks: 4
Thanked 0 Times in 0 Posts
Charisma is an unknown quantity at this point
centering tabs
How do i center my tabs?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>Untitled Document</title>


<link rel="stylesheet" type="text/css" href="css/main.css">


</head>


<body>

 

<div id="banner" align="center">

<img src="images/bannerjay.jpg"  alt="">
</div>



<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Designes</a></li>
	<li><a href="#">Contact</a></li>
</ul>



</body>

</html>


Code:
@charset "UTF-8";
/* CSS Document */


body {
	margin:auto;   
 }


#banner{
	alignment-adjust:central;
 }


#nav li {
	float: left;
	 }

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #BBA359;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc;
	 }
	
	#nav li a {
		display: block;
		padding: 8px 15px;
		text-decoration: none;
		font-weight: bold;
		color: #000;
		border-right: 1px solid #ccc;
		 }
		
	#nav li a:hover {
		color: #BBA359;
		background-color: #000;
		 }
Charisma is offline   Reply With Quote
Old 06-05-2012, 03:44 AM   PM User | #2
lmorales
Regular Coder

 
Join Date: Mar 2011
Posts: 192
Thanks: 8
Thanked 1 Time in 1 Post
lmorales is an unknown quantity at this point
margin left:auto
margin right: auto

that should work, or place the nav within another container div that is centered similarly, Im a novice but I *think* that should work.
however, if you are you sure you want the list items to float left within centered tabs?
lmorales is offline   Reply With Quote
Old 06-05-2012, 03:52 AM   PM User | #3
Charisma
Regular Coder

 
Join Date: Oct 2011
Posts: 118
Thanks: 4
Thanked 0 Times in 0 Posts
Charisma is an unknown quantity at this point
I tryed that but didn't work
Charisma is offline   Reply With Quote
Old 06-05-2012, 03:52 AM   PM User | #4
miennh_coding
New Coder

 
Join Date: Dec 2010
Posts: 32
Thanks: 5
Thanked 2 Times in 2 Posts
miennh_coding is an unknown quantity at this point
You can use:

Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

<div id="banner" align="center">
<img src="images/bannerjay.jpg" alt="">
</div>

<center>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Designes</a></li>
<li><a href="#">Contact</a></li>
</ul>
</center>
</body>
</html>
Quote:
@charset "UTF-8";
/* CSS Document */


body {
margin:auto;
}


#banner{
alignment-adjust:central;
}


#nav li {
display: inline-block;
}

#nav {
width: 100%;
display: inline-block;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #BBA359;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #000;
border-right: 1px solid #ccc;
}

#nav li a:hover {
color: #BBA359;
background-color: #000;
}
Last edited by miennh_coding; 06-05-2012 at 04:02 AM..
miennh_coding is offline   Reply With Quote
Old 06-05-2012, 04:03 AM   PM User | #5
Charisma
Regular Coder

 
Join Date: Oct 2011
Posts: 118
Thanks: 4
Thanked 0 Times in 0 Posts
Charisma is an unknown quantity at this point
Tryed that and still not centering.
Charisma is offline   Reply With Quote
Old 06-05-2012, 04:10 AM   PM User | #6
miennh_coding
New Coder

 
Join Date: Dec 2010
Posts: 32
Thanks: 5
Thanked 2 Times in 2 Posts
miennh_coding is an unknown quantity at this point
Quote:
Originally Posted by Charisma View Post
Tryed that and still not centering.
Weird. Its works with me.
miennh_coding is offline   Reply With Quote
Old 06-05-2012, 04:13 AM   PM User | #7
miennh_coding
New Coder

 
Join Date: Dec 2010
Posts: 32
Thanks: 5
Thanked 2 Times in 2 Posts
miennh_coding is an unknown quantity at this point
Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<style>
@charset "UTF-8";
/* CSS Document */


body {
margin:auto;
}

#banner{
alignment-adjust:central;
}
#nav li {
display: inline-block;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #BBA359;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #000;
border-right: 1px solid #ccc;
}

#nav li a:hover {
color: #BBA359;
background-color: #000;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="banner" align="center">

<img src="images/bannerjay.jpg" alt="">
</div>
<center>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Designes</a></li>
<li><a href="#">Contact</a></li>
</ul>
</center>
</body>
</html>
create a html file with content above.
miennh_coding is offline   Reply With Quote
Old 06-05-2012, 03:20 PM   PM User | #8
Charisma
Regular Coder

 
Join Date: Oct 2011
Posts: 118
Thanks: 4
Thanked 0 Times in 0 Posts
Charisma is an unknown quantity at this point
I've tried all this and it is centering it in my page but my links are vertical and not horizontal.
Charisma is offline   Reply With Quote
Old 06-05-2012, 04:22 PM   PM User | #9
Charisma
Regular Coder

 
Join Date: Oct 2011
Posts: 118
Thanks: 4
Thanked 0 Times in 0 Posts
Charisma is an unknown quantity at this point
I'm reposting my code because I have been playing with it so much. I think I screwed it up now.

Code:
@charset "UTF-8";
/* CSS Document */


body {
	margin:auto;   
 }


#banner{
	alignment-adjust:central;
 }

#nav li {
	float:left;
	 }

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #BBA359;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc;
	 }
	
	#nav li a {
	
		display: block;
		padding: 8px 15px;
		text-decoration: none;
		font-weight: bold;
		color: #000;
		border-right: 1px solid #ccc;
		 }
		
	#nav li a:hover {
		color: #BBA359;
		background-color: #000; }


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>Untitled Document</title>


<link rel="stylesheet" type="text/css" href="css/main.css">


</head>


<body>

 

<div id="banner" align="center">

<img src="images/bannerjay.jpg"  alt="">
</div>



<ul id="nav">

	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Designes</a></li>
	<li><a href="#">Contact</a></li>
</ul>

</div>

</body>

</html>
Charisma is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 09:00 AM.
Advertisement
Log in to turn off these ads.