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/
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 have a trivial page with body having an image background, with background-size:cover. I set html { height:100% } to fill up the entire page regardless of the content amount. Up to this point everything worked as expected.
I've added a div and set position:absolute; right:0; width:200px; This, again, worked as expected, until I added content.
When this div is populated so much that the contents take up more space than the height of the page, the scroll bar appears. Scrolling down reveals that the background image does not actually cover the entire page.
This is due to the fact that my div is taller than 100% of the HTML height.
How can I address this?
You could add background-attachment:fixed; to your body element.
The caveat with this approach is that the background is now fixed in the viewport and does not scroll with the document.
https://developer.mozilla.org/en-US/docs/CSS/background-attachment
Do it like i did in this codepen, and it should work fine.
Update: (using some JS)
see this codepen for more complete solution.
Instead of positioning any items via position:absolute I utilized float as much as possible.
I also added a <div> wrapper to the entirety of contents inside of <body> this helps the proper formatting and stretches the containing <div> accordingly. The body tag and its background properties now behave properly!
I have two questions:
1) I have a div with an image that I use for my footer, but I when I resize the page the footer text gets all "mushed" together. Is there any way I can get the text to stay in a certain position and resize with the page?
2) I use a div for the body of the page, but when I try to add text and align it in position it moves the entire div. How can I get the div (which is just background color) to stay in place while I move the text around?
Here is the site and code on jsfiddle: http://jsfiddle.net/HzwV9/embedded/result/
Thanks.
Had a fiddle with your fiddle, here's a result that may help you: http://jsfiddle.net/HzwV9/4/
Some things I noticed:
A few of your HTML tags aren't closed (that's asking for trouble).
No need to use <h1> for your lower links; it's a block element, not an inline element, and also you'll need <a> to make a link later anyway
You can simplify the big list of tags at the beginning by just using * - all!
Hope this helps. Also, footers are notoriously difficult, since CSS doesn't do vertical sizing very well...there's a few solutions out there but they all have something wrong, up to you what you want to be wrong :)
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.
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?