This is bothering the crap out of me and I can't see what's not allowing it to float left.
I've set a margin-left of 120px to the header text (450 Set, 230 Set, etc.) and did a float left to the link element with the image inside of it.
Here's the link to the site where it's happening: http://cl.ly/6lQa
What am I over looking or not seeing?
Thanks!
It's the h2 tag that's screwing it up. Use a div tag instead and apply the styles that you want.
Generally, I refrain from using the h1,h2,h3,h4..... tags because they come with pre-done stylings. I prefer to create classes for all of my stylings and use div or span tags. Only if I'm doing SEO, I'll use some h1,h2 tags at the top, but nothing more than that.
On a side note, you should also try to get away from relying on float. It is not a good way to go..... different browsers handle it differently, and many times I get errors like what you were getting here. Instead of float, use position:relative and place the elements on the page by specifying the pixels at which you would like them (e.g. left:200px, top:100px etc).
I just started using BlueprintCss, which provides a great framework to easily layout pages. It divides the page up in a grid, and using pre-defined classes, you layout the page (without floats!). It's amazing, you should look into it.
You should move <h2 class="entry-title"> above the a element containing your image.
Set a width on the <h2> that will fit into the remaining space (with the 120px margin) OR better yet use a <div> instead of the h2 and style the font the same way
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Margin-Top not working for span element?
(6 answers)
Closed 9 years ago.
I'm effectively a noob with HTML and CSS, I don't consistently live in this space to retain and progress so feel free to treat me like an idiot.
Very often when I'm styling a page the margins have no effect. For example, in the following snippet:
<h1>Title</h1>
<p>I introduce the section and talk about the stuff in this area.</p>
<div class="preWrapper">
<pre><code>I am some XML</code></pre>
</div>
<div class="controlsWrapper">
Download XML
< ... form controls, input etc. ... >
<div>
If I try and set a top margin on the Download XML anchor, it has no effect at any size. Why could this be?
Is there a general lesson here about the way this all works that I either keep forgetting or don't quite have a handle on yet.
I have read good-sized CSS books cover-to-cover - I do try - and I've been a netmag subscriber for about 6 years. I know there are lots of quirks and gotchas, I just can't remember them all.
Thanks.
I think in these situations you might be mainly encountering the differences between block-level elements and inline elements.
In HTML, a block level element is used for larger sections of content, and often contains other elements. You use them to lay out everything on your page. Block level elements are, for example, section, div, header.
Inline elements are smaller tags that hold either links or small chunks of texts, like a or span. While block level elements will automatically place themselves on a new line in your layout, inline elements, by definition, will stay exactly where they are in the markup.
Because of this distinction, block level elements can usually be though of as inside an invisible, clearly defined block, that usually spans the width of the page. With a block like this, you can easily imagine padding and margin, because its edges are well defined. Inline elements, however, are tricky, and don't render themselves inside any specific block or rectangle -- their dimensions are defined solely on the text inside them. This is why it is more difficult to apply margins.
A fix in the above would be to give your a a display: block style in the CSS. It will then by default take up the entire width of the page, and its height will be as large as is required by the size of the text. Margins and padding can be easily added.
If you're then faced with not wanting your a to be so wide, but position itself snugly next to other elements, you can change the display property to inline-block -- this can be thought of as kind of half way between block and inline elements. It will only be as wide as the text inside, but it will get that imaginary rectangle around it that can then be made larger with margins and padding.
Here's some reading: The CSS box model
Sorry for misunderstanding your question.
You need convert your <a> into an inline-block element for it to work.
Here is the code.
The Code:
Download XML
PS: 40px is a dummy value for margin-top. You can replace it with your value.
If you have defined position of the element relative or absolute that time margin value would not work, for this you can try using top
I was just wondering if there was any disadvantages for having empty divs in place in order to have a layout that I desire. Is there any other way around having hidden divs because I know that it adds to messy code.
See images below for what I am trying to demonstrate:
As you can see, the bullet points on the left are level with the h2 element but when I add a h2 element before the bullet points, it lowers them to the level of the paragraph (which is how I want it). Obviously I can make this h2 element invisible and therefore achieve my desired effect but is there more of a professional way of doing this?
But why you want to do that? Whats margin-top property for?
I'll go lil brief here, you should first learn floats than go for positioning, also learn what block and inline elements are, you got a lot of CSS things out there, margins,paddings` etc, take a look at box-model too so that you don't pull your hair later
And if you want to stick to a dirty markup than empty div's and br are options for you, but you won't get a specific height from top using br so for that you need to use an empty div but DON'T USE THIS
Two suggestions which will provide a quick fix:
Margin-top on the bullet points element or.
Add an H2 with a non-breaking space inside it e.g.
<h2> </h2>
If you want to add extra space without CSS, you can use <br/>
tags - its definitely a much better than empty divs, which is messy and a bad practice.
CSS is really the best way, though.
Give the h2 a width so it takes up the entire rest of the row. The bullet list will then automatically drop to the same height as the left paragraphs.
Or, give the bullet list a margin-top or padding-top.
I suggest that you use either margin-top for the second div or margin-bottom for the first one.
Example: If the hidden div's height is 100px, you better write: <div style="margin-bottom:100px">...</div>
I'm currently working on a site with this design and layout for my main-content area:
http://img528.imageshack.us/img528/9483/screenshot20120429at124.png
However, I'm finding it a little difficult to write up the HTML and CSS using proper semantics.
Firstly, should I be using divs to split the left and right columns, or, HTML5 section tags with an aside tag for the picture?
Secondly, what is the best way to position each section or area?
And finally, with that being said, at the bottom of each content area there are 2 buttons that should be horizontally inline. What is the best way to go about achieving this considering the fact the the user of the site will later on be placing in their own text and both buttons should push or position themselves further down as more text is placed inside.
This jsfiddle is currently what's making it work...but, seems wrong?
http://jsfiddle.net/LGEKW/
Should those 2 buttons be in that current div, do I use position absolute, relative or floats … I have no idea. Any help on how you would go about doing this would be greatly appreciated.
If you are using <!doctype html> it's definitely better to use
semantic tags, because divs have NO semantic meaning at all.
To my mind the best way to position the elements is to use float
property
The buttons should be floated as well. Not absolutely positioned.
Thus they will be pushed down when the user adds more content. Try placing them after the content in the same wrapper
Drop your br tags after each paragraph. p elements are
block-level - so you can use margin-bottom property to push the
next p down a bit
I need to position each element of my HTML independently to each other i.e. each element should be able to have each own top and left margin. Setting the margin for an element should not impact or change the margin/positioning of any other element. The html is pasted in an email as a signature, so if a user inserts a line above the elements, they should however move down in unison. I have tried divs with positions and margins to no avail - it seems the first element always impacts the position of the second element. Please help!
Since it is e-mail, I would try using tables. I know tables are frowned upon for layout, but there are so many e-mail clients out there you really want to use the simplest markup possible so it just works and forget about semantics.
You might also want to look at example templates used by e-mail services like MailChimp, and see how they do it. Chances are those are tried and tested solutions that work.
This can be achieved by making an image the first element in the html. Further elements like can then be positioned by using the position:relative and margin properties. Simply subtract the image height from the top margin of the first text element. Using this technique, text can even be positioned above an image.
I have noticed a common technique is to place a generic container div in the root of the body tag:
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
Is there a valid reason for doing this? Why can't the CSS just reference the body tag?
The container div, and sometimes content div, are almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.
But a container div is just a div and you can style it with margins and borders. You can give it a fixed width, and you can center it with margin-left: auto; margin-right: auto.
Plus, content, like a copyright notice for example, can go on the outside of the container div, but it can't go on the outside of the body, allowing for content on the outside of a border.
This method allows you to have more flexibility of styling your entire content. Effectively creating two containers that you can style. The HTML body tag which serves as your background, and the div with an id of the container which contains your content.
This then allows you to position your content within the page, while styling a background or other effects without issue. Think of it as a "Frame" for the content.
I faced this issue myself redesigning a website. Troy Dalmasso got me thinking. He makes a good point. So, I started to see if I could get it working without a container div.
I could when I set the width of the body. In my case to 960 pixels.
This is the CSS I use:
html {
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
This nicely centers the inline-blocks which also have a fixed width.
The most common reasons for me are so that:
The layout can have a fixed width (yes, I know, I do a lot of work for designers who love fixed widths), and
So the layout can be centered by applying text-align: center to the body and then margin: auto to the left and right of the container div.
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.
This is one of the biggest bad habits perpetrated by front end coders.
All the previous answers are wrong. The body does take a width, margins, borders, etc. and should act as your initial container. The html element should act as your background "canvas" as it was intended. In dozens of sites I've done I've only had to use a container div once.
I'd be willing to be that these same coders using container divs are also littering their markup with divs inside of divs--everywhere else.
Don’t do it. Use divs sparingly and aim for lean markup.
I later found this, years after my answer, and see that there are some follow up replies. And, surely you jest?
The installed placeholder site you found for my domain, which I never claimed was my markup or styling, or even mentioned in my post, was very clearly a basic CMS install with not one word of content (it said as much on the homepage). That was not my markup and styling. That was the Silverstripe default template. And I take no credit for it. It is, though, perhaps one of only two examples I can think of that would necessitate a container div.
Example 1: A generic template designed to accommodate unknowns. In this case you were seeing a default CMS template that had divs inside of divs inside of divs.
The horror.
Example 2: A three column layout to get the footer to clear properly (I think this was probably the scenario I had that needed a container div, hard to remember because that was years ago.)
I did build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.
http://www.bitbeyond.com
Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".
Markup should be added as needed, not because that’s just the way you've seen it done.
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. Using container-div in HTML will make the website look more professional and attractive and therefore more people will want to explore your page.
Well, the container div is very good to have, because if you want the site centered, you just can't do it just with body or html...
But you can, with divs. Why container? It’s usually used, just because the code itself has to be clean and readable. So that is the container... It contains all of the website, in case you want to mess around with it :)
Forget the container. It's just a habit from the old, very old days.
Everything you can do using a div—you can also do it on a body tag.
I've never heard of issues using a div class="container" markup. But I have heard of issues using body as a top level container. See this article. Stick with the tried and true; who knows what browsers will do in the future.
Most of the browsers are taking the web page size by default.
So, sometimes the page will not display same in different browser. So, by using <div></div>, the user can change for a specific HTML element. For example, the user can add margin, size, width, height, etc. of a specific HTML tag.