I'm making an HTML web-page with Notepad++, but the navigation bar items won't adjust it's length to the screen. I could really need help with that.
Here is my code:
<head>
<style>
html {
height: 100%;
width: 100%;
}
body {
background-color: #FFE4E1;
font-family: jokerman, 'times new roman', serif;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
nav ul {
display: table;
width: 99, 5%;
height: 40px;
border: #F08080 4px solid;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
text-align: center;
}
nav ul li {
text-align: center;
float: left;
order: 1;
display: table-cell;
}
nav ul li a {
display: table-cell;
position: relative;
padding-left: 95.85px;
padding-right: 95.85px;
line-height: 41px;
border-right: #F08080 4px solid;
border-left: #F08080 4px solid;
text-decoration: none;
font-size: 20px;
color: #DAA520;
background-color: #CD5C5C;
}
inline li {
width: calc(100/5)
}
</style>
</head>
<body>
<div style="background-color: peachpuff">
<div id="Logo" style="background-color: darksalmon">
<img src="DragonaxeYT.jpg" alt="Logo" width="200">
<h1>DragonaxeYT.no</h1>
<nav>
<ul>
<li>Hjem</li>
<li>Kalender</li>
<li>Blogg</li>
<li>Om meg</li>
<li>Quizer</li>
</ul>
</nav>
</div>
</div>
</body>
Hope anyone knows how to fix it? I would like it to adjust itself so that the website would work well also on phones. Thanks in advance.
Update your nav ul li and nav ul li a with the following (I commented out code and added width style):
nav ul li{
text-align: center;
/*float: left;*/
order:1;
display: table-cell;
}
nav ul li a{
display: table-cell;
position: relative;
/*padding-left: 95.85px;*/
/*padding-right: 95.85px;*/
line-height: 41px;
border-right: #F08080 4px solid;
border-left: #F08080 4px solid;
text-decoration: none;
font-size: 20px;
color: #DAA520;
background-color: #CD5C5C;
// New style
width: 20vw;
}
View this is action in Codepen: https://codepen.io/Tiarhai/pen/WgGPbj
Related
I am trying to get my nav bar to display horizontally in a line at the top of my web page below my h1 tag. I tried all sorts of different methods to get it to line up horizontally but it won't change. My nav bar continues to display vertically centered. I want it to be a thin bar up at the top below the h1. As of right now, it displays with each li stacked on top of the other instead of side by side. Any help or ideas are appreciated.
#wrapper{
background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid ;
text-align: right;
display:inline-block;
}
nav a{
text-decoration: none;
border: 1px solid;
width: 100%
}
nav a:link{color:cyan;}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
Make the li elements inline-block, and add box-sizing:border-box:
CSS: #wrapper {
background-color: #FFFFFF;
color: #000066;
width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
box-sizing: border-box;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
box-sizing: border-box;
}
nav {
display: inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav a {
text-decoration: none;
border: 1px solid;
width: 100%;
}
nav a:link {
color: cyan;
}
nav a:visited {
color: #6699FF;
}
nav a:hover {
color: gold;
}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
I don't understand your question. what did you want?.But Is this you want?
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;}
main {margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 98% !important;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav > ul > li {
float: left;
display: inline-block;
}
nav a{text-decoration: none;
border: 1px solid;
}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
</header>
</div>
I have noticed when testing my page on my phone that the point where the two borders meet, an unidentified edge appears
I have also tried having a larger border bottom on my h1 element and a 0 border top for my nav ul element
And look what happens if the background color of the body is the same color as the border
This issue also appears while testing on Google Chromes responsive developer tool.
This is my code for this question
body {
width: 100%;
background-color: blue;
}
h1 {
font-size: 35px;
text-align: center;
color: yellow;
background-color: blue;
border:20px solid yellow;
border-bottom: 10px solid yellow;
margin: 2%;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
nav ul {
background-color: blue;
display: flex;
justify-content: space-between;
list-style-position: inside;
padding: 0;
margin: 0;
border:20px solid yellow;
border-top: 10px solid yellow;
margin-left: 2%;
margin-right: 2%;
}
nav li {
font-size: 15px;
display: inline-block;
list-style-type: none;
background-color: blue;
color: yellow;
padding: 10px;
}
nav ul li a {
width: 67px;
display: inline-block;
text-align: center;
color: yellow;
text-decoration: none;
}
<header>
<h1>
SPACING
</h1>
</header>
<nav>
<ul>
<li>MARGIN</li>
<li>BORDER</li>
<li>PADDING</li>
</ul>
</nav>
I have disabled zoom by using <meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scable=no"> in the head of my html.
I have also tried increasing the border-bottom of my h1 element by 1px and giving the nav ul element a margin-top of -1px which partially works, however this issue will still appear at differnt resolutions or orientation.
I am wondering if anybody knows why this happens and hopefully a solution.
Try using this, see if that's what you need :
https://jsfiddle.net/1r7hp15c/3/
CSS:
body {
width: 100%;
background-color: blue;
}
h1 {
font-size: 35px;
text-align: center;
color: yellow;
background-color: blue;
margin: 2%;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
nav ul {
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
margin-left: 2%;
margin-right: 2%;
background:blue;
}
nav li {
font-size: 15px;
display: inline-block;
list-style-type: none;
background-color: blue;
color: yellow;
padding: 10px;
}
nav ul li a {
width: 67px;
display: inline-block;
text-align: center;
color: yellow;
text-decoration: none;
}
div{
padding: 20px;
background: yellow;
}
nav{
padding: 20px;
background: yellow;
margin-top: -1px;
}
HTML :
<header>
<div>
<h1>
SPACING
</h1>
</div>
</header>
<nav>
<ul>
<li>MARGIN</li>
<li>BORDER</li>
<li>PADDING</li>
</ul>
</nav>
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;
}
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr
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;
}