Positioning help

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by xadrieth, Jul 8, 2009.

  1. xadrieth

    xadrieth New Member

    Um, I'm trying to create a little "Welcome back USERNAME" bar at the top of my website.

    It looks like this right now:

    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:


    Any help on how to get it like this?
  2. Scoochi2

    Scoochi2 New Member

    I don't fully understand... why not just get rid of the padding???

    Can you link us to the source?
  3. xadrieth

    xadrieth New Member

    Sure, but that padding is caused from the browser, and im not sure how to get rid of it.

    <div id="userbar">Hi There</div>
    It's declared right after the <body> tag.

    { 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: Jul 8, 2009
  4. sourfacedcyclop

    sourfacedcyclop New Member

    add this in your body tag,

  5. xadrieth

    xadrieth New Member

    Problem fixed, thank you so much.

    New problem.

    I'm having some more positioning problems.

    I added this code:
    <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:

    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: Jul 8, 2009
  6. sourfacedcyclop

    sourfacedcyclop New Member

    Can you give a link to your site?
  7. xadrieth

    xadrieth New Member

    I'm testing it right now on XAMPP.

    If you want to see what I am trying to achieve with the DIVS and SPANS, take a look at http://twewy-fan.com/forum/, where it asks for a login.

    Where it asks for the Login info, it uses the DIV with SPANS that I want, the test to b aligned to the right/left on the same line.
  8. sourfacedcyclop

    sourfacedcyclop New Member

    Hmmm... Its really hard to address without seeing it, but you could try this

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

    xadrieth New Member

    Nah, that didn't work, it just smushed the text right together on the left.

    Figured out a quick fix.

    padding-bottem: 20px;

    To the ID of "panel"
    Last edited: Jul 8, 2009
  10. misson

    misson Community Paragon Community Support

    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.
  11. xadrieth

    xadrieth New Member

    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.

Share This Page