I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.
HTML:
<body>
<div id="wrap">
</div>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
<div id="content">
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#425eb4;
}
*{
margin: 0 auto 0 auto;
}
#wrap {
height:150px;
background:url(images/header1.png) no-repeat center;
text-align:center;
background-color:#FFF;
}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left;
text-align:center; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
text-align:center;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
text-align:center;
background-color: #fff;}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width:1000px;
height:800px;
background-color:#FFF;
}
You need to take the float:left off of both your #nav and li elements.
Then add display:inline-block; to both. Next add your text-align:center to the #nav.
#nav {
width: 100%;
display: inline-block;
text-align: center;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 0px; // looks like bootstrap is putting a left margin on your #nav you may want it off.
}
#nav li {
display: inline-block;
text-align:center;
}
Use this CSS:
Take the floats off, use display:inline-block to put the lis beside each other, and use text-align:center on the #nav. Is this what you're looking for?
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #425eb4;
}
* {
margin: 0 auto;
}
#wrap {
height: 150px;
background: url(images/header1.png) no-repeat center;
text-align: center;
background-color: #FFF;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display: inline-block;
text-align: center;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: 700;
text-align: center;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
text-align: center;
background-color: #fff;
}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width: 1000px;
height: 800px;
background-color: #FFF;
}
IMO adjust your CSS to be something generally like (I am omitting values specific to your code and just including generally necessary ones for your general goal):
#wrap {
width:100%;
}
#nav {
width:300px; //however wide your nav container needs
margin:auto; //this is what will center an elem, relative to its parent (in
//this case a 100% wide wrap; the 100% is relevant because it
//keeps things centered as window is resized.
}
All good input, I think this will help someone too,,,
I use something like this usually,
It's balanced / centered / and block so all is clickable
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}
li {
width: 100px;
margin: auto;
display: inline;
}
p {
clear: both;
margin: 10px 5px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>Notice we are all centered</p>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
Related
I am building a menu. I have this code:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
And CSS:
nav{
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
padding: 20px 35px 0 0px;
}
nav ul{
margin-right: 100px;
height: 90px;
list-style-type: none;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover{
text-align: center;
color: 33adae;
What I am trying to do is to make the links clickable like blocks with the height of the whole navbar. The way I have done It so far, you can click only the text in the links.
Generally all that is needed is.
nav a{
display:block;
}
However for a fuller example it's generally easier to let the links determine the height of the header.
For centering, don't use floats, set the ul to text-align:center and the li to display:inline-block.
* {
margin: 0;
padding: 0;
;
box-sizing: border-box;
}
nav {
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
overflow: hidden;
/* clearfix */
}
nav li {
display: inline-block;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav a {
display: block;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
height: 90px;
line-height: 90px;
padding: 0 25px;
}
nav a:hover {
text-align: center;
color: 33adae;
background: plum;
<nav>
<ul>
<li>Kontakt
</li>
<li>Reference
</li>
<li>Moje služby
</li>
<li>Kdo jsem
</li>
</ul>
</nav>
You could remove the padding from your lis and add it to your a tags. See example http://codepen.io/anon/pen/gaGxpb
Move your <li> padding to the <a> children, and give the links a height:
See codepen
NB: Added a border to the links so as you see the boundaries.
display the links as blocks display: block; and use the line-height to give them the height you want. Try this:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li {
float: right;
padding: 0px 35px 0 0px;
}
nav ul {
margin: 0 100px 0 0;
height: 90px;
list-style-type: none;
}
nav a {
display: block;
line-height: 90px;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover {
text-align: center;
color: 33adae;
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
Here is my version using height and with properties instead of padding, i used background colors so you can see how is working: http://codepen.io/aluknot/pen/wKrqaG
HTML:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
CSS:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
background: red;
text-align: center;
height: 100%;
width: 120px;
line-height: 90px
}
nav ul{
margin: 0;
padding-right: 100px;
height: 90px;
list-style-type: none;
background: green;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
display: block;
width: 100%;
height: 100%;
background: blue;
}
nav a:hover {
background: black;
color: white;
}
been trying to get my logo which is a .gif to float on my header image and stick there even when resizing page
almost had it, then i resized my window. Am i wasting my time because i actually give up been trying for hours with no luck.
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>B.13 DJ Hire</title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
</head>
<body>
<div id="box">
<div id="header">
<a href="index.html" class="banner">
<img src="images/banner.jpg">
</a>
<a href="index.html" class="logo">
<img src="images/logo.gif">
</a>
</div>
<h1>B13. DJ Equipment Hire</h1>
<nav>
<ul id="mainnav">
<li class="home">Home</li>
<li class="mixers">Mixers</li>
<li class="turntables">Turntables</li>
<li class="mp3">MP3 Media Players</li>
<li class="headphones">Headphones</li>
<li class="contact">Contact Us</li>
</ul>
</nav>
<h2> Our Equipment Range<h2>
<br><br>
<p> we are a equipment hire company..</p>
<br>
<p id="footer">45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</div>
</body>
Here is my CSS code
body {
padding: 0;
margin: 0;
font-family: tahoma, arial, helvetica, sans-serif;
}
h1, h2 {
text-align: center;
font-family: georgia, "times new roman", times, serif;
}
h1 {
margin: 0;
font-size: 2em;
color: white;
background: #585858;
line-height: 1.90em;
width: auto;
text-align: centre;
background-position: center;
text-shadow: 2px 2px 4px #000000;
border-radius: 0.30em;
}
h2 {
font-size: 1.5em;
}
#box {
border-style: none;
width: 70em;
padding: 0em;
margin-left: auto;
margin-right: auto;
background: #C2C2C2;
}
#header{
}
.banner img{
position: relative;
float: left;
height:206px;
width:1120px;
z-index: 1;
display:block;
}
.logo img {
position: absolute;
float:right;
margin-top: 0px;
margin-left: 0px;
z-index: 2;
height:290px;
width:712px;
bottom:335px;
right:50px;
}
#footer {
background: #A6A6A6;
text-align: right;
padding: 0.25em;
margin: 0;
}
.callout {
font-weight: bold;
}
#mainnav {
text-align: center;
background: #A6A6A6;
padding: 0.75em;
margin: 0;
position: relative;
border-radius: 0.5em;
}
#mainnav li {
display: inline-block;
list-style-type: none;
padding: 0;
background: A6A6A6;
color: #A6A6A6;
}
#mainnav a:link{
color:black;
background-color: transparent;
text-decoration: none;
}
#mainnav a:hover{
color: blue;
background-color:#C2C2C2;
text-decoration: underline;
text-shadow: 8px 12px 12px blue;
}
#mainnav a:visited {
color: black;
}
#mainnav li.home a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.home a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.mixers a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mixers a:hover {
color: black;
background-color:#C2C2C2;
padding: 10px 20px;
}
#mainnav li.turntables a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.turntables a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.mp3 a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.mp3 a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.headphones a{
color:#black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.headphones a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#mainnav li.contact a{
color: black;
padding: 10px 20px;
border-top: 2px solid #A6A6A6;
border-bottom: 2px solid #A6A6A6;
}
#mainnav li.contact a:hover {
color: black;
background-color:#C2C2C2 ;
padding: 10px 20px;
}
#slideshow {
position:absolute;
text-align: center;
}
#pics {
margin-left: auto;
margin-right: auto;
width: 50%;
float: right;
text-align: center;
}
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 0px;
}
img {
max-width: 120%;
display: block;
background-size: 100%;
}
img {
max-width: 100%;
display: block;
}
#slideshow {
wd
You say you want to float your image, and you have float stated for the logo style, but you also have position:absolute stated as well. You need to use one or the other to achieve your goal my friend.
Also you are missing a few closing DIVs in your code. Can you share a URL to your issue? that may be easier than seeing the incomplete code.
Your CSS styling you have (position:absolute) is causing the problem. Along with the fact that you have it positioned exactly in a fixed spot on the page with your position properties like "top" "bottom" "left" and "right". You do not want this when you have a logo in a spot on the page that doesn't move around (like in your header). To fix this, you want to remove what you had under the CSS for ".logo img" and put the following:
.logo img {
height:200px;
width:200px;
}
Here is an example of it: https://jsfiddle.net/Lp7fwm7a/. When you resize the window, the logo stays in the correct place like how you want it.
You might also want to look into the float property if you have two div's in your header. Here's a good article on it: https://css-tricks.com/all-about-floats/.
Using the position: absolute; attribute means that image is being positioned according to the browser window (because you don't have any other absolute positioned elements on the page).
Your top and bottom values are counting from the edge of the browser window, not from the edge of your image.
You can center it like by replacing .logo img with:
position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;
Your logo is a lot taller than your header image. I noticed the top of the logo in your code was cut off, not sure if you meant to do that or not but if you edit that first 0 in margin, you can adjust the top margin. -100px or so should put it back where you had it.
Also just a comment about what the other answers say, you're not missing a closing div tag - there's just really inconsistent indentation making your HTML and CSS really difficult to read. You are missing a / in the closing h2 tag and you spelled 'center' as 'centre' in your h1, h2 CSS.
Here's a link to all the fixes (including indentation): http://codepen.io/anon/pen/KpXKVG
So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
Unfortunately, I have always the same problem with heigths of divs.
I want that my div (If the content is minimum) fills the monitor. Otherwhise, if the content exceed the page I use the scrollbar (overflow:scroll) and this part is ok.
My page is composed like this:
<div id="container">
<div id="header"> ...</div>
<div id="navigation"> ... </div>
<div id="content"> ...
<div id="testo"></div>
</div>
I would like that the div content match the heigth of the page of the browser.
If you watch this example http://jsfiddle.net/EBnD2/
you can understand what is my problem.
thanks in advance!
Here's a script driven solution:
And the script that does the trick (I've used jQuery for convenience. Feel free to resort to pure javascript, if necessary :
$(document).ready(function () {
$("#content").css("height",
(
$(document).outerHeight()
- $("#header").outerHeight()
- $("#navigation").outerHeight()
- $("#footer").outerHeight()
- parseInt($("#content").css("padding"))) + "px");
});
Here's the updated style definitions:
html {
}
body {
min-width: 1150px;
overflow: auto;
background-color: pink;
margin: 0px;
}
#container {
margin: 0 100px;
background: #fff;
border-top: 1px solid grey;
font-family: sans-serif;
}
#header {
text-align:center;
background: #ccc;
padding: 20px;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
#header h1 {
margin: 0;
}
#testo {
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 18px;
line-height: 30px;
text-transform: uppercase;
color: #444;
}
p.sx {
text-align: left;
}
p.cx {
text-align: center;
}
p.dx {
text-align: right;
}
#navigation {
float: left;
width: 100%;
background: #CC3366;
font-weight: bold;
font-size: 90%;
font-size-adjust: inherit;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
}
#navigation li a {
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover {
background: #993366;
}
#navigation li a.selected {
background: grey;
}
#content {
background-color: white;
border-left: 1px solid grey;
border-right: 1px solid grey;
padding: 20px;
}
#content h2 {
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer {
border: 1px solid grey;
background: #ccc;
text-align: right;
padding: 20px;
}
I have a script here for my navigation bar:
<style type="text/css">
/* Navigation Bar */
#nav_bar {
display:inline-block;
height:50px;
}
#nav_bar ul {
display:inline-block;
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:inline-block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
</style>
</font>
I'm having trouble trying to get it displayed in the centre of the page, how can I do it?
I've looked into "display: inline-block;" and "position: relative" and couldn't find a code that worked
the html part of my nav bar is as follows (in regards to your comments) I hope it helps! :)
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
Give it a width and auto margins and make sure its a block level element.
By default a 'div' is a block level element so you can remove this rule.
You must set a width or the menu with expand to the width of its container.
#nav_bar {
display:block;
height:50px;
margin: 0 auto;
width: 567px; /* or whatever you require */
}
Example:
http://jsfiddle.net/29FRa/
#nav_bar {
height:50px;
width:800px;
margin:0 auto;
}
HTML:
<html>
<body>
<div id="#nav_bar"></div>
</body>
</html>
Use text-align: center; on your #nav_bar and be sure it is a block-level element.
http://jsfiddle.net/TKMeU/
A total of six kinds of methods：
１、Margin and width to achieve horizontal center
#nav_bar {
height:50px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
}
please view the demo.
2、use the inline-block, like this:
#nav_bar {
height:50px;
text-align: center;
}
#nav_bar ul {
list-style-type: none;
display: inline-block;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
text-align: center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
#nav_bar li {
margin: 0 5px;
display: inline-block;
*display: inline;
zoom:1;
letter-spacing: normal;
word-spacing: normal;
font-size: 12px;
}
please view the demo.
3、use the float,like this:
#nav_bar {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
#nav_bar ul {
list-style-type: none;
width: 565px;
height: 50px;
height: 100%;
padding: 0;
clear: left;
float: left;
position: relative;
left: 50%;/*整个分页向右边移动宽度的50%*/
text-align: center;
}
#nav_bar li {
margin: 0 5px;
display: block;
height: 50px;
float: left;
position: relative;
right: 50%;/*将每个分页项向左边移动宽度的50%*/
}
#nav_bar a:hover {
background-color: #000000;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 50px;
padding: 0 1em 0 1em;
background-color: #900000;
}
Please view the demo.
Other methods, you can click here.