I need help on my Website i am doing for a family member of mine.
Here is a link to the website.
The Issue here is that the white background isn't going from the header to the footer.
The footer should be on the bottom of the website, even if the content is small.
I tried doing height 100% and some other things but it didn't help.
Thank you for your help :)
I know i have some validating errors which i am going to patch later on.
<div id="textfeld">
<img src="image/viertelkreis.png" id="kreis" />
<h6 class="ubertext">Standort</h6><br /><br />
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d664.691604579604!2d16.37821030367338!3d48.21111491260863!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d07a0425e484f%3A0x86fda9d1fb10b5ab!2sLaurenzerberg+5%2C+1010+Wien!5e0!3m2!1sde!2sat!4v1418075117771" width="700" height="500" frameborder="0" style="border:0"></iframe>
<table id="tabelletext1"><tr><td id="besonders">Laurenzerberg 5/12, 1010 Wien</td></tr><tr>
<td>Ecke Schwedenplatz 2/12</td></tr>
<tr><td>Telefonnummer</td><td>+43 1 909 34 95</td></tr>
<tr><td>E-Mail:</td><td> office#zitronenfalter-spa.com</td></tr>
<tr><td>Inhaberin:</td><td> Ying Qi</td></tr>
<tr><td>Unternehmensgegenstand:</td><td> Massagendienstleistungen</td></tr></table>
<br />
<br />
</div>`
You have padding on your header div. Take the padding off and you'll be fine.
#header {
padding-top: 10px;
}
Change the height on your image to
height: 350px;
And that works fine. It was your image that was the problem with your footer.
EDIT:
.background-white {
background: white;
width: 55%;
height: 795px;
}
Under your div tag which is:
<div align="center" id="wrapper">
Add another div called 'background-white' or whatever you wish to call it. Copy the styles above, may need a slight tweak to the height and width if you wish. That should work. Let me know how it looks.
For that, you need to make the #wrapper to have a height:100% corresponding with #textfeld to have a height:100%
For instance,
You need to make the below css change to achieve what you are looking for.
The CSS Change:
#wrapper {
height: 100%;
min-height: 100%;
position: relative;
}
#textfeld {
background: none repeat scroll 0 0 #ffffff;
border: 2px solid #999;
height: 100%;
padding-bottom: 80px;
padding-top: 20px;
width: 764px;
z-index: 1;
}
Hope this helps.
PS: You need to remove the footer value of bottom:0 for the above to work.
remove this style
#header {
padding-top: 10px;
}
you can always use min-height on #textfeld and count the value in jQuery.
var height = $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight();
$("#textfeld").css({'min-height': height });
Related
I've succeeded in doing this a dozen different ways on desktop, but nothing seems to work on a mobile phone.
I've tried:
- relative positions, absolute positions
- float
- various combinations of widths, margins and paddings
- I even tried using a 1x2 table, where the first cell used width to push the 2nd cell over to the right
Can it even be done? Surely I've seen it done?
How do you position a div containing iframe on right-hand side of screen?
You might try putting a wrapper around the iframe, then positioning the wrapper.
css
body {
position: relative;
width: 100%;}
.wrapper {
position: absolute;
right: 0;}
html
<div class="wrapper">
<iframe src="https://www.w3schools.com">
</iframe>
</div>
Without seeing the complete html/css of both the page and the iframe, that's the best recommendation I have. The iframe itself can (and likely does) have it's own CSS, so keep that in mind too.
Here is a working example https://www.w3schools.com/code/tryit.asp?filename=G86JSY65NPG2
The iframe contents didn't load properly on my mobile, but the iframe box is still there and positioned on the right.
OK, I finally managed something like it using tables.
Not only got on the right hand side, but also bottom right, which was a further goal.
<table id="table"><tr>
<td id="cell1"> </td>
<td id="cell2">
<div id="video">
<iframe src="https://www.youtube.com/embed/.......></iframe>
</div>
</td>
</tr></table>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#table {
height:100%;
width:100%;
}
#cell1 {
width:100%;
}
#video {
position: absolute;
width: 50vmax;
height: 50vmax;
right: -25vmax;
padding-bottom: 20vmax;
}
#video iframe {
border: 0px;
padding-bottom: 20vmax;
padding-top: 0vmax;
width: 20vmax;
height: 20vmax;
}
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo
The body of my html page is placed in the middle of the page as shown below:
<body style="margin:0 auto; width:75%">
Now I want to put a strip with a background color to expand along the complete width of the screen, like this.
<body style="margin:0 auto; width:75%">
<div style=" margin-left:0; margin-right:0;width:100%; height:20px; background- color:
#e6e3e3;"></div>
</body>
However, this is not working. The div element does not expand beyond the border specified by body element. how can it be done? Thanks in advance for your help.
Are you trying to achieve something like this?
http://jsfiddle.net/TZ9Y7/
CSS:
html, body {
height: 100%;
}
body{ margin:0 12.5%; border: 2px solid black; }
.div1 {
width: 100%;
height: 30px;
background: #ccc;
}
.div2 {
width: 100%;
height: 30px;
background: red;
position: absolute;
left: 0;
}
unless you want to use javascript to look up the width of the window and programatically set the width of the div, your best option would be to tweak your page structure to something like:
<html>
<body>
<div style="margin:0, width:100%, padding:0"></div>
<div class="content" style="margin:0 auto, width:75%"></div>
</body>
</html>
So that instead of making the whole body element centered, you have a 'content' div that is centered. This will let you place certain elements outside the content div, where they can be the width of the whole window.
I'm trying to develop a header area which expands past the usual 960px wide container, without using a background image, my reason for this is because an <img> tag would work better in my case.
My problem is, if i place my image in the container, such as this code example:
<style>
#container {
width: 960px;
margin: 0 auto;
}
</style>
<div id="container">
<img src="myimage.jpg" alt="my image" />
</div>
I want to be able to take this image an center it, across the page, expanding past its container to the end of the viewport, without scrollbars being added, assume the size of the image remains at a constant 1280px wide, but the height varies.
I've been trying this morning, but i don't think it can be done without setting overflow:hidden on the body tag, which is bad because i'd like it t obe able to scroll if the window is smaller than the container.
I hope you guys can help :)
You are right, it does not work. Why does it has to be inside the container?
You could do it like this.
<html>
<head>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}
#header{
width: 2000px;
float: left;
overflow: hidden;
}
#container{
width: 960px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
#page{
overflow: hidden;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img src="myimage.jpg" alt="my image" />
</div>
<div id="container">
</div>
</div>
</body>
</html>
If the img is to be placed exactly at x-pos:0 and Y-pos:0, you could use position:absolute to placed it:
img#my_header{
position:absolute; // Tell the browser to break document work flow for this ID
z-index:1; // Tell the browser to pull up in the stack this ID by 1
top:0; // tell the browser to place this ID at 0px from top of view port
left:0; // tell the browser to place this ID at 0px from left of view port
}
This is a sample, to give you an idea who you can break the document workflow to set your img tag into the desired place... adjusting top and left coordinates, you should solve it!
Hope it helps!
My thought is similar to Lucas's. Take the out of the container, and put it in it's own container (id="header" for example). Set #header to width: 100% (which should be the width of the viewport, and overflow: hidden. Then position #header as you want - use Zuul's suggestion of absolute positioning if necessary.
...
<style type="text/css">
#header { width: 100%; overflow: hidden; margin: 0; }
</style>
...
<div id="header">
<img src="myimage.jpg" alt="My Image" />
</div>
...
I think that should work out for you.