login prompt in header for css non-expert

[shotdsherrif]

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.

<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><a 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> 

[ralph.m]

Basically, it's better to reverse the positioning, and put relative on the parent and absolute on the child, like so:

div.loginchrome {
  position: relative;
}

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.

[Paul O'B]

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.

<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).

#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

[shotdsherrif]

Thank you. I'm sure this will fix. Haven't had a chance to insert the code yet but I do appreciate the help.

[shotdsherrif]

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.

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

[ralph.m]

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:

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

[shotdsherrif]

Thanks. That did it.