I'm designing an ebay template. However, a problem that I keep running into is that there seems to be a whitespace which I can't get rid of between the mainContainer div and the footer. I have highlighted the two divs with green and red to make the problem clear.
I want to know how I can get rid of the whitespace, and have the two divs underneath each other.
http://jsfiddle.net/4vembvLg/
Help is appreciated.
The whole code is on jsfiddle
* {
margin: 0;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
.footer {
height: 600px;
margin: 0;
padding: 0;
background-color: red;
}
#top-bar {
background: url(http://demo.presthemes.com/centrikids/themes/pt_centrikids/img/bg_topbottom.png) repeat-x;
height: 15px;
}
Remove the top rule in the mainContainer class and pageContainer id
.mainContainer {
background-color: green;
height: 900px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
text-align: left;
/* top: -400px; */
width: 100%;
}
#pageContainer {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
margin: 0 auto;
padding: 0;
position: relative;
/* top: -267px; */
width: 1393px;
}
I believe I found your issue, top: -400px;
.mainContainer {
background-color: green;
height: 900px;
width: 100%;
/* background: #f8f8f8; */
padding: 0;
overflow: hidden;
margin: 0;
text-align: left;
position: relative;
top: -400px; <----------------This Guy here
}
Related
I'm trying to create a normal HTML page and I've set the height/width of the body With Vh and Vw
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow: auto;
}
.Top-banner {
position: absolute;
top: 0;
left: 0;
height: 10%;
width: 100%;
background-color: blue;
box-sizing: border-box;
}
.Ad {
position: absolute;
top: 10%;
left: 0;
height: 15%;
width: 100%;
background-color: purple;
text-align: center;
box-sizing: border-box;
}
.Ad .Close-but {
position: absolute;
top: 65%;
left: 5%;
height: 30%;
width: 10%;
background-color: green;
text-align: center;
}
.Main-content {
position: absolute;
top: 25%;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
text-align: center;
box-sizing: border-box;
}
<div class="Top-banner">
</div>
<div class="Ad">
<button class="Close-but">Close</button>
</div>
<div class="Main-content">
</div>
The problem is that an extra content create on the left its the body what am I doing wrong
I cannot put an jsfiddle demo because in the demo this problem don't happen I tried the HTML page in other computers and the same issue
Not sure if understand your question correctly but if your problem is the horizontal scrollbar then simply change 'overflow: auto;' to 'overflow-x: hidden;'
if you don't want a vertical scroll aswell then make 'overflow: hidden;'
body{
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow-x: hidden; //change this
}
I have an input that when selecting an image it fills all this box ...
In order to completely fill this box I used 100% height and width ... in fact the image occupies the entire box, but not all of its details are visible.
Is there any way to get the image to occupy 100% but in which all your content is visible?
My problem:
Original Image
Picture inside the box (What I have)
As you can see, the image occupies the whole box (it's correct) but the problem is that the full image doesn't appear :(
Any solution?
Thanks!
My code and test
HTML
<div class="drop">
<div class="cont" *ngIf="urls.length === 0">
<div class="browse" >
Upload files
</div>
</div>
<div *ngIf="urls.length > 0">
<img [src]="urls[0]">
</div>
<input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
</div>
css
.drop {
margin-left: 32px;
width: 928px;
height: 696px;
border-radius: 15px;
overflow: hidden;
text-align: center;
background: white;
/* margin: auto; */
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
/*&:hover
cursor: pointer
background: #f5f5f5*/;
}
.drop .cont {
width: 500px;
height: 170px;
color: #8E99A5;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.drop .cont i {
font-size: 400%;
color: #8E99A5;
position: relative;
}
.drop .cont .browse {
margin: 10px 25%;
padding: 8px 16px;
border-radius: 16px;
background: #ECF2F9;
text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
}
.drop input {
width: 928px;
height: 650px;
cursor: pointer;
background: red;
opacity: 0;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#list {
width: 100%;
text-align: left;
position: absolute;
left: 0;
top: 0;
}
#list .thumb {
height: 100%;
margin: 10px 5px 0 0;
}
img {
width: 100% !important;
height: 100% !important;
}
It's because your giving a fixed height to the parent container, what you have to add is this:
.drop{
box-sizing: border-box;
}
.drop>img{
width: 100%;
height: auto;
}
It's because of this line:
.drop {
overflow: hidden;
}
If you change it to overflow: visible/scroll it will work.
If you don't want the image to scroll you could edit the css like this:
img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}
I updated. Try this.
img {
height: 100% !important;
}
.abc {
width: 100% !important;
height: 100% !important;
}
<div class="abc" *ngIf="urls.length > 0">
<img [src]="urls[0]">
</div>
I have included 2 photos and my css code below. I am trying to bring my #bottomBar up so its directly under and that its the same width as the black space - you can see in the images below.
Depending on if i use position relative or position absolute i get the desired affect of either being directly under the black space or being the same width. But never both at the same time.
I am using a bootstrap templet in my html, would that cause the issues that i am getting?
css position relative
css position absolute
body{
margin: 0;
padding: 0;
}
.container{
padding: 0;
width: 100vw;
height: 100vh;
background-color: black;
}
#header{
display: flex;
padding: 5px;
width: 100%;
height: 10vh;
background: linear-gradient(to right,white, #a5c6ff, #0066ff);
}
h1{
position: relative;
margin: auto;
font-size: 6vw;
}
#img{
width: 15vw;
}
.navbar{
padding: 5px;
background: linear-gradient(to right,white, #a5c6ff, #0066ff);
}
.navbar-toggler{
display: flex;
padding: 0;
margin: 0;
width: 10vw;
height: 4vh;
}
.navbar-toggler-icon{
height: 3vh;
width: 9vw;
margin: auto;
}
#bottomBar{
position: absolute;
top: 100%;
width: 100%;
}
I know this is a common issue but I just can't work this out. No matter how many combinations of settings I try, the footer won't stay on the bottom of the page. It will just sit under whatever else is above it.
body {
margin: 0;
background-color: #ACFAB7;
}
# container {
margin: 0 auto;
padding: 40px;
}
#header {
z-index: 0;
height: 78px;
background-color: #2ecc71;
}
#footer {
z-index: 2;
height: 40px;
width: 100%;
padding: 0px;
position: relative;
background-color: #2ecc71;
/*display required to center text*/
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image {
z-index: 1;
margin: 20px auto;
padding: 50px;
}
/*Centers text within the header*/
span {
display: table-cell;
vertical-align: middle;
}
You have a lot of problems. This solution is for:
Fixing your footer at the end of the page.
Centering the contents (both vertically and horizontally).
Fixes
Get rid of display: table.
Get rid of width: 100%.
Change relative to fixed.
#footer {
z-index: 2;
line-height: 40px;
padding: 0px;
position: fixed;
background-color: #2ecc71;
text-align: center;
left: 0; right: 0;
bottom: 0;
}
<div id="footer">Copyrights.</div>
position: fixed; and bottom: 0; should do the trick. Add width and height as neccessary.
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
background-color: aquamarine;
}
<div style="background-color: lightgrey;height: 800px">
Page content
</div>
<div class="footer">
this is the footer
</div>
You can use position: fixed; bottom: 0;
#footer {
z-index: 2;
height: 40px;
width: 100%;
padding: 0px;
background-color: #2ecc71;
text-align: center;
margin-left: auto;
margin-right: auto;
position:fixed;
bottom:0;
left: 0;
}
<div>
<footer id="footer">Footer</footer>
</div>
I have design a website homepage made of 4 sections. Top, mid1, mid2 and bottom. Each section has a min height of 100% of the web browser. The top section has a transparent background colour with a image/video background.
When the user scrolls down the #videosection should stay behind each section, instead in Safari it does not keep the video section behind the other sections and firefox does not show the video section. Everything is fine using chrome.
HTML:
<body>
<div id="videosection"><video src=""id="bg-video" muted autoplay loop ></video></div>
<div class="top-section">
</div>
<div class="mid1-section">
<div id="center-box">
<section></section>
</div>
<div class="mid2-section">
<div class="textbanner"><h3>Design</h3></div>
<div class="devices box"><img src=""></div>
</div>
<div class="bottom-section">
<div id="registerform"></div>
</div>
</body>
Heres the CSS:
html, body{
background-color: #ECF0F1;
min-height:100%;
margin: 0;
padding: 0;
}
#videosection {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%
z-index: 1;
}
videosection video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 60%;
min-height: 50%; }
.top-section{
background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari / background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Opera 11.1 to 12.0 / background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / For Firefox 3.6 to 15 / background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); / Standard syntax */ background-repeat: repeat;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 15;}
#center-column {
position: relative;
margin: 0;
margin-top: 10%;
margin-bottom: 5em;
padding: 0;
}
.mid1-section{
min-height:100%;
width: 100%;
background-color: #ff5b68;
margin: 0;
padding: 0;
text-align: center;
position: relative;
z-index: 15;}
#center-box {
overflow: hidden;
float: none;
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;}
.mid2-section{
min-height:100%;
width: 100%;
background-color: #3499dc;
margin: 0;
padding: 0;
text-align: center;
position: relative;
z-index: 15;}
.textbanner {
overflow: hidden;
float: none;
height: 20%;
width: 100%;
margin: 0;
padding-top: 3em;
}
section {
overflow: hidden;
text-align: center;
margin: 0;
float: left;
background-color: #ff5b68;
height: 10.5em;
width: 40%;
padding-left: 5%;
padding-right: 5%;
padding-top: 5em;
padding-bottom: 0;
}
.bottom-section{
min-height:100%;
width: 100%;
background-color: #1ABC9C;
margin: 0;
padding: 0;
text-align: center;
position: relative;
z-index: 15;}
#registerform {
background-color: #16A085;
border: 1px solid #16A085;
border-radius: 5px;
width: 420px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 5%;
}
First of, it's better to put the video for last, this will improve the loading of the page.
For making the video stay behind the rest, use z-index: -1; in #videosection.