I'm trying to fit a few navigation tabs onto an <article> tab but it doesn't work properly on firefox and when on different screens, it messes up. Does anyone know an alternative that works with all browsers and doesn't change as the screen is resized?
Here is the result I want:
Exactly that except I don't want to use a fixed margin-top
EDIT:
Code:
Navigation:
nav {
width: 100%;
height: 4%;
}
nav ul {
list-style-type: none;
}
nav li {
width: 100%;
background-color: #9A9489;
display: inline-block;
text-align: center;
width: 11%;
font: 1.4em/1.3em Bonveno, Open Sans, Sans-Serif;
float: right;
cursor: pointer;
margin-right: 0.5%;
border-top-left-radius: 0.3125em;
border-top-right-radius: 0.3125em;
transition: background-color 0.2s ease-in-out;
}
Article (without margin-top):
article {
width: 99.5%;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0.3125em 0 #9A9489;
padding: 0 0 0.5% 1.5%;
}
HTML:
<nav>
<ul>
<a href="contact.php">
<li>Contact</li>
</a>
<a href="pictures.php">
<li>Pictures</li>
</a>
<a href="about.php">
<li class="selected">About</li>
</a>
<a link="black" href="index.php">
<li>Home</li>
</a>
</ul>
</nav>
<article>
<h1>Hello World</h1>
<p>Hello world</p>
</article>
Well you can always try position as an alternative to margin.
In this case, I think you would have to use a relative position, so do the following:
.YOUR_TABS_SELECTOR{
position: relative;
top: 10px;
}
Related
This is a solution-way question to another question I asked before (Open 100% width Navigation on hover over navigation item)
I am trying to build a navigation bar that shows more in depth search terms as soon as you hover over the respective navigation bar item.
Now I think I am close to a solution: I created this separate div that should be visible as soon as one hovers over "Produkte" / #navigation-item2. Now with the way I am acustomed to :hover this does not work. How can I make this work?
.navigation {
width: 100%;
height: auto;
max-height: 20vh;
background: white;
display: flex;
;
align-items: center;
justify-content: center;
}
.navigation-item {
position: relative;
height: 10%;
width: 15%;
font-size: 1.2em;
color: black;
font-weight: bold;
padding: 0.5em 1em 0.5em 1em;
margin: 0px 1% 0px 1%;
text-align: center;
text-transform: uppercase;
transition: background 200ms linear;
text-decoration: none;
}
.navigation-item:hover {
background: lightgrey;
}
.nav-menu {
height: 200px;
position: absolute;
width: 100%;
max-height: 25vh;
opacity: 0;
}
#navigation-item2:hover #nav-menu2 {
opacity: 1
}
<header>
<nav class="navigation">
<a href="https://www.amazon.com" style="flex: 0.5; margin-left: 20px">
<img src="/images/Logo.png" alt="Logo" style="height:100%; width:auto; max-height: 16vh; margin-top: 3px;">
</a>
<a class="navigation-item" href="https://www.amazon.com">
Home</a>
<a class="navigation-item" href="https://www.amazon.com">
Portfolio</a>
<a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
Produkte</a>
<a class="navigation-item" href="https://www.amazon.com">
Über uns</a>
</nav>
<div class="nav-menu" id="#nav-menu2">
<ul class="dropdown">
<li>
<ul>
<li>Kochmesser</li>
<li>Küchenmesser</li>
</ul>
<li>Scheren</li>
<li>Klingen</li>
</ul>
</div>
</header>
What #navigation-item2:hover #nav-menu2 means, is that it targets the child element #nav-menu2 when the parent #navigation-item2 is hovered.
What you need to do is to move the #nav-menu2 inside the nav-tag, because you can only target siblings (with + or ~) or child elements.
I moved #nav-menu2 so it's directly follows the relevant a tag. Then you can use #navigation-item2:hover + #nav-menu2 to increase the opacity to 1.
By positioning every single sub-menu in the same order in the DOM, you can even go a step further, which I show-case in the code below, using only the classes.
For the sake of demonstration, I changed the #nav-menu2 to a starting opacity of 0.1. I also positioned #nav-menu2 to align at the bottom of .navigation (hence, adding position: relative to .navigation), and then translated it's full height (100%) to have the #nav-menu2 position itself under the navbar.
I would even go one step further and place #nav-menu2 inside #navigation-item2, so you automatically get the correct x-position. It would also solve the issue that you look the hover state if you got outside the .navigation-item. But I leave that up to you to figure out.
.navigation {
position: relative; /* ADDED */
width: 100%;
height: auto;
max-height: 20vh;
background: white;
display: flex;
;
align-items: center;
justify-content: center;
}
.navigation-item {
height: 10%;
width: 15%;
font-size: 1.2em;
color: black;
font-weight: bold;
padding: 0.5em 1em 0.5em 1em;
margin: 0px 1% 0px 1%;
text-align: center;
text-transform: uppercase;
transition: background 200ms linear;
text-decoration: none;
}
.navigation-item:hover {
background: lightgrey;
}
.nav-menu {
height: 200px;
bottom: 0px; /* ADDED */
transform: translateY(100%); /* ADDED */
position: absolute;
width: 100%;
max-height: 25vh;
opacity: 0.1; /* CHANGED */
}
.navigation-item:hover + .nav-menu { /* CHANGED */
opacity: 1;
}
<header>
<nav class="navigation">
<a href="https://www.amazon.com" style="flex: 0.5; margin-left: 20px">
<img src="/images/Logo.png" alt="Logo" style="height:100%; width:auto; max-height: 16vh; margin-top: 3px;">
</a>
<a class="navigation-item" href="https://www.amazon.com">
Home</a>
<a class="navigation-item" href="https://www.amazon.com">
Portfolio</a>
<a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
Produkte</a>
<div class="nav-menu" id="nav-menu2">
<ul class="dropdown">
<ul>
<li>Kochmesser</li>
<li>Küchenmesser</li>
</ul>
<li>Scheren</li>
<li>Klingen</li>
</ul>
</div>
<a class="navigation-item" href="https://www.amazon.com">
Über uns</a>
</nav>
</header>
I am trying to get the title of a website to sit between a logo and a nav bar, while also wrapping under the nav bar.
I have tried floating the logo left and the nav element right but the nav sits under the h1. This is due to the layout of the html markup which I am not allowed to modify.
This is the desired result:
header figure {
display: inline-block;
margin: 0px;
margin-right: 40px;
float: left;
}
nav {
float: right;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'great-vibes';
font-size: 50px;
margin: 0px;
}
<header>
<figure>
<img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>
Unable to move the elements in the DOM, you need to do two things. Use absolute positioning to move the menu to the top right hand corner, and construct a float using a before pseudo element inside the h1 element to leave room for the menu so the text doesn't overlap it. Something like this:
#import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');
header {
position:relative;
}
header figure {
display: inline-block;
margin: 0px;
margin-right: 20px;
float: left;
}
nav {
position:absolute;
right:0;
top:0;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'Great Vibes', cursive;
font-size: 40px;
margin: 0px;
overflow:auto;
}
h1:before {
content: '';
float: right;
width: 340px;
min-width: calc(100% - 6em);
height:1em;
}
<header>
<figure>
<img src="http://placehold.it/125" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>
you can add float attribute in h1 style
like the following:
<h1 style="float:left"></h1>
You can achieve most of your desired result through absolute-positioning and flexbox, but your h1 text must change so that it breaks after the "welcome to" part.
See the result in full page mode.
header{
display:flex;
align-items:center;
position:relative;
border:1px solid;
border-radius:10px;
padding:10px;
}
header figure{
display: inline-block;
margin: 0px;
margin-right: 40px;
float: left;
}
nav{
/* float: right; */
}
nav ul{
position:absolute;
top:10px;
right:10px;
display:flex;
padding: 0px;
margin: 0px;
}
nav li{
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1{
font-family: 'great-vibes';
font-size: 50px;
margin: 0px;
}
<header>
<figure>
<img src="//unsplash.it/125" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>
Try putting display:inline-block or display:inline on the h1.
A good way to try things out like that is the DOM Inspector which is
available in Firefox or Chrome.
Firefox: Tools -> Web Developer -> Inspector
Chrome: 3-bar Menu -> More tools -> Developer tools -> Elements tab
or in either one:
Right-click an element (such as your H1) and choose "Inspect" or "Inspect Element" from the menu
Once you are in the Inspector, you can add, delete, or modify CSS rules as you please on a temporary basis.
When you are happy with the result, you can go back and update your source to incorporate the change.
Edit:
A simple change that worked:
Reduce the font-size on the H1 so it all fits better,
and put max-width on it as well so all three fit in the space available.
Apply width to figure and h1 also and set nav to position:absolute using css for your desired result
header{
position:relative;
}
header figure {
display: inline-block;
margin: 0px;
margin-right: 40px;
float: left;
width:100px;
}
nav {
position: absolute;
right: 0;
top: 0;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'great-vibes';
font-size: 30px;
margin: 0px;
width:calc(100% - 140px);
float:left;
padding-top:25px;
}
<header>
<figure>
<img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
</figure>
<h1>Welcome To The Mosgiel Underwater Hockey Club</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>
What you are trying to achieve is not possible with single h1 tag. Instead you need to create two separate dom elements inside h1. As you need to break the line after the word Welcome To.
Check the following snippet how to do. Also you can play with other elements style.
html,
body {
padding: 0;
margin: 0;
}
header {
position: relative;
}
header figure {
/* display: inline-block; */ /* <-- Not required when using float */
float: left;
margin: 0px;
margin-right: 40px;
}
nav {
float: right;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: "great-vibes";
font-size: 40px;
margin: 0px;
position: absolute;
left: 140px;
}
p {
margin: 0;
}
<header>
<figure>
<img src="https://img.icons8.com/ios/2x/stackoverflow-filled.png" alt="MUHC Logo" width="100" height="100" />
</figure>
<h1>
<p>Welcome To</p>
<p>
The Mosgiel Underwater Hockey Club
</p>
</h1>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</header>
I would suggest you use flex css. This way it is much easier to handle the responsiveness of your page. I have done a test code using the flex css. Hope it solves your problem
HTML
nav ul {
padding: 0px;
margin: 0px;
}
nav li {
display: inline-block;
text-align: center;
width: 70px;
padding: 2px 4px;
border-style: dotted;
border-width: 1px;
}
h1 {
font-family: 'great-vibes';
font-size: 50px;
margin: 0px;
}
.d-flex {
display: flex;
}
.flex-row {
display: flex;
flex-direction: row;
}
.logo {
margin-right: 10px;
}
<header>
<div class="d-flex flex-row">
<div class="logo">
<img src="./images/logo.png" alt="MUHC Logo" width="125" height="125">
</div>
<div>
<h1>Welcome To <br/>The Mosgiel Underwater Hockey Club</h1>
</div>
<div>
<nav>
<ul>
<li>Home</li>
<li><a>About</a></li>
<li>League</li>
<li>Ethics</li>
</ul>
</nav>
</div>
</div>
</header>
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/2eydLcmz/
Trying to get a title to appear inline between the Logo and the navbar links. I'm trying to learn without bootstrap first and ideally without flexbox (want to know the basics first).
I've been trying 'display: inline' and different 'position' values in different spots but I'm getting lost.
#header-img {
margin-left: 20px;
margin-top: 10px;
height: 100px;
width: 100px;
float: left;
}
#nav-bar {
text-align: right;
padding: 20px;
background-color: #A7A7A9;
}
li {
display: inline;
list-style: none;
}
ul {
top: 5px;
left: 10px;
}
.nav-link {
width: auto;
height: 50px;
margin-left: 40px;
margin-top: 25px;
display: inline-block;
color: #453F3C;
font-size: 20px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}
<header id="header">
<div class="logo">
<img id="header-img" alt="company logo" src="https://preview.ibb.co/jabJYd/rocket_1976107_1280.png">
</div>
<h1>Title</h1>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>
to learn more about css positioning use the following link : https://www.w3schools.com/Css/css_positioning.asp and to learn more about positioning read this article : https://www.w3schools.com/Css/css_inline-block.asp
You also need to look at using percentages for your widths.
In your code, the navbar and the title are the two parent elements which need to be positioned and assigned widths in percentages for responsiveness. like this;
#nav-bar {
text-align: right;
background-color: #A7A7A9;
width: 79%;
float: right;
margin-top: 12px;
display: inline-block;
}
For the title :
h1{
display: inline-block;
width: 18%;
min-width: 77px;
float: left;
}
For the ul element in the navbar :
ul {
top: 0px;
left: 0px;
padding-left: 0px;
}
finally for the .navlinks :
.navlink{
width: auto;
margin-right: 7%;
display: inline-block;
color: #453F3C;
font-size: 19px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}
I am new to development as well but I think what you are trying to do is the following.
HTML:
<nav id="nav-bar">
<ul>
<div class="new_div"><h1>Title</h1></div>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>
CSS:
.new_div{
float: left;
}
I just added the title as a new div inside the navigation menu and float it left. If there is a logo in between then you can add it in the navigation list and float it left.
You could use
header * {
display: inline;
}
to put everything inside <header> </header> inline.
If you plan to use the header tag elsewhere use a class or an id.
header.top-bar * {
display: inline;
}
To keep all with the same background:
header.top-bar {
width: 100%;
background-color: #A7A7A9;
}
Hope it helps you!
.header h1{position:absolute; left:50%; transform:translateX(-50%); }
Now it's centered between the logo and navigation. By setting the top property you can vertically move the element. Make sure you parent element's position set to relative.
I want to code a navigation bar for my website. It should support a mobile and a desktop view. Now I want to add a div in nav and it doesn't work, but when I analyse it with inspecting element in firefox and refresh the site it works. Can anyone help me?
Here is a code-snippet of the nav:
/* Here is the css declaration of the drop class: */
.drop {
width: 50px;
height: 50px;
background-color: #FFFFFF;
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
}
<nav class="nav" id='navigation'>
<ul style="font: normal 14px Tauri, serif ">
<li style="float: left; border: none ">
<a href='index.php'>test</a>
</li>
<button class="drop"></button>
Actually there is a "nav" but it got no height.
I did a Fiddle where I added some height and a background color, also removing margin to the body, check this out!
https://jsfiddle.net/tu9rh3sg/
This for the HTML (I've just closed the nav):
<nav class="nav" id='navigation'>
<ul style="font: normal 14px Tauri, serif ">
<li style="float: left; border: none ">
<a href='index.php'>test</a>
</li>
<button class="drop"></button>
</nav>
And this for the CSS (height + background-color+margin);
.drop {
width: 50px;
height: 50px;
background-color: #FFFFFF;
cursor: pointer;
display: block;
position: absolute;
right: 0;
top: 0;
}
.nav {
background-color: black;
height: 50px;
}
body {
margin: 0 auto;
margin-top: -14px;
}
Tell me if it help ! ☻
I believe I have a very unique problem. I am trying to create a menu and basically I have some floated child div's inside the main menu holding div at the top of a web page. The problem is that I need to have the parent element have an automatic height because I want it to be dynamic just in-case I change the padding on the menu buttons (child DIV's). Also, the parent has a width of 100% and a child inside of it that has an automatic width with a max-width set so that I can basically have the left and right child menu buttons inside of it come together when the page is sized smaller. However all is working well until you resize the page to the point where the left right right menu portions come together, then all of the child menu buttons want to stack instead of automatically create a vertical scrollbar for the main page.
I don't know if this will pose a problem because I plan on using media queries later to automatically switch up the CSS for mobile compatibility. However, I would like to find a solution to this problem. If I need to post all of my code to get the right answer please let me know and I will do.
Thank you so much.
Oh and by the way, I have searched on a solution to this for about an hour and nothing is working. I may as well post the code below because I really want to find a solution.
The HTML:
<body>
<div id="header" class="clearfix">
<div id="wrapper">
<div id="main-nav" class="float-left">
<ul id="main-nav-menu" class="menu">
<li id="main-menu-button">
<a href="#" data-description="Since 1976">
Pardee Electric
</a>
</li>
</ul>
</div>
<div id="main-nav" class="float-right">
<ul ud="main-nav-menu" class="menu">
<li id="main-menu-button" class="float-right">
<a href="#">
Get in Touch
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Residential
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Commercial
</a>
</li>
<li id="main-menu-button" class="float-right">
<a href="#">
Industrial
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
The CSS:
/* body data */
body {
margin-top: 0px;
-webkit-font-smoothing: subpixel-antialiased;
background-color: #F0F0F0;
}
ul {
list-style: disc;
}
/* header data */
#header {
width: 100%;
height: auto;
background-color: #456DC0;
border-bottom: 1px solid #FFFFFF;
}
#wrapper {
width: auto;
max-width: 1024px;
height: auto;
background: none;
margin: 0 auto;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
margin-top: 0;
}
#main-nav-menu {
}
#main-nav {
width: auto;
height: auto;
position: relative;
}
#main-nav ul, #main-nav .menu {
margin: 0px;
}
#main-nav li {
width: auto;
list-style: none;
margin: 0px;
position: relative;
display: inline;
}
#main-nav a {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 15px 20px 15px 20px;
position: relative;
letter-spacing: 0px;
text-align: center;
text-decoration: none;
text-transform: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
display: block;
color: #F0F0F0;
z-index: 98;
-webkit-transition: background-color .2s ease, border .2s ease, color .4s ease, opacity .2s ease-in-out;
background-color: #4186D2;
}
#main-nav a:active {
background-color: #000000;
}
#main-nav a:hover {
background-color: #333333;
color: #FFFFFF;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
Demo in Jsfiddle
Hopefully the css posted OK. I am new to Stack.
Thanks again!
you need to give class="clearfix" to id="wrapper".