I have this page which is actually rendered fine in all browsers, meaning.. when browser is contracted, to show mobile version of the layout, based on #media query css settings, but not in IE8, as far as I can check. How do I get around of this problem.
Here is all the code btw:
<html>
<head><style>
body{margin:0px; padding:0px;}
#a{height:150px; background-color:#ffffff; border-bottom:1px solid #CCC;}
#x{min-height:350px; margin-top: 10px; background-color:#CCC;}
#y{min-height:30px; margin-top: 10px; background-color:#CCC;}
#media all and (min-width:700px){
#b{width:100%; min-height:400px;}
#sep {
margin: auto;
overflow: hidden;
width: 960px;
}
#x{width:65%; float:left;}
#y{width:32%; float:right; }
#c{background-color:#656565; height:80px;}
.for-mob{display:none;}
.for-desc{background-color:green;}
}
#media all and (max-width:700px){
.for-mob{background-color:green;}
.for-desc{display:none;}
#b{width:100%; min-height:400px; }
#x{width:100%; display:block; }
#y{width:100%; display:block; }
#c{background-color:#656565; height:100px;}
}
</style></head>
<body>
<div id='a'> <h1>I am header </h1>
</div>
<div id='b'>
<div id='sep'>
<div id='x'>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
<h1>I am content </h1>
</div>
<div id='y'>
<h1>I am sidebar </h1>
</div>
</div>
</div>
<div class='for-desc'><h1>If you shrink the browser, I become invisible</h1> </div>
<div class='for-mob'><h1>If you maximize the browser, I become invisible</h1></div>
<div id='c'>
<h1> I am a simple footer </h1>
</div>
</body>
Response.js only creates rules on elements, to emulate the media query use
https://code.google.com/p/css3-mediaqueries-js/
It would be better to include a specific css only for IE<9 but it is up to you :)
Related
I want my display to look like this.
But instead, it looks like this
My Code goes like this.
HTML
<body>
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</div>
</body>
CSS
body{
text-align:center
}
.top{
position:relative;
}
.left{
position:absolute;
width:50%;
}
.right{
position:absolute;
width:50%;
left:50%;
}
.bottom{
position:relative;
}
What necessary changes should I make in my code. I want to keep things dynamic and not specify the height of divs in pixels.
Don't. Positioning is unsuited to this type of layout.
Use the right tool for the job. Use flexbox to put the two elements side-by-side, and let normal flow handle the rest.
h1 {
text-align: center;
}
.top {
display: flex;
}
.top>div {
flex: 0 0 50%;
}
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</div>
I would like to print a different footer on each page of my document (because I have to display the page number).
I tried this CSS but it put every footer one over the other instead of changing it on every page:
section {
page-break-before: always;
margin-top: 30px;
page-break-inside: avoid;
}
footer {
bottom:0px;
height:30;
right:0%;
left:0%;
position:fixed!important;
position:absolute;
width=100%;
top:expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight?
document.documentElement.clientHeight:
document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop))+'px');
text-align:center;
visibility:visible;
}
Html
{{# each array}}
<section class="row">
...
<div class="col-xs-12">
...
</div>
<footer>
<small> Page {{math #index '+' 7 }} </small>
</footer>
</section>
{{/each}}
So the final html would be:
<section class="row">
...
<div class="col-xs-12">
...
</div>
<footer>
<small> Page 8 </small>
</footer>
</section>
<section class="row">
...
<div class="col-xs-12">
...
</div>
<footer>
<small> Page 9 </small>
</footer>
</section>
<section class="row">
...
<div class="col-xs-12">
...
</div>
<footer>
<small> Page 10 </small>
</footer>
</section>
How can I do it with CSS? I don't care if is not supported on every browser but it has to work in Chrome.
Thanks
If you can change your HTML a bit, then you can do this with HTML data attributes and css
small::after {
content: attr(data-page);
}
<footer>
<small data-page="1">This is page number </small>
</footer>
After hours of researching I found how to do it:
CSS:
section {
position: relative;
height: 95%;
}
Html:
<section>
<div style="position: absolute; bottom: 0px; right:20px;"><small>Page {{page}}/{{totalPages}}</small></div>
</section>
try this:
html:
<div class="divFooter">{{page}}/{{totalPage}}</div>
css:
#media print
{
div.divFooter
{
position: fixed;
bottom: 0;
}
}
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I have made a very simple layout in CSS in ASP.net.
HTML
<div id="header">
<h1>Header</h1>
</div>
<div id="nav">
<h1> Site
</div>
<div id="section">
<h1>Content</h1>
</div>
<div id="footer">
Footer
</div>
CSS
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
text-align:center;
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
jsfiddle
What I want is that if I change the size of footer,header or content area in my design view of ASP.net designer all other areas resize themselves accordingly.
that is increasing or decreasing any section has cascading effect on all other areas.
For example if I increase the size of footer then size of content and header should make their size at par with the footer.
How this could be done?
So you basically want a responsive design? I have added a wrapper div around your contents, when you increase the width of that, width of other elements will also get increased as the width is given in percentage. Please see fiddle for more details https://jsfiddle.net/ptgcfgks/1/
<div id="wrapper">
<div id="header">
<h1>Header</h1>
</div>
<div id="nav">
<h1> Site
</div>
<div id="section">
<h1>Content</h1>
</div>
<div id="footer">
Footer
</div>
</div><!--wrapper-->
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want