I already found some threads with the same problem that I have, but they didn't help me. When ever I zoom in on 25%, my last navigation-button breaks on the next line.
This is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</nav>
</div>
</body>
</html>
body
{
background-color: #000000;
margin: 0;
}
li
{
float: left;
background-color: #FFFFFF;
list-style: none;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
width: 160.8px;
text-align: center;
display: inline;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
li a
{
color: #FFFFFF;
text-decoration: none;
display: block;
line-height:
}
li:hover
{
background-color: #C0C0C0;
}
li:last-child
{
border-right: none;
}
ul
{
position: relative;
margin-left: -40px;
}
#menu
{
position: relative;
width: 975px;
height: 30px;
margin: 0 auto;
}
Can anybody help me?
Thanks a lot!
It looks like it is a rounding/ratio problem when you zoom in and out. ( 25% )
When you zoom in or out, you will encounter issues because of
rounding and text rendering. It is a good idea to make sure the
layout can survive a bit of stretching without breaking down.
Relative positioning is affected by issues mentioned in #1, and
therefore unreliable.
Look into using something to remove the properties that the various
browsers will apply. You could use a reset to give you something
more workable or try to normalize the values to make them more even
between browsers.
By Changing lines below in your CSS file (li, ul) will solve the problem in Firefox, Chrome, etc.
Change width: 135px and Add margin: 2px
li
{
float: left;
background-color: #FFFFFF;
list-style: none;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
width: 135px;
margin: 2px;
text-align: center;
display: inline-block;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
Smaller in Chrome (ul width set to 822px in css)
ul
{
width: 822;
margin-left: -40px;
position: relative;
}
Try using divs with display: table and display: table-cell.
<div id="menu">
<nav>
<div class="box">
<div>Link 1</div>
<div>Link 2</div>
<div>Link 3</div>
<div>Link 4</div>
<div>Link 5</div>
<div>Link 6</div>
</div>
</nav>
</div>
body
{
background-color: #000000;
margin: 0;
}
.box div
{
display: table-cell;
background-color: #FFFFFF;
background-color: #00514C;
font-weight: bold;
font-family: "Calibri";
text-align: center;
line-height: 30px;
border-right: 2px solid #FFFFFF;
}
a
{
color: #FFFFFF;
text-decoration: none;
display: block;
line-height:
}
.box div:hover
{
background-color: #C0C0C0;
}
.box div:last-child
{
border-right: none;
}
.box
{
display: table;
width: 100%;
}
#menu
{
position: relative;
width: 975px;
height: 30px;
margin: 0 auto;
}
jsfiddle
Related
I am trying to implement a input/search-field in my website's navigation bar. I would very much like it to work like the YouTube navbar where the input-field is centered in between the left-side logo and links on the right side. But also such that the width of the input field is dynamic and compresses when the browser page is reduced in width.
I am not skilled in CSS and the only way I have been able to even make the search-field sit within the navbar is by setting the position to absolute (in the input-field class). I understand that you can accomplish the same outcome in multiple different ways with CSS and I know that fiddling with the position is properly the wrong way to go if it is also to be dynamic.
Please find a JSFiddle below and the html/CSS code. I am using MaterializeCSS to create the website and the 'brand-logo' class is used to center the logo when the browser window is below a certain threshold. I then use the class 'hide-on-med-and-down' on the ul to make the links disappear when the logo centers. However, I have removed the 'hide-on-med-and-below' class in the below JSFiddle to make it more apparent how the search input currently works.
https://jsfiddle.net/gwm6e031/19/
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<ul class="right hide-on-med-and-down">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div class="input-field hide-on-med-and-down">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
</nav>
CSS code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
background: rgba(0, 0, 0, 0.4);
z-index: 20;
height: 80px;
line-height: 80px;
}
nav .nav-wrapper {
padding: 0px 50px;
}
nav .logo-text {
padding-top: 15px;
font-family: "Raleway", sans-serif;
font-size: 38px;
line-height: 50px;
font-weight: bold;
overflow: hidden;
}
nav .logo-svg {
width: 50px;
height: 50px;
float: left;
background-color: #fff;
}
nav .right {
}
nav ul a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: block;
}
nav ul a:focus {
text-decoration: underline;
}
nav li a:hover {
background: #006699;
}
/* Search bar TOP */
nav .input-field {
position: absolute;
bottom: 0px;
left: 420px;
width: 22%;
max-width: 300px;
}
nav input {
font-family: "Lato", sans-serif !important;
height: 20px !important;
background: #545a69 !important;
background: linear-gradient( rgba(84, 90, 105, 0.9), rgba(84, 90, 105, 0.9)) !important;
border: none !important;
font-size: 14px !important;
color: #fff !important;
padding: 5px 0px 5px 5px !important;
padding-left: 15px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
Please try this code, I have tried to write as simple as I can so you can easily change CSS parameters to your needs. (Take a look at HTML, there you will notice that I have moved position of input block code above ul list.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--main-bg-color: #121a22;
--main-bg-color-gradient: linear-gradient( rgba(18, 26, 34, 0.8), rgba(18, 26, 34, 0.8));
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav-wrapper {
display: flex;
max-height: 50px;
}
.logo-text {
display: flex;
width: 300px;
background-color: #e5e5e5;
align-items: center;
}
.logo-svg {
display: block;
width: 50px;
height: 50px;
background-color: white;
margin-right: 10px;
}
.brand-logo {
text-decoration: none;
}
.input-field {
display: flex;
align-items: center;
width: calc(100% - 600px);
}
input#autocomplete-input {
display: block;
margin: 0 auto;
width: 90%;
max-width: 700px;
height: 30px;
}
.nav-wrapper ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0;
margin: 0;
background-color: #e5e5e5;
}
.nav-wrapper ul li {
list-style: none;
height: 100%;
background-color: transparent;
line-height: 50px;
padding: 0 10px;
transition: background-color .3s ease;
}
.nav-wrapper ul li:hover {
background-color: white;
}
.nav-wrapper ul li a {
text-decoration: none;
}
</style>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<div class="input-field">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
<ul class="right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
</body>
</html>
I want to center the list inside the top-menu div.
I don't know where the problem is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Joshua Brown</title>
<style>
* {
padding: 0;
margin: 0;
}
.top-menu {
width: 100%;
height: 80px;
background-color: #3f3535;
}
p {
font-size: 42px;
font-weight: lighter;
font-family: sans-serif;
color: #2991d9;
padding-left: 100px;
padding-top: 10px;
}
li {
display: inline-block;
float: right;
color: #FFF;
text-transform: uppercase;
border-style: 1px #6f6767 solid;
flex: auto;
text-align: center;
list-style-type: none;
border-right: 1px #6f6767 solid;
}
li:first-child {
border-style: none;
}
ul {
display: flex;
margin-bottom: 0;
}
.li {
padding-left: 50%
}
</style>
</head>
<body>
<div class="top-menu">
<p>JOSHUA BROWN</p>
<div class="li">
<ul>
<li>contact</li>
<li>news</li>
<li>concerts</li>
<li>videos</li>
<li>photos</li>
<li>bio</li>
<li>home</li>
</ul>
</div>
</div>
</body>
</html>
The problem is that you've given your .li element padding-left: 50%, which will offset it by 50%, not center it. That is to say, the left-hand edge will be exactly in the middle. It's actually already centered; this padding is just throwing you off. However, you may also want to look into restricting it with a max-width at certain breakpoints, so that it doesn't take up the full width of the row.
You also given your heading <p> tag a padding-left of 100px, which won't work for mobile devices.... and it's a rather generic selector. I recommend removing your <p> padding then changing your <p> to a <h1>. To center your heading, you just need text-align: center on your .top-menu.
Finally, you've given your <ul> elements display: flex, but your <li> elements display: inline-block. The <li> items should be changed to inline-flex, and given justify-content: center to center them horizontally.
I've fixed all of this up, which can be seen in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Joshua Brown</title>
<style>
* {
padding: 0;
margin: 0;
}
.top-menu {
width: 100%;
height: 80px;
background-color: #3f3535;
text-align: center;
}
h1 {
font-size: 42px;
font-weight: lighter;
font-family: sans-serif;
color: #2991d9;
/*
padding-left: 100px;
padding-top: 10px;
*/
}
li {
/*display: inline-block;*/
display: inline-flex;
justify-content: center;
float: right;
color: #FFF;
text-transform: uppercase;
border-style: 1px #6f6767 solid;
flex: auto;
text-align: center;
list-style-type: none;
border-right: 1px #6f6767 solid;
}
li:first-child {
border-style: none;
}
ul {
display: flex;
/*margin-bottom: 0;*/
margin: 0 auto;
}
.li {
/*padding-left: 50%*/
}
</style>
</head>
<body>
<div class="top-menu">
<h1>JOSHUA BROWN</h1>
<div class="li">
<ul>
<li>contact</li>
<li>news</li>
<li>concerts</li>
<li>videos</li>
<li>photos</li>
<li>bio</li>
<li>home</li>
</ul>
</div>
</div>
</body>
</html>
First of all, never use a known name such as 'li' for a class name. The solution is to just use text-align:center and remove the li class; Here is a snippet.
* {
padding: 0;
margin: 0;
}
.top-menu {
width: 100%;
height: 80px;
background-color: #3f3535;
}
p {
font-size: 42px;
font-weight: lighter;
font-family: sans-serif;
color: #2991d9;
padding-left: 100px;
padding-top: 10px;
}
li {
display: inline-block;
float: right;
color: #FFF;
text-transform: uppercase;
border-style: 1px #6f6767 solid;
flex: auto;
text-align: center;
list-style-type: none;
border-right: 1px #6f6767 solid;
}
li:first-child {
border-style: none;
}
ul {
display: flex;
margin-bottom: 0;
text-align:center;
}
.li {
padding-left: 50%
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Joshua Brown</title>
</head>
<body>
<div class="top-menu">
<p>JOSHUA BROWN</p>
<ul>
<li>contact</li>
<li>news</li>
<li>concerts</li>
<li>videos</li>
<li>photos</li>
<li>bio</li>
<li>home</li>
</ul>
</div>
</body>
</html>
Remove this line in the stylesheet:
.li{ padding-left: 50% }
See fiddle here
I have two problems with my menu bar. What I want to achieve is to center the links on the header (including the logo picture) and have exactly the same height for the header as the menu. When I add the links it creates a margin on top and on bottom (so the header will extend) and I have no idea why. The margin size depends on the font size and if I want to remove it I have to add a -something px margin and have to try pixel by pixel what the number should be. I'm pretty sure there's an easier solution to that... My other problem is that I can't center the whole menu bar within the header unless I specify a specific width. Obviously I don't know how wide my menu bar will be (and even if I measure it somehow, what if I change the links later?) I'm fairly new to HTML and CSS so I've probably made a bunch of mistakes, I just keep changing the codes until I get what I want but since I'm trying to learn it better I'm aiming for more understanding than random coding so feel free to correct anything. Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li id="right">English</li>
</ul>
</div>
</div>
</body>
</html>
And the CSS:
#charset "utf-8";
body {
background-color: #efe8df;
}
#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}
#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}
#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}
#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}
#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}
Thanks in advance!
Header is extending because for ul and li all browser have there margin and padding standards.
You should use reset.css and normalize.css to remove default css property of some common elements.
so if you want just for list use
ul,li{margin:0; padding:0} or how much you want.
To center align you can give following css properties
to header
display: table
to menu
display : table-cell;
text-align:center
to ul
display:inline-block
to li
float:left
Check fiddle
http://jsfiddle.net/gJFy8/1/
try adding this in your css, change the width to whatever you want according to your need
#menu {
width: 900px;
add width to the #menu div
menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}
I am trying to get these list items to center in the list, but I can't seem to figure out the problem. Here's the code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="my.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1</li>
<li>Amazon 2</li>
<li>Amazon 3</li>
</ul>
</div>
</body>
</html>
CSS
#centerDiv {
width: 330px;
text-align: center;
border: 1px solid red;
}
.centerUL {
width: 70%;
margin: 2px auto;
line-height: 1.4;
border: 1px solid green;
}
li {
display: inline;
text-align: center;
border: 1px solid orange;
}
If you aren't using a CSS Reset, you should. http://www.cssreset.com/
CSS Resets will normalise your elements so you know how they will act; what to expect from them.
By default, uls and ols will have a left-padding on them, for the bullets :)
http://jsfiddle.net/MXGz5/
.centerUL {
width: 70%;
margin: 2px auto;
padding: 0; /* this new line */
line-height: 1.4;
border: 1px solid green;
}
... ixes the issue.
The best solution is to use text-align:center; for the ul element and set display:inline-block; for the li elements.
ul{
text-align:center;
}
ul li{
display:inline-block;
}
DEMO
I have a simple site so far but have two issues. I have done everything with percentages because the site might go up on a high def tv and i want them to scale well. The scaling works with the images but id also like to scale the navbar background and text so that it doesnt end up looking small.
The second issue is When the site is squished the bottom image covers the nav bar and doesn't flow under the nav bar element. Id just like this feature because it would scale well for smartphones.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="headish.css">
<title>New Site</title>
</head>
<body>
<div id="container">
<div id="tophead">
<img src="images/logo.png" alt="logo" />
<ul>
<li>About Us</li>
<li>Biographies</li>
<li>Services</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
<div id="maincont">
<img src="images/second.png" alt="image">
</div>
</div>
</div>
</body>
</html>
Here is the css:
html, body, #container {
height: 100%;
width: 100%;
margin: 0;
position: relative;
}
#tophead {
height: 20%;
width: 80%;
margin: auto;
text-align: center;
}
#tophead img {
height: 100%;
width: auto%;
}
#tophead ul {
list-style: none;
display: inline-block;
font-size: 0;
}
#tophead li {
display: inline-block;
}
#tophead a {
background: #2dbaf0;
color: #fff;
display: block;
font-size: 16px;
font-family: "arial";
font-weight: bold;
padding: 0 20px;
line-height: 38px;
text-transform: uppercase;
text-decoration: none;
}
#tophead a:hover {
background: #f8a52b;
color: #fff;
-webkit-transition-property: background;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: linear;
}
#tophead li:first-child a {
border-left: none;
border-radius: 5px 0 0 5px;
}
#tophead li:last-child a {
border-right: none;
border-radius: 0 5px 5px 0;
}
#maincont {
padding-left: 10%;
}
#maincont img{
border-radius: 7%;
width: 30%;
}
To stop the image from flowing into other elements, use clear:both on your #maincontent img
Edit : A good article can be found on it here which suggests other methods. http://quirksmode.org/css/clearing.html
Edit2: This only applys to floated elements, I have just noticed you havn't used floats atall. See my comment below