I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
Related
Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
In Chrome 72, Developer Tools show that the button has a height of 18px only. Why?
New Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
background: lightgray;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
Now the button height becomes 32px.
Why is the button height not honoring min-height without a background set?
Browser issue
First of all, I've made a Fiddle right here where you can try with different things/browsers.
button {
height: 32px;
min-height: 32px;
}
This seems to work.
Is it only you?
No, as remarked here by #Michael_B, it seems to be a "browser thing", not only with min-height but with height and more.
So first you have the W3C standards, which are a set of guidelines for browser makers. And then you have the browser makers, who are free to do whatever they want.
If you also try with a Safari browser it stays with the 18px, but not with Firefox.
I don't exactly know why it works for example setting a background and neither could find it, but in my opinion, with height: 32px; //same as min-height is a "cleaner way" of getting through this.
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
height: 32px; /*Here you should put the min-height value*/
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
UPDATE 1
If you want to the button to have dynamic height (let's say 100%) to its parent, just do:
div {
height: 10px;
min-height: 32px;
}
button {
height: 100%;
}
If you see, as the button is height: 100%; to the div (its parent), setting min-height to it will work perfectly and your button could dinamically change its height.
You could also go for:
button {
min-height: 32px;
border: 0;
}
Otherwise please tell your specific case for what you want to achieve.
Hope it helped.
Please take look at the following page on mobile:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="wide">WIDE</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
The fixed element is there at the bottom right as expected. However, when you increase the width of the wide div past your device viewport width (in css pixels), the fixed div disappears.
Why does this happen? Is there a way to prevent this behaviour?
Further details:
An easy way to test this is to use mobile view in Chrome DevTools, and change the width directly under Elements > Styles.
Close to the limiting width you see the fixed div cut off horizontally.
Same thing without meta viewport, but the threshold will be at the default viewport width 980px.
Tried combinations of height: 100% and min-height:100% on html and body with no success.
No issues in desktop browser.
Answering my own question here.
I am not sure why the fixed div is not rendered. It is somehow related to the fact that the 'wide' div overflows the body element, causing the view to be zoomed out and the body ending up less tall than the viewport. I still believe that the mobile browser should show the fixed element just like the desktop browser does.
My fix: wrap the wide content in a container element with overflow-x: scroll. This works well on mobile, the fixed div is shown again and the wide content can be swiped across.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="ctnr">
<div id="wide">WIDE</div>
</div>
<div id="fixed">FIXED</div>
</body>
</html>
CSS:
#ctnr {
overflow-x: scroll;
}
#wide {
background-color: blue;
width: 120px;
}
#fixed {
background-color: green;
position:fixed;
left: 0px;
bottom: 0px;
}
Not sure if this will help you but I added display: table-cell; to #wide.
This way your div won't exceed the maximum width.
I am having my image size of width 1800px and height 200px i want to create a jumbotron where the image should fit to that jumbotron means the jumbotron size should also be that so I can see my full picture and it should also be responsive
my Code..
<style>
.jumbotron1{
background-image: url(/img/ffHeadernologo.png);
background-size: cover;
text-align: center;
width:100%;
padding-bottom: 11.1111% /* ( 1800 / 200 ) = 9; 100 / 9 = 11.1111 */
max-height: 100%;
overflow: hidden;
}
</style>
What I wants to do is..
This my background
and I also have logo as follow
the logo should be in another div and backround has been set as above its working fine.
I want the result like this
How can I do that the above solution is not working great with this what to do?
any suggestions I have seen the earlier Same Question but its not working so I have asked it again.
in third image the black line has been removed that has to be there.
Thank You
just add the responsive-img class to the class attribute of your image tag
Edit:
Because you are using background-image us this css
CSS
<style>
.jumbotron1{
background-image: url(/img/ffHeadernologo.png);
background-size: cover;
text-align: center;
width:100%;
height: 200px;
overflow: hidden;
}
</style>
note that this will keep the aspect ratio intact but if the screen is taller than that aspect ratio it will show space above and below, on the other hand if the screen is skinnier than that aspect ratio it will crop the right hand side of the image
EDIT:
It seems you just want a background image. I that case I suggest that you just use the following css
body {
background: url(/img/ffHeadernologo.png) no-repeat center center fixed;
background-size: cover;
}
EDIT:
You are actually trying to make a header with a background. To do that you can use this
CSS
(Demo)
.jumbotron {
background: url(http://placehold.it/1800x200/225599/ffffff) no-repeat center center fixed;
background-size: cover;
height: 200px;
}
Check this example i simply used the background:url() technique
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
.jumbotron{ background: url(http://cdn.superbwallpapers.com/wallpapers/vector/blue-polygon-28641-1920x1080.jpg);}.jumbotron{width:100%;height:100%}
</style>
</head>
<body>
<div class='container'>
<div class='jumbotron'>Hell</div>
</div>
</body>
</html>
I've set up my problem here.
I have 2 divs, each outlined with a black border. One is my content div (containing text), with height set to 600px; The other div, containing a banner image, I'd like to use as my page's footer. I am able to do this in absolute positioning by simply marking the div with "bottom: 25px." However, what I'm hoping to do is to make the footer div "stop" when it collides with the content div as you shrink the size of your browser window.
Any ideas? Thanks much in advance!
Here's how I do it. Got the technique from http://ryanfait.com/sticky-footer/. He adds an extra "push" div but I used the wrapper's padding bottom to serve the same function (no need for empty DIVs).
Here's an example (you can view it at http://ve.savantcoding.com/example.html)
<html>
<head>
<title>sample footer</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px; /* bottom margin is negative footer height */
}
#content {
padding-bottom: 200px /* bottom padding is footer height */
}
#footer {
height: 200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">your content</div>
</div>
<div id="footer">your banner</div>
</body>
</html>
I am trying to position a div (footer) element at the bottom of a printed page. In firefox this is working fine and the div will sit along the bottom of the printed page.
However, in Safari the footer moves up the printed page if the browser window is not very tall. eg. if the browser window is 200px tall then the footer sits on the print out about 200px down. If the browser is 400px tall it draws the footer 400px down the page.
I would like to get the same behaviour in Safari as I can get in Firefox if possible?
The basic code I am using for this is:
<html>
<head>
<title>Print footer at bottom of a printed page</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height: 100% !important; }
#footer { height:25px; border-top:solid 1px #000;
position:absolute; bottom:0; }
</style>
</head>
<body>
<p>Some content on the page here</p>
<div id="footer">This should appear at the very bottom of the printed page</div>
</body>
</html>
Edit: I'm happy if the solution requires a hack...it only needs to work in Safari
I just printed this out in Chrome (same rendering engine as Safari), and the line showed at the bottom...
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css" media="print">
html, body { margin: 0; padding: 0; }
body { height: 11in; width: 8.5in; }
#footer { position: absolute; bottom: 0; }
</style>
</head>
<body>
<div id="footer">
This will always print at the bottom
</div>
</body>
</html>
Notice that I have media="print" on the style tag. For more on this, read Going to Print on ALA.
This is the code i use. Note I am setting both html and body height to 100% which is needed for Chrome and Safari.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Have you tried this version?
http://www.themaninblue.com/experiment/footerStickAlt/
I know it works in browsers, but not sure about print.