Positioning help

X

xadrieth

New Member
Messages
62
Reaction score
1
Points
0
Um, I'm trying to create a little "Welcome back USERNAME" bar at the top of my website.

It looks like this right now:
problem.png


I don't want it like that because of that stupid padding, I want it to be glued right to the borders of the browser, like this:

solution.png


Any help on how to get it like this?
 
Scoochi2

Scoochi2

New Member
Messages
185
Reaction score
0
Points
0
I don't fully understand... why not just get rid of the padding???

Can you link us to the source?
 
X

xadrieth

New Member
Messages
62
Reaction score
1
Points
0
Sure, but that padding is caused from the browser, and im not sure how to get rid of it.

HTML: 
<div id="userbar">Hi There</div>

It's declared right after the <body> tag.

Code: 
#userbar
{ background-color: #C8C8C8;
border-style: solid;
border-color: #515151;
border-top-width: 0px;
border-right-width: 1px;;
border-bottom-width: 2px;
border-left-width: 1px; 

padding: 3px;
font-size: 12px;
color: #010101; }
 
Last edited:
X

xadrieth

New Member
Messages
62
Reaction score
1
Points
0
sourfacedcyclop said:
add this in your body tag,

Code: 
margin:0;
padding:0;
Click to expand...

Problem fixed, thank you so much.

EDIT:
New problem.

I'm having some more positioning problems.

I added this code:
HTML: 
<div id="panel"><span style="float: left;">Hi There</span><span style="float: right;">Time is Hammer Time</span></div>

And it looks like this:
problem-1.png


And it shouldn't.

How would I get the text to appear in the DIV with the SPANS sending the text to the left/right
 
Last edited:
sourfacedcyclop

sourfacedcyclop

New Member
Messages
221
Reaction score
0
Points
0
Hmmm... Its really hard to address without seeing it, but you could try this

Code: 
<div id="panel"><span style="text-align:left;">Hi There</span><span style="text-align:right;">Time is Hammer Time</span></div>
 
X

xadrieth

New Member
Messages
62
Reaction score
1
Points
0
Nah, that didn't work, it just smushed the text right together on the left.

EDIT:
Figured out a quick fix.

Added:
padding-bottem: 20px;

To the ID of "panel"
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
To get #panel to contain floats, use #panel { overflow: auto; }. Explicitly altering the height is brittle and will break if the font size changes or if the text ever takes up more than one line.

To get more prompt help, include a link to a live version of your minimal test case.
 
X

xadrieth

New Member
Messages
62
Reaction score
1
Points
0
misson said:
To get #panel to contain floats, use #panel { overflow: auto; }. Explicitly altering the height is brittle and will break if the font size changes or if the text ever takes up more than one line.

To get more prompt help, include a link to a live version of your minimal test case.
Click to expand...

Thank you, this is what I was looking for more.

I'll try to get a link to it later today, I just need to put some finishing touches on it.
 
You must log in or register to reply here.
Top