Hello I have a lot of trouble finding a way to center a div in safari on ipad...this works in chrome on ipad but safari doesn't scale in landscape format...the are margins on the left and right but i got to scroll all over the whole thing. Any ideas to make this work in both browsers..chrome and safari?
HTML:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
CSS:
#wrapper{
margin: 0 auto;
width:90%;
height:90%;
background-color: black;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
This is how I would do this. Here is an example
HTML:
<div id="wrapper">
<div class="outer">
<div class="inner">
<div class="content">
</div>
</div>
</div>
</div>
CSS:
#wrapper{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.outer{
display:table;
table-layout:fixed;
height:100%;
width:100%;
}
.inner{
display:table-cell;
text-align:center;
vertical-align:middle;
width:100%;
position:relative;
}
.content{
width:90%;
height:90%;
background:red;
display:inline-block;
}
If you're defining your width to be 90%, you can avoid the issue and simply set margin: 0 5%;
Related
I have html page ,container div contain header ,content and footer div ,the html cod and css code is like this:
HTML-Code:
<html>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="content2"></div>
</div>
<div class="footer"></div>
</div>
</html>
Css code:
header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}
.content{
min-height: 100%;
width:100%;
background-color:#006;
margin-top:70px;
margin-bottom:60px }
.content2{
margin:auto;
min-height: 100%;
width:95%;
background-color:#FFFEA5;
padding-bottom: 20px;
}
.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}
I want the content2 div be full screen either it didn't contain anything ,i did codes above but didn't work ,it is appear like attached image.
Maybe you could try to put all those divs to a parent div like and set to that div 100% width and height(height is not necessary, it will set 100% too) and then you will have div container occupying all screen.
I believe you are missing and need body tag (among other things) which will set whole background to blue.
body{
background-color:#006
}
header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}
.content{
min-height: 100%;
width:100%;
background-color:#006;
margin-top:70px;
margin-bottom:60px }
.content2{
margin:auto;
min-height: 100%;
width:95%;
background-color:#FFFEA5;
padding-bottom: 20px;
}
.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}
<html>
<body>
<div class="container">
<div class="header"></div>
<div class="content">
<div class="content2">test</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
Thank you for all of you ,i changed css files and made it like this ,and it is works now :
.header{
padding-bottom:5px;
width:100%;
position:fixed;
top:0;
z-index:100;
height:70px;
background-color:#006}
.footer{
text-align:center;
width:100%;
position:fixed;
bottom:0;
z-index:100;
height:70px;
background-color:#006}
.content{
min-height: 100%;
width:100%;
background-color:#FFFEA5;
margin-top:70px;
margin-bottom:60px }
.content2{
height: 100%;
margin:auto;
width:95%;
background-color:#FFFEA5;
padding-bottom: 80px;
}
.wrapperDiv{
background-color: #006;
padding:0;
margin:0;
height: 100%;
}
How do I position the navbar inside the header? If I float the divs inside the header it works fine. But when I remove the float the navbar positions below the header. I dont understand it. How do I fix it?
html{
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
}
.nav{
height:90%;
width:75%;
margin:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basic</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<div class="nav">
</div>
</div>
</div>
</body>
</html>
bydefault div element are block label element that's it took 100% width.
you can change it's to 'inline' element using float, inline-block. >br/>
check updated snippet below
html {
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
display: inline-block;
}
.nav{
height:90%;
width:75%;
display: inline-block;
}
<div id="container">
<div id="header">
<div class="logo">logo</div>
<div class="nav">
Nav1
Nav2
Nav3
Nav4
</div>
</div>
</div>
If u make the logo position:absolute it wont push down the navbar.
You do have to specify heigth and width since it will not compare to the parent div.
.logo{
height:40px;
width:100px;
position: absolute;
}
An other way of fixing this is by giving a negavtive margin to the navbar.
This way you dont have to specify the width and heigth of the logo.
.nav{
height:90%;
width:75%;
margin:-35px auto;
}
Can someone plz show me how to center this image in its div while keeping the image overlapping its div top.
jsfiddle.net/MalcollmS/0ees82hc
<body>
<div id="outerdiv">
<div id="innerdiv">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
<div id="body">
</div>
</div>
</div>
</body>
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin-left:auto;
margin-right:auto;
margin-top:-90px;
}
Malcolm
Just text-align:center; add to #innerdiv
jsFiddle example
img tags are display: inline-block by default which can be centered with text-align: center; on the parent element:
#innerdiv {
...
text-align: center;
}
JSFIDDLE
Try using % for margin or assign it to a div here
<body>
<div id="outerdiv">
<div id="innerdiv">
<!-- assign div --><div class="img_holder">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
</div>
<div id="body">
</div>
</div>
</div>
</body>
Css
body{
height:100%;
background-color: #142758;
padding-top:50px;
}
#outerdiv {
margin:auto;
width:70%;
height:500px;
background-color:#778CAC;
}
#innerdiv {
width:95%;
margin:auto;
height:95%;
background-color:white;
position: relative;
top: 50%;
transform:translateY(-50%);
}
header {
width:100%;
}
#banner {
background-image:url('lesterbanner.jpg');
width:100%;
}
.img_holder{
position: relative;
width:300px;
margin: 0 auto;
top: -30px;
}
#banner {
background-image:url('lesterbanner.jpg');
width:300px;
margin:-2% 0 0 42%;
}
I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.
the CSS:
html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-align:center;
float:left;
position:relative;
body:before;
content:"";
overflow:auto;
margin-top:50px;
padding:10px;
}
#footer, #push{
height:50px;
}
.clearboth {
clear:both;
}
The HTML:
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
and your css, I took away the left -5%:
#page {
min-height: 100%;
position:relative;
}
#main {
padding-bottom: 50px;
}
#footer {
background-color:#4a4a4a;
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding:10px;
font-family:'discoregular';
display: block;
overflow:auto;
text-align:center;
float:left;
margin-top:50px;
}
change the css to the following.You can chage the "bottom" so that it can come up
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px;
padding:10px;
}
All I added into my footer styles after reading this post was- overflow:auto; - and it's sorted now
I have this HTML:
<div id="cont">
<div class="chatarea">
<div class="row">
<div class="message">
<div class="nick">
<p>Some Nick</p>
</div>
<p>Some Message</p>
<div class="timestamp"><p>Some Timestamp</p></div>
</div>
</div>
</div>
</div>
and this CSS:
#cont {
width:100%;
text-align:center;
}
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px;
width:80%;
}
.nick
{
width: 400px;
border-right-style: solid;
text-align: center;
height:100%; position:absolute; top:0; left:0;
}
.timestamp
{
width: 400px;
border-left-style: solid;
position:absolute; top:0; right:0; height:100%;
}
.message
{
border-style: solid;
padding:0 50px 0 140px;
overflow:hidden;
position:relative;
}
im trying to display 3 divs (left and right smaller than the centre one) in the centre of the page. 80% of the browser width.
i have made a fiddle here: http://jsfiddle.net/zQ9pu/
im having a bit of trouble with it - what would be the best way to do this?
Just add
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}
It works fine !! here is ur new fiddle http://jsfiddle.net/zQ9pu/2/
Contain those divs in a parent block level element which has a specified width and then apply CSS margin-left: auto; margin-right: auto; on it.