I'm creating a web page to be printed. It could wrap to 2 pages. There has to be a small, black square in each corner for a scanner to use for reference. I'm pretty sure I just need divs for the 4 black squares in the corners and one more div for main content area. How do I position the 4 corner squares so that each of them is in its own corner of the printed page with the content div filling the center? The center content should be inside the corner squares left to right, but could overlap with them top to bottom.
EDIT: I uploaded a sample image, but it's not showing.
EDIT: Here's what I have so far:
http://jsfiddle.net/7DjTf/
<html>
<head>
<title>Printable Form</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="UpperLeftScanningIndicator"></div>
<div id="UpperRightScanningIndicator"></div>
<div id="Content">Here is some content.<br /><br /><br /><br />Here is some more.</div>
<div id="LowerLeftScanningIndicator"></div>
<div id="LowerRightScanningIndicator"></div>
</body>
</html>
#Content {
border: solid 1px black;
width:90%;
margin-left:auto;
margin-right:auto;
}
#UpperLeftScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: left;
}
#UpperRightScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: right;
}
#LowerLeftScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: left;
position:absolute;
bottom:20px;
}
#LowerRightScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: right;
position:absolute;
bottom:20px;
right:500px;
}
I'm not sure how to get the lower right block to go over to the right. Float would work, but using "absolute" seemed to break that. Note: your browser window needs to be pretty wide for this sample to look any good. Also, I'm not sure how to make those black squares appear on every page no matter if there is only one page or if there is a second page printed.
its actually pretty easy.
I've updated your fiddle - http://jsfiddle.net/avrahamcool/7DjTf/1/
you have to use the right attribute correctly.
I would recommend using the same technique for all indicators. so use position: absolute; with all of them, and set the top/bottom left/right accordingly
also, no need for repeating the style. use class instead.
like this: http://jsfiddle.net/avrahamcool/7DjTf/2/
Update:
apparently, the #page CSS3 pseudo elements rules are not implemented yet in the browsers, so we'll have to fall back to JavaScript. (if it was, you'll have a perfect solution like this article explains)
first: because background-color is not printed, I switched to img tag.
second: the first solution had only 4 indicators (2 at the beginning & 2 at the end), and you want 4 indicator for each printed page.
so here is a new solution: http://jsfiddle.net/avrahamcool/7DjTf/5/
the idea is to add dynamic indicators as the content grows.
the indicators should be visible only when printing.
the part that visualize the indicator is the .indicator rule and he's located in #print rule.
so far, I didn't manage to write a code that 'knows' how many pages will be printed..
so the for loop run a constant number of times (and I don't know how to solve this part)
inside the loop: I add 4 dynamic indicators (2 in the left and 2 in the right) each time, the offset should grow in such way that the next indicators would be in the next page..
If you know how many pages you're gonna have, its a perfect solution for you.
Notice:
this offset between pages is different when printing from different browsers.
I've tested my solution in Chrome. (IE & FF requires a little tuning);
if you want right bottom icon to set in right you can use this
#LowerRightScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: right;
position:absolute;
bottom:20px;
right:20px;
}
Related
I have an inner of fixed width containing the content of variable size. I want the height of that inner-container to be as big as the content, and at least as big as the screen's height (when the content is smaller). The page also has a fixed size footer.
Normally I'd think of setting min-height: 100% to both inner and outer (root) containers, but that doesn't work in CSS.
The code I present below is a simplified example of the situation I have on a bigger page (with much more various elements in the root-container). A green inner-container is not filling the entire screen's height as I'd like it to be. I did manage for it to do so (for example by setting root-container's height instead of min-height, but then the rendering behaved wrongly when the content was bigger than the screen's height (you can quickly simulate that by changing the font-size to a bigger value, like 21px). I want to have it working (the green column filling at least the screen's height, black on it's both sides throught the whole height and the footer on the very bottom) in both cases.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}
#root-container {
min-height: 100%;
background: black;
color: white;
margin-bottom: -200px;
}
#root-container:after {
height: 200px;
content: "";
display: block;
}
#inner-container {
min-height: 100%;
width: 400px;
background: green;
color: white;
font-size: 11px;
margin-left: auto;
margin-right: auto;
}
#footer {
height: 200px;
background: orange;
color: black;
}
h1 {
margin-top: 0;
}
</style>
</head>
<body>
<div id="root-container">
<div id="inner-container">
<h1>Content</h1>
And when the body finally starts to let go<br/>
let it all go at once<br/>
not piece by piece<br/>
but like a whole bucket of stars<br/>
dumped into the universe<br/>
Whoh! Watcb it go!<br/>
Good-bye small hands, good-bye small heart<br/>
good-bye small head<br/>
My soul is climbing tree trunks<br/>
and swinging from every branch<br/><br/>
They're calling on me<br/>
they're calling on me<br/><br/>
Do you think I'm an animal?<br/>
Am I not?<br/>
Do you like fur<br/>
Do you wanna come over<br/>
Are we captive only for a short time<br/>
Is there splendor, I'm not ashamed<br/>
Desire shoots through me<br/>
Like birds singing<br/>
(The way you move no ocean's waves were ever as fluid)<br/><br/>
They're calling on me<br/>
they're calling on me<br/>
I hit the mark!<br/>
I target moon, I target sky, I target sun<br/>
Fall down on the world before it falls on you<br/><br/>
Like beggars, like Stars<br/>
like whores, us all<br/>
Like beggars, like dogs<br/>
Like Stars, us all<br/><br/>
Shoot straight for my heart<br/>
(And when you were near no sky was ever quite so clear)<br/><br/>
Like stars, so small<br/>
Like us, when we fall<br/>
Like beggars, like whores<br/>
Like lovers, Get Up!<br/>
Get up, too far
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
And the same example uploaded to JSFiddle: http://jsfiddle.net/gNT8m/
This is a bug: children of parents with min-height can't inherit the height property.
There are many potential workarounds, but you're right that this should work the way you initially tried.
Update:
As to workarounds, the simplest that occurs to me is to set display: flex on your #root-container. I haven't cross-browser tested this solution, so you might want to investigate it further, but using flexbox is a good way to go.
See it working.
You'll want to add a few other niceties, like adding position: relative to your footer and adding some space (padding: <your footer's height>px) to your #inner-container to make sure your footer doesn't cover up any content.
I'm new to design and I need to place the two imgs beside each other, with some space between.
This is what currently my site looks: Dont worry about the cut off, it is suppose to be like that. I need to prepare this to allow me to later on add responsive elements on to it so I cannot use absolute positions or anything that will lock the image into place.
Both Images are the same height at 125 px. When I float both the pictures left or right, the pictures appear 95% cut off at the edges of my webpage. I dont understand why it's being place underneath each other, there seems to be plenty of room for the second image to be on the same level.
Heres what I have so far: "navi" is my container or wrapper... mainlogo and slidertop i used to experiment and currently have no code under each.
<div id="navi">
<div id="mainlogo"><header></header></div>
<div id="slidertop"><header id="topad"></header></div>
<div style="clear:both"></div>
</div>
#navi{
height: 130px;
}
#mainlogo{
}
#slidertop{
}
This is how Im calling my images:
header{
background: url(../Images/logo1.gif) no-repeat 15% 0px;
border: none;
height: 125px;
top:100px;
}
header#topad{
background: url(../Images/TopAd.gif) no-repeat 80% 0px;
border: none;
height: 125px;
vertical-align: middle;
}
In the original code you posted, I think the divs are all 100% of the available width, and they will appear on top of each other on the page. You can see this for yourself if you temporarily add a coloured border around each div so you can see where they are.
If you want them side by side, you have to add styles to accomplish this. For example, you could float them and specify the widths:
header { width: 45%; float: left; }
header#topad { float: right;}
E.g.: http://codepen.io/anon/pen/ynuoa
Have you tried floating the divs?
#mainlogo{
float: left;
}
#slidertop{
float: left;
}
I'm needing to create 3 DIVs in a footer container DIV that are aligned left, middle and right. All the CSS examples I've seen make use of floats as I've done. However, for some reason DotNetNuke is not parsing the CSS correctly. I'm finding that the left pane is floating correctly, but the right and middle panes are positioned immediately below it instead of next to it. Here's a snippet from my ascx file:
<div id="footer">
<div id="footerleftpane" runat="server">
<dnn:LOGO id="dnnLogo" runat="server" />
<h3>Driving business performance.</h3>
<h3>Practical Sales and Operations Planning</h3>
<h3>for medium sized businesses.</h3>
</div>
<div id="footerRightPane" runat="server">
<dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br />
<dnn:PRIVACY id="dnnPrivacy" runat="server" />
<dnn:TERMS id="dnnTerms" runat="server" />
</div>
<div id="footerMidPane" runat="server">
</div>
</div>
Here's the relevant portion of my CSS file:
#footer
{
width: 960px;
border: 1px;
}
#footerleftpane
{
width: 300px;
float: left;
}
#footerRightPane
{
width: 300px;
float: right;
}
#footerMidPane
{
padding:10px;
}
What changes should I make to above to achieve the desired layout?
Update: I tried suggested change but the layout is still not working as seen on this salesandoperationsplanning.net page that demonstrates what I want.
First of all, you should target the names of the elements that appear in your HTML. Looks like your CMS appends some sort of preffix and your ids doesn't match. (You have #footerleftpane but it renders as #dnn_footerleftpane)
Also, as you are using a fixed width container there is no use to the troubles generated by not passing a width to the middle container. Give it a width and see if it works. If it doesn't you can try two more methods, if your blocks are in the correct source order (left, center, right).
You can float them all left, making sure its widths and paddings fit on the container.
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
width: 300px;
float: left;
....
}
You can use display: inline-block, also making sure to fit your widths and paddings on the container
#dnn_footerleftpane, #dnn_footerMidPane, #dnn_footerRightPane {
....
display: inline-block;
...
}
it's a matter of positions, dimensions and wrong css declarations.
1) position
You have the mid pane after the right one in your page source!
2) dimensions
I made a quick test and you can investigate further, but 300px is too much for the width of side panes. Something in content probably modifies width.
3) css declarations
DotNetNuke (actually all ASP.Net controls do) renders server-side controls (declared as runat="server") assigning them an unique id, thus what you expect to be #footerleftpane in your css, will be #dnn_footerleftpane.
After repositiong your middle pane just... in the middle of the other two, modify your css like this:
#footer
{
width: 960px;
height: auto;
margin:0;
padding:0;
border: 0;
}
#dnn_footerleftpane, #dnn_footerRightPane{
width: 290px;
float: left;
}
#dnn_footerMidPane
{
width: auto;
float: left;
}
Your footer container is 960 pixels. Your left & right element are 300 pixels but you have not specified a width for your middle element, so it defaults to the full width of its parent, which pushes itself to a new line all by itself.
Subtract the padding and the middle element can't be wider than 340 pixels.
http://jsfiddle.net/y8e4T/
http://jsfiddle.net/y8e4T/show
#footerMidPane{
width: 340px;
float: left;
padding: 10px;
}
I have an issue with a site I am working on where the right wrapper keeps dropping down below the site. Obviously I want it to stay on the right hand side.
I've coded up a test case which shows my issue (I think) and I'm wondering if there is a better way to do things.
The website url is http://www.musicworkshop.co.nz/
Below is the test case which (I think) is the cause of my issue, however it may not be. The pink box drops down if it does not fit within the page width.
I've also included a diagram of what I'm trying to achieve along with a screenshot of the right wrapper not where it should be.
Is there a better way to do this?
John
<html>
<head>
<title> Test page </title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="superbox">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
</div>
</body>
</html>
#superbox{
width: 1000px;
height: 100px;
margin: 0 auto;
}
#box1{
height: 100px;
width: 200px;
background: red;
float: left;
}
#box2{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
#box3{
height: 100px;
width: 200px;
background: blue;
float: left;
}
#box4{
height: 100px;
width: 200px;
background: green;
float: left;
}
#box5{
height: 100px;
width: 200px;
background: grey;
float: left;
}
#box6{
height: 100px;
width: 200px;
background: pink;
float: left;
}
alt text http://www.musicworkshop.co.nz/website.png
alt text http://www.musicworkshop.co.nz/website_right-wrap-missing.png
Since all your boxes are 200px wide go for a %.
if it doesn't fit into the page width, this is the way float works... if you want to have the boxes in one line whatever happens, set your superbox with to the with of all boxes (which is 200*6 = 1200 / not 1000).
EDITS:
Looking at your example site I think you mean when the viewwindow is small that you want the div to go off-screen. In your case the best solution is to make that repeating image the background-image of your body.
Something like:
body { background: #6593aa url('http://www.musicworkshop.co.nz/templates/musicworkshop/images/right_repeater.png') repeat-x; }
And make sure to take the backgrounds off your other divs. You'll probably want to pick a different image to repeat with too rather than just the right segment. I can see you were trying to get it to match up with the header nicely but the way you are going about it just won't work. My best solution is to use a transparent background on your leftwrap and rightwrap near header (use a .gif or .png with transparency for your rounded corner rather than the current image with the bit of "amplitude wave" in the background).
Summary:
Remove all wrapper etc. backgrounds.
Change the "rounded corner" images to have a transparent background.
Remove your "repeating" divs.
Apply that CSS above to the body.
Original:
What's your desired behaviour? For superbox to go 1200px? Unfortunately you can't have fixed sizes and "auto-grow".
If you want 'superbox' to grow to fit its children then don't specify a width (i.e. leave it width:auto).
If you instead want the children to resize if they are too large for 'superbox' use percentage widths on them.
It sounds like you want your boxes to stay their current size and not wrap. Well try and imagine what would happen if you put a new div under 'superbox' and wrapping your 'box_'es that had a width of 1200px. It's going to make 'superbox' grow to wrap around it so at the end of the day you might as well just make 'superbox' this larger width in the first place!
I've found a lot of similar questions, and tried out several solutions (including some of the so-called "holy grail" CSS layouts), but they don't quite do what I need.
I have a containing div (a CSS containing block) with id right. Inside it on the left side, I want a fixed-width div (a splitter bar, but it doesn't matter what it's being used for; id splitpane); on the right, filling the rest of the space, another div (id right-box below).
I've tried making the two inner divs display: inline-block (with vertical-align: top), setting the left one to width: 3px, but then there's no way to set the right to have width 100% - 3px. I've also tried using the float: left/margin-left: -100%/margin-left: 3px trick, but it has the same problem: the 100% plus the 3px overflows the parent containing block and causes a scroll bar to pop up. (Of course, it's not the scroll bar per se that's the problem; I could use overflow: hidden to remove it, but then content on the right would be truncated.)
Currently I'm using width: 99.5% for the right div, but that's a terrible hack (and is subject to overflow depending on screen width). It looks a bit like this:
<div id="right"><div id="splitpane"></div><div id="right-box">
...
</div></div>
With CSS as follows (float version, but the inline-block version is similar):
#right {
display: inline-block;
vertical-align: top;
height: 100%;
width: 85%; /* this is part of a larger div */
}
#right-box {
width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
height: 100%;
}
#splitpane {
float: left;
width: 3px;
height: 100%;
background: white;
border-left: solid gray 1px;
border-right: solid gray 1px;
cursor: e-resize;
}
Is it even possible to do this? This is for an internal app., so solutions only need to work in Firefox 3 (if they are specific to FF3, though, preferably it's because the solution is standards-compliant but other browsers aren't, not because it's using Firefox-only code).
DIVs are the wrong element type for this since they don't "talk" to each other. You can achieve this easily with a table:
<table style="width:200px">
<tr>
<td id="splitpane" style="width: 3px">...</td>
<td id="rightBox" style="width: 100%">...</td>
<tr>
</table>
The 100% will make the rightBox as wide as possible but within the limits of the table.
This is possible. Because block level elements automatically expand to take up any remaining horizontal space, you can utilise a block level element next to an uncleared floated element with your desired width.
<style type="text/css">
div {
height: 100px;
}
#container {
width: 100%;
}
#left {
background: #FF0;
}
#splitpane {
position: relative;
float: right;
background: #000;
width: 3px;
}
</style>
<div id="container">
<div id="splitpane"></div>
<div id="left"></div>
</div>
See http://jsfiddle.net/georeith/W4YMD/1/
why you didn't use margin-left (since it was float layout) on right box?
so no need to create a splitter div...
#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}
yeah something like that, i hate empty div, it's not semantic and it's like putting a splitter on the "old" table way
If the div #right-box is only going to contain non-floated content it might be an idea to just put the content inside #right instead and let it wrap around the floated #splitpane.