I want to increase the overall size of the page. The current webpage looks too small for the screen size. please let me know how to make the homepage appear full on the screen like a normal website.enter image description here
this is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html, body{
width: 1920px;
height: 2476px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header{
width: 1920px;
height: 200px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header h1{
color: aliceblue;
text-align: center
}
}
</style>
</head>
<body>
<header> <h1>HEADER</h1> </header>
</body>
</html>
You've set the body and header width at 1920px.
html,
body {
height: 2476px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header {
height: 200px;
background: black;
opacity: 1;
margin: 0 auto;
border: 1pt solid white;
}
header h1 {
color: aliceblue;
text-align: center
}
<header>
<h1>HEADER</h1>
</header>
Just put
'''
max-width:100%;
height:auto;
Instead of width: 1920px;
In the body.
And then put in the header
max-Width:100%
instead of width:1920px
Related
The header has a dynamic height, how can the main take up the rest of the page height?
header {
margin: auto;
width: 50%;
height: auto;
}
h1 {
text-align: center;
}
main {
background-color: aqua;
}
<header>
<h1>Add new task in your list</h1>
<app-add-to-do-list></app-add-to-do-list>
</header>
<main>
</main>
To do this, you can use the vh property, which is viewport height, in the width and height of each one and define a height for each of them, example:
header{
height: 30vh;
}
main{
height: 70vh;
}
Also, you can add an overflow-scroll as well.
When you add height auto it only stretches to the size of it's content. If you would want the container to take some of the free space you have to add min-height: 20rem;
Here I have created codepen with examples:
https://codepen.io/brtskr-the-animator/pen/JjMQRbd
body{
min-height: 20rem;
background: #222;
color: white;
}
*{
margin: 0 0 2rem 0;
}
header{
height: auto;
border: 1px solid green;
}
.ex1{
height: 5rem;
border: 1px solid yellow;
}
.ex2{
min-height: 5rem;
border: 1px solid blue;
font-size: 6rem;
}
.ex3{
height: auto;
border: 1px solid pink;
font-size: 10rem;
}
I'm learning css and html and i have this problem, where the margin-left and margin-right in the ".logo" div class don't want to center the div. Please help because i done reserch, i checked the code and everything looks good, so I have no idea whats going on.
body
{
background-color: #303030;
color: #ffffff;
}
.wrapper
{
width:100%;
}
.header
{
width:100px;
padding:40px 0;
}
.logo
{
width:450px;
font-size:48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>site</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">
LOGO
</div>
</div>
</div>
</body>
</html>
Your header is only 100px while your logo is 450px, you can check this fiddle for demo.
.wrapper {
width: 100%;
}
.header {
width: 1000px;
padding: 40px 0;
}
.logo {
width: 450px;
font-size: 48px;
border: 1px solid white;
margin-left: auto;
margin-right: auto;
}
Below is a test file, test.htm, which results with this in Firefox:
The <div> is green with yellow border and specified size, and the <a> is with red border. Clearly, the anchor tag has both larger width and height that the div that it contains. How can I make the anchor tag equal in size to its div contents - however, in such a way that the size and position of the <div> is unchanged? Basically, for this example and the browser window size shown, I'd want this (manually edited pic):
test.htm:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
background-color: white;
color: darkred;
}
div#button {
margin-top: 2vh;
padding: 2em;
width: 20em;
border-style: solid;
border-width: 2px;
border-color: yellow;
background-color: lightgreen;
text-align: center;
font-size: 3vh;
/* to center div horizontally: */
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none; /*remove underline of a href link:*/
display: block;
width: auto;
padding: 0;
margin: 0;
color: unset;
border-style: solid;
border-width: 2px;
border-color: red;
}
</style>
</head>
<body>
<br/>
<div id="button">Download this</div>
</body>
</html>
Change the a from display: block; to display: inline-block;.
In order to get the exact same height, remove the margin-top of the div.
In order to keep it centered, add text-align:center to the parent element, in your case your body. Note: in this way, everything inside the body will be centered.
If you only want your a-tag be centered, add a wrapper div around it and add the text-align:center.
Codepen example:
http://codepen.io/anon/pen/jrNvzx
Try this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
padding:0;
margin:0;
width: 100%;
height: 100%;
background-color: white;
color: darkred;
}
div#button {
padding: 2em;
width: 20em;
border-style: solid;
border-width: 2px;
border-color: yellow;
background-color: lightgreen;
text-align: center;
font-size: 3vh;
/* to center div horizontally: */
margin-left: auto;
margin-right: auto;
}
a {
text-decoration: none; /*remove underline of a href link:*/
display:inline-block;
width: auto;
padding: 0;
margin: 0;
color: unset;
border-style: solid;
border-width: 2px;
border-color: red;
}
</style>
</head>
<body>
<br/>
<div id="button">Download this</div>
</body>
</html>
This is what I want to achieve (montaged pic):
The red outline is the container, with size calculated relative to the page/browser window. Then, I'd want two divs (green dashed), with width 15% of the container (and height 100% of it), to stick to the right of the container, taking as much space as they need - and finally, I'd like a left aligned div (blue dashed) with height 100% of container, to take up the rest of the remaining width.
Unfortunately, the closest I got to is this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test-rightfloat</title>
<style type="text/css">
body {
width: 100%;
}
.cntr {
width: 60vh; height: 15vh;
border: 2px solid red;
}
.lb {
width: 70%; height: 100%;
border: 2px dashed blue;
display: inline-block;
}
.gr {
width: 15%; height: 100%;
border: 2px dashed green;
float: right;/**/
text-align: center;
vertical-align: middle;
line-height: 5em;
display: inline-block;
margin: 0; padding: 0;
/*margin-right:0;
margin-left:auto;*/
/*position: absolute; right: 0; left: auto;*/
}
</style>
</head>
<body>
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright1" class="gr">B</div>
</div>
</body>
</html>
... which produces this (Firefox 43):
... which is not what I had in mind: the right divs try both to stick to the right edge of the container, and so they do not stand side-by-side, but on top of each-other instead...
Is there anything I could do to get the desired design (preferably in pre-CSS5, and without changing the HTML structure - and no JS)?
You can use Flexbox here, just use flex: 0 0 15% on .gr and flex: 1 on .lb
* {
box-sizing: border-box;
}
.cntr {
width: 60vh;
height: 15vh;
border: 2px solid red;
display: flex;
}
.lb {
border: 2px dashed blue;
flex: 1;
}
.gr {
flex: 0 0 15%;
border: 2px dashed green;
}
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright2" class="gr">B</div>
</div>
Update: Actually since you have fixed width of 15% on both .gr you can just use 70% on .lb with floats but you need to add box-sizing: border-box
* {
box-sizing: border-box;
}
.cntr {
width: 60vh;
height: 15vh;
border: 2px solid red;
}
.lb {
border: 2px dashed blue;
width: 70%;
height: 100%;
float: left;
}
.gr {
width: 15%;
height: 100%;
border: 2px dashed green;
float: left;
}
<div id="contain" class="cntr">
<div id="leftblue" class="lb">Left</div>
<div id="greenright1" class="gr">A</div>
<div id="greenright2" class="gr">B</div>
</div>
Your problem is due to the border. When adding a border you should consider adding twice the border width to your actual position or delete the borders
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test-rightfloat</title>
<style type="text/css">
body {
width: 100%;
}
.cntr {
width: 60vh; height: 15vh;
border: 2px solid red;
}
.lb {
width: 70%; height: 100%;
/*border: 2px dashed blue;*/ <--- NO BORDER
display: inline-block;
}
.gr {
width: 15%; height: 100%;
/*border: 2px dashed green;*/ <--- NO BORDER
float: right;/**/
text-align: center;
vertical-align: middle;
line-height: 5em;
display: inline-block;
margin: 0; padding: 0;
/*margin-right:0;
margin-left:auto;*/
/*position: absolute; right: 0; left: auto;*/
}
</style>
</head>
<body>
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright1" class="gr">B</div>
</div>
</body>
</html>
I'm having difficulty achieving this. I would like the div content1 and content2 to fill up the remaining space vertically in a window with a set minimum height.
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
body {
background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
width: 965px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: left;
width: 200px;
background: none;
padding-bottom: 10px;
} .content {
padding: 10px 0;
width: 380px;
height: 100%;
background: #fff;
float: left;
position: relative;
} .content2 {
float: left;
width: 380px;
height: 100%;
background: #fff;
padding: 10px 0;
}
-->
</style>
Here are the divs I'm trying to resize (currently empty but I would like them to fill up the window vertically):
<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>
You need 100% height on the html tag as well
html { height: 100%; }
See: http://jsfiddle.net/wJ73v/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
div {border: 1px solid #000; height: 100%; float: left;}
</style>
</head>
<body>
<div id="foo">a</div>
<div id="bar">b</div>
</body>
</html>
Proper DOCTYPE is necessary, I think, since otherwise browsers go to so called quirks mode.