I am having an issue with font settings and padding in CSS, I am a visual person and I bet you are one too, so here's my problem: http://imgur.com/Wh441.png if you can solve it I will give you an upvote :O
A:
What you're probably looking for is the line-height property.
Example: http://jsfiddle.net/J2g6y/
Alec
2010-10-11 22:46:06
I tried it and it works but depending whether I zoom in or out of the browser it stops working.
2010-10-11 23:13:41
Ah ok, well I was going by the question / image supplied... not by mind reading what the **actual** problem is... Just out of interest, @Alec, how exactly did you get `line-height` from the question and image?
ClarkeyBoy
2010-10-11 23:18:15
@user472755: In reply to your edit, try using my solution - but replace the absolute divs with an absolute `ul`, with `bottom: 0px; left: 10%;` and several `li` tags with `float: left`. Dont use `position: absolute` on the `li` tags.
ClarkeyBoy
2010-10-11 23:21:07
@user472755, my Fiddle example scales just fine here. Like everyone else said: we can't help you properly if you don't post your code.
Alec
2010-10-12 00:08:09
@Alec I followed your model and it does work, turns out in your example of for #nav in mine I had padding:1em; added to it, and that screwed things up, I find that rather unfortunate but that's Okay I guess if I add manually padding:1em; to each object that needed spacing on, I will I get the result I want. Thanks!
2010-10-12 00:22:47
A:
Ideally, I would let the header grow to have it's bottom pushed down by the growing buttons, but if I wanted to just adjust based on the text, I'd move the text up 1em (which is it's own height)
you can play with it here
FatherStorm
2010-10-11 22:50:24
A:
Your code so far is somewhat needed, but based purely on the image I would do the following:
<div style="position: relative;">
<img src="header.gif" />
<div style="position: absolute; left: 10%; width: 10%; bottom: 0px;">Left text</div>
<div style="position: absolute; left: 30%; width: 10%; bottom: 0px;">Middle text</div>
<div style="position: absolute; left: 50%; width: 10%; bottom: 0px;">Right text</div>
</div>
Obviously without any code and only an image to go by I cant really help much - but this should get you well on the way to achieving this. At least some extra effort could have been put into the image, such as what elements you are using where and so on. You would also need to put the above into CSS - but this is just a quick, untested attempt to achieve what you want.
ClarkeyBoy
2010-10-11 22:50:47
A:
http://jsfiddle.net/2kYuG/2 This should be my anwser :) Let us know when you can show us the code :)
no1cobla
2010-10-11 23:59:02