I'm printing fixed size index cards as 'DIV'. Two fit side by side on A4 with float=left. Works fine for the first seven pages, then on page eight, switches to single column. So I tried float=right and that works fine as well, except that on each page, the output shifts a little to the left and (you guessed) after eight pages, single 'column' again. Note that within each page, the DIVs all line up... they just move on successive pages. Can't show the HTML 'cos it is generated by Javascript.
The relevant CSS looks like this
#media print {
.card {
float: left;
width: 85.6mm;
height: 54mm;
page-break-inside: avoid;
}
}
The generated HTML looks something like this
<div class="card">
<h2>name</h2>
lines of stuff<br />
</div>
<div ...
</div>
and so on.
It would seem that the right margin is being increased with each new page.
I'm running Firefox and Ubuntu. Anyone encountered anything like this. Bug in Firefox ?
Related
I have just (i.e., today!) started with the CSS grid but it doesnt seem to work. Before that however I notice that every single tutorial about it uses class instead of id. Is this because you have to use classes and not ids? I used class anyway but it still didn't work!
OK... just a simple structure to start with. I want a header, LH column for nav, main area, and RH column for other stuff (css in external stylesheet) but the header text and picture just appear on the LHS rather than 200 pixels in.
.container
{
display:grid | inline-grid;
grid-template-columns:200px auto 250px;
grid-template-rows: 300px auto;
}
.navbar
{
grid-column-start:1;
grid-column-end:2;
grid-row-start:2;
grid-row-end:3;
}
.header
{
grid-column-start:2;
grid-column-end:4;
grid-row-start:1;
grid-row-end:2;
}
and the HTML: (obviously inside the <body> tags!)
<div class="container">
<div class="header"><h1>Astronomy Speakers - Astronomical Societies</h1><img src="headerpic.jpg" alt="astrospe akers header" style="margin-left:40px" /></div>
</div>
for .container, you cannot have both grid and inline grid.
What I think happened here is you copied this code from a website that had grid | inline grid displaying as the options for the display property
The difference between class and Ids is that classes can be used several times on the same page,while Ids can only be used once on the same page. Also I did not see navbar used on your HTML code.
My website is www.rosstheexplorer.com.
The FB widget was to big for my widget area so I used the below code to adjust the width of the two sections of my page.
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
I also modified the Penscratch theme so the custom header and navigation menu extend across the whole page.
An unintended consequence of all these changes is now when I zoom out on my website there is a massive imbalance of white space on both sides of my site.
I want to try and center align the content - area and widget - area.
I have not tried any possible solutions because I have been unable to find any information on Google to point me vaguely in the right direction. All the information I found on Google was related to other themes or just related to centering individual pictures, text and headers.
Update -
I tried one suggestion below. Now my code looks like this -
<div class="full-screen-template">
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
</div>
#page {
margin: 0 auto;
}
<div class="mobile-template">
#primary.content-area {float: left;width: 100%;}
.widget-area{float:right;width:100%;}
</div>
Unfortunately it has not seemed to solve my problem.
Try this to center align the content and widget area:
#page {
margin: 0 auto;
}
UPDATE:
I think the reason it doesn't work is that you have HTML code inside .css file:
<div class="full-screen-template">
....
</div>
This probably stops the browser to go any further, so it never reaches the #page line.
I'm not sure what you try to achieve with HTML in css file but try to remove it to see if it fixes the issue.
I am trying to create an accordion menu with multiple floated elements. I want all of the inactive menu items to collapse to a small fixed width (40px or so) and the active item to expand to the remaining width. I want the menu to be responsive/elastic, so only the inactive menu items will have fixed widths.
Below is an example of what I want my menu to look/function like (without using jQuery to set the widths)...
Accordionza - CodeCanyon.com
I was able to accomplish the desired effect when only two menu items are displayed by floating one of the elements and giving it a fixed width, while NOT floating the elastic item and giving it a width of 100%.
Two Columns (Works)
<style type="text/css">
#one {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
</div>
Four Columns - Elastic In Between (Does Not Work)
<style type="text/css">
#one, #three, #four {
float:left;
width:40px;
}
#two {
width:100%;
}
</style>
<div class="row">
<div class="col" id="one">One</div>
<div class="col elastic" id="two">Two</div>
<div class="col" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
Please note: applying float:right; to the elements to the right of the elastic item did not work either...
The problem is that if the elastic element is NOT on the end of the row, then the menu items do not remain on a single row. Please examine the fiddle below to see what I mean...
jsfiddle
So how do I apply this desired elasticity to the elements that reside in between their siblings? I really really want to keep the markup as simple as possible. Thanks in advance!
Update: I am getting close to a solution, however there is a slight problem with every method I've attempted. I will break them down, along with the issues I'm running into with each one.
METHOD 1: display: table-cell; (Suggested by onetrickpony)
Seemed like the answer, however there will not always be contents (text or html) inside the slide elements, and elements formatted with the display: table-cell; property do not recognize applied widths unless there is content inside of them. So this only works if I have content inside the slide... (I could modify the markup of my slider, but I would like to keep it the way I have it).
METHOD 2: CSS calc() (Also suggested by onetrickpony)
Not supported by some of the browsers I would like it to be... CaniIUse.com Browser Support Chart for calc(). Another excellent possibilty! One I did not know existed, and could be utilized if I made a fallback JS script for older browsers (want to avoid).
METHOD 3: Flexbox (Also suggested by onetrickpony)
Probably my favorite solution, but limited support is making me timid. Also could be used along with a fallback script. I learned about this a while back, and this is the future of CSS and layouts. Our salvation! Can't wait for full support...
METHOD 4: jQuery (Suggested by Tomasz Golinski)
What I was originally going to use, but decided I wanted to see if there was a CSS method that could be used instead. I have had some issues when using jQuery to set the width of elements. Mainly when the container is resized, and the script calculates the appropriate width while the container is resized.
So, the kind people who responded to my question have provided me with viable solutions to this issue. Any of the below is certainly an acceptable method to do what I am asking. I am simply seeking an answer that is more of a common CSS method. I am hoping that it is possible to accomplish this with some combination of styles I have not tried. I will admit I think Tomasz is correct- it cannot be done. I am leaving this question open just in case someone has a solution for me. Both Tomasz and onetrickpony have given me great answers. But I am still seeking a CSS-only solution that is widely supported by older browsers- and new, that I do not need to include a secondary script for, and that works without the need for characters inside the elements. Just want to see someone prove us wrong (that it is possible with good old fashioned CSS). If this magic answer does not come, I will be marking onetrickpony's answer as the best solution due to the fact it is CSS based, and he provided multiple solutions that are clean and simple. A combination of his flexbox CSS and Tomasz jQuery (as the secondary script) will most likely be what I use. Thanks!
If you're set to use floats, calculate the width of your "elastic" column by subtracting the widths of other columns from 100%. Example:
<div class="row cols-4">
<div class="col" id="one">One</div>
<div class="col" id="two">Two</div>
<div class="col elastic" id="three">Three</div>
<div class="col" id="four">Four</div>
</div>
CSS:
.cols-4 .elastic{
width: calc(100% - 45px * 3);
}
/* add more rules for other possible variations here */
http://jsfiddle.net/QM4LZ/
But a cleaner and easier approach is to use flexible boxes. This is exactly what they were designed for.
.row{
display: flex;
}
.col{
flex: none; /* <- don't flex */
width: 45px;
}
.elastic{
flex: auto; /* <- flex */
width: 100%;
}
http://jsfiddle.net/F7sxU/
It's also possible to achieve this with tables (fiddle), but you'll most likely run into some limitations when adding the real content and you need more wrapper elements.
the previous answer does resolve the issue however there are some problems with #onetrickpony's solution
example #1 will not work properly with dynamic number of items.
example #2 in most browsers it will work but not all browsers do support flexible boxes.
here is simple javascript code
jsFiddle: http://jsfiddle.net/aQEt3/5/
var count = $('.row').children().length; // counts how many items are in the entire row
var totWidth = $('.row').width(); // checks total width of the row
var elWidth = totWidth - ((count - 1) * 45); // counts how wide should be the elastic it
$(document).ready(function () {
$('.elastic').css('width', elWidth); // when document is ready, apply the new width to the elastic
});
beware, this is very simple code and there will be some issues if:
*there are 2 or more .row items
*you have more than one elastic class
Here's a description of the problem: for starters, I have a background logo image displaying on the webpage version (screen media) at the top of the page spanning the entire width of the page (basically a masthead).
Then I added a print stylesheet and have been hiding and showing certain parts to optimize the experience for users and their printers .
However, and here's the problem, I noticed that on IE in every page of the print preview the logo image is being added to the top of every page in the print out when the page content is enough for more than one page in the total number of pages. So if there's enough content for 3 pages then in all those three pages the logo image appears at the top every page in the print out, when it should only appear in the 1st one.
I've checked my CSS and I can't find whats going on. I don't have the section that contains the CSS class that defines the background image repeated more than once. This only happens on IE. Not on Chrome nor Firefox.
Here's an excerpt of the HTML:
....
<body>
<div class="repeating-bg-img">
<div class="container">
...
<!-- /.inner content that is long enough for more than one page -->
...
</div><!-- /.container -->
</div><!-- /.repeating-bg-img -->
</body>
</html>
and here's an excerpt of the CSS in the print.css stylesheet with media = print :
.repeating-bg-img {
background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}
Has anyone encountered this before on IE? If so, do you have a fix for this?
I ran into the same problem today. One solution is a structure like this:
<body>
<div id="background" style="position: relative;">
<img src="bkgnd.png" style="position: absolute; z-index: -1;">
<div class="container" ...>
...
</div>
</div>
</body>
The basic idea is to take the image out of the flow but position it relative to its containing <div>. The z-index pushes it behind other elements. So this can be used as any kind of column header.
One upside to this is that the background image will print even if the "background images" option isn't set in the print dialog. I'd like to see a proper solution as well though.
Edit 2013/07/23:
It looks like the CSS3 property will be box-decoration-break. This isn't going to help with older versions of IE but the spec is available here: http://www.w3.org/TR/css3-background/#box-decoration-break
If what you really want is a masthead, I also thought this might work:
#media print {
div#background { background: none; }
#page :first { background: url('bkgnd.png') center no-repeat;
margin: ...; }
}
But it looks like that is CSS3 as well. Chrome loads the image from the server but only honors the 'margin' attribute; Firefox and IE9 seem to ignore all of it.
How do i go about piecing each and every div together?
I'm learning how to code in CSS and i'm fairly new, and i want to piece 3 - 8 pieces of the divs in each row. Once i've pieced some together, they appear uneven inside the dreamweaver IDE (and also inside the browser display).
Also, how do i get to resize them automatically? I've been trying width:100%; but all i'm getting is weird resized shapes and sizes.
If you don't get what i mean, my webpage technically looks like this
----------------------------------------------------------------------------------
| |
| background image 1 |
|--------------------------------------------------------------------------------|
| | | | |
| bg img 2 | bg img 3 | bg img 4 | bg img 5 |
| | | | |
|--------------------------------------------------------------------------------|
| |
| background image 5 |
| |
|--------------------------------------------------------------------------------|
but everytime i put my divs in the same row with a containing div for each row, i.e
<div class="container">
<div id="bg1" width:100; height:20;>
<div id="bg2" width:150; height:20;>
<div id="bg3" width: 250; height:20; >
<div id="bg4" width:130; height:20;>
</div>
</div>
</div>
</div>
</div>
it gets all jumbled up at the same location. Am i doing something wrong?
Would appreciate if someone could tell me a step by step solution...
Once again, i want to go about doing:
Construction of website with CSS for the layout.
Auto resizing of entire page according to web browser size.
Thanks.
First, don't use inline styles for prototyping something when you're a beginner. They're too hard to edit live. It will slow the process way way down.
You sound new to this, but that's cool! We all started somewhere.
Create your 5 divs first, and give them each a unique ID. IDs are for things that only appear on the page once. Classes are for things that appear more than once, or might at some future point appear more than once.
Then link a css file that your a separate declaration for each div. You're on the right track with width=100% for responsive design, although in practice it's often something like 92% even for a "full-width" div, because a little spacing is nice, and borders and padding add to the overall width. A 90% width div with 6% padding is always wider than the window itself (greater than 100%) which makes for strange behavior, so keep the box model in mind from the start.
Here are some tips I wish somebody had broken down to me early on:
Nowadays things are a LOT easier than they used to be for rapid prototyping CSS. The best way to figure this stuff out is to edit the stylesheet live in Chrome Developer Tools. Download and install Chrome if you're not using it already. Control click on your div and choose "Inspect Element." Play around in the inspector, and see how all the CSS styles can be edited live by doubleclicking on them and entering new values. If you click the "resources" tab you can see your whole stylesheet at once, and similarly edit the properties, and even add new ones. The best way to see what's happening with sizing is to temporarily declare an outline like:
#mydiv1 {outline: 2px dashed red;}
because outlines don't add to the width of the element, unlike borders. Then when you're done you can remove the outline declarations. Also keep in mind that any changes to a document's CSS in Chrome Dev Tools will be lost when you navigate away. So copy and paste your work into a text editor as you go.
If you're interested in responsive design, which is great, once you're getting good at all of the above, buckle in and read Ethan Marcotte's book:
http://www.abookapart.com/products/responsive-web-design
Marcotte's instructional approach is to start with pixels and then translate into percentages and ems in the stylesheet, but it doesn't need to be that way. You can design "live" with those variables in the browser.
hope this helps!
First of all, get rid of Dreamweaver. It's a hindrance. And has always been buggy. The sooner you get rid of that crutch, the better off you will be.
Secondly, looking at your example, I see a template for the old slice-n-dice photoshop into a table methodology. Replicating that with DIVs in CSS is rather pointless.
Third. If you truly need a table (data) keep it a table. Nothing wrong with that.
Fourth. The key to all of this is understanding floats and what contains floats. Most of the CSS grid systems base everything off of that. I'd take a look at 960.css and start playing with that a bit. It should help point you in the right direction of understanding what is going on.
You could use a <header> tag for the topmost part, and a <footer> tag for the bottom part. Clearly it works also with divs, but in my opinion it's cleaner that way.
That means that you'll have the following code:
HTML:
<header id="img1">
</header>
<div id="img2">
</div>
<div id="img3">
</div>
<div id="img4">
</div>
<div id="img5" class="newrow">
</div>
<footer id="img6">
</footer>
that could represent your desired structure pretty well. To style this, you can use CSS, and there are many possible solutions to the problem. One simple solution would be to set <header> and <footer> to 100% width, and to float all <div>s but the last one to the left, so that the remaining content (the other <div>s, in this case) will be on its right. Then you just have to set the width on all the <div>s, if you want you can even set it in percent, just make sure that it adds up to 100 or else you'll have a gap on the right. Also, you should put a margin-left on the last div to ensure that the content is placed properly.
This could be coded like this
CSS
body > header,
body > footer {
width: 100%;
clear: both;
}
body > div {
float: left;
}
#img2 {
width: 30%;
}
#img3 {
width: 10%;
}
#img4 {
width: 30%;
}
#img5 {
width: 30%;
}
body > div.newrow {
float: none;
margin-left: 70%;
}
You can see a little example of this code here, and you can grab it's code and play around with it here.
but like I said, there are many ways to achieve the layout you want, this is just one example.
As per your layout, what you want, Its better to have semantic HTML markup.
Example
<div class="containerWrap">
<div class="fullWidth"><img src="/imagePath"/></div>
<ul class="container">
<li id="bg1"><img src="/imagePath"/></li>
<li id="bg2"><img src="/imagePath"/></li>
<li id="bg3"><img src="/imagePath"/></li>
<li id="bg4"><img src="/imagePath"/></li>
</ul>
<div><img src="/imagePath"/></div>
<div>
CSS Would be
.fullWidth{
width:100%;
}
.containerWrap ul li{
list-style-type: none;
height:20px;
float:left;
}
#bg1{
width:100px;
}
#bg2{
width:150px;
}
#bg3{
width:250px;
}
#bg4{
width:130px;
}