how do i make the center like the links are all off to the left i want them to be center top of the web page... any help?? i have done this before but i dont rember how
CSS:
body {
background: #B0FFF5
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left; /*supposed to be there */
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#3B5998;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ffffff;
color:#3B5998;
}
HTML:
<body>
<ul>
<li>Home</li>
<li>Fb Fame</li>
<li>Donate</li>
<li>Facebook</li>
</ul>
</body>
If you want the buttons to line up, no matter what the window size is, set a fixed width and margin: 0 auto:
ul
{
width: 512px;
margin:0 auto;
}
Here is a demo.
Alternatively remove the whitespace between the list items (or use another technique), set their display to inline-block and give the container a text-align: center:
ul
{
margin:0;
text-align: center;
}
li
{
display: inline-block;
}
Here is a demo.
ul
{
list-style-type:none;
margin:0;
padding:0;
width: 400px;
margin: 0 auto;
}
Hope this helps.
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
i remberd how to do it sorry folks
Related
Just trying to figure out why this div won't center. If I can get this working, I'll be set.
JSFiddle
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width:60%;
text-align:center;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
}
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Every time I try to display it in the browser, it looks like this:
Also how do I stretch the navigation bar to 100%? Like from the very left of the page to the right?
You want to center a div without specified width. For that, first remove ul{width:60%;}, then add text-align:center to the Parent and display:inline-block to the Child :
#container{
text-align:center;
}
ul{
display:inline-block;
}
body{
margin:0;
overflow: hidden;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
text-align:center;
display:inline-block;
}
ul li{
text-transform:uppercase;
float:left;
}
ul li a{
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover{
background-color:#7A991A;
}
#container{
width:100%;
text-align:center;
}
<body>
<div id = "container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</body>
1、delete margin: 0 auto;width:60%;from ul and add display: table;margin: 0 auto;like this：
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
/* margin: 0 auto;
width:60%; */
display: table;
margin: 0 auto;
}
2、delete margin: 0 auto;width:60%;from ul and add ‘text-align: center’ in #container，‘display: inline-block’ in ul like this:
#container{
width:100%;
text-align: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
display: inline-block;
}
3、
#container{
width:100%;
position: relative;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
4、
#container{
width:100%;
display: flex;
justify-content: center;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
}
5、
#container{
width:100%;
display: flex;
}
ul{
display:inline-block;
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
}
may help you。
choose the best one for you project。
Is this what you are looking for?
All I did was moving the background color to the #container, removed the 60% width, and make the LI elements display: inline-block
ul li{
text-transform:uppercase;
display: inline-block;
}
https://jsfiddle.net/391sz22s/1/
Here is one way of doing it.
Set display: table to the ul element, which will give you a shrink-to-fit block level element that will then center using margin: 0 auto.
Set display: table-cell on the li elements.
The advantage of this approach is that the links will remain on a single line no matter how small you make the page width, which may be the desired effect for some designs.
You could set the with of the ul to 100%, but then your link elements would increase in width, which may not be what you want.
ul {
list-style-type:none;
overflow:hidden;
padding:0px;
margin: 0 auto;
width: auto;
display: table;
}
ul li {
text-transform:uppercase;
display: table-cell;
}
ul li a {
display: block;
width: 120px;
text-decoration:none;
background-color:#98bf21;
text-align:center;
margin:0px;
padding:10px;
font-weight:Bold;
color:#fff;
font-family:Arial;
letter-spacing: 1px;
}
ul li a:hover {
background-color:#7A991A;
}
#container {
width:100%;
}
<div id="container">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
I want to display 2 div tag and ul list in same line.Now looking one by one.
Now my tags are looking as
But I want as my drawn layout.My css and html is given below.
m is the menu listed one by one.but a,s,a are in same line
.address {
margin:0;
padding:0;
float:right;
display:inline;
}
.address p{
line-height: 100%;
color: #fff;
}
div.down {
display:inline;
margin-left:0;
padding:0;
text-decoration:none;
}
.list-inline1 ul{
list-style-type: none;
}
ul.list-inline {
display:inline;
margin:0;
padding:0;
margin-left:50px;
}
ul.list-inline li {
display:inline;
margin:0;
padding:10px;
}
ul.list-inline li a {
display:inline;
margin:0;
padding:0;
text-decoration:none;
}
<footer class="footercolor">
<div class="down">
<ul class="list-inline1 ">
<li class="active">
<b>Product</b> <!--product -->
</li>
<li>
<b>Contact Us</b>
</li>
<li>
<b>Login</b>
</li>
</ul>
</div>
<ul class="list-inline ">
<li></i></li>
<li><i class="fa fa-3x fa-instagram"></i></li>
<li><i class="fa fa-3x fa-twitter-square"></i></li>
</ul>
<div class="address">
<p>sample<br>trail<br>demo1<br>address</p>
</div>
</footer>
Add width's to your floated containers. Plus i took off margin's for the styling of the elements would cleaner. And how I got width of 30% to the containers is by doing the number of columns divided by 100%. Then you have think about margin and padding you have put on the elements.
JSFIDDLE DEMO
UPDATED JSFIDDLE without bullets
.address {
margin:0;
padding:0;
float:right;
display:inline;
width: 30%;
}
.address p {
line-height: 100%;
color: #000;
}
div.down {
display:inline;
margin-left:0;
padding:0;
text-decoration:none;
width: 30%;
float: left;
}
.list-inline1 ul {
list-style-type: none;
}
ul.list-inline {
display:inline;
margin:0;
padding:0;
width: 30%;
float: left;
}
ul.list-inline li {
display:inline;
margin:0;
padding:5px;
width: 25%;
float: left;
text-align: center;
}
ul.list-inline li a {
display:inline;
margin:0;
padding:0;
text-decoration:none;
}
Please check the link add column class for each
.column{
float:left;
width:33.33%;
}
.footercolor{
width:100%;
position:relative;
}
http://jsbin.com/xecigodeje/1/edit?html,output
your elements should have a width attribute, otherwise they take up 100% a they are actually block elements.
Also try setting 'display' to 'inline-block'
.adress, div.down, ul.list-inline {
display:inline-block;
width: 30%
}
.address {
margin:0;
padding:0;
float:right;
}
.address p{
line-height: 100%;
color: #fff;
}
div.down {
margin-left:0;
padding:0;
text-decoration:none;
}
.list-inline1 ul{
list-style-type: none;
}
ul.list-inline {
margin:0;
padding:0;
margin-left:50px;
}
ul.list-inline li {
display:inline;
margin:0;
padding:10px;
}
ul.list-inline li a {
display:inline;
margin:0;
padding:0;
text-decoration:none;
}
just make the structure. put the elements in the divs with class="column" (e.g.) and add the css:
.column {position: relative; float: left; margin-right: 20px;}
try adding float:left; and margin-right:10px
ul.list-inline li {
display:inline;
margin-right:10px;
list-style:none;
padding:10px;
float:left;
}
My issue is that the first element in my nav bar which is "home" has more spacing than the rest of the elements. I can't seem for the life of me to figure out what it is. All I wanted was to have a centered evenly spaced out navigation bar but it's seeming harder than I thought.
CSS
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
list-style:none;
width:100%;
margin:0 auto;
padding:0;
text-align:center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding: 0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; overflow:visible; }
.content-outer .content-inner { width:100%; margin:0 auto; overflow:visible; position:relative; }
HTML
<div class="content-outer" id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
That is because you are not properly closing the first li in your list.
<li>Home<li>
should be
<li>Home</li>
Consider running your code through a mark up validator like W3C mark up validator when you are having formatting problems. Many times its something small like a mismatched tag or not properly closing a tag such as in this case.
How to center this thing ? I've tried couple ways but the nav. bar is not exactly in the middle of the site.
<style>
ul
{
background-color:red;
list-style-type:none;
}
li
{
float:left;
}
a
{
display:block;
text-decoration:none;
width:80px;
padding:20px;
text-align:center;
}
a:link
{
background-color:red;
}
a:hover
{
background-color:white;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Guys it works, the navbar is now centered correctly, but the text is not this time.
.......................
padding:0 to ul solves the problem.
thank you guys
Try this:
Remove float:left; and add display:inline-block; to li.
Add text-align: center; margin:0 auto; and a width to ul.
Change to this:
ul {
background-color:red;
list-style-type:none;
text-align: center;
margin: 0 auto;
width:80%;
}
li {
display: inline-block;
}
JSFiddle Demo
You can modify you CSS as following:
ul {
background-color:red;
list-style-type:none;
text-align: center;
margin-left: auto;
margin-right: auto;
width:80%;
}
li { display: inline-block;}
a {
display:block;
text-decoration:none;
width:80px;
padding:20px;
text-align:center;
}
a:link {background-color:red;}
a:hover { background-color:white;}
Notice 4 important lines added:
text-align: center;
margin-left: auto;
margin-right: auto;
width:80%; - set the desirable width if not 100%
width can be also specified in absolute units, like e.g. width:800px; alternatively, 2nd and 3rd lines can be replaced with a single statement: margin: 0 auto;
Demo: http://jsfiddle.net/e2TUC/
Hope this will help. Regards,
#nav
{
border-style:solid;
width:500px;
height:20px;
margin-top:200px;
margin-left:auto;
margin-right:auto;
}
#nav ul
{
list-style-type:none;
width:100%;
display:block;
margin-left:auto;
margin-right:auto;
}
#nav li
{
display:inline;
}
#nav a
{
float:left;
display:block;
border-style:solid;
padding-left:5px;
padding-right:5px;
margin-top:-19px;
}
I just can't get it to center inside the div with the id "nav". Any help on what I am doing wrong? I am sort of new in this field, so any advice on how to make good css layouts would be appreciated!
I think this should do the trick:
#nav {
text-align: center;
}
#nav ul {
margin: 0 auto;
text-align: left;
}