Site has weird gap at the top and bullets overlap borders on small window sizes

[612wharfavenue]

Please take a look, its live now but no one is really visiting it so its ok, i want to know how i get rid of that gap at the top and when you make the window really small how to make the bulletpoints fall within the borders instead of over.

Edited June 14, 2013 by 612wharfavenue

[dsonesuk]

don't use top: use margins instead, as in margin-top: - 150px; using postion: relative with top: -150px means it wiil move up from its current relative position, but its total area will now include its new and previous position.

[612wharfavenue]

Thanks, now when you make the window really narrow like on a phone the bullet points spill over the borders, how can i contain them like a normal paragraph?

[dsonesuk]

use percentage for width, and think about using min-width: these containers and also for body element.

[612wharfavenue]

Alright ive tried all sorts of combinations of setting the width and minwidth with percentages for both the div and the ul but it either doesnt do anything or it messes up the centering, i dont understand, if i set the div to be a certain width why cant i set the ul to be a certain width too within the div so that the div is just used for placement? It doesnt seem to work this way.

[dsonesuk]

The problem with the dashed borders, is that if you set to min-width: the border distance from edges is going to take upto 40% of the width of 240px (for example only) wide screen. You either have to lose the border/s, or use percentage for margin of borders so it would take very little of screen at 240px width.

body (min-width: 240px;} #left, #right {	bottom: 0;	top: 0;	width: 1%;} #frame {	border-radius: 10px 10px 10px 10px;	border-style: dashed;	border-width: thick;	margin: 2.5%;	position: relative;	top: -100px;	z-index: 9;}