Hi I'm trying to make a full height banner for my website's homepage. I want my banner to always take the full height of the window, wether on computer, ipad or iphones. Anyone could help would be much appreciated.
You can give height:100vh to the banner. So that it will cover the whole window.
if your banner contains only an image ,it can be done by:
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.banner-div{
background-size: 100% 100%;
background-image: url(http://www.wefms.com/speedtest/hello.JPG);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="banner-div">
<!--displays an image banner for full screen size-->
</div>
</body>
</html>
or it can be done by
<head>
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.banner{
height: 100vh;
width: 100%;
background-color:lightblue;
}
.inner-div{
background-color: lightgreen;
width: 200px;
}
.normal-div{
height: 140vh;
width: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="banner">
<div class="inner-div">banner div for full screen height</div>
</div>
<div id="normal-div">
Normal division for 140 vh
</div>
</body>
or you can also use javascript
screen.height
to detect device screen height and you can assign it to a div
Related
This is just an example code. I don't know how to limit the picture height and still have responsive #pictureContainer with object-fit: cover. Is there a more simple way to write this code. Any help would be appreciated.
html,
body {
padding: 0px;
margin: 0px;
}
#pictureContainer {
height: auto;
/*max-height: 100% <-- doesn't work */
position: relative;
}
.picture {
max-height: 100%;
width: 100%;
object-fit: cover;
}
<div id="pictureContainer">
<img class="picture" src="https://media.istockphoto.com/photos/brown-two-story-all-american-home-picture-id1158713117?k=20&m=1158713117&s=612x612&w=0&h=s_aoDM4KNoixI9qBLmJOBPMccoWsC11zxuBGGgFRiKY=">
</div>
Responsive images will automatically adjust to fit the size of the screen.
Add CSS:
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:
.responsive {
width: 100%;
height: auto;
}
for more information visit W3School
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Images</h2>
<img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" class="responsive" width="600" height="400">
</body>
</html>
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I can't resize an image in css/html. Ican resize it in px but not in %. I already tried min-height, min-widht. Here's my code I can't resize it.
body{
margin: 0;
}
#top{
background-color: #53FF40;
width: 100%;
height: 50%;
}
#bottom{
background-color: #FF5757;
width: 100%;
height: 50%;
}
.img-yes{
width: 25%;
height: 25%;
}
<!DOCTYPE html>
<html>
<head>
<title>DoYouLoveDogs</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<body>
<div id="top">
<div class="img-yes">
<img class="img-yes" src="img/yes.png">
</div>
</div>
<div id="bottom">
</div>
<script src="js/jquery.js"></script>
<script src="js/button.js"></script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
Give display: block?
.img-yes {
display: block;
width: 25%;
height: 25%;
}
Add
.img-yes
{
width: 100%;
height: auto;
}
fiddle
First of all you need to set a size in pixels for outer div of image. Then resize image with percentage.
.outerdiv{
width:200px;
height:200px;
}
.img-yes{
width: 50%;
height:30%;
}
But if you only want to resize image you can only give width in percentage and height will automatically set according to width.
I just copy paste you code in to notepad (change internal css to inline css and change image path) and execute it. It's working properly. When i increase the width, image resize according to width.
.img-yes {
height: 40% !important;
margin: 5px 28px 22px 82px;
width: 50% !important;
}
I am new to web design and for a class I am creating a site for a restaurant and I made my mockup but I am having issue (or maybe it's not possible) about having my image display as I do in my mockup (image to follow)
Here is the top of my mockup
I want to have the header 100% (figured that out)
the image 100% width
the image is 1480x808
and with this code it stays 100% width but the height isn't matching up with my next section (it either pushes it off the page entirely or in other resolutions has a big white gap between it and the next section)
Could someone point me in the right direction here?
Would really appreciate it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
height: 100px;
background-image: url(_images/headerpattern.jpg);
background-repeat: repeat;
}
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
}
#redbar {
height: 10px;
width: 100%;
background-color: #94201f;
}
#slogan {
height: 207px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div>
<div id="redbar"></div>
<div id="slogan">Content for id "slogan" Goes Here</div>
<div id="redbar"></div>
</div>
</body>
</html>
try removing the height and max-height property from #mainpicture
Update
For the red bar I'd remove them from your markup and use border-bottom on the first image and border-bottom on the second
Here's a fiddle
remove the height from #mainpicture.
or
if you need the height you can try putting the image in background of #mainpicture and set background size cover..Leave the #mainpicture div blank
like
<div id="mainpicture"></div>
css
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
background-image:url(_images/mainpic.jpg);
background-position:center top;
background-size:cover;
}
If you want your page to be responsive, you must have some rules.
You want the image to show, as well as the slogan area. But the page can be seen in several devices, with several sizes.
So, you should use relative dimensions, so your goal can be achieved trought the many devices...
Place the image inside a div with relative dimensions...
I am having trouble preventing a DIV from wrapping to the next line when I shrink the browser window. There must be something small and simple I am missing, but I've been at it for a while now and I cannot figure it out. It appears to only kick down the "blog" div, but not the "info" div. Any suggestions?
Here is an example:
http://www.spynsycle.com/portfolio/
CSS:
/* Level 1 */
#container {
min-width: 800px;
width: 100%;
min-height: 768px;
height: 100%;
background-color: lightgrey;
}
/* Level 2 */
#portfolio {
min-width: 396px;
width: 40%;
min-height: 768px;
height: 100%;
float: left;
background-color:lightgreen;
}
#information {
min-width: 108px;
width: 20%;
min-height: 768px;
height: 100%;
float: left;
background-color: lightcoral;
}
#blog {
min-width: 396px;
width: 40%;
min-height: 768px;
height: 100%;
float: left;
background-color: lightblue;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="portfolio">
Port
</div>
<div id="information">
Info
</div>
<div id="blog">
Blog
</div>
</div>
</body>
</html>
Because you're assigning min-width in pixels, as your page gets smaller, eventually you're running out of enough pixels to maintain the sum of your widths, and you browser is forcing your blog div to wrap. Your widths are totaling to 900px, so once the browser window dips below 900px you'll start seeing wrapping.
What's happening is eventually your min-width of 396px becomes larger than 40% of the browser width.