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"?
Related
I have a bit of an unusual question, but I'm stuck and thought someone here may know. I basically want to create a membership overview/comparison as included and was wondering how one would build it most efficiently/best, especialyl the part highlighted in red.
Would you tackle it with CSS and build each single element? Or would you rather do it in photoshop and include such pictures via code e.g. as background image?
Given that it's still code related (i.e. is it possible / efficient to build this with CSS), I hope the question is valid and someone could shed some light onto this! (I dont expect any code solution at all, just would like to understand if CSS/SVG coding is the most efficient way).
Thanks a lot for any help!!
You could create a single SVG element and just reuse it across the three different columns, changing the fill (orange/gray/blue).
The best you can do is to use bootstrap to reach this:
<div class="container">
<div class="col-sm-3">
<!-- Column one, detail list -->
</div>
<div class="col-sm-3">
<!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
<!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
<!-- Column four, third membership option -->
</div>
</div>
you'll get a responsive well designed behaviour:
https://jsfiddle.net/zzhs5w6n/2/
The part that you marked in red are only images.
You can find some for free googling a bit, or you can design yourself using photoshop, illustrator, or even gimp or microsoft paint if you want.
Then, in the example, you must add responsiveness to this images, check the next complete fiddle:
https://jsfiddle.net/zzhs5w6n/10/
Then, you can add more bootstrap css or your main css to adapt it to whatever you want/need.
Hope it helps
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.
G'day helpers!
I am struggling with following problem:
<i class="icon-pencil"></i> edit
and
<i class="icon-pencil"></i> edit
appear in the complete same format. Both are in the large-button-style. But my first button should appears as a smaller button (not the same size as the large button). Has anyone an idea why that's happen? When I try with -tags the problem appears too. I could not find an appropriate solution in the internet so far.
I hope anyone can help me.
Thanks in advanced.
Cheers
It was the case of bootstrap.css being overridden by our own site.css as it turns out. Had to copy .btn-sm... from bootstrap.css to our customised site.css and it started working like a charm.
btn-mini and btn-large work totally fine for me. Please see the other html or css to check whether the problem is because of some other elements. sample fiddle
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.
I need logic to display images on mouse over of datagrid in asp.net
If you want to know how SO does it do as Wikser suggests and view the source. If you want help to do something similar then I'll need to know what client side libraries yo are using.
Without having looked at SO source I see an empty space that an image appears in when the mouse is over something else. If I were to recreate this behavior I would do something like this for the HTML:
<img src="..." id="flag" style="visibility: hidden"/>
...
<span id="comment">blah blah blah</span>
and I would use JQuery like this to set up the effect:
$("#comment").hover(
function() {$("#flag").css("visibility", "visible"},
function() {$("#flag").css("visibility", "hidden"});
I suggest try jQuery balloon tips
Here are many examples.
http://www.dreamcss.com/2009/05/12-jquery-tooltip-for-web-developer.html
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin
The logic is that create on fly a cool div set with your informations, and display it on mouse over, in the position you wish.