I have a div, inside the div is a background image that looks like a button and I have text in the div saying "Home". By default the text is snapped to the top and does not look right. How could I move the text around in the div without moving the div?
css file:
http://pastebin.com/xrAFMVDd
html file:
http://pastebin.com/b5Fubte0
One way of doing this is to wrap your text in a <p> tag and use CSS attributes top and left with position: relative to specify the position of the text relative to the top left of the div.
See an example here: http://jsfiddle.net/zvMKH/
I fixed it by changing the line-height under #button1 li a. Worked like a charm! Thanks to everybody that contributed! I really appreciate it!
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/
This is live demo: http://jsfiddle.net/9Y7Cm/5/
Everything is fine with that, until the text width there is higher than the div width.
If you will add some text there, the line will break and the text will be displayed under of the image instead of next to the image (as you can see in my first fiddle).
Here you can see what happends, it text width is higher than div container width:
http://jsfiddle.net/9Y7Cm/12/
Is there a way to fix that?
Give your right side content a width and float it to the right, like so:
http://jsfiddle.net/9Y7Cm/14/
For a cleaner result, i suggest you separate both sides of your content, left and right, with a class and width and then float them to set them side by side.
Just remove display:inline-block; from the CSS for the span element (jsFiddle example).
More information on display:inline-block.
inline-block: This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
The problem is with display:inline-block for the span. Remove it, and the text will be on the same line
s you can see in the picture, the text inside the contact link is aligned to the right, I want it to align to the left so there is no redundant space inside it, I tried with text align: left inside the div but it didn't work, any ideas?
Thanks!
You can use text-align:left or float:left style to that link style
I have a div and that div has a height of 200px. Inside the div there is text and I don't want the div to have scrollbars therefore I've set overflow:hidden.
Now, inside that div there is a also a list, acting as a dropdown box. When you click on the list/dropdown box, I want it to come on TOP of the main div.
Here is an example with the main div to overflow:hidden:
And this is an example without overflow:hidden. So I want the following but the text not overflowing.
jsFiddle: http://jsfiddle.net/w8kQA/
You could set the overflow:hidden on the element inside the box, instead of on the box itself:
http://jsfiddle.net/w8kQA/1/
In the comments above, you mention that you have 20 boxes inside a div.
If that is the case then I would wrap the #box and the .list inside of a holder div. That way you can achive your layout and still have multiple boxes in a div.
JSFiddle: http://jsfiddle.net/w8kQA/2/
You can also reduce the max-height of your list to fit into the div.
http://jsfiddle.net/etienne_carre/w8kQA/4/
You can do it like this: http://jsfiddle.net/w8kQA/7/