Mon, 2007-09-17 14:51
Below is the relevant code. If you want to examine the page in full then visit - http://www.thebrandsurgery.co.uk/testsite/. It's all valid. The space inbetween the text and the pink title's is what I'm trying to get rid of.
The problem is that I need to position the div id="text" negatively because of the logo. This then leaves unwanted space at the bottom of the text. No matter what I do, because the text is negatively positioned, it still leaves the bottom space as though the text was positioned normally.
Any help would be great.
HTML
1) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
2) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.
CSS
div#content {float:right; width:660px; margin:0; padding:0; background-image:url('images/backgroundfade.gif');background-repeat: repeat-y;}
div#text {position:relative; top:-100px; left:0; width:615px; margin:0 20px 15px; padding:0; border: 1px #000000 solid;}
:curse:
Mon, 2007-09-17 16:38
#1
Give it a negative
Give it a negative margin-bottom.
Mon, 2007-09-17 18:16
#2
Setting an element position
Setting an element position relative then shifting it's position using offset values will leave a space, position relative means that the element is shifted relative to it's inflow position, the area it should occupy is still reserved for it.
Better would have been to position the logo absolute with the container positioned relative for context placement of the logo, logo would be set top:-5px left:60px and the #text div would have a normal top margin ~120px to push it down out of the way of the logo.
Try to avoid using too much by way of top/left offsets to position elements as it has the problems you ran across.
The negative bottom margin will work but it's best to find a more robust solution.
Hugo.
Wed, 2007-09-19 08:43
#3
qube99 wrote:Give it a
qube99 wrote:
Give it a negative margin-bottom.
Perfect. Thanks a lot.
Thu, 2007-09-20 20:49
#4
Sorry guess the explanation
Sorry guess the explanation wasn't helpful :shrug: 
Mon, 2007-10-01 12:52
#5
Hugo wrote:Sorry guess the
Hugo wrote:
Sorry guess the explanation wasn't helpful :shrug:
No, thanks for the explanation. The other answer was much shorter plus you mention using absolute positioning which I didn't want as I didn't think the logo would remain centered when the screen size is changed.
Anyway, it all works and is strict valid so I'm hapy as Larry.
Cheers.