How do I put a picture on the right side of the header?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

How do I put a picture on the right side of the header?

Post by Gregor »

I found out how logo1.gif is placed on top of the site. I also want a picture on the right site. Does anyone have the code for me that I can add to the template?

Thanks in advance,
G
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: How do I put a picture on the right side of the header?

Post by Gregor »

Thanks Cyberman, I gave it a try, however I think I missed something.

Code: Select all

   /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #385C72;           
            text-align: left;
        }
        div#header_left {
            margin: 0;
            padding: 0;
            height: 80px;
            width: 198px;
            text-align: left;
            float: left;
        }
        div#header h1 a {
            background:  url(uploads/images/logo1.gif) no-repeat 0 0px; 
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 198px;
            margin: 0;
            padding: 0;
        }
        div#header_right {
            margin: 0;
            padding: 0;
            height: 80px;
            width: 198px;
            text-align: right;
            float: right;
        }
        div#header h1 a {
            background:  url(uploads/images/logo1.gif) no-repeat 0 0px; 
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 198px;
            margin: 0;
            padding: 0;
        }

    /* END HEADER */
For example I want logo1.gif on the left and on the riht side. What part of the code do I miss?
cyberman

Re: How do I put a picture on the right side of the header?

Post by cyberman »

Can you post a link?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How do I put a picture on the right side of the header?

Post by Dr.CSS »

if you do have h1 a in the template in the header_left and _right try,,

div#header_left h1 a {

div#header_right h1 a {

otherwise your calling the same thing twice

do you have any text in these if not you can get rid of the
text-align:,, text-indent:,,

  HTH
        mark
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: How do I put a picture on the right side of the header?

Post by Gregor »

www.uisge-beatha.eu

Maksbud, thanks for the suggestion, but no luck.
I'd like to have text in the header as well.
Last edited by Gregor on Wed May 10, 2006 8:44 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How do I put a picture on the right side of the header?

Post by Dr.CSS »

do you know you have two in your template?

you need to,,

 

          Uisge Beatha


if you put an h1 in these with it set to text-indent: the words won't show up,

    mark
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: How do I put a picture on the right side of the header?

Post by Gregor »

Oeps, you're losing me.... Do I have to make changes in the Lay-out template ???

I think I found it, I had:

Code: Select all

<head>
<title>Uisge Beatha - een Hanse311 zeilboot</title>
<meta name="keywords" content="zeilen, zeilboot, uisge beatha, hanse 311, hanse311, gregor de graaf">
<meta name="description" content="Het levensverhaal van de Uisge Beatha">
<meta http-equiv="Content-Language" content="NL">
<meta name="copyright" content="Gregor de Graaf">
<meta name="robots" content="all">
<meta name="generator" content="wjSubmit - http://inventio.nl/">
</head>


in the admin-part as well as in the metadata of a content page.
Last edited by Gregor on Wed May 10, 2006 8:53 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How do I put a picture on the right side of the header?

Post by Dr.CSS »

in what ever 'template' you put this title in,,


Uisge Beatha - mijn Hanse311 - Uisge Beatha

    mark
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: How do I put a picture on the right side of the header?

Post by Gregor »

This piece of code is in "CSSMenu Vert 1 col"

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!-- Type the title of your site here -->
<title>Uisge Beatha - mijn Hanse311 - {title}</title> 

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{global_content name='JavaScript for IE page width'}

User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How do I put a picture on the right side of the header?

Post by Dr.CSS »

yep, down lower you will see the header if you change it like,

 
    whatever
          Uisge Beatha
      whatever
   

if you want text take out the, text-indent: -700em;  you should be set, and you don't need to put  _ in between the header left, header right,

    mark
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: How do I put a picture on the right side of the header?

Post by Gregor »

I don't understand what I'm doing, things are getting mixed up, changing template and stylesheet, the current picture on the left is doubled downwards, on the right side nothing occurs  :-\ I put everything back to it's original state. Where can I take it from here?

Thanks (and for now, good night)
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am

Re: How do I put a picture on the right side of the header?

Post by Gregor »

Reading the text, I was a bit frustrated, mostly because I don't know what I'm doing besides following your well ment suggestions. Can we take it from here?
Post Reply

Return to “Layout and Design (CSS & HTML)”