In my dropdown nav when you hover over an object there is an amount of space I can't figure out how to remove. To be more clear its this:
Image of navbar dropdown with the space im talking about circled.
You can view the navbar on my github website: https://cyrusmusic101.github.io/fca-website-2021.github.io/
Code to website: https://github.com/CyrusMusic101/fca-website-2021.github.io
.headertop ul li {
display: inline-block;
position: relative;
padding: 0px 10px;
line-height: 70px; < ----------------- here is the issue
left: -10px;
justify-content: center;
}
Related
I am trying to put an image at the top of the page, just below the navbar. Whether I use margin or padding CSS styles, the picture always stays at the bottom. If I try to use padding-bottom, it simply crops the picture by that number of pixels(it crops because I used "object-fit: cover;", otherwise it would stretch the image).
Here is the CSS code I used for the image in question:
#image {
bottom: 100px;
height:500px;
width:100%;
object-fit: cover;
}
Here are the CSS styles for the navbar:
.navcontainer {
height: 100vh;
width:100%;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
background-color:cadetblue;
margin-bottom: 0;
}
A peculiar thing I noticed is that the image is always one scroll away from the top of the page. Whether I am viewing the webpage on a laptop or a phone, I have to scroll exactly once to see the image.
I am unable to find the root cause of this problem.
I am trying to make my webpage look similar to this:
Picture is directly below the navbar
You can see the image is touching the navbar, and there is no gap between the navbar and the image.
EDIT:
Here is some other code that may be useful:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.navcontainer {
height: 100vh;
width:100%;
}
(.navcontainer is a div surrounding the navbar)
Below is the CSS styles for the navbar links:
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
font-weight: bold;
transition: ease-in-out 0.3s;
padding: 10px;
}
Any help is appreciated!
Thank you,
Kunj Parikh
The problem is that you are using the CSS property "bottom" to position the image, which sets the distance of the element from the bottom of the parent container. Instead, you should use "top" to position the image from the top of the parent container. You should also remove the "margin-bottom: 0" from the navbar CSS as it is unnecessary.
Try this:
#image {
top: 0;
height:500px;
width:100%;
object-fit: cover;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
background-color:cadetblue;
}
I noticed the styling for my .navcontainer class surrounding the navbar said the height of the navbar to be 100vh. I noticed that the .navcontainer class is unnecessary, and deleted the element and the styling, fixing my webpage.
I've created a navigation list with plain and simple HTML and some CSS. It should be on the right side of the page and shouldn't move neither if there is a lot of content on the page nor if the user scrolls down.
After I added some sample text to my website I recognized that the navigation element is more in the left side. Why is this happening and how can I fix this?
This is the first minimal example with just some text:
https://jsfiddle.net/sck6nL6w/2/
And a snippet with some more text where the navigation list is more on the left side than in the first example:
https://jsfiddle.net/7Lsew6gg/3/
Note: Both have the same CSS styles defined:
ul {
list-style-type: none;
padding: 0;
width: 200px;
float: right;
margin: 0 5em 0 0;
right: 0%;
top: 5%;
position: fixed;
}
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
.navigation div {
margin-left: 60px;
}
#content div {
width: 65% !important;
}
Edit:
As #Autista_z mentioned the navigation bar gets moved when there is a scrollbar but I don't want to always show a scrollbar. Isn't there a better way to fix this?
as said by #Autista_z it's just because of scrollbar.
`https://jsfiddle.net/sck6nL6w/4/'
check this updates fiddle.
it's not fix but i want to show you how it's not an issue at all.
all i did is added this line of code
body {
overflow: scroll;
}
I created a navbar and I can't figure out how to get the padding areas of the link to be clickable just like the link.
I have the padding configured in this part of my CSS..
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
padding: 25px 20px;
}
I created a fiddle. Mine doesn't look like this, but it is enough to show the hover effect and how the padding areas of the link are not clickable to go to the link.
How can I make the padding areas clickable to go to the link?
https://jsfiddle.net/mykx37n9/
You just need to add the padding to the link within the <li>
try:
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
}
.spectator_nav li a{
padding: 25px 20px;
}
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.
I'm attempting to have a vertical navigation bar using just HTML5 and CSS3. The desire is to have the menu appear on the left and have the rest of the page on the right. As the user scrolls down, I want the menu to move down with the user. Thus far I have the vertical menu looking the way I would like it, but I've not been able to complete the rest. Each solution I've tried thus far either meant structuring the page in an odd way or using Javascript. Is this possible using just HTML5 and CSS3?
CSS
/* Menu Navigation Properties */
nav
{
text-align: center;
padding-right: 1.0em;
}
/* Menu container */
nav ul
{
float: left;
list-style-type: none;
padding-top: 0;
padding-left: 0;
padding-right: 0.75em;
}
/* Menu item container */
nav ul li
{
margin-top: 0em;
margin-left: 0.15em;
margin-right: 0.15em;
}
/* Menu item Appearance */
nav ul li a
{
background-color: black;
color: #D0E2F1; /* Light Blue */
height: 2em;
line-height: 2em;
width: 9em;
display: block;
border-width: 0.1em;
border-style: solid;
border-color: #dcdce9;
text-decoration: none;
text-align: center;
}
/* Menu item hovered over by user */
nav ul li a:hover
{
background-color: #D0E2F1; /* Light Blue */
color: black;
}
/* Current Page on the Menu */
nav ul li a.current
{
font-weight: bold;
}
HTML files
<html>
<body>
<nav>
<!-- Menu Item List -->
</nav>
<h1>Page Title</h1>
<!-- rest of page -->
</body>
</html>
If you can't wrap the rest of the page in a wrapper, you could make space for the menu with
body {
padding-left: 10em;
}
and then fix the position of the menu and pull it back into the space left by the padding on the body
nav {
position: fixed;
width: 9em; // Probably a good idea to fix the width of the menu
margin-left: -10em;
...
}
If you can wrap the rest of the page in a wrapper, just give it enough left margin to keep it out of the way of the menu.