SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    login prompt in header for css non-expert

    I'm mainly a backend coder that's gets stuck on some CSS issues once in a while - that must seem simple to real front-end developers. Here is my latest ...

    I've got most of my site laid out in a dev environment. Take a look:
    http://dev.bhglaar.com/aboutus/publicpolicy.php

    Now my issue is, I'm trying to add a small bit of text as a MEMBER LOGIN prompt - at the bottom right of the header that looks like so:
    http://dev.bhglaar.com/Final_MemberLogIn.html

    Now please note, THIS page is a mockup of the site design I received from marketing. It is laid out in tables and with fully inline everything. Terrible, abysmally poor markup. So I wasn't using that as my model.

    I'm really only working with the header view element anyway. But the version I have on my index page right now looks like this:
    http://dev.bhglaar.com

    I've got the header view element html below. But basically, I created a div just for that *Member Login* text and I'm trying to position it relatively - which I've succeeded at doing, but for some reason, I'm still taking up the 30+px of space and throwing my scrolling marquee off. I know its a {position:?;} thing ... but I'd really love not to tear my hair out over it.

    The real challenge for me is connecting to a 3rd party db to prompt an active session for the user.

    If someone could help me with this, I'd really appreciate it. Thx.


    PHP Code:
    <link rel="icon" type="image/png" href="http://www.sitepoint.com/forums/images/favicon.png" />

    <
    div class="loginchrome">
    <
    a href="/index.php"><img src="http://www.sitepoint.com/forums/images/new_bhglaar_header.gif" alt="header"  width="975" height="103" /></a>
    <
    div class="small_white_header">
    <
    p><class="white_header" href="http://www.bhglaar.com/"><b>**MEMBER LOG-IN**</b></a></p>
    </
    div
    <
    div id="marquee1" onmouseover="S1.Speed=0;" onmouseout="S1.Speed=-2;" >
     <
    span><nobr><font face="Arial" font-weight="bold" font-style="normal" font-size="14px" color="white"><b>&nbsp;SANTA MONICA&nbsp; / &nbsp;CULVER CITY&nbsp; / &nbsp;BEVERLY HILLS&nbsp; / &nbsp;WEST HOLLYWOOD&nbsp; /  &nbsp;LOS ANGELES&nbsp; / &nbsp;BEL AIR&nbsp; / &nbsp;HOLLYWOOD&nbsp; / &nbsp;LOS FELIZ&nbsp; / &nbsp;MARINA DEL REY&nbsp; / &nbsp;BRENTWOOD&nbsp; / &nbsp;PACIFIC PALISADES&nbsp; / &nbsp;WESTWOOD&nbsp; / &nbsp;SILVERLAKE&nbsp; / &nbsp;VENICE&nbsp; / &nbsp;WEST LOS ANGELES&nbsp; /</b></font></nobr></span>
    </
    div></div>
    <
    script  type="text/javascript" src="js/marquee2.js"></script> 

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Basically, it's better to reverse the positioning, and put relative on the parent and absolute on the child, like so:

    Code:
    div.loginchrome {
      position: relative;
    }
    Code:
    div.small_white_header {
      height: 24px;
      position: absolute;
      bottom: 30px;
      right: 0;
      width: 150px;
    }
    You might need to adjust the bottom and right settings. That was just a quick guess.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I would change a few things around to give it a little structure and semantics and also remove any divs that aren't doing anything.

    Your header is a logo with the site name so I would use an h1 for that and use an image replacement technique to get some text into the html.

    Then I'd tidy up the multiple divs that you have around things that don't really need to be there.

    As a rule of thumb don't use relative positioning because it will rarely do what you expect. It doesn't move anything physically it just moves them visually. The space that they previously occupied is always preserved as though the element hadn't been moved at all. That's what it's job is - it's not used to move structural elements around as such although it can with care.

    As Raplh said you can absolutely place that header link and just let the rest of the page take up the flow.

    Don't use empty elements to make space as there is a never a need for that. Paddin g or margins will always do that job without extra markup.

    You also seem to have 2 page wrappers when only one is needed.

    I would change the top section like this.

    Code:
    <div id="container">
        <div class="header">
            <h1><a href="/index.php">Beverly Hills/ Greater Los Angele - Association of Realtors<b></b></a></h1>
            <p class="small_white_header"><a class="white_header" href="http://www.bhglaar.com/">**Member Log-In**</a></p>
            <div id="marquee1" onMouseOver="S1.Speed=0;" onMouseOut="S1.Speed=-2;" ><span>&nbsp;Santa Monica&nbsp; / &nbsp;Culver City&nbsp; / &nbsp;Beverly Hills&nbsp; / &nbsp;West Hollywood&nbsp; /  &nbsp;Los Angeles&nbsp; / &nbsp;Bel Air&nbsp; / &nbsp;Hollywood&nbsp; / &nbsp;Los Feliz&nbsp; / &nbsp;Marina Del Rey&nbsp; / &nbsp;Brentwood&nbsp; / &nbsp;Pacific Palisades&nbsp; / &nbsp;Westwood&nbsp; / &nbsp;Silverlake&nbsp; / &nbsp;Venice&nbsp; / &nbsp;West Los Angeles&nbsp; /</span></div>
            <script  type="text/javascript" src="http://dev.bhglaar.com/js/marquee2.js"></script>
        </div>
        <div class="leftcolmain">
            <div class="mainmenu">
                <div class="sidebarmenu">
    Much neater and more succinct and easier to manage.

    The css for that section would look like this (exisiting styles for those elements could be removed as they are using rules that are not applicable to the element concerned anyway).

    Code:
    #container {
        overflow:hidden;/* to clear floats*/
        width:975px;
        background:#fff;
        margin:8px auto 0;
    }
    .header {
        height: 133px;
        position:relative;
    }
    .header p {margin:0}
    #marquee1 {
        position:relative;
        width:975px;
        height:24px;
        line-height:24px;
        background:#25466e;
        overflow:hidden;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:bold;
        font-style:normal;
        font-size:16px;
        color:#fff;
        text-transform:uppercase;
        white-space:nowrap;
    }
    .header h1, .header h1 a, .header h1 b {
        margin:0;
        padding:0;
        width:975px;
        height:103px;
        position:relative;
        display:block;
        text-decoration:none;
        overflow:hidden;
        border:none;
    }
    .header h1 b {
        position:absolute;
        height:103px;
        left:0;
        top:0;
        background:url(http://dev.bhglaar.com/images/new_bhglaar_header.gif) no-repeat 0 0;
    }
    .small_white_header {
        position:absolute;
        right:15px;
        top:80px;
    }
    Hope that helps a bit

  4. #4
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I'm sure this will fix. Haven't had a chance to insert the code yet but I do appreciate the help.


  5. #5
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks very much for this fix. It worked ... though I'm still going through it to give myself a better understanding of how and why

    One thing though if you look - the scrolling marquee became thicker by about 10-15px and I'm not sure why. See the initial version of the header here

    Other than that though, this was just right. Thank you.

    Quote Originally Posted by Paul O'B View Post
    Hi,

    I would change a few things around to give it a little structure and semantics and also remove any divs that aren't doing anything.

    Your header is a logo with the site name so I would use an h1 for that and use an image replacement technique to get some text into the html.

    Then I'd tidy up the multiple divs that you have around things that don't really need to be there.

    As a rule of thumb don't use relative positioning because it will rarely do what you expect. It doesn't move anything physically it just moves them visually. The space that they previously occupied is always preserved as though the element hadn't been moved at all. That's what it's job is - it's not used to move structural elements around as such although it can with care.

    As Raplh said you can absolutely place that header link and just let the rest of the page take up the flow.

    Don't use empty elements to make space as there is a never a need for that. Paddin g or margins will always do that job without extra markup.

    You also seem to have 2 page wrappers when only one is needed.

    I would change the top section like this.

    Much neater and more succinct and easier to manage.

    The css for that section would look like this (exisiting styles for those elements could be removed as they are using rules that are not applicable to the element concerned anyway).



    Hope that helps a bit

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by shotdsherrif View Post
    One thing though if you look - the scrolling marquee became thicker by about 10-15px and I'm not sure why.
    It's coming from this rule here on line 184:

    Code:
    #marquee1 {
      background-color: #4D6A8D;
      left: 0;
      padding-bottom: 4px;
      padding-top: 4px;
      top: -5px;
    }

  7. #7
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That did it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •