I am trying to be clever and position a FaceBook Like button iframe inside a sentence but it aligns oddly, see screengrab below.
I'm sure I'm being dense but without styling the iframe as a block element how do I re-position it?
I tried display:inline-block but it didn't respond to margin settings. I also tried increasing the paragraph's line-height to match the iframe but that didn't help.
Wrap it in a DIV and adjust margin-top on the DIV.
vertical-align:middle did the trick.
Related
I'm trying to edit a tumblr theme to make my posts centered inside of an image (the image is in a div) I've tried giving the posts and div the same margin in CSS but I can't seem to get the image inside the div to center correctly on the page. I want the posts to be perfectly centered horizontally inside the image even when the browser window is resized. Anybody know how i can do this? Is there an easier way than having the image in a div? here is a link to my code
http://pastebin.com/x6MP6EYQ
First of all i would recommend using image as a background image. Would be easy to handle it as it will not affect other things inside a div.
Second, if you were to use image you would position it absolutely which mean main div should be positioned relatively. Then once image has been positioned i.e. top:0; left:0; put z-index:-100; so that way it will be always behind.
To make div always be centered both horizontally, vertically and in both directions. See my example. Here:
http://jsfiddle.net/techsin/TfLTR/
try style=aligen:center;
just you can manage by style sheet tag like padding and margin also .
I want my logo be aligned to center and that be clickable outside the margins without html img tag - with css background-image or something that remove right click > view image.
http://jsfiddle.net/qhU5u/
Thanks.
Solved
You should really use an img tag. However if you don't want to for some reason:
http://jsfiddle.net/qhU5u/1/
I've completely removed the div and just used tha a tag to display the logo.
Just use an img element. This is far better for accessibility purposes.
For example, if someone is viewing your page without the CSS enabled, they will be able to see your logo if it is an img, but not if it is a background-image.
However, if you wish to use a background-image, I would recommend using a div with a fixed height and width which matches your image.
Then, place an a element inside the div giving this the same dimensions as the div.
Your way of nesting div inside an a is invalid HTML.
See Demo: http://jsfiddle.net/qhU5u/2/
try this example and see if it's what you're looking for:
http://jsfiddle.net/qhU5u/8/
I'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.
You see how the dummy text is acting
URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm
I've accomplish this before but somehow it's not working now.
You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)
EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.
If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).
If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.
The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.
So in short:
Add <div style="clear:both"></div> at the end of the #under-content <section>
Change the 'top:82px' to 'margin-top:82px' on your .opentext div
I hope this helps!
Just use wordwrap: break-word; for the div and it will break the word to the next line.
You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.
However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?
I have one div element at the top of my page that is set to overflow:visible. Immediately beneath it, I have the page content.
I do not want the top div to expand, because of aesthetic reasons, but I would like the content below to treat the overflow from above as it would a block element...by "clearing" it.
I know about CSS clear...but it doesn't seem to apply to overflow.
Is there a correct method to do this?
The overflow:visible doesn't really have anything to do with the issue, as it's the default.
Set the height of the top div, and put another floating div inside it for the content. The floating div will expand outside the top div, and you can use the clear style to get below it.
try
overflow: auto;
it will expand the div and should solve your problem