I want to do exactly like this for my self-hosted wordpress site - http://www.dota2.com/heroes/
I assume they put separate pictures in a table (could be completely wrong)
Any suggestions on where should I start ?
Actually if you check the source code you can see that they are using DIV to place the element like they want. You can do it with a table too if you want (it could be easier!).
If you want to do it "exactly like them" you can make a container with a fixed width, and they insine you could add your images with a fixed width.
I would also advise you to check "Source Code" ! It will be very helpful (I think)!
(If you are using chrome as main navigator : https://support.google.com/adsense/answer/181951?hl=en)
Hope it helped you
I would avoid table. From my experience, tables are hard to work with.
I would rather go with <ul><li></li></ul> or <div class="container"><div class="pic"></div></div>
The <li></li> or <div class="pic"> will have float:left so that they get rendered one after another.
If you feel that the data you are rendering are actually a table, then only table makes sense.
Your data is not a table with multiple columns.
Related
How can I set the tables side by side? I'm a bloody rookie, I know there are more elegant ways to do my code, I'd appreciate your input, i posted my code on pastebin since I had a werid error here
My HTML code: https://pastebin.com/gq73n05Q enter code here
This is how my Website looks like & below how I want it to be: https://imgur.com/a/Fa5No00
So, in my view, best way to get two tables side by side is to put them into divs.
You'd add a div before your first table (line 32 in your pastebin) that looks like such:
<div class="column">
<!---your left hand table goes in here --->
</div>
Then you do exactly the same for your second table (new div at line 59, same class as above).
<div class="column">
<!---your right hand table goes in here --->
</div>
Then you add some style rules to govern your two new divs. I'd hugely recommend doing this in a section at the top of your page somewhere.
<style>
.column {
display:inline-block;
width:50%;
float:left;
}
</style>
If you wanted to inline those styles, then each div would start like this:
<div style="display:inline-block;width:50%;float:left;">
That will make the columns appear side by side as you want.
You should note, you are going to run into other troubles though. You've hard-coded in a lot of "width" rules in the tables and table cells which will impact the responsiveness of your page and, in general, unless you're doing an html email, you'd really want to steer clear of tables for layout purposes.
If you'd like to see a best-practice implementation of it anyway, there's this one on w3schools.com: https://www.w3schools.com/howto/howto_css_table_side_by_side.asp it has quite an elegant look which might prove useful.
Good luck with it!
I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
I'm trying to figure out how to develop a page that we can use to organize a magazine. There will be multiple sections to the magazine that will contain multiple pages, each page may have multiple articles on them. To accomplish this, I want to have a DIV for each page or section that will intent to show that it's subordinate to the group above it. Here's a picture of what I want it to look like:
http://chromaticinc.com/help/final.png
I'd like to only use CSS to accomplish this. So far, I've come up with this:
http://chromaticinc.com/help/
But it is using Javascript to set the width on the 1st column, because each of the other columns has to line up too and with the variable width on the 1st column, it throws off the layout. I'm sure I could use Javascript to set the width of the "Comments" column, but I feel like there has to be a better solution using CSS.
I'm open to using tables, if it would make sense, but each item will have to be draggable so that they can be rearranged and also they will have to be able to be moved into other sections, so I've set them in DIVs to make that easier.
Any help or suggestions would be greatly appreciated.
You should be able to do this using relative positioning.
You will want to give the element an id and then use some CSS like this:
#divid {
position:relative;
left:20px;
}
This will force the div to move over however much you specify from its default position.
I am currently working on turning a normal html table like so:
into and indented version as follows:
Even if I can't set this in html someone might know of a way in which I can hide the initial part of the border to match the start of the text.
There are several bad ways to do this, I'm sure. You'll just have to get creative.
Here is one example to do this, with some classes, empty table cells and colspans:
http://jsfiddle.net/ESFuC/
You can achieve this by playing about with the table cells and taking advantage of display:inline-block; there are other ways to achieve this but this should work across most browsers.
Fiddle with demo
Maybe with divs inside cells like this;
http://jsfiddle.net/UdF98/
I colored the bottom line red, seems fine except the one at the bottom. Maybe you can modify to suit your needs.
From your experience, what would be the most suitable CSS solution for replacing the old unfashionable tables, with divs and styles? i am especially interested if there is a solution for replacing the table's tags. (headers of the tables)
thank you!
If you have tabular data, then you should always use a table. There is no reason to replace it with a floating box layout.
Don't use tables for layouting your whole page.
Generally, you'll need to replace each cell() with a div.
I would then google for examples of CSS column layouts to find out which behaviour suits you best. You can place divs in exact positions or make them relative. Either way, if you don't know CSS you're going to have to learn it and play with it to get an idea how