I am going to replace the table with divs for that I used
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Benefits</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Preferences</div>
</div>
</div>
with CSS
.div-table{ display:table; }
.div-table-row{ display:table-row; }
.div-table-col{ display:table-cell; }
I want to fix the table rows top .div-table-row1, .div-table-row2, .div-table-row3 ... etc.
So that at runtime I could rearrange the rows by changing the styles of rows.
such that preferences could come in first row if I assign just .div-table-row1 to it.
I am afraid that it would be rather impractical to achieve that (assuming I got your objective right) using CSS. You'd need to move the <div>s by changing their positions e.g. using position: absolute -- again, this wouldn't make a lot of sense.
You might want to consider a JavaScript solution. Not suggesting jQuery in particular, but this jQuery plugin is pretty hand: Tablesorter.
I'll recap the comments + answer.
The question was whether or not table-rows tr could be rearranged with CSS. They just take on the order in which they are coded in html.
The properties display: table, display: table-cell, and display: table-row essentially mimic an html table as their names suggest. See the available display properties here
You can achieve this with JavaScript of course. Take a look at jQuery UI's Sortable for example.
I don't get what you want to know clearly but in my case, i try golovko fixedheader table and it works fine even with dynamic table except some bugs .If the table is static,you can do with just css and js which control the height and width of table.
Related
I was wondering if there was a way to use css to style a wrapper a certain way ONLY if it had a div with a specific id inside. Let's say that I have
<div class="intro_wrapper"></div>
in several places throughout the site but want to change the padding ONLY if it
<div class="intro_wrapper">
<div id="slider"></div>
</div>
has #slider inside of it. The thing is that I want to make it have less padding when #slider is nested in it so I can't really mess with the margin for #slider without cutting off the content all weird. I tried using negative margins but it ends up cutting off the image I have in a weird way.
I know you can use stuff like p + p for paragraphs that have paragraphs following them, so I am assuming there may be a way to do something like I am trying to. Thanks in advance.
You cannot do that with any CSS rules at this point as a reverse combinator to apply style on parent based on child. Instead you can hack it by adding a margin to the child instead.
div.intro_wrapper > #slider
{
margin:20px;
}
Whilst I think PSL's answer is already pretty good (cross browser, simple etc.) it doesn't help if you actually need to use a parent selector. Whilst at the moment it's best to avoid this when you can, there are definitely some circumstances which may require a parent selector (or some such alternative).
One solution if you absolutely have to use a parent selector would be jquery, its selector engine recongnises the :parent selector, for example you could do:
$("#slider:parent").addClass('padded_intro_wrapper');
Then in your CSS:
.padded_intro_wrapper
{
padding: 20px;
}
Equally, if the #slider div isn't always inside the .intro_wrapper div you could do:
$('#slider').closest('.intro_wrapper').addClass('padded_intro_wrapper');
That's where it starts getting a bit messy though.
EDIT: Fiddle if you're feeling lazy
My boss wants me to stop using CSS layouts and start using table layouts. A major factor in this is the desirable behavior of tables in horizontally positioned, fluid layouts. See this example:
http://jsfiddle.net/CXSS2/2/
If you slide the width of the HTML panel narrower, you will see that the table (the first one) has several convenient qualities:
Automatically finds a good place to split the two cells, giving the cell with more content a larger percentage of the available width.
Fills all of the available width 100%.
When deciding which of the cells to wrap, it does so in the way most efficient with regards to vertical space.
Keeps the two cells aligned horizontally no matter what.
Example A does not have quality 1. (You have to update the ratio by hand if the content size changes.)
Example B does not have quality 1 or 3. (Static 50% is less than ideal but could work. However, it breaks on to 3 lines while the table is still only 2 lines tall.)
Example C does not have quality 2 or 4. (I can see ways to fake quality 2 with this one, but clearing down to the next line is totally a deal breaker.)
Example D does not have quality 1 or 4. (Technically it has 1, but the huge gap in between is not practical. Also, left/right floating on the same line doesn't work well in some browsers.)
Since the data is not semantically tabular, I really want to avoid using tables. But my boss pays me, so I need to go with what he says or find a better solution. Is there a way to do this using semantic markup and CSS?
Updated: For all browsers > ie7 you can use display: table, table-row, table-cell. the jQuery code will target ie7 and then replace the div's with appropriate table elements.
If this is the only problem you've run into so far, you shouldn't install some goofy grid system just to fix this. That's overkill and a waste of time.
http://jsfiddle.net/CoryDanielson/yuNTX/
sample html
<div class="table width100pct"> <!-- .table should have NO style. just 'display: table' -->
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
<!-- class="table, tr, td" is ONLY for changing display: table, table-row and table-cell.
you SHOULD NOT include any styles inside of these CSS selectors. These classes will
be removed when the divs are transformed into <table>, <tr>, <td>
-->
//conditionally load the javascript patches for ie7
<!--[if IE 7]><script src="/js/IE7fixes.js"></script><![endif]-->
IE7fixes.js
$(document).ready(function(){
//comment out the if statement to check functionality without ie7
if ($.browser.msie && $.browser.version == 7) {
$('html').addClass('ie7') //<html class="ie7">.. like modernizr
var elem, elemClass
$('div.table').each(function(i, elem) {
elem = $(elem)
elemClass = elem.removeClass('table').attr('class') || ''
elem.wrapInner("<table class='" + elemClass + "' />").children().unwrap()
})
$('div.tr').each(function(i, elem) {
elem = $(elem)
elemClass = elem.removeClass('tr').attr('class') || ''
elem.wrapInner("<tr class='" + elemClass + "' />").children().unwrap()
})
$('div.td').each(function(i, elem) {
elem = $(elem)
elemClass = elem.removeClass('td').attr('class') || ''
elem.wrapInner("<td class='" + elemClass + "' />").children().unwrap()
})
}
});
You should structure your CSS similar to mine
required css
table, div.table { width: 100%; }
tr, div.tr { vertical-align: top; }
/* the following 3 classes will be dropped when transformed in ie7
but that won't matter because they'll fall back to <table><td><tr>
*/
div.table { display: table; } /* NO STYLES HERE */
div.tr { display: table-row; } /* NO STYLES HERE */
div.td { display: table-cell; } /* NO STYLES HERE */
I haven't used tables for laying out non-tabular content of a website for years so I might be missing a few things here but I have some alternatives and ideas.
To abstract it some: It sounds like the root issue is that your boss wants you to use a web development technique that is faster than the one you are currently using, allows you to achieve the same layout, and he isn't concerned with semantic markup.
I think a CSS or site building framework like Twitter Bootstrap or 960gs (Note: 960gs is included in Bootstrap) could be used to achieve the same goals instead of a table based layout. These frameworks do have some non-semantic markup such as div's to contain the rows and span's to set the width and offset elements but are better than using a table with regards to accessability and the amount of non-semantic markup.
You can additionally mitigate this by giving your elements ids and additional classes and styling them, and there is less non-semantic markup than if you used a table based layout.
Going off my interpretation of the root issue, a framework like either of these also gives you pre-styled elements and a way of nicely spacing out elements that will save you time in the overall design -> code -> revise cycle and none of this goes against web development best practices.
Some resources for Twitter Bootstrap:
http://twitter.github.com/bootstrap/ - Has the download and good documentation
http://twitter.github.com/bootstrap/scaffolding.html - Examples of the code you would use in Bootstrap instead of a table based layout
960gs (960px wide Grid System):
960.gs/ - Homepage
https://speakerdeck.com/u/nathansmith/p/960-grid-system - The definitive 960gs tutorial and reasons on why to use it
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/ - The tutorial I first used to learn about grid systems in web design
If I got my initial assumption wrong, sorry! Also if you have any questions or want more information let me know.
Have you given a shot to css frameworks such as foundation? It beats having td within a td within a table within a td within a table ... (:
I have updated my code and made a fiddle which explains what I am trying to do. I had a similar question before but it did not reflect the fluidity of the template.
I have a totally fluid layout and I need to make a div display under another.
I want to do it with CSS and I'd prefer not to use javascript or jquery.
Here is the fiddle:
http://jsfiddle.net/sexywebteacher/7hCNC/20/
I was maybe unclear:
I am talking about the section1 and section2 divs in the fiddle
Do you think this can be done?
Thank you!
If both the height of the image and the text are variable, it's not particularly easy with pure CSS.
The height being variable rules out anything based on position: absolute, as in the answers you received to your previous similar question.
One option is to use the technique shown here: http://tanalin.com/en/articles/css-block-order/
It is possible to change vertical order of blocks on HTML page using
CSS table presentation using properties of display: table family.
Regardles of block order in HTML code, header (table-header-group) of
such table is displayed at the top of it, footer (display:
table-footer-group)—at the bottom, and table body
(table-row-group)—between header and footer.
This works in all modern browsers, and IE8 if you're careful. It does not work in IE6/7.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/35/
I have to admit that I've never used this technique on a production website, so please test thoroughly.
A different approach that will work in all browsers that support CSS3 2D transforms is to vertically flip the whole container, and then do the same to the "image" and the "text" elements. In browsers that do not support CSS3 transforms, everything will still work, but the "image" and "text" elements will be in their original order. In other words, it degrades nicely. It's probably possible to make this work in IE6-8 using filter, but that would make the text look horrible, so forget about it.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/36/
If none of these CSS methods are good enough, you'll have to use JavaScript.
However, I personally recommend that you just switch the order in the HTML. I doubt Google cares about it. In this case, I really doubt that bending over backwards to keep your HTML in the "optimum order" will have any meaningful SEO impact.
Add to floating div "clearfix" class where in CSS
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
For ex:
<div class="column clearfix">
...
</div>
You could either change the width to be exact width (or add it as min-width) and let them naturally fall under each other or simply clear which will force them under each other
eg
.clear {
clear:both;
}
your jsfiddle
Here is another example of clear. I like to use this in cases where the element after the clear is not always consistent. It uses the psuedo elements to place a space with the clear attribute.
.clear:after{
content:".";
line-height:0;
height:0;
display:block;
clear:both;
visibility:hidden;
}
I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)
I always seen this:
.button, .list, .items { color: #444; }
With multiple rules, can't that leave a lot of clutter?
Only in css tutorials and examples Ive seen this:
.someColor { color: #444; }
And in the css, just add another class of '.sameColor'. (div class="button someColor")
I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?
Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change.
And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.
CSS is a limited set of rules and that makes it a perfect creativity stimulator.
It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.
Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.
Multiple classnames can help out quite a bit though, consider:
<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
<div class="rightColumn">Right</div>
<div class="middleColumn hasRignt">I have padding right of 210px</div>
<!-- or -->
<div class="leftColumn">Left</div>
<div class="middleColumn hasLeft">I have padding left of 210px</div>
<!-- or -->
<div class="middleColumn">I have no padding</div>
and your css
.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }
The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).
It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:
error -- to style the current element if the user entered invalid data
first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
even -- to apply zebra-striping to alternate elements
hidden -- to hide an element if it's not currently relevant
These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.
There are a lot of good answers here. The trick is finding out which one fits your situation best.
One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.
What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.
Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.
I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.
I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.
I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)
Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.
Edit to clarify:
The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago
Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.
So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.
Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:
semantic_styles: # i dont think this is the right key definition but you get the idea
'#footer,#navigation': ['span-12','clearfix']
'#footer': ['push-1']
# etc...
Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:
#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */}
#footer {/* declarations from .push-1 */}
But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.
I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?
#header{
position:relative;
...
}
I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).
However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under
/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
width: 301px;
}
Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.
You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.
If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?