How to combine header and navigation bar
up vote
0
down vote
favorite
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<pre>
<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>
</pre>Now I need to combine h1 and navigation bar so there won't be space in the middle. I tried combining them with different classes, but the result is still the same, space remains.
My output: https://imgur.com/PVDLSrl
How I need it to be: https://imgur.com/9crZBP2
html css
edited Nov 11 at 15:11
Smollet777
1,140915
asked Nov 11 at 15:00
socha002
329
add a comment |
up vote
0
down vote
favorite
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<pre>
<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>
</pre>Now I need to combine h1 and navigation bar so there won't be space in the middle. I tried combining them with different classes, but the result is still the same, space remains.
My output: https://imgur.com/PVDLSrl
How I need it to be: https://imgur.com/9crZBP2
html css
edited Nov 11 at 15:11
Smollet777
1,140915
asked Nov 11 at 15:00
socha002
329
Have you checked margin and padding? Usually they are releveant when it comes to spaces.
– infinitezero
Nov 11 at 15:03
Please provide the HTML code
– MartinBA
Nov 11 at 15:04
why are you usingpretag? it's causing half the issue
– Temani Afif
Nov 11 at 15:13
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<pre>
<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>
</pre>Now I need to combine h1 and navigation bar so there won't be space in the middle. I tried combining them with different classes, but the result is still the same, space remains.
My output: https://imgur.com/PVDLSrl
How I need it to be: https://imgur.com/9crZBP2
html css
edited Nov 11 at 15:11
Smollet777
1,140915
asked Nov 11 at 15:00
socha002
329
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<pre>
<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>
</pre>Now I need to combine h1 and navigation bar so there won't be space in the middle. I tried combining them with different classes, but the result is still the same, space remains.
My output: https://imgur.com/PVDLSrl
How I need it to be: https://imgur.com/9crZBP2
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<pre>
<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>
</pre>.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<pre>
<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>
</pre>html css
html css
edited Nov 11 at 15:11
Smollet777
1,140915
asked Nov 11 at 15:00
socha002
329
edited Nov 11 at 15:11
Smollet777
1,140915
asked Nov 11 at 15:00
socha002
329
edited Nov 11 at 15:11
Smollet777
1,140915
edited Nov 11 at 15:11
Smollet777
1,140915
edited Nov 11 at 15:11
Smollet777
1,140915
1,140915
asked Nov 11 at 15:00
socha002
329
asked Nov 11 at 15:00
socha002
329
asked Nov 11 at 15:00
socha002
329
329
Have you checked margin and padding? Usually they are releveant when it comes to spaces.
– infinitezero
Nov 11 at 15:03
Please provide the HTML code
– MartinBA
Nov 11 at 15:04
why are you usingpretag? it's causing half the issue
– Temani Afif
Nov 11 at 15:13
add a comment |
Have you checked margin and padding? Usually they are releveant when it comes to spaces.
– infinitezero
Nov 11 at 15:03
Please provide the HTML code
– MartinBA
Nov 11 at 15:04
why are you usingpretag? it's causing half the issue
– Temani Afif
Nov 11 at 15:13
Have you checked margin and padding? Usually they are releveant when it comes to spaces.
– infinitezero
Nov 11 at 15:03
Have you checked margin and padding? Usually they are releveant when it comes to spaces.
– infinitezero
Nov 11 at 15:03
Please provide the HTML code
– MartinBA
Nov 11 at 15:04
Please provide the HTML code
– MartinBA
Nov 11 at 15:04
why are you using
pre tag? it's causing half the issue– Temani Afif
Nov 11 at 15:13
why are you using
pre tag? it's causing half the issue– Temani Afif
Nov 11 at 15:13
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
The problem here are the pre tags, you need to delete those and then set a margin: 0 for the h1
#h1{
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0; /*Added*/
}
let me know if that helps.
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0;
/*Added*/
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>edited Nov 11 at 15:18
Smollet777
1,140915
answered Nov 11 at 15:13
MartinBA
7161213
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
The problem here are the pre tags, you need to delete those and then set a margin: 0 for the h1
#h1{
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0; /*Added*/
}
let me know if that helps.
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0;
/*Added*/
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>edited Nov 11 at 15:18
Smollet777
1,140915
answered Nov 11 at 15:13
MartinBA
7161213
add a comment |
up vote
0
down vote
accepted
The problem here are the pre tags, you need to delete those and then set a margin: 0 for the h1
#h1{
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0; /*Added*/
}
let me know if that helps.
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0;
/*Added*/
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>edited Nov 11 at 15:18
Smollet777
1,140915
answered Nov 11 at 15:13
MartinBA
7161213
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
The problem here are the pre tags, you need to delete those and then set a margin: 0 for the h1
#h1{
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0; /*Added*/
}
let me know if that helps.
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0;
/*Added*/
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>edited Nov 11 at 15:18
Smollet777
1,140915
answered Nov 11 at 15:13
MartinBA
7161213
The problem here are the pre tags, you need to delete those and then set a margin: 0 for the h1
#h1{
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0; /*Added*/
}
let me know if that helps.
.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0;
/*Added*/
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0;
/*Added*/
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>.sticky {
position: sticky;
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0;
/*Added*/
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}<div class="sticky">
<h1 id="h1">my web page </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>edited Nov 11 at 15:18
Smollet777
1,140915
answered Nov 11 at 15:13
MartinBA
7161213
edited Nov 11 at 15:18
Smollet777
1,140915
edited Nov 11 at 15:18
Smollet777
1,140915
edited Nov 11 at 15:18
Smollet777
1,140915
1,140915
answered Nov 11 at 15:13
MartinBA
7161213
answered Nov 11 at 15:13
MartinBA
7161213
answered Nov 11 at 15:13
MartinBA
7161213
7161213
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53249978%2fhow-to-combine-header-and-navigation-bar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you checked margin and padding? Usually they are releveant when it comes to spaces.
– infinitezero
Nov 11 at 15:03
Please provide the HTML code
– MartinBA
Nov 11 at 15:04
why are you using
pretag? it's causing half the issue– Temani Afif
Nov 11 at 15:13