I suspect this has alerady been asked, but I could not find a way to solve my problem with previous answers, or I didn't have the ability to do it (I started to study CSS ten days ago).
So I want to emulate a paper page similar to the ones shown in Adobe Reader or MS Word: a white shadow rectangle against a gray background. My requirement, though, is that, since I'm going to display it in a browser, I want to fit the page vertically, leaving a fixed-pixel-sized small margin on top and bottom.
So far, I have got the code below, which do not expand vertically. I have already got the page to look ok with maximized window using height:99%, but then the bottom margin keeps changing size, and I didn't like the effect. I want the bottom margin with fixed-sized pixel dimensions.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- TODO: Expand page vertically but leave fixed top and bottom margins -->
<meta charset="UTF-8" />
<title>Relatório Html</title>
<style type="text/css">
html {height: 100%}
body {
height: 100%;
background-color: #ccc;
}
.paperpage {
position: relative;
width: 400px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
padding:30px;
background-color: white;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="paperpage">
<p>Content</p>
</div>
</body>
</html>
Try position: absolute; and top: 10px; bottom: 10px;
Like in This Example
You also can do this dinamically:
<body>
<div class="paperpage" id="paperpage">Try this</div>
</body>
<script type="text/javascript">
altura = window.document.height;
document.getElementById('paperpage').style.height = (altura - 20) +"px";
</script>
Related
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
Please note: I am new to CS. Brand new.
I want my button div to be placed horizontally inside the confirm div: example.
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
I am just placing two buttons inside my Div, so it's width should be equal to 128 (the total of two button witdh). Similarly the height should be equal to button height, but it isn't.
Second i want that mt button-div placed center horizontally . I tried left: 50% inside my button-div. But it is aligning the left margin with the centre of the confirm div. How can i do it?
EDIT
--------------------------------------------------
May be I didn't understand correctly, but if you want it inside then put it inside.
<div id="message">
Are you sure you want to
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
Demo
Update 1
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
Why, because <div>s are block tag, they always take 100% width of the containing element. It is not equal to the width of confirm Div.
To make the dialog-button take the actual width use display: inline-block as its CSS. Demo
Update 2:
To the best from what i understood. This is what you want. If not help me help you.
Update 3:
Ok, here is a demo with the image. I will leave the without image part to you. ;)
The div which the two buttons are in is actually the width of the of the comfirm div. The reasons why divs stretch to the width of their parent, is because that is block level element.
the reason every thing seems so confusing is that you have a lot left floating divs in your example. These are changing how things would normally laid out. To make things simpler why dont you try removing some of the more confusing elements. I suggest trying a more simple example like the one below:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/ie-css3.htc" type="text/css">
<link rel="stylesheet" href="css/messageDialogStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.1.js">
</script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js">
</script>
<script type="text/javascript" src="js/puff.js"></script>
<script type="text/javascript" src="js/jquery.dialog.js"></script>
</head>
<body>
<div id="confirm">
<div id="message">
Are you sure you want to
</div>
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
If you want to center a button. If you change the margin-left and margin-right to auto you will center any block element. try changing your css to the css below:
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#message {
width: 280px;
border:1px solid #ccc;
white-space: normal;
word-wrap: break-word;
margin:20px 0 0 0;
overflow: hidden;
}
#dialog-button {
border:1px solid #ccc;
position: relative;
}
button {
display:block;
margin-left:auto;
margin-right:auto;
width: 64px;
}
Note if you have to make the button a block element for the margin auto trick to work.
You can find more about block level element here.
I'm trying to design a page that has two columns of content, div#left and div#right. (I know these aren't proper semantic identifiers, but it makes explaining easier) The widths of both columns are fixed.
Desired result - Wide viewport
When the viewport is too narrow to display both side-by-side, I want #right to be stacked on top of #left, like this:
Desired result - narrow viewport
My first thought was simply to apply float: left to #left and float: right to #right, but that makes #right attach itself to the right side of the window (which is the proper behavior for float, after all), leaving an empty space. This also leaves a big gap between the columns when the browser window is really wide.
Wrong - div#right is not flush with the left side of the viewport
Applying float: left to both divs would result in the wrong one moving to the bottom when the window was too small.
Wrong - div#right is not on top of div#left
I could probably do this with media queries, but IE doesn't support those until version 9. The source order is unimportant, but I need something that works in IE7 minimum. Is this possible to do without resorting to Javascript?
Add an outer container to the 2 columns which is floated left, but without a specific width.
Check the fiddle.
This gets you pretty close (disclaimer: I only tested it in Chrome and Firefox), using CSS only:
<html>
<head>
<style type="text/css">
div.main1{ width: 40%;
min-width:200px;
height: 400px;
border: solid 1px black;
display:inline-block;
}
div.main2{ width: 40%;
min-width:200px;
height: 400px;
border: solid 1px black;
float:left;
}
</style>
</head>
<body>
<div class="main1">right div</div>
<div class="main2">left div</div>
</body>
</html>
The trick is the inline-block display style... Someone else might be able to build on this and do better, but I think it's close.
Aerik
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.4");
</script>
<style type="text/css">
/*html body { height:100%; }*/
#left { width: 500px; margin: 0 6px 0 6px; background-color:Blue; }
#right { width: 500px; margin: 0 6px 0 6px; background-color: Orange; }
#container { width: 1024px; }
</style>
<script type="text/javascript">
$(function () {
setUpFloats();
$(window).bind("resize", setUpFloats);
});
function setUpFloats() {
if ($(window).width() <= 1024) {
$('#container').css('width', $('#right').width());
$('#container').css('padding-left', '12px');
} else {
$('#container').css('width', 1024);
$('#container').css('padding', '0');
}
}
</script>
</head>
<body>
<div id="container" style="float:left;">
<div id="right" style="float:right;">right</div>
<div id="left" style="float:right;">left</div>
</div>
</body>
</html>
EDIT:
I fixed it so the orange (right) is on top. silly me got confused which image was right.
EDIT 2
Fixing padding
This is not possible. It's the way HTML works (or does not work :P ).
At least not a way I know of.
You'll always have space at the left side I guess.
I'll try some things though and let you know if I find something.
I'm trying to put a footer bar at the bottom of the browser no matter what the length of the content is. The footer bar should always be visible to the user and should be on the top layer. Following is my code:
<html>
<head>
<style type="text/css">
#wrapper {
width: 910px;
margin: 0 auto;
padding: 0px 20px 50px 20px;
text-align: left;
}
#footer-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
bottom:0;
clear:both;
font-size:11px !important;
left:0;
position:fixed;
white-space:nowrap;
width:100%;
z-index:8000;
}
</style>
<script>
var counter = 0;
function addContent(ctr)
{
document.getElementById(ctr).innerHTML=document.getElementById
(ctr).innerHTML+"
dynaContent"+counter; counter++;
}
</script>
</head>
<body>
<div>
<div><input type="button" onclick="addContent('wrapper')" value="Add dynaContent" /></div>
<div id="wrapper" style="color:#FFFFFF; background-color: #111111;"> STATIC TEXT - HEADER-WRAPPER </div>
<div style="color:#FFFFFF;background-color: #555555;">STATIC TEXT - FOOTER-WRAPPER</div>
</div>
</body>
</html>
It's working fine in Mozilla Firefox and giving the intended results, but, in IE, the footer bar always sticks just under the header.
Please help.
Thanks in advance,
Shailesh.
First of all, your footer wrapper is missing the id attribute: <div id="footer-wrapper" ...>
Then it depends on which version of IE you're using:
It won't work with IE6 at all (doesn't understand position: fixed)
For IE7 and IE8, position: fixed works only, if you put it in standards mode. The easiest way to do this, is to
insert <!doctype html> as the first line (it must be the very first line, no comments or anything in front of it)
There are, however, other techniques to create a footer, see e.g. How do you get the footer to stay at the bottom of a Web page?
I am trying to get an image to stretch out a div element in my new Tumblr blog theme.
Currently my photo div is sizing to the full width of its parent container. The problem I have is that I also have a captions div below the photo and if the photo is not the full width of its containing div I dont want the captions to spill past the edges of the photo.
The Problem !
This is what I am after:
alt text http://dl.getdropbox.com/u/973862/problem.jpg
Here is a drawing !
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Brant Winter">
<!-- Date: 2009-04-26 -->
</head>
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
</style>
<body>
<div class="container">
<div class="photo">
<img src="http://8.media.tumblr.com/mFYIJY2I7mpit79h73TC9xa7o1_400.jpg">
<div class="caption">Sausage dog airtime</div>
</div>
</div>
</body>
</html>
And this is what it looks like in my browser:
alt text http://dl.getdropbox.com/u/973862/Picture%202.png
This is what it looks like
The container div should be centered, the image should be centered within that and the caption text should not be allowed to go past the edges of the photo ( if there was enough text to do so )
Not sure if I am making any sense, but any help would be appreciated - I have spent hours on this today !!!
You mean like centering the photo?
.photo {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
text-align:center; <---
}
I think the easiest solution would just to be to fix the width of the container. Why is it 520px?
If it has to be 520px, though, then just center the stuff in the container and add auto-margins for the caption:
<style type="text/css">
.container {
width: 520px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.photo {
border: solid 1px #ccc;
margin-left: auto;
margin-right: auto;
}
.caption {
max-width: 333px;
margin-left: auto;
margin-right: auto;
}
</style>
The max-width property, in particular, will prevent the caption from spilling past the edges of the photo.
If you don't mind using jQuery to resize it, you could try something like this:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".container").css("width", $(".photo img").css("width"));
});
</script>
That finds the width of the image inside the div (note the space between ".photo" and "img") with class "photo" and applies that width to the div with class "container". Just to be safe, you'll probably want to use IDs if possible, but this will work as long as the class names are unique.