HTML and CSS

Positoning logo inline with H1 and H2

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Oct 2009

Posts: 4

Reputation: tiffinlar is an unknown quantity at this point

Solved Threads: 0

tiffinlar

Offline

Newbie Poster

Positoning logo inline with H1 and H2

20 Days Ago

HTML:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div id="header">
        <h1>Derby County Football Club</h1>
        <h2>Index Page</h2>
        <img class="logo" src="image/dcfc_logo.jpg" alt="DCFC Logo" width="120" height="120" /> 
      </div>
<div id="header">
        <h1>Derby County Football Club</h1>
        <h2>Index Page</h2>
        <img class="logo" src="image/dcfc_logo.jpg" alt="DCFC Logo" width="120" height="120" /> 
      </div>

CSS:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#header{
position: relative;
  text-align: right;
  border: 1px solid #000;
  background: #FFFFFF;
  margin: 5px;
  padding: 3px;
}
.logo{
 
}

What i want is to display the H1 and H2 on the right, and have the logo on the left all in line with each other. any suggestions?

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

20 Days Ago

float the image to the left
css:
.logo {float:left}

•

Join Date: Oct 2009

Posts: 4

Reputation: tiffinlar is an unknown quantity at this point

Solved Threads: 0

tiffinlar

Offline

Newbie Poster

20 Days Ago

Not relevent to a container in the center that im using

and im using boxes, any other suggestions?

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

20 Days Ago

The document flow must always follow the visual flow therefore the obvious is to order the alements according to that flow...

•

Originally Posted by tiffinlar

HTML:
Help with Code Tags

(Toggle Plain Text)
<div id="header">
<img class="logo" src="image/dcfc_logo.jpg" alt="DCFC Logo" width="120" height="120" /> 
        <h1>Derby County Football Club</h1>
        <h2>Index Page</h2>
      </div>
<div id="header"> <img class="logo" src="image/dcfc_logo.jpg" alt="DCFC Logo" width="120" height="120" /> <h1>Derby County Football Club</h1> <h2>Index Page</h2> </div>

Therefore (for it to Function) you should make (the hilighted) adequate change to your stuctural code too. You should remove that "position:relative" if you Iike to preserve the integrity of your boxes too! Thought you knew that - and don't forget to remove the right alignement of your headers also, - it looks better left-aligned, right by the image logo, to my taste ofcourse.
Regards

Last edited by Troy III; 20 Days Ago at 3:54 pm.

•

Join Date: Oct 2009

Posts: 4

Reputation: tiffinlar is an unknown quantity at this point

Solved Threads: 0

tiffinlar

Offline

Newbie Poster

20 Days Ago

•

Originally Posted by Troy III

The document flow must always follow the visual flow therefore the obvious is to order the alements according to that flow...

Therefore (for it to Function) you should make (the hilighted) adequate change to your stuctural code too. You should remove that "position:relative" if you Iike to preserve the integrity of your boxes too! Thought you knew that - and don't forget to remove the right alignement of your headers also, - it looks better left-aligned, right by the image logo, to my taste ofcourse.
Regards

thanks, its sorted