I'm making a website for an organization at my school, using basic HTML and CSS. Right now, I've made several other pages for the site and have run into no problems like this one.
Here is the page I am having trouble with, if you want to view it in context:
http://acacians.net/scratch/officers-slim.html
I tried posting the code here, but it didn't completely work. I suggest following the link and viewing the source.
The final "officer" div is for some reason falling outside of my "info" div, which is nested in the "pagecontent" overall div.
Here is a link to the original CSS:
http://acacians.net/scratch/style.css
I'm really not sure what other information to supply, so I'll do my best to watch for any questions and do my best to respond accurately to them.
Thank you,
-Mike
Put <br style="clear: both;"> just before closing .info div.
Related
hello...(1st time here)...
I've been told never to use Absolute Positioning w/ my Child divs inside the Parent.
In my designs, I almost always create a Container w/ relative positioning; & w/ a margin: 0 auto; so it remains centered on the page (since I almost always use background images)...& then my other blocks (nested inside the container) are always positioned absolutely...the layout of which would look something like this example:
EXAMPLE
[btw...not a coder by a long shot...I design like a graphic illustrator would in laying out a magazine page]...but now...given the fact that I very much need to upgrade my skills (have been working in DW 2004 up to this point...just downloaded DW CC 2018, tho)...
HOW would I now code that page (using I'm assuming CSS thrown in w/ the HTML) so that it looks like that until the browser gets resized...& then all those elements flow correctly, stacking the way they're supposed to...WITHOUT USING THE DREADED ABSOLUTE POSITIONING...???
thanx,
dox
btw...not asking to have the code written for me, just a link to an informational on the web detailing exactly how to do it...thanx
To answer your question, these are very basic ideas that you would pick up from a beginner html / css course.
https://www.codecademy.com/ is a good site, and it's what I used to learn basic web design.
If you've already done something like this, I would recommend finding another more in depth course. You mention that you're not a coder, but if you're not asking someone to write the code for you, then you need to become one.
Essentially, the way to do this without "absolute" is with margin. For example, margin-left: 80px;
I am just learning to code and have been looking everywhere for an answer on this one and for some reason cannot find anything.
I noticed that it seems to be common practice to put an image inside of a container or wrapper. For instance, rather just having:
<img src="url"/>
Everyone seems to be in agreement that it needs to be this way:
<div class="container">
<img=src"url"/>
</div>
What is the purpose of wrapping the img inside of a div in this way? It seems to have something to do with "responsive design", but I'm not 100% sure. Is it just so that we have something to size the image relative to, rather than using definite sizing like pixels on the image selector in css? The more I think about it as I write this, the more it seems to be the right answer, but I'm not sure if there's something else I'm missing on this one.
Any insight would be very much appreciated. Thank you.
unfortunately there is no "single" correct answer for this.
There can be many reasons as to why one would wrap any element in another element, it is not specific to <img /> tags :)
In your question I read something like this (converted to real world example):
I see that it is common practice to put a frame around a photo.
Where the "frame" would be the wrapper element, and the photo would be the <img />.
Looking at it this way might make it seem more clear. The photo is the most important part, technically speaking you don't need a frame to show the photo. If you have just a photo, you won't be able to hang it on your wall without damaging it by driving a nail through the top or applying some tape. If you have a frame though, you can make that photo take up any amount of available space within it, you can use the clip to hang it on a wall and if you put multiple photo's in the frame, you can move them all at once since they are in the same frame.
The reason most people put that image in a "container" is because they get some sort of advantage out of it over using an image alone, this could range from aspect-ratio locks to relative positioning. In some cases, a wrapper is required to achieve certain (notably more complex) animations as well.
Websites are built out of "logical" pieces that, together, form a website. The individual pieces are all "frames" that "flow" together to create any page layout you see on every website.
It is merely a structural way of thinking, if the purpose of that image was to be used as a background image for the entire page, a better alternative would be to use CSS background-image property on the <body> tag and not use the image at all. But if the image is meant to be part of a smaller part of your website, it should probably be contained as appropiate.
This answer is in no way a guide to go by, nor a ruleset or anything like that, they are just the thoughts of another developer. There are countless reasons for wrapping an element and this answer doesn't even cover 0.0000001% of those cases. I'm just saying -- there's no specific reason to do or don't here.
We have a crawler that is crawling hundreds of thousands of pages per week. Currently to get the data from the crawled HTML we manually take a look at the HTML and see that "OK, Data A is within <div class=".info-list"> and Data B is inside <h1>", and then we use a parser to parse the data from those div's.
I guess this is the most common way to parse crawled HTML for most people, but it means that we have to know the HTML structure of all the pages and domains that we crawl. So it is not very scalable.
If we could just figure out what div the "main content" is, so that we can ignore other things such as "Relevant products" or "Relevant articles", or "Main menu" and so on, we could easily parse the data in the same way as we do now but without having to specify the exact div names and position of each data.
So... How do we figure out which is the "main div" of a page?
I'm pretty sure that Google does this. They definitely know position of elements on a page, and if something is positioned in the "main content" or in the footer for example. How can they know this?
The methods that I can see to do this in a large scale is:
Render the page and look for the largest div's and start from there. But to render millions or hundreds of thousands of pages is not really cheap and efficient.
Try to figure it out from the content of every div. For example, the div with most links inside of it is probably the menu. The div with most text inside of it is probably the main content. But this gets really tricky if the content is like:
<body>
<div class="maincontent">
<div class="post-header">
<h1>Header of post</h1>
</div>
<div class="short-description">
Hello World!
</div>
<div class="long-description">
Hello New World!
</div>
</div>
</body>
Obviously the div we want to identify as the "main content" is <div class="maincontent">. But if we look for the div that have "most text". It would be .long-description.
This is starting to become quite a long question. But my point is, it's really hard to figure out which part of a website that is the "main content". And I'm asking any smart people out there to help me come up with a decent way to find out what div or divs that is probably containing the most important content of the page.
EDIT: I guess one way of rendering it is not to render every single page. But to render the domain. For example. If the domain structure is http://example.com/post/1-post-name/ I can save a render of that, and next time I find a page that is http://example.com/post/2-post-name/ I know that it probably have the same HTML template as the first one, and the "largest div" is probably the same.
So what techinique to do this server side? I mean to render it and to save the sizes and position of all the elements. I guess this seems to be a pretty decent way of doing it on large scale.
I would try multiple approaches. For example start with the obvious - is there an id="content" or class="main_content" ? Use it! Look for ids and classes that are common for big content blocks and if they exist then use them. If not then move on to less certain tests.
Next try narrowing things down. is there a <header> or <nav> tag? ignore that and everything above it. Ignore a <footer> or a class="sidebar"
Make some rules, let them run, and then manually expect what comes back and look for patterns when you're pulling too much or things are being left out. Adjust your rules and write new ones based on that.
At that point you might even let the ones get past all your tests go to a short list where you check them by hand and create domain specific rules where you can point out the exact div you want to use. You can still be very efficient with some human intervention, and visually looking over 8 sites out of 50 is still a pretty good deal.
I didn't really find a great way to decide which div is the "main content" yet, however I found PhantomJS which lets you render the page you are crawling on server side, and be able to use Javascript and jQuery to get sizes and positions of elements on the page you are crawling.
So by using PhantomJS you can definitely get which div is the "largest", which div is on top or bottom or center, which is a long way already on solving this issue of finding out which div on a page that is the "main content".
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.
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.