Code: https://hastebin.com/otemiveduh.xml
Problem Description: There are two problems being that when another element, such as p-tag, is added underneath the section for the navigation bar. It'll be hidden underneath the navigation bar. In addition, the second error is that when highlighting over the image it doesn't change the background-colour of the whole entire height and if I change any of the other code in different sections, it ruins the vertical aligning of the image. I've been stuck with this error(s) for awhile and have to turn to the community for aid.
<HTML>
<Head>
<style>
body {
margin: 0;
}
div.Header {}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
flex-grow: 1;
text-align: center;
}
div.Navigation a img {
height: 22.1;
width: 44;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.separator {
margin-left: 60%;
}
div.Navigation a:hover {
background-color: #000d1a;
}
</style>
</Head>
<Body>
<div class="Header">
<div class="Navigation">
<img src="icons/home-button.png" />
Ongoing Projects
Purchase Service
<div class="separator"></div>
Employment
Portfolio
About
</div>
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</Body>
</HTML>
You are using absolute position on the navigation so you need to add padding to main content in order to be able to add content without going under the navigation. You have also a useless element to make the separation between both parts of the navigation. Instead you can simply use margin-left:auto.
You are also missing units in the height/width of the image :
body {
margin: 0;
}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
text-align: center;
padding:0 10px;
}
div.Navigation>a:nth-child(4) {
margin-left: auto;
}
div.Navigation a img {
height: 22.1px;
width: 44px;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.Navigation a:hover {
background-color: #000d1a;
}
.Main {
padding-top:55px;
}
<div class="Header">
<div class="Navigation">
<img src="https://lorempixel.com/100/100/" />
Ongoing Projects
Purchase Service
Employment
Portfolio
About
</div>
</div>
<div class="Main">
<p>Content</p>
</div>
<div class="Footer">
</div>
Related
There is a "show preview" / "hide preview" button that appears in edit mode between the textarea and the preview container. This toggle allows, well, to show and hide this preview.
So of course I thought that would solve my problem, until I realize that all it does is to set a display: none on the container.
-> NOT WORKING :( WHY
.panel-item {
position: relative;
margin-top: -1px;
}
.panel-title {
cursor: pointer;
min-height: 110px;
border: 1px solid #FEE4CF;
border-radius: 6px;
padding: 15px 65px 15px 20px;
background-image: url(https://cdn.myshoptet.com/usr/www.manulo.cz/user/documents/upload/sablona/arrow-down.svg);
background-repeat: no-repeat;
background-position: right 20px center;
}
.flex-between-center {
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-title > div:first-of-type {
max-width: 540px;
}
.flex-center-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.in-doprava-a-platba .panel-title > div img {
margin-right: 20px;
}
img {
max-width: 100%;
height: auto;
}
.panel-body {
display: none;
padding: 0 20px 25px;
}
.type-page .content-wrapper-in ul {
list-style-type: none;
padding-left: 0;
}
.type-page .content-wrapper-in ul li {
font-size: 14px;
padding-left: 12px;
position: relative;
margin-bottom: 8px;
}
.type-page .content-wrapper-in ul li::before {
content: '';
width: 6px;
height: 6px;
display: block;
background-color: #AE6830;
border-radius: 50%;
position: absolute;
left: 0;
top: 6px;
}
.panel-show + .panel-body {
display: block;
}
#media screen and (max-width: 991px){
.panel-title {
background-size: 20px auto;
background-position: right 10px center;
padding: 15px 40px 15px 15px;
}
.panel-title > div > span, .panel-title > div > p {
font-size: 18px;
margin: 0 !important;
}
.panel-title.panel-show + .panel-body {
background-color: #FEE4CF;
display: block;
border: 1px solid #FEE4CF;
border-top: none;
border-radius: 0 0 6px 6px;
}
.panel-show + .panel-body {
display: block;
}
.panel-body {
padding: 0 20px 25px;
display: none;
}
.panel-body {
padding: 0 15px 25px;
}
}
<div class="panel-item">
<div class="panel-title flex-between-center">
<div class="flex-center-wrap"><img src="https://cdn.myshoptet.com/usr/446290.myshoptet.com/user/documents/upload/sablona/ppl.svg"> <span>PPL</span></div>
<div><span>99 Kč</span></div>
</div>
<div class="panel-body">
<ul>
<li>Když nakoupíte od 1900 Kč, máte dopravu zdarma. Jinak doručení stojí 99 Kč.</li>
<li>doručení a kontaktem na řidiče pro pohodlnější domluvu.</li>
<li>zkusí to ještě následující pracovní den. Následně váš balík uloží na nejbližší PPL zasielka.</li>
</ul>
</div>
</div>
where is problem not show and hide..
The quickest solution is
to change the .panel-title into an anchor tag <a>, making it an element that can receive focus.
and with CSS combinator selector +, the .panel-body can be toggled in/visible when the <a> loses/gets focus using the :focus pseudo selector.
I made those changes for you and added a second panel-item in <body> so you can see the accordion mechanism at work.
I also removed obsolete .panel-show references and cleaned up the #media.
Notice the two href="javascript:void(0)", without a href defined, an <a> cannot receive focus making the accordion fail to work...
Check the below snippet
/* NEW */
.panel-title {
/* To override standard <a> markup */
text-decoration: none;
color: currentColor;
}
.panel-title:focus+.panel-body {
/* make it visible */
display: block;
}
/**/
.panel-item {
position: relative;
margin-top: -1px;
}
.panel-title {
cursor: pointer;
min-height: 110px;
border: 1px solid #FEE4CF;
border-radius: 6px;
padding: 15px 65px 15px 20px;
background-image: url(https://cdn.myshoptet.com/usr/www.manulo.cz/user/documents/upload/sablona/arrow-down.svg);
background-repeat: no-repeat;
background-position: right 20px center;
}
.flex-between-center {
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-title>div:first-of-type {
max-width: 540px;
}
.flex-center-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.in-doprava-a-platba .panel-title>div img {
margin-right: 20px;
}
img {
max-width: 100%;
height: auto;
}
.panel-body {
display: none;
padding: 0 20px 25px;
}
.type-page .content-wrapper-in ul {
list-style-type: none;
padding-left: 0;
}
.type-page .content-wrapper-in ul li {
font-size: 14px;
padding-left: 12px;
position: relative;
margin-bottom: 8px;
}
.type-page .content-wrapper-in ul li::before {
content: '';
width: 6px;
height: 6px;
display: block;
background-color: #AE6830;
border-radius: 50%;
position: absolute;
left: 0;
top: 6px;
}
#media screen and (max-width: 991px) {
.panel-title {
background-size: 20px auto;
background-position: right 10px center;
padding: 15px 40px 15px 15px;
}
.panel-title>div>span,
.panel-title>div>p {
font-size: 18px;
margin: 0 !important;
}
/* Cleaned the clutter and removed obsolete code */
.panel-title:focus+.panel-body {
background-color: #FEE4CF;
display: block;
border: 1px solid #FEE4CF;
border-top: none;
border-radius: 0 0 6px 6px;
padding: 0 15px 25px;
}
/**/
}
<div class="panel-item">
<a class="panel-title flex-between-center" href="javascript:void(0)">
<div class="flex-center-wrap">
<img src="https://cdn.myshoptet.com/usr/446290.myshoptet.com/user/documents/upload/sablona/ppl.svg"> <span>PPL</span>
</div>
<div><span>99 Kč</span></div>
</a>
<div class="panel-body">
<ul>
<li>Když nakoupíte od 1900 Kč, máte dopravu zdarma. Jinak doručení stojí 99 Kč.</li>
<li>doručení a kontaktem na řidiče pro pohodlnější domluvu.</li>
<li>zkusí to ještě následující pracovní den. Následně váš balík uloží na nejbližší PPL zasielka.</li>
</ul>
</div>
<a class="panel-title flex-between-center" href="javascript:void(0)">
<div class="flex-center-wrap">
<img src="https://cdn.myshoptet.com/usr/446290.myshoptet.com/user/documents/upload/sablona/ppl.svg"> <span>PPL</span>
</div>
<div><span>99 Kč</span></div>
</a>
<div class="panel-body">
<ul>
<li>Když nakoupíte od 1900 Kč, máte dopravu zdarma. Jinak doručení stojí 99 Kč.</li>
<li>doručení a kontaktem na řidiče pro pohodlnější domluvu.</li>
<li>zkusí to ještě následující pracovní den. Následně váš balík uloží na nejbližší PPL zasielka.</li>
</ul>
</div>
</div>
This question already has answers here:
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 1 year ago.
Im new to web development and currently developing a webapp for my mothers company.
I'm stuck on writing text block above the background image and I'm getting strange top padding in the div. I can't figure out where that comes from so I can remove it and work from there, adding additional padding and applying more css to the .text-block.
Talking about this one:
$(window).scroll(function() {
var sticky = $('.main-banner'),
scroll = $(window).scrollTop();
});
html,
body {
font-family: cursive, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.main-banner {
width: 100%;
height: 60px;
background-color: #51ad89;
box-shadow: 2px 2px 5px grey;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
}
.main-nav {
display: flex;
justify-content: center;
align-items: center;
}
.main-nav a {
text-decoration: none;
color: black;
font-size: 18px;
text-shadow: 2px 2px 5px #ccdbd5;
margin: 0px 80px 0px 80px;
}
.main-nav a:hover {
/*text-decoration: underline;*/
color: #e6f0ec;
}
.main-nav img {
display: flex;
align-items: center;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.main-div img {
width: 100%;
}
.main-div {
position: relative;
}
.text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.678);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="main-banner" id="stickyHeader">
<nav class="main-nav">
О студии
Услуги
<img src="/src/tree.png" height="60px" width="60px">
Работы
Контакты
</nav>
</header>
<section class="main-div">
<img src="/src/mainphoto.png">
<div class="text-block">
<p>СТУДИЯ «GREEN ERA»</p>
<p>АВТОРСКИЙ ЛАНДШАФТНЫЙ ДИЗАЙН</p>
<button>Консультация дизайнера</button>
</div>
</section>
You can set the margin on the top to 0 for your <p> elements;
p {
margin-top: 0;
}
It is because of <p> tag's default margin see the picture.
Use a <span> or <div> instead.
I have a modal window which has an absolutely positioned black div that covers the entire viewport whenever the modal window is open. For some reason though this window doesn't cover a certain element even though it goes over it. Everything else is covered by the black screen just fine so I have no idea why this specific element doesn't.
.black-screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
The element that is not being covered:
<div class="form-container">
<form class='send-message'>
<input class='message-input' placeholder="Type a message">
</form>
</div>
And the CSS of that element:
.form-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.send-message {
position: relative;
padding: 20px 0px 20px 20px;
flex: 1;
}
.message-input {
width: 100%;
padding: 15px;
outline: none;
border: none;
background-color: #40444b;
color: #dcddde;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
With small chunk of css I can only guess (css is a cascade and is hereditary)
.form-container {
position: relative; /* remove this */
display: flex;
justify-content: center;
align-items: center;
}
.send-message {
position: relative; /* remove this */
padding: 20px 0px 20px 20px;
flex: 1;
}
.message-input {
width: 100%;
padding: 15px;
outline: none;
border: none;
background-color: #40444b;
color: #dcddde;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
If for whatever reasons this is not possible or it doesn't work - replace div elements but I don't know if this will work in every browser ...
<div class="form-container">
<form class='send-message'> <input class='message-input' placeholder="Type a message"> </form>
</div>
<div class="black-screen">black</div>
If the problem persists, use Validator w3c to find out how bad it is
... in fact, use Validator no matter what
For the purpose of learning flexbox i did recreation of Google front page in my language. I did it a couple of times because some things were not chear (when to use display: flexbox). But now i hit a wall. How to position footer so that it is on bottom and that Slovenia is on one line, the two UL lists on same line but one on left and one on right?
I put html and body height to 100% and also footer height to 100%. But as i did this the footer jumped up for some reason. Why is that? Slovenia and "Google je na voljo v: English" had been pushed up.
Here is my codepen: https://codepen.io/jernejt/pen/KooWwy
And this is final screenshot: https://imgur.com/bBjMvxS
Here is my markup (CSS somehow i can not paste it here)
/* Fake Google CSS */
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: Arial, sans-serif;
font-size: 13px;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
margin: 20px 20px 0 0;
}
header ul {
display: flex;
list-style-type: none;
align-items: center;
justify-content: flex-end;
}
header ul li {
padding-left: 10px;
}
header ul li a {
color: rgba(0, 0, 0, 0.87);
text-decoration: none;
}
header ul li a:hover {
text-decoration: underline;
}
#app {
margin-top: 3px;
}
main {
display: flex;
flex-flow: column;
align-items: center;
}
#google_logo {
width: 272px;
height: auto;
margin: 150px 0 30px 0;
}
form {
display: flex;
flex-flow: wrap;
justify-content: center;
width: 500px;
}
form input {
width: 100%;
width: 528px;
height: 44px;
padding: 6px 9px 6px 16px;
border: 1px solid #EAEAEA;
font-size: large;
box-shadow: 0 2px 3px #EAEAEA;
margin-bottom: 40px;
}
button {
display: flex;
color: #757575;
font-size: 13px;
font-weight: bold;
background-color: #F2F2F2;
border: none;
padding: 10px;
border-radius: 5px;
margin-bottom: 40px;
}
button:nth-child(2) {
margin-right: 10px;
}
main p a {
text-decoration: none;
color: #1a0dab;
}
main p a:hover {
text-decoration: underline;
}
footer {
display: flex;
flex-flow: wrap;
height: 100%;
/*Why does this push Slovenia up?*/
}
footer p {
display: block;
width: 100%;
}
footer ul {
display: flex;
list-style: none;
align-self: flex-end;
}
footer #neki1 {}
footer #neki2 {}
<html>
<head>
<title>Fake Google</title>
<link rel="stylesheet" type="text/css" href="google.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<ul>
<li>Gmail</li>
<li>Slike</li>
<li><i class="material-icons" id="app">view_module</i></li>
<li>
<img src="http://via.placeholder.com/32x32" alt="User photo">
</li>
</ul>
</header>
<main>
<img id="google_logo" src="http://via.placeholder.com/272x92" alt="Google logo">
<form>
<input type="text">
<button>Iskanje Google</button>
<button>Klik na srečo</button>
</form>
<p>Google je na voljo v: English</p>
</main>
<footer>
<p>Slovenija</p>
<ul id="neki1">
<li>Oglaševanje</li>
<li>Posel</li>
<li>Predstavitev</li>
</ul>
<ul id="neki2">
<li>Zasebnost</li>
<li>Pogoji</li>
<li>Nastavitve</li>
<li>Uporabi Google.com</li>
</ul>
</footer>
</body>
</html>
The set value of height (in a flex-direction:column parent) - or width (in a flex-direction:row parent) is setting the initial value of flex-basis.
This means the distribution of free space is starting from:
<header>: 35px
<main>: 460px
<footer>: 100% (of parent height).
Flexbox starts from the initial value of calc(100% + 495px), and tries to shrink them back to 100%, based on their flex-shrink properties. And all three of them have default flex-shrink value, which is 1 ( = shrinkable).
If you don't want <footer> to overlap <main>, don't let <main> shrink:
main {
flex-shrink: 0
}
in addition to Andrei's explanation for why your footer is overlapping the main , if you want the footer to be always in the bottom, reduce its height and use margin-top:auto
main {
flex-shrink: 0;
}
footer{
height: 50px; // or %
margin-top: auto;
}
here's a fiddle : https://jsfiddle.net/f9e74L3c/1/
I am trying to implement two drop down items in a html page. But the problem is they are not position right at the bottom of there drop down text, but they are overlapping each other. Try margin property, but I want to position them automatically. I made the style sheet code so that i could use to universely use it, wherever I like, and to show the drop content, just I have to add hover event in the drop down for the dropdown content, which will position it to absolute with block display.
The CSS Code is:
.NavBar{
padding: 10px 10px 10px 0px;
margin: 0;
background-color: #616161;
position: fixed;
top: 0;
left: 0;
width: 100%;
font-family: Arial, sans-serif;
}
.NavBarList{
display: inline;
padding: 10px;
background-color: #616161;
color: white;
margin: 0;
}
.NavBarList:hover{
background-color: black;
}
.content{
display: none;
margin: 10px 0 0 0;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.content a{
display: block;
background-color: white;
color: black;
min-width: 100px;
text-decoration: none;
padding: 5px;
}
.content a:hover{
background-color: #81D4FA;
}
.content a:hover .NavBarList{
background-color: black;
}
The HTML Code is:
<html>
<head>
<link href="NavBar.css" rel="stylesheet" type="text/css"/>
<style>
#Home:hover #homeContent{
display: block;
position: absolute;
}
#AboutUs:hover #AboutUsContent{
display: block;
position: absolute;
}
</style>
</head>
<body bgcolor="#1976D2" >
<ul class="NavBar">
<li class="NavBarList" id="Home">
Home
<div class="content" id="homeContent">
Bus
Route
Bus and Route
</div>
</li>
<li class="NavBarList" id="AboutUs">
About Us
<div class="content" id="AboutUsContent">
Bus1
Route1
Bus and Route1
</div>
</li>
</ul>
</body>
</html>
Use position: relative on .NavBarList and left: 0 on .content, like:
.NavBarList {
position: relative;
}
.content {
left: 0;
}
Have a look at the snippet below:
.NavBar{
padding: 10px 10px 10px 0px;
margin: 0;
background-color: #616161;
position: fixed;
top: 0;
left: 0;
width: 100%;
font-family: Arial, sans-serif;
}
.NavBarList{
display: inline;
position: relative;
padding: 10px;
background-color: #616161;
color: white;
margin: 0;
}
.NavBarList:hover{
background-color: black;
}
.content{
display: none;
left: 0;
margin: 10px 0 0 0;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
z-index: 1;
}
.content a{
display: block;
background-color: white;
color: black;
min-width: 100px;
text-decoration: none;
padding: 5px;
}
.content a:hover{
background-color: #81D4FA;
}
.content a:hover .NavBarList{
background-color: black;
}
<html>
<head>
<link href="NavBar.css" rel="stylesheet" type="text/css"/>
<style>
#Home:hover #homeContent{
display: block;
position: absolute;
}
#AboutUs:hover #AboutUsContent{
display: block;
position: absolute;
}
</style>
</head>
<body bgcolor="#1976D2" >
<ul class="NavBar">
<li class="NavBarList" id="Home">
Home
<div class="content" id="homeContent">
Bus
Route
Bus and Route
</div>
</li>
<li class="NavBarList" id="AboutUs">
About Us
<div class="content" id="AboutUsContent">
Bus1
Route1
Bus and Route1
</div>
</li>
</ul>
</body>
</html>
CSS Position References: CSS Tricks, Codeacademy
Hope this helps!
I think you mean that you want each dropdown menu to appear below its parent navbar element, as opposed to all dropdowns being shifted all the way to the left. If that's indeed what you mean, I tried changing the display property of the .NavBarList class from inline to inline-block, and that seemed to help (see screenshot above). The code for this change can be found # this JSFiddle link here:
http://jsfiddle.net/1gk98gmw/
You can further adjust the grey space between the parent navbar elements and the grey navbar itself by removing the padding: 10px 10px 10px 0px from the .NavBar class:
Absolute positioning positions an element to it's closest positioned ancestor - as none of the element's ancestors have a set position then the element defaults to the position of the window. You need to set the position of the absolute element's parent, as well as give it a set left value, as below:
.NavBarList {
position: relative;
}
.content {
left: 0;
}