Header problem

[Kaylen]

Hi,

I want my header to look like the header on the cmsmadesimple site.
But  I see a logo image on the left side of the header and the right side of the header(with the menu) gets placed underneath the logo image instead of next to it. I have pictures of how it looks like now and how I wanted it to look, but I don't seem te be able to get them copied into this topic.

This is my css code:
/* HEADER */
div#page_top {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #FFFFFF;           
            text-align: left;
        }
/*kleur naast linker logo */
        div#header {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #FFFF00;           
            text-align: left;
        }
div#header_left {
            margin: 0;
            padding: 0;
            height: 80px;
width: 125px;
            background: #FFFFFF;           
            text-align: left;
        }
        div#header_left h1 a {
            background:  url(uploads/images/Logo.jpg) no-repeat 0 12px;
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 125px;
            margin: 0;
            padding: 0;
        }
div#header_right {
            margin: 0;
            padding: 0;
            height: 20px;
            background: #0000FF;           
            text-align: right;
        }
div#menu_horiz {
            margin: 0;
            padding: 0;
            height: 20px;
            background: #00FFFF;           
            text-align: right;
        }
  div#menu_horiz h2 a {
            background:  url(uploads/images/l) no-repeat 0 12px;
            display: block;
            height: 20px;
            text-indent: -700em;
            width: 50px;
            margin: 0;
            padding: 0;
        }
div#top-nav{
            margin: 0;
            padding: 0;
            height: 20px;
            background: #0000FF;           
            text-align: right;
        }


    /* END HEADER */
   
And this is the code I put into the layout:

   
     
         
            Welcome to CMS Made Simple
         


         

         
           
               Main Navigation
               
                   

1: Main
2: News

3: Downloads
4: Documentation
5: Forum
7: Development



               

           
         

         

     
     
   

   

Can someone please help me ??

Many thnx in advance!

Barbera

[cyberman]

but I don't seem te be able to get them copied into this topic.

If you write in forum you will see in the bottom a link like extended options (or enhanced options?). If you click this you will get an area you can attach a file  .

Please add this:

div#header_left {
            margin: 0;
            padding: 0;
            height: 80px;
            width: 125px;
            background: #FFFFFF;         
            text-align: left;
            float: left;
        }

 
and this

div#header_right {
            margin: 0;
            padding: 0;
            height: 20px;
            background: #0000FF;         
            text-align: right;
            float: right;
}

to your css.

[Kaylen]

Dear cyberman,

thnx for the help. I did exactly what you said and added the to floats to my css and saved it, but when I go to my site everything still looks the same.....
The top navigation menu is still beneath my logo picture.

Can you help some more? Or someone else have any ideas?

thnx! Barbera

[Dr.CSS]

Got Link
if we can goto your site it makes it easier to help some times,,

    mark

[Kaylen]

dear mark,

its a local site, I'm designing it locally before I upload it.

barbera

[sydneysunshine]

Hello! You can get the menu to appear beside the logo by playing around with the margins and padding in #top-nav and #menu_horiz, for example try margin-top: -50px; and margin-left: 250px;

Also you can adjust the width of #menu_horiz and float it to the right for some other options.

[Kaylen]

thnx for the tip! I now have the menutekst more to the right, but it is still underneath my logo picture

see attachment

[attachment deleted by admin]

[Dr.CSS]

do you want your menu in the header?
you want the menu to have the logo right next to it?

  mark
please post newest html, css....

[Kaylen]

yes I want my menu in the header, thats why I made a div id=header and within there a div id=header_left and a div id= header_right (see code) I want it to look like the header of the cmsmadesimple page. So if you look at my attachment from my last post: I want the menu starting with "main" to begin next to my logo picture aligned to the bottom of that picture.(see new attachment). I tried adding al the divs one by one to see where it goed wrong and I think the problem is in the menu_horiz part because once I add that the menu gets placed under the logo picture and before it was (in list form but ok) next to my logo picture.

Here is my source:
css:
/* HEADER */
div#page_top {
            margin: 0;
            padding: 0;
            height: 80px;
width: 100%;
            background: #FFFFFF;         
            text-align: left;
        }
/*kleur naast linker logo geel*/
        div#header {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #FFFF00;           
            text-align: left;
        }
div#header_left {
            margin: 0;
            padding: 0;

            height: 80px;
            width: 125px;
            background: #FFFFFF;         
            text-align: left;
            float : left;

        }
        div#header_left h1 {
            background:  url(uploads/images/Logo.jpg) no-repeat  0 12px;
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 125px;
            margin: 0;
            padding: 0;

        }
div#header_right {
            margin: 0;
            padding: 0;
            height: 20px;
            background: #0000FF;         
            text-align: right;
            float: right;
        }
div#menu_horiz {
            margin: 0;
            padding: 0;
            height: 20px;
            background: #00FFFF;         
            text-align: right;

        }
  div#menu_horiz h2  {
            background:  #000000;
            display: block;
            height: 20px;
            text-indent: -700em;
            margin: 0;
            padding: 0;
        }
div#top-nav{
            margin-top: -50px;
            margin-left: -100px;

            padding: 0px;
            height: 20px;
    width: 500px;
/* donker blauw */
            background: #0000FF;         
            text-align: right;

        }


    /* END HEADER */

HTML:

 
     
       
            Asystolie
       


       

       
           
              Main Navigation
             
                 

1: Main
2: News

3: Downloads
4: Documentation
5: Forum
7: Development


             

           
       

       

     
     
 

 

Many thanx for your help~!

ps the upload folder is full so I cannot post the new attqchment
I will do it as soon as possible

[Dr.CSS]

if you are using the default style sheets besides the one you posted, there is a style sheet that has
    div#menu_horiz {
        width: 100%;
        text-align: left;
    }
look thru all CSS attached to this template for this and delete it and you will be able to make it move over for the img. to fit
and you are telling the div#top-nav{      to go 100px past the left side of your page
            margin-top: -50px;
            margin-left: -100px;

text indent is to make any text in the div disappear

    mark

[Kaylen]

hi mark,

I found the style sheet and removed div#menu_horiz {
        width: 100%;
        text-align: left;
    }
I also changed  margin-left: -100px; into  margin-left: 100px;
and I removed the tekst indent, but it still looks the same.....
div#menu_horiz h2  {
            background:  #000000;
            display: block;
           
           
            margin: 0;
            padding: 0;
        }
div#top-nav{
            margin-top: -50px;
            margin-left: 100px;

            padding: 0px;
            height: 20px;
    width: 500px;
/* donker blauw */
            background: #0000FF;         
            text-align: right;




what am I doing wrong?

[Kaylen]

there were a couple of stylesheets with info over div#menu_horiz.... I deleted all the other data in the other style sheets and now my menu appears next to the logo picture ) But it is now in the top righthand corner instead of being at the bottom just right of the logo picture aligning with the bottom of the picture....

I still cannot upload a picture due to a full folder.... otherwise I could show you what I mean...

I hope someone can stil help me?

Mark many thanks so far, ,after your advise this is the first time my menu is actually next to my logo picture )

[sydneysunshine]

Just picking back up on this... have you still got -50px set on margin-top, because you may need to take that away now.
It's so hard to test these things quickly isn't it?

[Kaylen]

with margin-right: 344px; I got the menu to move to the left so it is now positioned next to my logo picture but still at the top
I tried playing with margin-topbut it does not seem to respond to it. Even removing the margin-top completely makes no diffrence..

How can I get the menu to go down and the bottom of the menu to be aligned with the bottom of my logo picture?

[sydneysunshine]

I'll play around with your layout on my test server and see if I can replicate the problem.