This has been resolved. I found this, and it works great for what I was trying to do.
Please forgive me, as I know this is a redundant question. However, I have tried several examples and tutorials, and can't get what I want.
I have a table, which is basically the following but repeating for a few thousand lines. I need to convert it to divs. The cells are not expanding to the parent, and when they have text, they all are different widths.
Example of how it needs to be (this is a classic table):
and here is what I have so far...
Here's a few lines of code because codepen isn't enough...
<html>
<head>
</head>
</html>
I am not good at all with tables. I am trying to make it mobile-friendly, which is why the cells are inline-block.
Any advice would be appreciated.
Try use bootstrap,u can search the tutorial at their site.
You should be using a standard HTML <table> not faking functionality using <div> tags. I understand that you want to make this mobile friendly, but this isn't the best way to do it.
Related
I am very new to this and have a very hard time understanding my lecturer (who unfortunately helps me very little)
This is my assignment (image below). It's a mock up clothing website and my desired layout is on the left, whereas my current progress is on the right. This is my first ever attempt at HTML/CSS so if you could please help me out that would make me a happy man!
Paragraphing the categories like I have to the right
Aligning the black text boxes with the photos above them
Floating the titles on the left, with the paragraphs to the right. (I have tried multiple things with this but to no avail)
Also, I put <h1> for each heading but they aren't going to that size?
using CSS you can set "position: absolute" then use something like "left:100px;"
that is assuming your div tags are correctly set up (or set up in general) from your last statement "Also, I put for each heading but they aren't going to that size?" it seems that your div id, or class id's are incorrectly labelled.
I highly recommend taking a look at http://jsfiddle.net/
It's very possibly the single most useful tool I've ever encountered for css/html/javascript testing/editing/learning. (short of something like Dreamweaver, I suppose).
There are plenty of good tutorials around on how to use it, but it'll really let you toy with little options along the learning process, and will help you 'teach yourself' when things get rough with the teacher.
I am a programmer, not a designer and I don't like writing html and css code. I was using table's for layout for a long time. Now, I want to break this bad practice and start using div's in my website. This was a very important decision for me. Because I really hate using div's.
As always, I started reading written code to understand how positioning of divs work, which is the best way for me to learn something new. However, I really couldn't understand. I think there is something wrong. It shouldn't have been that hard, I really think. This div "API" is written wrong, should have been simpler. However, I know that this discussion is non-sense.
I'm now confused with the usage of the following items,
float, clear, inline, block, position, relative, absolute
I'm looking for web-sites, stackoverflow posts, tutorials for learning div's for beginners who have a programming background like me.
PS: I checked w3's CSS standards. However, it is too long and detailed. I want something shorter, easier to understand for pragmatical purposes.
When I was teaching myself HTML I spent a lot of time on W3Schools website. I simply cannot find a better place to learn HTML and CSS. Here is a sample code that demonstrates how float works:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<p>
<img src="http://vsual.co/wp-content/uploads/2011/09/HumanRightsLogo_CO.jpg" width="95" height="84" />
This is some text. This is some text. This is some text.
</p>
</body>
</html>
If you are still unsure please fell free to visit W3Schools link 1 and W3Schools Editor
I hope this helps
I would recommend checking out the articles on http://net.tutsplus.com and the related webdesign.tutsplus site.
On their network there's also a very good introduction course on CSS, but it's not free.
Anyway it's not hard at all.
You have a few types of elements: block, inline and online-block you'll use most. Others will be used as well as defaults.
Divs are block elements, so they normally take the while weight of their parent element and as much height as they need. To form complex layouts and columns sometimes we use float, which changes this by placing the div out of the page flow so other elements stack next to it.
That's a really rough and perhaps not accurate enough description, but should serve as a starting point.
Also definitely check this out: http://learnlayout.com
It's an awesome explanation of CSS layouts by example.
I hope this will help you find your way around.
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
Want some handy guidelines prior starting the HTML Prototype of this application. Please find below the mockup screen.
Mockup screen
I need to make this structurewith liquid layout so that it will adjust as per the resolution.
Please do suggest me should i go with DIV with floating left or can i use tables to achieve this structure?
Thanks
Lokesh Yadav
Seems like a good div approach to me. Floats seem to be the typical way to achieve this, but I've personally always found display: inline-block as an extremely helpful tool to implement these sorts of layouts.
Using table would be much easier. Forms are naturally tabular. Never seen a form that is non-tabular.
the whole table vs div is totally overblown. I do agree that it's not a good idea to use tables for designing layouts but it's what it was back in the old days where CSS support was limited.
however for those to go far to declare forms to be table-less is going too far. All forms are naturally tabular and by doing it in table, you actually reinforce its tabular structure.
We can argue that we should not use tables for calendar since technically, a calendar is tabular for OUR convenience, not because the dates themselves are tabular!
Personally, I'd build that in divs. I'd have a formrow div, then contain each of the columns in left floated divs with a specified width.
I think:
the optimal way is to use a
DIV with floating but its harder to
code because you want a table-style
and you must calc the exact width of
any div (in pixel or percent).
the easyer way is to use TABLES with
colspan.