There's empty space to the far right of a header I'm using on all pages. When the window is maximized, the header extends all the way to the right, but when the window is resized smaller, the empty space not only appears, but widens as the window is resized. min-width: 100% hasn't fixed this.
Here's the CSS. .headerItem has padding to it, and that was the initial culprit, but after removing all the padding, the space still persists.
.Header {
height: 2.5rem;
min-width: 100%;
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
background-color: #282828;
border-bottom: 3px solid;
border-color: black;
text-decoration: none;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.Header a {
text-decoration: none;
}
.headerItem {
height: 100%;
line-height: 2.6rem;
background-color: #232227;
font-family: 'Montserrat', sans-serif;
font-size: medium;
margin-bottom: 10px;
padding-left: 1rem;
padding-right: .65rem;
padding-top: .25rem;
padding-bottom: .25rem;
font-variant: small-caps;
font-weight: 600;
transition-property: color;
transition-duration: 2s;
letter-spacing: .4rem;
color: #D6A83D;
border: solid 1px;
}
.headerItem:hover {
transition: .25s;
color: #ffec00;
border-color: #ffec00;
cursor:default;
}
All of the wrappers have also been reduced/edited to see if this would disappear, but it hasn't.
edit: Forgot the header
This is the answer, a very simple one, too: the buttons wouldn't resize while the header would, so they extend past the header.
Related
just to preface I would say I'm rather new at coding, in particular, this is related to web coding.
I am using HTML and CSS to code a website and I've created a navbar with animation upon hovering. I followed a tutorial to do so and edited the values accordingly to fit with my website. All was fine, I saved it and opened it again and it was working just fine.
However I opened it up again today and all of the menu options have just been squashed to one side, though the animations still moved to the correct place when hovering over it. I had not edited any of the code and am unsure how to fix it.
I've tried to edit the position (left) of each menu item but it doesn't seem to be working.
Visualisation of the problem
here is the HTML coding for it:
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav>
And here is the CSS
nav {
position: relative;
width: 100%;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1)
}
nav a{
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
/* display: inline-block; */
text-align: center;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: whitesmoke;
border-radius:8px;
transition: all .5s ease 0s;
}
nav a:nth-child(1){
width:120px
}
nav .start-home, a:nth-child(1):hover~.animation{
width: 120px;
left: 00;
}
nav a:nth-child(2){
width: 120px;
}
nav a:nth-child(2):hover~.animation{
width: 150px;
left:102px;
}
nav a:nth-child(3){
width: 120px;
}
nav a:nth-child(3):hover~.animation{
width: 140px;
left: 230px;
}
nav a:nth-child(4){
width: 120px;
}
nav a:nth-child(4):hover~.animation{
width: 140px;
left: 350px;
}
nav a:nth-child(5){
float:right;
margin-right: 40px;
}
nav a:nth-child(5):hover~.animation{
width: 150px;
left: 1290px;
}
a:hover{
color: #c18392;
}
(Also I am aware the navbar doesn't navigate to anything yet)
Please help!
And thank you in advance
nav:adding display:flex to put them in one line. putting gap:10px that is the gap between all the a tags. setting width to 100vw meaning 100% view-width . everything else is the same as you have added previously.
nav a:same as you have added.
nav a:nth-child(5) meaning the last of the a tag with subscribe. adding margin-left:auto meaning what ever space is left in the container put it to the last a tag's left. i hope it makes sense.
hover:adding different bgcolor on hover. but you can do anything you want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
width: 100vw;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}
nav a {
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
}
nav a:nth-child(5) {
margin-left: auto;
}
a:hover {
background-color: whitesmoke;
}
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav
I'm using react in my app and I'm trying to make a "progress bar" that represents the percentage of the balance that is being used as in this image:
It's working fine but when the percentage is low (5% or less), the border radius stops working as it should, making the bar appear out of the frame:
Is there anyway that I can fix this?
Here is the .scss file I'm using for the progress bar
.progress-bar {
background-color: #c5c5cb;
border-radius: 20px;
outline: 1px solid #212429;
outline-offset: -0.5px;
position: relative;
height: 20px;
width: auto;
margin-right: 12px;
margin-left: 12px;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
}
.progress-done {
background: linear-gradient(to left, #4A439A, #6950AC);
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 1s ease 0.3s;
}
Try overflow: hidden; in your .progress-bar class.
I'm trying to create a button with CSS where the design adds a box shadow to frame the right that remains in position with the icon. On hover the button extends to the right creating the effect that you are pulling a tab. However, I'm struggling on the element of adding an icon.
EDIT: Icon is added, however, how do you remove white space in anchor links? For example, if I set padding top and bottom to 0px, how does the text not touch the top & bottom of background colour? There appears to be dead space.
CodePen Link
<a class="button" href="" title="">Terms & Conditions<span></a>
CSS
a.button {
display: inner-block;
wdith: 100%;
padding: 0em 4.5em 0em 1em;
background: linear-gradient(90deg, #7D80DA, #8EEDF7);
text-align: center;
align-items: center;
justify-content: center;
font-weight: 800;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
border: none;
border-radius: 5px;
box-shadow: inset -35px 0px 0px #7d80da;
transition: all 0.3s ease 0s;
cursor: pointer;
position: relative;
white-space: nowrap;
}
a.button:after {
content: "\f0a4";
font-family: FontAwesome;
font-size: 15px;
position: absolute;
right: 4%;
}
a.button:hover {
padding-right: 8em;
}
First, add position: relative; with your button code
And use this code:
a.button:after{
content: 'ยป';
position: absolute;
right: -30px;
/*Your more css here*/
}
Greetings! This is my second time posting today, but that's how people learn, right?
Anyway! I am creating an app with Electron and I want to create a custom title bar. I have been successful but there is a small detail that kind of bothers me. I want the buttons to change their opacity when the mouse hovers them but when the cursor leaves the app after hovering the buttons, they don't change. Instead, I have to go to the app again, hover the button again and finally see the right behaviour.
Is there a way to fix this? It's not that fatal, but I am trying to make my app look good and pleasant to the eye as much as I can!
HTML:
<div class="titlebar">
<div class="dragzone"></div>
<h1>Dashboard - Wealm</h1>
<button id="closeApp">x</button>
<button id="minApp">-</button>
</div>
CSS:
.titlebar {
position: absolute;
top: 0;
width: 100%;
height: 29px;
overflow: hidden;
z-index: 50;
background: rgba(255, 255, 255, 0.8);
}
.titlebar .dragzone {
-webkit-app-region: drag;
overflow: hidden;
position: absolute;
left: 0;
width: 990px;
height: 29px;
}
.titlebar h1 {
float: left;
opacity: 0.85;
margin: 4px 0 0 43.5%;
font-family: Jost-400-Book;
font-size: 12pt;
}
.titlebar #closeApp {
font-weight: bold;
opacity: 0.55;
float: right;
background: none;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
margin-top: 2px;
}
.titlebar #minApp {
font-weight: bold;
opacity: 0.55;
float: right;
background: none;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
margin-top: 2px;
}
.titlebar #closeApp:hover {
opacity: 1;
}
.titlebar #minApp:hover {
opacity: 1;
}
Great news! I did found a solution! What I did - First of all, I replaced the content inside the buttons with paragraphs. It's the same text but in paragraph tags. I set the overflow property of the buttons to visible, in order to be able to set the height of the buttons to 0 without hiding the paragraphs themselves. Then I just played around with margins. It's up to you!
.titlebar #closeApp {
font-weight: bold;
background: none;
float: right;
opacity: 0.55;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
overflow: hidden;
padding-right: 0px;
margin-right: 8px;
margin-top: 8px;
}
.titlebar #closeApp p {
margin-bottom: 0;
margin-top: -5.45px;
}
.titlebar #minApp {
font-weight: bold;
background: none;
float: right;
opacity: 0.55;
border: none;
outline: none;
font-family: Eight One;
font-size: 18pt;
overflow: hidden;
margin-top: 8px
}
.titlebar #minApp p {
margin-bottom: 0;
margin-top: -5.45px;
}
Have a great day! Let me know if you have a question or the solution just doesn't work for you!
I've been trying to make a custom share button (for google classroom), and it seemed a flexbox was the best way to center the text. I'm making a share button, so I have an image and text. This is my current code for it:
a {
border-color: green;
border-style: solid;
color: white;
border-radius: 3px;
text-decoration: none;
background-color: green;
font-family: calibri;
display: flex-shrink;
justify-content: center;
align-items: center;
}
img {
padding: 5px;
height: 32px;
}
span {
padding: 5px;
}
<a href="https://classroom.google.com/share?url=http://example.com">
<img src="https://ktibow.github.io/classroom-logo.png"\>
<span>Share to Classroom</span>
</a>
It's supposed to make a nice rounded button, with the Google Classroom logo on the left and the text on the right. But instead, the background of the button shrinks down past the image.
I've tried using it without flex-shrink. Then it fills the whole page, which isn't how share buttons usually are, even though it does cover the background of the image. I've also tried setting the height of the span and the font size too. The height doesn't do anything, and if I do font size, then it gets cut off. I've tried flex-shrink: 0 too on the image. Does anybody know how to solve this?
New Design
I work with give the a tag display: inline-block
And move the img to position: absolute
I think it's look better now
a {
text-decoration: none;
display: inline-block;
margin: 10px 5px 10px 24px;
position: relative;
}
img {
position: absolute;
border-radius: 50%;
height: 38px;
top: -10px;
left: -18px;
}
span {
padding: 3px 5px 3px 24px;
background-color: green;
border-radius: 3px;
color: white;
font-family: calibri;
}
<a href="https://classroom.google.com/share?url=http://example.com">
<img src="https://ktibow.github.io/classroom-logo.png"\>
<span>Share to Classroom</span>
</a>
Or as ppl wrote with display: inline-flex
a {
text-decoration: none;
display: inline-flex;
align-items: center;
margin: 10px 5px 10px 24px;
background-color: green;
border-radius: 3px;
padding: 5px;
}
img {
height: 38px;
}
span {
padding: 5px;
color: white;
font-family: calibri;
}
<a href="https://classroom.google.com/share?url=http://example.com">
<img src="https://ktibow.github.io/classroom-logo.png"\>
<span>Share to Classroom</span>
</a>
a {
border-color: green;
border-style: solid;
color: white;
border-radius: 15px;
text-decoration: none;
background-color: green;
font-family: calibri;
display: flex-shrink;
justify-content: center align-items: center;
position: absolute;
display: flex;
}
img {
padding: 10px;
height: 30px;
}
span {
margin-top: 15px;
}
I don't know if this is what you are trying to achieve.
not the best way though