Good day
I am using the easy table plugin (http://wordpress.org/support/view/plugin-reviews/easy-table) and I have a problem with floats with it: Any content I add below the table floats to the right of the table...
Now I can solve this by using a
<div style="clear: both"></div>
but isn't there a more 'user-friendly' way of doing it? That way my clients(with no html/css experience) can use the tables without problems...
Table Shortcode Code:
[table caption="Just test table" width="500" colwidth="20|100|50" colalign="left|left|center|left|right"]
no,head1,head2,head3,head4
1,row1col1,row1col2,row1col3,100
2,row2col1,row2col2,row2col3,20000
3,row3col1,,row3col3,1405
4,row4col1,row4col2,row4col3,23023
[/table]
Any suggestions?
thank you
You should take a look at the CSS the table uses. Right now it probably uses float:left values.
Use Firebug or a similar tool to check if this is the case, and try to edit the CSS.
Related
I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.
I've made plugin by this tutorial.
http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
It adds this code into the cursor position:
<div class="cut" contenteditable="false" ><!-- CUT --></div>
Woundering how to add css for it.
Now I've added my own css for this into contents.css, but I'm sure there is a way to connect css from plygin's folder.
How do I?
Did you take a look at this:
http://docs.ckeditor.com/#!/api/CKEDITOR.stylesSet
I think the addExternal will do the job for you.
I want to right-align numeric values in a CellTable. I already tried looking for ways to assign a style name for selected columns so I could align it with CSS but still couldn't figure out.
I also tried this but didn't work,
itemPriceColumn.setHorizontalAlignment(HasAlignment.ALIGN_RIGHT);
According to the GWT documentation, the new horizontal alignment will apply the next time the table is rendered... and I don't know yet what parameters I have to pass since it is required by render() method.
So I'm hoping for answers that would involve CSS.
Well, what you had is almost right. This works for me, without css: myColumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
unitPriceColumn.setCellStyleNames("alignRight");
totalAmountColumn.setCellStyleNames("alignRight");
Where alignRight is the name of your CSS.
.alignRight {text-align:right}
Option 1: Use float:right on the parent element ( in the CellTable).
Option 2: Create your own TextCell and implement render method to generate something like this:
<div style="width:100%; text-align:center;"> your value </div>
I am unsure what the best combination of CSS rules and HTML elemtents is to achieve this layout:
example layout
(Apologies for the image, it was the best way I could think of to express what I had in mind)
It is essentially a table with 2 rows and 4 columns, but I don't want to use tables.
I'm fairly confident I could hack something together that would do this but it wouldn't be elegant or optimal and I want to know the cleanest way of doing it.
Let me know if this is not clear. Thanks
Do you mean something like this?
http://jsfiddle.net/semencov/P8B4R/
Depending on what's your target audicence, consider using 1200px.com.
In case you already have your template, I made you this jsFiddle. You can start from there :)
http://jsfiddle.net/aLXby/6/
For simple layout, float all the containers ("columns") left and make sure to clearfix the parent container of those columns:
<section class="clearfix">
<figure>
<img src="img1.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img2.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img3.jpg">
<figcaption>Text here</figcaption>
</figure>
<figure>
<img src="img4.jpg">
<figcaption>Text here</figcaption>
</figure>
</section>
Your CSS might be:
(clearfix as described on linked page)
figure {
float: left;
}
For more control and structure, try a grid system, like 960.gs.
This example is assuming that your images have captions, and the HTML5 figure tag and figcaption tags are well-suited for this purpose.
The most important thing is to keep your HTML semantic. So there's no "HTML best suited for this layout" but rather HTML best suited for that content. In this case it's what Matt suggests (figure and figcaption). I would probably use a list (ul with li) rather than section though.
Regarding the styling, there are numerous ways to achieve that layout. Depending on your specific needs (are the images equal height? equal width? what about the captions? one line? several lines? etc) you might get by using floats, you could also use display: inline-block and if you really want to replicate a table you can use display: table/table-row/table-cell.
Edit: I'd argue that using a grid system for this is like using an MVC framework to display an animated gif. All grid systems I've seen require the user to add quite a load of divs and classes that ruin your markup.
i need a three columns form, in the past using tables was easy but now using divs i dont know from where to start... im googling but the css i found doesnt work for me, any help or link will be appreciated
a sample row which shows one of the ways u can do this.
<div>
<span style="width:33%;display:inline-block"></span>
<span style="width:33%;display:inline-block"></span>
<span style="width:33%;display:inline-block"></span>
</div>
here's some other links which might help http://snook.ca/archives/html_and_css/getting_your_di
Look into floating divs.
Have you tried googling something like "css column layout"?