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.
Related
I am here to ask a couple of questions if I may.
I understand that the CSS is for styling, I have some method which works to a degree i.e text changing but this seems to be limited.
I have about 600 html pages that have some exact content on the pages.
I would have liked to be able to have a CSS or text doc which can be altered to change all html pages in one hit.
Though I am limited to html and css only, other options are not available to me.
I would one like to change blocks of text that is some volume, and images if possible, so I don't have to redo every page as it's very time consuming.
The other issue it needs to be cross browser compatible.
I know there are some great minds out there, I am willing to give any of them a go...
You should be able to use the css rule, "content: <desiredTextOrAttribute>"
https://www.w3schools.com/cssref/pr_gen_content.asp
Suppose you want to be able to set the title on all 600 pages to Company X:
HTML:
<div class="companyName"/>
CSS:
.companyName:after {
content: "Company X"
}
Here is a fiddle: https://jsfiddle.net/onm30rdn/1/
Of course, you won't be able to dynamically change this, and I think Javascript would be a way better solution in general. But this will work.
Assuming you can make your own custom stylesheets with css, you might get some love from pseudo-elements, such as ::before and ::after.
https://www.w3schools.com/css/css_pseudo_elements.asp
Basic idea is that if you can select an html element reliably, you can make a virtual element next to it for the browser to display. The code below would append "hello" before the existing text.
HTML
<body>
<p class="foo">World</p>
</body>
CSS
.foo::before {
content:"Hello ";
}
Result
Hello world
I asked a question like this yesterday, but I seem to not understand much about the reason why the css shows this location. For example:
example1 http://puu.sh/k5r57/6e59005bdd.jpg
Selecting an image further down the DOM, suddenly selects the topmost banner, but selecting its children selects location where I would have expected that to be judging by the flow of the box-model.
Or,
example2 http://puu.sh/k5rkp/b07bdcd576.jpg
Highlighting the parent div 'Requirements' does not require the entire contents the box would originally select.
Is it something in the CSS why I don't understand how the box model in this website works?
CSS Zen Garden is a CSS experiment site. The whole point of it is for authors to take a single fixed unchanging HTML page and use CSS to restyle it; the idea being to demonstrate how much power CSS has even without you having to modify your HTML code.
Some of the page designs created this way for the Zen Garden site look wildly different from each other, and they achieve that by using all kinds of CSS tricks to move elements around the page.
In short, the behaviour you've described is pretty much what I'd expect from the CSS Zen Garden site.
It is intended for you to learn from; if you're struggling with it, try reading the CSS source code; there may be useful comments there.
Use a div with class 'clear' before closing the tag like below
In this the clear should have the style like below
<style>
.clear {
clear:both;
}
</style>
<div>Hello JDudez
<div class="clear"></div>
</div>
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.
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.
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.