...

View Full Version : centering tabs



Charisma
06-05-2012, 03:41 AM
How do i center my tabs?


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





@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;
}

lmorales
06-05-2012, 03:44 AM
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?

Charisma
06-05-2012, 03:52 AM
I tryed that but didn't work :)

miennh_coding
06-05-2012, 03:52 AM
You can use:


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


@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;
}

Charisma
06-05-2012, 04:03 AM
Tryed that and still not centering.

miennh_coding
06-05-2012, 04:10 AM
Tryed that and still not centering.

Weird. Its works with me.

miennh_coding
06-05-2012, 04:13 AM
<!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.

Charisma
06-05-2012, 03:20 PM
I've tried all this and it is centering it in my page but my links are vertical and not horizontal. :)

Charisma
06-05-2012, 04:22 PM
I'm reposting my code because I have been playing with it so much. I think I screwed it up now.


@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; }









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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum