div.task_finished { background-color:#6b86a6; }
div.task_pending_execute { background-color:#93b8e2; }
div.task_cancelled { background-color:#ff9966; }
div.task { background-color:#ffffcc; }
Now I want to print this
<div class="legend-container">
<div class="legend">
<div class="task_pending_execute"></div>
<div class="legend-text">Executing</div>
</div>
<div class="legend">
<div class="task_cancelled"></div>
<div class="legend-text">Finished</div>
</div>
...
</div>
For IE graph is rendered as image.
User browser set not to print background-color by default, but that's inacceptable in this concrete situation
I still don't want to subsitute 'color' div's here by images.
What css property should I use instead?
You can try using a colored border, something like this:
div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }
However, I'm not sure if IE considers borders as background or foreground when printing.
[EDIT: another idea]
Another solution would be to use Unicode Block Elements and then set the foreground (text) color.
<div>█████</div>
<div>█████</div>
However, this will fail on systems without proper unicode support, or without correct fonts.
Also, it will give you little control about what is the width of the legend, because different fonts have different widths. (maybe CSS #font can help you solve this, but I'm not sure)
Finally, maybe there are visible "seams" between each character, depending on the font. (this might be "fixed" by setting a negative letter-spacing)
Not something you can really do anything about. Background colour/image printing is a printer option and not something you should really count on - http://css-tricks.com/dont-rely-on-background-colors-printing/
Related
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
Just a quick question - I was unable to find this when I searched, but I'm sorry if it's a repeat.
I have paragraph tags enclosing the title of my website:
<div class = "title">
<p>Welcome to homepage!</p>
</div>
<div class = "subtext">
<p> Subtext goes here </p>
</div>
<div class = "formthing">
<form method = "GET" action = "/form">
<input type = "submit" name = "submitted" class = "btn-large" value = "Click button" />
</form>
</div>
and everything is working fine. However, when I zoom in on the page, the words of the title overlap themselves. Is there anything I can add to CSS to prevent this from happening?
i dont see any overlap in your code, but a quick fix would be to can add margins to your classes via css to prevent overlaping.
eg:
<style>
.formthing {
margin: 0.25em;
}
</style>
You need to use em font-sizing in your CSS. If you don't know what this is, this is a really good article on it: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Essentially em is just another way of expressing a percentage but some browsers falter at higher and lower levels of zoom when using pt, px and % values. Using em mitigates this issue the best.
font-size: 16px;
font-size: 100%;
font-size: 1em;
Most modern browsers will default to 16px font-size as the control and adjust off of that, making the above 3 font-sizes equal to each other (give or take some decimals in Firefox and IE). This isn't fool-proof but for the most part will get you through these situations. It's a very widely practiced and proven method of preventing unexpected text and element overlapping.
Also - might wanna look into the font you're using and whether there is any kerning applied and maybe utilize letter-spacing: 1px; and adjust accordingly.
Don't forget to use a CSS reset like Normalize.css.
I'm working with Bootstrap's Typeahead and adding the input like so:
<div class="row">
<div class="span12">
<form class="centered">
<input id="main_search" type="text" class="search-query my-search" data-provide="typeahead">
</form>
</div>
</div>
I have the following CSS code which essentially just expands my search box to be "long" and in the middle of the span:
.centered {
text-align:center;
}
/* Make the main search box wider */
.my-search {
width: 80%;
}
My question is, when I use the Typeahead, the auto-completed results are only as long as they "have to be" to display the entire word/phrase whereas I want them to be as long as the actually input box. Basically like what you see on Google.com with their Instant Search functionality.
This closed issue suggests I should be able to manipulate the CSS to achieve what I want to do, but I'm not great at complex CSS and I'm struggling to get the inheritance just right to get any CSS to actually apply to the correct element. On top of that, I'm unsure how to make sure the dropdown-menu inherits the input's length (so that it'll work despite browser resizing).
Thanks for any help that you can provide!
Current code:
JSFiddle
Without you posting your code or a link to the working example, this is just a guess, but try this CSS
.my-search, .typeahead.dropdown-menu > li {
width: 80% !important;
}
I am able to get an svg to show just fine when I use
<img src="../images/jte.svg" alt="Logo">
however, when I try and display via css using the following:
html
<div class="logo2">
</div>
css
.logo2 {
background-image: url(jte.svg);
}
Nothing is being displayed. Any idea why this is happening? I have tried multiple different path options "('../images/jte.svg') ('jte.svg) no avail though.
Use a defined width and height for the element in question, or simply attach it to the body. For example:
body { background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')
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;
}