Within my header, I am trying to place pending-button-notification over theimages-cart image. For some reason, the pending-button-notification div is showing on the left side of the header div.
Does anyone see why this isn't placing correctly?
This is the problematic code:
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
header {
width: 100%;
max-width: 100%;
height: 100px;
position: relative;
border-bottom: 1px solid #E5E5E5;
}
#header-wrap {
width: 90%;
height: 100%;
margin: auto 5%;
}
#header-logo {
width: 200px;
height: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.header-buttons {
width: 30px;
height: auto;
float: right;
margin: 30px 40px 0 50px;
cursor: pointer;
}
.header-buttons:first-child {
margin-right: 0;
}
#pending-order-button {
position: relative;
}
#pending-button-notification {
border-radius: 15px;
background: #09afdf;
height: 25px;
width: 25px;
position: absolute;
color: #FFF;
font-size: 1.3rem;
top: 5px;
left: 5px;
text-align: center;
}
<header>
<div id="header-wrap">
Logo
<img src="images/menu.png" class="header-buttons" alt="Pending Orders">
<div id="pending-order-button">
<a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car">
<div id="pending-button-notification"></div>
</a>
</div>
</div>
</header>
It's your float:right on .header-buttons which is causing the problem.
I suggest that you remove that and float the #pending-order-button div instead so that it and all it's content is moved to the right.
#pending-order-button {
position: relative;
float:right;
}
Related
I'm trying to tag some divs to an image which shall stay in the right place as the window size changes.
It kind of works, but only until the image looses in height. How do I improve my code to make the markers always stick to the image.
You can perfectly see what I mean running the code in fullscreen.
.container-fluid {
padding: 5%;
background-color: #EDEDED;
}
img {
display: block;
width: 60%;
}
.marker {
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
color: white;
background-color: rgba(0,0,0,.5);
text-align: center;
padding-top: 4px;
display: table-cell;
vertical-align: middle;
&::after {
padding: 5px 10px;
position: absolute;
top: -2px;
left: -2px;
border-radius: 10px;
background-color: rgba(0,0,0);
display: none;
content: attr(data-after-content);
width: 150px;
color: white;
font-family: "Zuric Light";
}
&:hover::after {
display: block;
}
}
.marker-one {
left: 43%;
top: 12%;
}
.marker-two {
left: 61%;
top: 39%;
}
.marker-three {
left: 49%;
top: 61%;
}
.marker-four {
left: 55%;
top: 77%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid position-relative min-vh-100 d-flex justify-content-center">
<img src="https://firebasestorage.googleapis.com/v0/b/projektarbeit-interstuhl.appspot.com/o/pure%2Fpure_back_full_red.png?alt=media&token=02cac375-3340-4bc6-bbed-6ada0614a3f9" alt="Pure" class="align-self-center">
<div class="marker marker-one" data-after-content="Info">
+
</div>
<div class="marker marker-two" data-after-content="Info">
+
</div>
<div class="marker marker-three" data-after-content="Info">
+
</div>
<div class="marker marker-four" data-after-content="Info">
+
</div>
</div>
I assume you want a div to stay over top of an image on screen resize. To accomplish this, you can need to set a container around the image, which is set to the 60% width of the page container. Then, set this to position: relative. That way, the hover buttons are positioned using the percent of the total width of that container, not of the whole page.
New HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid position-relative min-vh-100 d-flex justify-content-center">
<div class="image-container">
<img src="https://firebasestorage.googleapis.com/v0/b/projektarbeit-interstuhl.appspot.com/o/pure%2Fpure_back_full_red.png?alt=media&token=02cac375-3340-4bc6-bbed-6ada0614a3f9" alt="Pure" class="align-self-center">
<div class="marker marker-one" data-after-content="Info">
+
</div>
<div class="marker marker-two" data-after-content="Info">
+
</div>
<div class="marker marker-three" data-after-content="Info">
+
</div>
<div class="marker marker-four" data-after-content="Info">
+
</div>
</div>
</div>
Updated CSS
.container-fluid {
padding: 5%;
background-color: #EDEDED;
}
img {
display: block;
width: 100%;
max-width: 100%;
max-height: fit-content !important;
}
.image-container {
width: 60% !important;
height: fit-content !important;
margin: 0 auto;
position: relative;
}
.marker {
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
color: white;
background-color: rgba(0,0,0,.5);
text-align: center;
padding-top: 4px;
&::after {
padding: 5px 10px;
position: absolute;
top: -2px;
left: -2px;
border-radius: 10px;
background-color: rgba(0,0,0,0);
display: none;
content: attr(data-after-content);
width: 150px;
color: white;
font-family: "Zuric Light";
}
&:hover::after {
display: block;
}
}
.marker-one {
left: 38%;
top: 5%;
}
.marker-two {
left: 70%;
top: 36%;
}
.marker-three {
left: 46%;
top: 61%;
}
.marker-four {
left: 55%;
top: 80%;
}
This should work now! Hope it helps!
I wonder why mainCountainerHeadLogo does not stretch parent div mainCountainerHead height?
If I scale the page, both mainCountainerHeadTitle and mainCountainerHeadMenu stretch mainCountainerHead just fine.
Sorry for my english and thanks in advance!
http://jsfiddle.net/gvcs0r6b/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.mainCountainer {
min-height: 100%;
width: 70%;
margin: 0 auto;
}
.mainCountainerHead {
background-color: aqua;
height: auto;
}
.mainCountainerHeadLogo {
height: 100px;
width: 20%;
background-color: blue;
float: left;
position: relative;
overflow: hidden;
}
.mainCountainerHeadLogo img {
position: absolute;
width: 100%;
height: auto;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
margin: auto
}
.mainCountainerHeadTitle{
margin-left: 20%;
width: 80%;
height: auto;
text-align: center;
padding-top: 3%;
}
.mainCountainerHeadMenu{
margin-left: 20%;
text-align: center;
background-color: orange;
width: 80%;
height: auto;
padding-top: 2%;
text-align: center;
}
.mainLink {
display: inline-block;
padding: 5px;
}
.mainLinkButton {
width: 90px;
height: 30px;
background-color: green;
font-size: 16px;
border: none;
color: white;
padding: 5px;
}
.mainLinkButton:hover {
background-color: darkgreen;
}
.mainLinkDropdown {
position: relative;
display: inline-block;
padding: 5px;
}
.dropdownContent {
display: none;
position: absolute;
min-height: 30px;
min-width: 130px;
text-align: left;
background-color: #f1f1f1;
z-index: 10;
}
.dropdownContent a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.mainLinkDropdown:hover .dropdownContent{
display: block;
}
.dropdownContent a:hover{
background-color: #ddd;
}
<div class="mainCountainer">
<div class="mainCountainerHead">
<div class="mainCountainerHeadLogo">
<img src="https://i.ibb.co/cYzWJFM/logo-Copy.jpg" title="logo" />
</div>
<div class="mainCountainerHeadTitle">
<h4>Welcome aboard!</h4>
</div>
<div class="mainCountainerHeadMenu">
<div class="mainLink">
<button class="mainLinkButton">Main</button>
</div>
<div class="mainLinkDropdown">
<button class="mainLinkButton">Dropdown</button>
<div class="dropdownContent">
Link 1
Link 2
Link 3
</div>
</div>
<div class="mainLink">
<button class="mainLinkButton">Contacts</button>
</div>
</div>
</div>
</div>
In answer to your question:
That's because the float property puts the HTML elements out of the normal page flow, and this causes what you're experiencing. Its effect is similar to position: absolute which is to move the element to "a different layer".
How to solve it?
Well... there are a lot of ways to achieve what you want, and almost all of them requires to refactorize your code. Actually, you have a lot of code that makes it difficult to achieve your goal. You should get rid of float and start using other technics like Flexbox.
I could show you a solution if you provide a sketch of the layout you want.
change the CSS for img to this
.mainCountainerHeadLogo img {
width: 100%;
height: 100%;
margin: auto
}
As the title says: I need the 'info-box' to not be fixed while the head-box and head-in-block are fixed.
I know it is possible. I have a live example: http://www.marktplaats.nl/.
The orange box is fixed (head-box) then the white part (my info-box) is not fixed. And the Title block is fixed again (head-in-block).
This is the css and html I'm using right now. What adjustment needs to be made to make the middle (white) box not fixed?
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
Do you guys see the website the same I do?
The website you linked to hides the white box when the header is sticky. So to do that here, you would hide #info-box when #head-block has class .fixed
.fixed #info-box {
display: none;
}
#head-block{
width: 100%;
height: auto;
background: rgb(245,245,245);
border: 1px solid grey;
z-index: 1000;
margin-top: 0px;
}
#head-box{
height: 5px;
background: #37326a;
}
#info-box{
height: 50px;
background: white;
position: static;
}
#head-in-block{
width: 1100px;
height: 60px;
color: #37326a;
text-align: left;
margin: auto;
padding: 10px;
}
.fixed{
position: fixed;
}
.fixed #info-box {
display: none;
}
<div id='head-block' class='fixed'>
<div id='head-box'></div>
<div id='info-box'></div>
<div id='head-in-block'>
</div>
</div>
<div style='height: 1500px;' id='content'>
</div>
Test
I'm practicing my HTML by making a website, and I'm making a header with buttons.
I'm trying to make the button the full height of the header, but it's going out of the header for some reason, and not going to the top.
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
You can reset the vertical-align(defaut is baseline) value on inline-block elements whenever needed. here vertical-align:top; will do fine :
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
For a to cover the div, you may also use height or eventually line-height:
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-a a {
display:block;
line-height:70px;/* will size it up to 70px height for each line */
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
I changed it to this code. What I did was to change the display to block (in both header-a and header-h) instead of inline-block. I then floated both elements left. Run the snippet to see it in action
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
margin-top: 20px;
}
#header-h,
#header-a {
display: block;
float: left;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
Rather than setting the height of your menu bar to 70px, you could let the contents within the menu bar size its height. That way you can vertically centre the Home button. JSFiddle
HTML
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
Home
</div>
</div>
CSS
#header {
position: fixed;
background-color: #1564B3;
color: #fff;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
background-color: #555555;
display:inline-block;
padding:30px 50px 30px 50px;
width:10%;
text-align:center;
}
#header-h {
display:inline-block;
width:30%;
text-align:center;
}
Do you see how the padding of #header-a not only vertically centres the Home text but also how the #header sizes to fit it.
So I have this fixed header which has z-index:10, below that a fixed banner and then below that a relative content container. What I want is that the content scrolls over the banner but under the header. However, when I try to scroll it doesn't work. The strange part to me is that whenever I add box-shadow: 0px 0px 2px rgb(100,100,125); to the content container it does do what I want. I'm using the following code:
* {
padding: 0;
margin: 0 auto;
}
body {
background: rgb(223,227,238);
text-align: center;
}
#body_container {
padding-top: 80px;
}
#banner_container {
position: fixed;
left: 0;
right: 0;
}
#banner {
width: 1024px;
height: 300px;
}
#content_container {
background: rgb(243,247,248);
max-width: 1024px;
height: 100%;
position: relative;
top: 300px;
box-shadow: 0px 0px 2px rgb(100,100,125);
}
header {
min-width: 100%;
background: rgb(50,50,50);
height: 80px;
position: fixed;
z-index: 10;
}
/* Header styling, not relevant */
#header_container {
max-width: 1024px;
height: 100%;
}
#header_container div {
float: left;
display: inline-block;
width: 25%;
}
#logo {
width: 50%;
height: auto;
}
.menuItem {
padding-top: 29px;
height: calc(100% - 29px);
border: 0;
text-align: center;
font-family: Signika;
font-size: 25px;
color: rgb(203,207,218);
}
.menuItem:hover {
border-bottom: 4px solid rgb(59,89,202);
height: calc(100% - 33px);
color: rgb(160,170,218);
}
.menuLogo {
padding-top: 14.5px;
height: calc(100% - 14.5px);
border: 0;
text-align: center;
}
#mobile_menu_button {
display: none;
}
<header>
<div id="header_container">
<div class="menuLogo">
<img id="logo" src="img/desygn%20logo%20website.png">
</div>
<div class="menuItem">Home</div>
<div class="menuItem">Over</div>
<div class="menuItem">Contact</div>
<div id="mobile_menu_button">
</div>
</div>
</header>
<div id="body_container">
<div id="banner_container">
<img id="banner" src="img/banner_website.png">
</div>
<div id="content_container">
</div>
</div>
In your code you've not added any content under content_container. I don't see any issue with your code. It is working fine. Check here with content