6 replies [Last post]
Oedipus112
Oedipus112's picture
Offline
Regular
Last seen: 6 years 28 weeks ago
Timezone: GMT+2
Joined: 2009-11-22
Posts: 15
Points: 19

I have made a website newthinking

I have placed the titles on all pages beneath the header because I have not been able to place them INSIDE the header.
How to do that? What is the best course of action?

1. To work with images?
2. To position absolutely. And if so, is this page: http://www.joe2torials.com/view_tutorial.php?view=37 a good example of that?
3. By working with float. To position the titles next to the image that is in each header?

this image shows what I want to do: photobucket

I will appreaciate your comments.

AttachmentSize
website.png672.59 KB
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5340
Points: 2961

Hi Oedipus112, Start by

Hi Oedipus112,
Start by changing:

<div id="header">
<div id="link1">
<a name="top"></a><a href="../../inhoudsopgave.html"><strong>Index</strong></a>
</div>
<img class="image" src="../../Images/labyrinth.png" width="220" height="220" alt="caduceus">
 
</div>
 
<h1> Westerse geneeskunde, homeopathie en Chinese geneeskunde</h1>

To This:

<div id="header">
<div id="link1">
<a name="top"></a><a href="../../inhoudsopgave.html"><strong>Index</strong></a>
</div>
<img class="image" src="../../Images/labyrinth.png" width="220" height="220" alt="caduceus">
<h1> Westerse geneeskunde, homeopathie en Chinese geneeskunde</h1>
</div>

Oedipus112
Oedipus112's picture
Offline
Regular
Last seen: 6 years 28 weeks ago
Timezone: GMT+2
Joined: 2009-11-22
Posts: 15
Points: 19

Thank you for answering. I

Thank you for answering.

I did what you suggested. But I also want the title to be vertically aligned. To position it in the middle of the header next to the image.

How to do that?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5340
Points: 2961

In a stylesheet use position

In a stylesheet use position absolute.
something like:

#header{ position:relative;}
#header h1{ 
  position:absolute;
  top: 100px; 
  left:200px;
}

Adjust the values to position it where you want.

Oedipus112
Oedipus112's picture
Offline
Regular
Last seen: 6 years 28 weeks ago
Timezone: GMT+2
Joined: 2009-11-22
Posts: 15
Points: 19

difference between two codes

What is the difference between these two codes:

#header{ position:relative;}
#header h1{ 
  position:absolute;
  top: 100px; 
  left:200px;
}

and

#header{ position:relative;}
 h1{ 
  position:absolute;
  top: 100px; 
  left:200px;
}

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 2 years 28 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

In the second example you are

In the second example you are targeting every single h1 tag in your site. By specifying the name of the containing div then the h1 tag you are only targeting the h1 tags in the header.

P.S. To position a tag absolutely with regard to its containing div you need to position that div relative. Otherwise you absolutely positioned element will be positioned according to the viewport.

Oedipus112
Oedipus112's picture
Offline
Regular
Last seen: 6 years 28 weeks ago
Timezone: GMT+2
Joined: 2009-11-22
Posts: 15
Points: 19

Great answers

Great answers. I know it is newbie stuff, and therefore grateful.

For those interested, take a look at my website (in progress): http://www.newthinking.nl.

You can see the titles in the headers. I succeeded. Smile