As you read on the title, I've been trying to make a navigation bar but I'm having several issues I haven't experienced before. I even made a list:
Buttons sticking into the navigation bar even though they don't belong in the div class.
Navigation Bar
Well now, I've seen this before, but I've gotten a bit rusty on HTML and don't quite remember how to fix it. If you can't tell, the links are not lined up with the text/logo. How can I fix this? I'm trying to make it slim.
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
width: 100%;
left: 0;
top: 0;
position: fixed;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
It is sticking because of position: fixed;. The button doesn't see the .navigation-bar. Add padding to a parent that contains these elements.
h1 needs to have display:inline-block;. ul is just below h1 now.
Related
I have a bigger HTML header containing a menu and a large picture.
I would like to place text on the image somewhere as a "title" to the page.
Whenever I try to add my <h1> tag somewhere, it positions the text above the menu and it's not what I want.
I would like to be able to position any form of tags somewhere in the picture and I am struggling to find a solution as my code is not efficient to do this.
I am starting to understand what my problem is but I cannot find a solution.
Here is a template of what's going on. I want to place the text somewhere next to my face (as weird as it sounds lol), anyone?
body {
font: 15px/1.5 Gravity, Arial;
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 800px;
background: url('../img/web_bg.jpg');
background-size: cover;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
z-index: 100;
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #fff;
z-index: 100;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
nav ul li a:hover {
background-color: #white;
border: none;
color: #000;
text-align: center;
opacity: 0.6;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<header id="home">
<h1>MOHANAD ARAFE</h1>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">MOHANAD ARAFE</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
You are going good, cheers for that. For the problem you are facing I would suggest you to play with z-index. It is a CSS property, and defines the elements as layers. Element with greater z-index will be the top most layers, followed by the elements with lesser z-index. I would suggest you to set z-indec of image to lowest, and make the content above in another container, and set the z-index of this container to a higher range, this should solve your problem.
Here's more reference on z-index
Happy Coding.
I would suggest using grid in these kind of situations where you have to deal with position of elements. A crash course on grid will be the best option. I personally use it a lot and don't have to care about anything other than z index.
You can use position: absolute; for the h1 tag and use top value in %, and left value in %
h1{
position:absolute;
top: value in %;
left: value in %;
}
header{
position:relative;
}
Note: apply a class name for h1 and apply css for that class or else it might affect h1 tag in sub pages.
I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.
Firefox
Chrome
What would be the difference between these web browsers that would have such an effect on my code?
<nav id="topTab">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">Example1</b></h1>
</div>
</nav>
CSS:
#media only screen and (min-width : 1024px) {
a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}
#topTab{
position:relative;
}
nav#topTab {
float: left;
width: 100%;
overflow: hidden;
}
nav#topTab ul {
float: left;
clear: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
}
nav#topTab ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
nav#topTab ul li a {
display: block;
padding: 0 5% 0 5%;
margin: 0 15% 0 3%;
font-size: 2.2em;
}
nav#topTab ul li a:hover {
background: #000;
color: #fff;
}
h1 {
position: relative;
text-align: center;
top: 20%;
}
h1 b {
font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}
Your unordered list is floated. Floating an element removes it from the "natural" flow of the document and as a consequence, your text is trying to adjust to this "unnatural" flow.
You have to clear your floats to restore the flow again. This can be done by adding an element with clear: both style attached to it. In this case, you would add clear both to your div wrapping the heading tag.
div {clear: both}
So I recently added a sort of bubble-slideshow esc thing to my website to make it a bit better. For some unexplainable reason this pushed my footer down to the bottom of my page (and it also extended the page downwards so now I have to scroll even though everything should be able to fit on the page). I was screwing around with it yesterday to figure out how to fix it (I'm not very experienced at CSS), and I couldn't find the problematic line. Now today I check my localhost and the page is completely screwed up and the footer is half way up the page, shall I note that I still have the option to scroll even though beyond half way down my page it's entirely blank.
Below is my CSS, involving the entirety of the different styles I used to make the footer (which is probably more than necessary, but again, noob). It was definitely different last night, hence why it's all screwed up today, but my recent backup doesn't have the footer.
html,
body {
margin: 0;
padding: 0;
height: 90%;
}
#container {
min-height: 100%;
bottom: 0;
position: relative;
}
#footer {
width: 100%;
height: 60px;
bottom: 0;
background: #DADADA;
display: block;
}
ul2 {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
padding: 20px 16px;
}
li5 a {
text-family: verdana;
color: black;
padding: 20px 20px;
text-align: center;
text-decoration: none;
}
<div id="container">
<div id="footer">
<ul2>
<li5>Contact Us
</li5>
<li5>A test project</li5>
<li5>About
</li5>
</ul2>
</div>
</div>
change your height:90% to 100% in html/body set position:absolute or fixed in #footer (depending if you want to scroll and let footer fixed or not, it was unclear to me)
Note: there isn't property text-family, use font-family instead
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
bottom: 0;
position: relative;
}
#footer {
position: fixed; /* or - absolute - */
width: 100%;
height: 60px;
bottom: 0;
background: #DADADA;
display: block;
}
ul {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
padding: 20px 16px;
}
li a {
font-family: verdana;
color: black;
padding: 20px;
text-align: center;
text-decoration: none;
}
<div id="container">
<div id="footer">
<ul>
<li>Contact Us
</li>
<li>A test project</li>
<li>About
</li>
</ul>
</div>
</div>
Also you can try this code, no need for extra container:
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
}
#footer {
width: 100%;
bottom: 0;
background: #DADADA;
display: block;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
}
li{
font-family: verdana;
color: black;
padding: 20px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<div id="footer">
<ul>
<li>Contact Us
</li>
<li>A test project</li5>
<li>About
</li>
</ul>
</div>
</body>
</html>
Hey I want to make a website with a frontpage just like this one: http://foreword.io/ .
I need help with the horizontal list to get it just like the one on foreword.io.
I want the yellow area to be stretched all the way to the sides. When I hover over a link it only marks the upper part of the square, so I want it to mark the whole square for each link.
Please help and thanks in advance.
Here is my code:
body {
font-family: Times New Roman;
}
.h1 {
position: absolute;
height: 200px;
top: 90px;
width: 1585px;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
position: absolute;
height: 190px;
top: 340px;
width: 700px;
left: 500px;
font-size: 50px;
}
ul {
position: absolute;
height: 100px;
top: 600px;
left: 100px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
You can do this just adding the Height option to "li a" section in the css as below:
li a {
display: block;
color: black;
height: 100px;
text-align: center;
padding: 20px;
text-decoration: none;
font-size:20px;
}
it will set the height of the square so the whole yellow part will change to white.
in the case of the yellow bar size and item positions:
set the width of the ul to 100% so it will use the whole available space on the browser also remove the "left" and finally add 'position:relative', 'left:20%' and 'width:10%; to the li section.
li {
position: relative;
left: 20%;
width: 10%;
float: left;
}
SOURCE: My head :-P
Use display: inline-block; instead of display: block; and you will get an horizontal list.
Weave: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77
For something so simple you're using position absolute in places where it's not needed which could be replaced with margin. Thus your code is fairly WET (especially with me being on a tablet right now) So I made a simple mockup that's DRY and can work for RWD as well if you utilize media-queries.
I removed a lot of the unnecessary positioning. By setting the ul tag to text-align center I was able to center the anchors by telling the li tag to be displayed as an inline-block. Then I filled the width using width: 100%; margin: 0; padding: 0;
How this snippet helps.
body {
font-family: Times New Roman;
}
.h1 {
width: 100%;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
width: 100%;
font-size: 50px;
text-align: center;
}
ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.