Need help cleaning up Page Header

DoubleDee · November 20, 2011, 7:20pm

Pardon my brain for rusting while I have been away from CSS since this past spring?!

I could use some help cleaning up my Page Header.

Here is a link to my test site…

Questions:

1.) In my included Page Header I have…


      <div id="pageHeader">
        <!-- Display Logo -->
        <a href="index.php">
          <img id="logo" src="/images/debbie_160x45.png" width="160" alt="Debbie" />
        </a>

Should the Logo be wrapped in a <p> or something?

2.) Why isn’t this acting like a “block” item?

        
        <!-- Display Welcome -->
        <p id="welcome">
          <span id="hello">Hello.</span>
            <a href="">Log In</a> to access premium content.
            &nbsp; Not a Member? &nbsp;<a href="">Start Here</a>
        </p>

These echoes should be on the next line beneath everything…


        <!-- Find Current Page Name -->
        <?php
          $page = basename($_SERVER['REQUEST_URI']);
          if (($page == '/')||($page == '')) {
            $page = "index.php";
          }
          
          echo '<p>$_SERVER[\\'REQUEST_URI\\'] = ' . $_SERVER['REQUEST_URI'] . '</p>';
          echo '<br /><br />basename($_SERVER[\\'REQUEST_URI\\']) = ' . basename($_SERVER['REQUEST_URI']) . '<br />';
          echo '<br /><br />$page = ' . $page . '<br />';
        ?>

Thanks,

Debbie

dresden_phoenix · November 20, 2011, 7:41pm

SHAME letting CSS fall by the way side

Yes. Or at least a block level element like DIV. Generally, it is bad form to have inline elements be siblings with block elements A + P , for example…
It IS. P is block item, the As and SPANs are not. If you want them to be you will need to route rules declaring the to be display:block; Ex: #welcome span { display:block;}

On an unrelated note… why do you have non-breaking spaces between words???

“The echo of a distant time / Comes willowing across the sand / And everything is green and submarine …”

Seriously tho, they are there ( BT, I would suggest not using BR and just wrapping your intended output in a block level element which you can style …

I cant see your actual file , but remember that if you are using PHP, your file name should be INDEX.PHP not INDEX.HTML

Hope that helps.

DoubleDee · November 20, 2011, 7:50pm

So should I use <div> or <p>?? (I bet Paul O and DeathShadow have opinions…)

It IS. P is block item, the As and SPANs are not. If you want them to be you will need to route rules declaring the to be display:block; Ex: #welcome span { display:block;}

Well, I want the Logo and the Welcome to be on the same line, so how do I do that?

I also want my PHP echo statements to appear below the Logo/Welcome for now…

On an unrelated note… why do you have non-breaking spaces between words???

Because I wanted to wider space between “Hello. Log In to access premium content.” and “Not a Member?” and “Start Here”…

“The echo of a distant time / Comes willowing across the sand / And everything is green and submarine …”

Huh?

Seriously tho, they are there ( BT, I would suggest not using BR and just wrapping your intended output in a block level element which you can style …

The crux of this thread is styling things properly so the Logo and Welcome are on the same line and then everything else is below them. (Right now my first test echo is showing up to the right of the “Welcome” style…

I cant see your actual file , but remember that if you are using PHP, your file name should be INDEX.PHP not INDEX.HTML

Hope that helps.

I don’t follow you?! :-/

If I click on the “Home” tab I get: http://www.doubledee.byethost2.com/[B]index.php[/B]

Debbie

DoubleDee · November 20, 2011, 8:08pm

Should I be using

clear: both;

after Logo and Welcome?


/******************************************************************************/
/* HEADER STYLES														*/
/******************************************************************************/
#logo{
	float: left;
	margin: 0.5em 18px 1em 0;
}

#welcome {
	float: left;
	padding: 33px 0 0.5em 0;
	font-size: 0.8em;
}

And I still don’t see why

<p id="welcome">

would NOT extend out to the right margin since it should be a

display: block

item?! :-/

Debbie

TechnoBear · November 20, 2011, 8:55pm

Presumably because of the

float:left

(Again, I’m finding it hard to see what’s happening when the layout appears broken.)

DoubleDee · November 20, 2011, 9:03pm

What do you want to see or know?

I went to great lengths to post my code online - per your earlier request. So now what is missing?

And, YES, my page header isn’t working properly… That is why I am asking help here?!

Attached is a screen-shot of the same you you should be seeing now. (Mods please approve asap.)

Thanks,

Debbie

TechnoBear · November 20, 2011, 10:48pm

Sorry - it’s just I’m not expecting to see PHP statements in the page.

I’m doing my best to help, and I believe my answer is correct. Use Firebug to take the float off that paragraph and you’ll see it extends across the page.

dresden_phoenix · November 20, 2011, 11:48pm

For #1 I would suggest DIV as it’s semantically neutral and a logo is not a paragraph.
#2 did you mean THE ELEMENTS #welcome and #logo to appear side by side?

#welcome span {display:block;} should produce results like these:
[PRE] Hello.
Log In to access premium content. Not a Member? Start Here
[/PRE]

And your logo position should be unaffected.

The lesson is that DISPLAY:BLOCK; on an element is like putting a BR above and bellow it.

I would rewrite that section like this:


        <p id="welcome"> Hello. <span> <a href="">Log In</a> to access premium content.</span><span>Not a Member? &nbsp;<a href="">Start Here</a><span></p>

Move the type rules for #hello in to #welcome{}, then reset them in #welcome span{} and add display block;

and yes adding clear:both; to the first echoed <P> should make everything drop where it’s supposed to.

DoubleDee · November 21, 2011, 12:30am

Okay.

#2 did you mean THE ELEMENTS #welcome and #logo to appear side by side?

Can you see my screenshot?

What I want is the Logo is in the upper left-hand corner and immediately to the right my “Hello. Log In to access premium content. Not a Member? Start Here”

(Exactly like my screenshot shows…)

The problem is that the test echo statements I put in aren’t starting on the next line below the Logo and Welcome. (Even though the PHP echo statements are just for testing purposes, I want to understand why they are being displayed weird, because that shows me my CSS isn’t completely right…)

The lesson is that DISPLAY:BLOCK; on an element is like putting a BR above and bellow it.

But if I have the Logo floated to the far left, and the the Welcome is floated to the left (and to the right of the Logo) and I put a

display: block

on either one, then won’t my Logo and Welcome be on separate lines as well?

and yes adding clear:both; to the first echoed <P> should make everything drop where it’s supposed to.

I think the problem there is that

<p id="welcome">

and

<p>

would both affected by the

clear:both

Debbie

dresden_phoenix · November 21, 2011, 3:57am

Ah. I dont thing you are understanding that the clear attribute always needs to be applied to the element following the float. so you woun’t give #welcome clear: both , you would give it to the element immediately following it.

leaving IE compatibility out of this just to simplify my answer :

#welcome +* {clear:both;}

but the better solution, which I was hinting at earlier, was to give the FIRST P in your PHP output a class, which has the clear:both attribute.

DoubleDee · November 21, 2011, 4:11am

Here is what I came up with…

http://www.doubledee.byethost2.com/

Debbie

Topic		Replies	Views
Need help styling Header HTML & CSS	41	1714	March 10, 2011
Algin left and right on the same line with php? Get Started	4	585	September 17, 2011
R/F My first page HTML & CSS	9	777	July 28, 2011
Floatint to inline lists to the right but on seperate lines HTML & CSS	12	925	February 1, 2010
No Margin between Elements HTML & CSS	10	995	December 6, 2011

Need help cleaning up Page Header

Related topics