CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 4938

Three column header using floating elements

What the Header Should Look Like

This is how the header should look like.

Header2

What it currently looks like

Header

As you can see, my header isn't looking too good... I seem to be having some floating issues.

Current Header Code

Here is the HMTL I used to generate my header.

I'm trying to center the h1, float the logo to the left completely and have the h2 display beside the logo. The publish date and publisher are fine.

<header>
    <ul style="list-style-type:none;float:right;">
      <li style="float:left;">
        <img src="C:\Logo.jpg" alt="Logo"/>
      </li>
      <li style="float:left;">
        <h2>Statuts de Production</h2>
      </li>
      <li style="float:right;">
        <h1 style="margin-bottom:0px">Machines en cours d'assemblage</h1>
      </li>
      <ul style="list-style-type:none;float:right;">
        <li>
          Dernière mise à jour: <xsl:value-of select="Table/Publish/DateEntry"/>
        </li>
        <li>
          Par: <xsl:value-of select="Table/Publish/Username"/>
        </li>
      </ul>
    </ul>
  </header>

Am I not using the right approach? Should I use a table instead of an unordered list?

Upvotes: 0

Views: 204

Answers (2)

Jan Turoň
Jan Turoň

Reputation: 32912

If you want to vertical align the list items and indent the middle one, just remove the styles from the HTML and use this external CSS (using external CSS is the first thing to improve your approach):

ul { display: block; list-style-type:none; height: 50px;  }
li { display: inline-block; vertical-align: middle; }
ul ul { display: inline-block; }
ul ul li { display: block; }

and set the padding to each list item as you want, the third item might be floated right.

Second: you can not use image path on your HDD C:\Logo.jpg to enable the access from clients, use the http://... protocol.

Third: you can not use ul as direct child of ul. Only lis are allowed inside ul

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>
    <ul>
      <li>subitem 1</li>
      <li>subitem 2</li>
    </ul>
  </li>
</ul>

Upvotes: 1

WhyMe
WhyMe

Reputation: 535

Dose the following help you? it is designed such that the hight is constant.

<div style='position:relative; padding:0px 200px 0px 200px; background-color:gray;height:20px;box-sizing:border-box;'>
    <div style='position:absolute;background-color:yellow; left:0px; top:0px; height:100%;width:200px;'>
        left pannel
    </div>
    <div style='position:absolute;background-color:yellow; right:0px; top:0px; height:100%; width:200px;'>
        right pannel.
    </div>
    <div style='box-sizing:border-box;width:100%;text-align:center;'>
        Center
    </div>
</div>

You can see it also here.

Upvotes: 1

Related Questions