I wanted to fit my site to browser i tried this and when i try the " width=100%
height=100% " for body's css it does ok and when i tried that with container's div it sort of disappears meaning the background color is not seen
This is html:
<html>
<head>
<title>Untitled</title>
<link href="css/stylesheet1.css" rel="stylesheet" type="text/css"/>
<link rel="icon" type="image/x-icon" href="images/favicon.ico" /></head>
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
<div id="logo">Logo</span></div>
</div><!--Logo-->
<div class="search-bar">Search BAr</div>
</div>
</div>
</body>
</html>
this is CSS
body{
width:100%;
height:100%;
margin: 0;
background:#CCC;
}
#container{
width:100%;
height:100%;
margin:0 auto;
background:#000;
}
#header{
width:100%;
height:12%;
float:left;
background:#F00;
}
.logo{
width:50%;
height:100%;
float:left;
background:#0F0;
}
.search-bar{
width:50%;
height:100%;
float:left;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
#logo
{
width:100%;
height:100%;
float:left;
font-size:48px;
color:#FFF;
font-family: 'century gothic';
text-align:center;
margin-top:20px;
}
I am in trouble help me plzzz
If you want to apply height in % the parent element should have height set explicitly.
So if you simply set height property, the parent tag html doesn't have any height set so it'll take 0 height.
Update: Solved Fiddle
If you want to match it to the browser you could best use this.
CSS
body {
width: 100vw;
height: 100vh;
}
the vh, and vw represent percentage according to viewport width/height;
Please check this link when you set width and height
div{width:auto;height:auto;}
it will set automatically
see this link
http://www.w3schools.com/cssref/playit.asp?filename=playcss_width&preval=auto
If you want the size of an element to be the size of the browser then it has to be a direct child of the body and you need to add this style to the body:
body, html {
width: 100%;
height: 100%;
}
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
I put a div around each button and I set them both to inline. They just want to stack as I keep trying to center them.
This is my HTML:
body{
background-color:black;
}
#light{
margin-left:50%;
margin-right:70%;
}
#dark{
margin-left:50%;
margin-right:50%;
display:inline-block;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
margin-left:500px;
}
<!DOCTYPE html>
<html>
<head>
<title>question reality.</title>
<link rel="stylesheet" type="text/css" href="intro page.css">
</head>
<body>
<h3>make your choice.</h3>
<div id="light"><button>Light</button></div>
<div id="dark"><button>Dark</button></div>
</body>
</html>
This is a screencap of what this thing is doing:
You forgot to set the #light div to inline-block. But probably a better way to do it is just to surround both buttons in a div and give that some css of text-align:center like so:
body{
background:black;
}
h3{
text-align:center;
color:white;
font-family:Courier New;
font-size:24px;
}
.text-center{
text-align:center;
}
<h3>Make Your Choice</h3>
<div class="text-center">
<button>Light</button>
<button>Dark</button>
</div>
Try this
CSS
body{
background-color:black;
}
#light,#dark,h3{
text-align:center;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
}
use text-align:center property instead of margins on left and right
Hope this helps...
Hope this would help:
body{
background-color:black;
}
#light{
position: absolute;
top: 45%;
left: 50%;
}
#dark{
position: absolute;
top: 55%;
left: 50%;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>question reality.</title>
<link rel="stylesheet" type="text/css" href="intro page.css">
</head>
<body>
<h3>make your choice.</h3>
<div id="light"><button>Light</button></div>
<div id="dark"><button>Dark</button></div>
</body>
</html>
You can try two things
Use following styling and remove unnecessary margin-right
button {
margin-top : __px;
}
Use position relative
button {
position: relative;
top:20%;
}
This will solve your problem
OR you can also try first answer at Vertically centering button using css
Let me know if you require any further help
Place your buttons in a main container div, 100% width, and change the margins of the buttons to auto. The parent div must be 100% width and the children, will center align if their margin is set to auto.
https://codepen.io/DannaB67/pen/KqRoJK
body{
background-color:black;
}
.main{
width:100%;}
#light{
margin:auto;
display:inline-block;
}
#dark{
margin:auto;
display:inline-block;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
text-align: center;
}
<body>
<div align="center" class="main">
<h3>make your choice.</h3>
<div id="light"><button>Light</button></div>
<div id="dark"><button>Dark</button></div>
</div>
</body>
having a very hard time getting my header image to be centered.
body {
font-family:Verdana, Genova, sans-serif;
background-color:#000;
}
divWrapper {
width:700px;
margin:20px auto;
}
divHeader {
width:700px;
background-color:#999;
}
and my html...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Just Messing Around</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="divWrapper">
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
</div>
</body>
</html>
just seems to stay stuck in the top left no matter what i do...
the "#" for IDs are missing
#divWrapper {
width:700px;
margin:20px auto;
}
#divHeader {
width:700px;
background-color:#999;
}
The image won't be centered just because you have two nested tags of the same width. You might try using ...
#divHeader img {
display:block;
text-align:center;
}
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
Truthfully, I forget (and I'm eating dinner). It all depends on what the final look of the header div will be. Everything centered? In that case, I might put text-align:center; on the <div> . You should get it by tinkering, though.
Above is true, also the #divHeader needs to have margin: auto; width must be smaller than the wrapper..
Check out this Jsfiddle. Change the text for your image and increase the divHeader width to be the size of your image (must still be less than your wrapper).
http://jsfiddle.net/f5yGQ/
body{
width:90%;
}
#divWrapper {
width:700px;
background-color:#999;
margin:auto;
}
#divHeader {
width:20px;
margin: auto;
}
You can ignore the body attribute
I'm new to CSS and im tryig to create the barebones structure of my template.
I have a div for header, main-content & footer. My footer & header fine, but i need to the main content div to "fill" the remaining space between the header & the footer. I've tried setting the padding-bottom property as the same height as the footer, but its not closing the gap to the footer, its simply setting the height of the div to the padding-bottom value.
My HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<LINK type="text/css" rel="stylesheet" href="main.css"/>
<TITLE>Template</TITLE>
</HEAD>
<BODY>
<div id="container">
<div class="header"></div>
<div class="main-content"></div>
<div class="footer"></div>
</div>
</BODY>
</HTML>
And the Cascading style sheet.
#container{
min-height:100%;
position:relative;
}
.header{
border:2px dashed blue;
height:150px;
border-radius:5px;
padding:10px;
}
.main-content{
border:2px dashed blue;
border-radius:5px;
padding:10px;
padding-bottom:100px;
}
.footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
border:2px dashed blue;
border-radius:5px;
}
html, body{
margin:0;
padding:1px;
height:100%;
}
You can use calc() for your .main-content
.main-content {
border:2px dashed blue;
border-radius:5px;
padding:10px;
height: calc(100% - 300px);
}
Demo
Also, I've tweaked few things here and there, for example, you won't need padding-bottom anymore, also, instead of using min-height: 100%; you should be using height: 100%;, and don't use uppercase-lowercase tags, keep an habit of writing the tags in lower case only.
I have this container div which has 2 more child div, i want the div with the class "movablebartoggleswitch" have a height of 100% of its container div, this must work in IE8 and in chrome, but it works either in one or another but not in both, could you tell me what's wrong?
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="configdiv" class="maindiv">
<div class="simpletext">
</div>
<br/>
<div name="containertoggleswitch" class="containertoggleswitch">
<div class="movablebartoggleswitch">
</div>
<div class="bartoggleswitch">
</div>
</div>
</div>
</body>
</html>
.maindiv
{
background-color:#00ABA9;
color:#FFF;
position:absolute;
width:250px;
height:500px;
font-family: 'Segoe UI';
font-weight: lighter;
font-size:20;
overflow-y:scroll;
overflow-x:hidden;
/*Works for all browsers except IE*/
overflow: -moz-scrollbars-vertical;
}
.simpletext
{
width:100%;
}
.containertoggleswitch
{
width:100px;
height:30px;
background-color:#FFF;
position:relative;
}
.bartoggleswitch
{
position :relative;
color:#000;
background-color:inherit;
height:100%;
width:100%;
border-style:solid;
border-width:5px;
border-color:#FFABAF;
}
.movablebartoggleswitch
{
clear:both;
position:absolute;
z-index:10;
width:20%;
height:100%;
background-color:#000;
float:left;
}
The problem is is that the border styles are causing the the element to expand, making the height change. To fix this, use box-sizing: border-box to change the box model to cater for padding to be part of widths
http://jsfiddle.net/XyQB4/
Don't know if this will help you or not, but I had a similar height issue with Chrome (worked fine elsewhere). The way I got it to work was in the HTML code for the DIV id, I put style="min-height: 660px" - or whatever height you need it to be. I didn't have a min-height or height:auto in my CSS for the DIV id. I do have... body, html{height:100%; height:auto;}