change joomla top part in css

[PEO]

I really dig the new joomla template, But I would like to change the top part of the template

 

at the moment the default code is this

 

	
		
	
	
		
			
				templates/<?php echo $this->template ?>/images/logo.png
			
		
		countModules('topmenu')): ?>
		
			
				
			
		
		 
	

 

If you look at my diagram this is how I would like my top part to look

 

I've got zero idea on how to code this and was wondering if someone could help me out?

 

lots of rep for those that help... cheers

[PEO]

*bump*

[PEO]

Hi ok thanks for that,

 

I've added another position to the xml file and edited the following php and css code

 

   	
      countModules('sitemenu')): ?>
		
			
				
			
		
		 
	
		
			
				templates/<?php echo $this->template ?>/images/logo.png
			
		
           
		
	
	
		countModules('topmenu')): ?>
		
			
				
			
		
		 
	

 

.headerbg{
width: 100%;
margin-top: 0px;
}

.headerbg33{
width: 650px;
padding-left: 320px;
padding-top: 0px;
float: left;
padding-bottom: 40;

}



.headerbg2{
width : 950px;
height: 93px;
}

.headerbg21{
width: 300px;
padding-top: 40px;
float: left;
height: 93px;
}

.headerbg1{
width: 180px;
padding-left: 600px;
height: 30px;
}

.headerbg22{
width: 300px;
padding-top: 0px;
float: left;


}

 

I've used the topmenu for rhe sitemenu until I create another menu to the site menu its just a temp till I get everything positioned. See screen shot for current progress

 

Im struggling with moving the search up so it inline with the jogo but centred, and the bottom menu needs to move to the right.

 

any ideas?

[PEO]

ps an addinional mofule called sitemenu was added to the modules

[daboroe]

PEO

 

you just added another module position for the links above the logo correct?

 

thanks

 

m. brown

[PEO]

Yep I added an additional module for the sitemenu.

 

I've really tried to figure this out formyself. Im not sure how tables are coded with css or what the

tags mean.

[mossj]

The div tag is a container, its supposed to be used instead of tables for layout purposes.

 

Right first of all to make coding easier we change the color of the divs to display where they are and how big they are.

 

.headerbg{
width: 100%;
margin-top: 0px;
           [b]background-color: grey;[/b]
}

.headerbg33{
width: 650px;
padding-left: 320px;
padding-top: 0px;
float: left;
padding-bottom: 40;
            [b]background-color: red;[/b]

}



.headerbg2{
width : 950px;
height: 93px;
[b]background-color: yellow;[/b]
}

.headerbg21{
width: 300px;
padding-top: 40px;
float: left;
height: 93px;
[b]background-color: green;[/b]
}

.headerbg1{
width: 180px;
padding-left: 600px;
height: 30px;
[b]background-color: blue;[/b]
}

.headerbg22{
width: 300px;
padding-top: 0px;
float: left;
[b]background-color: brown;[/b]	
}

 

That should give you a clear idea of how the css is working (screenshot please), I think this CSS should get you further towards your goal.

 

.headerbg{
width: 100%;
margin-top: 0px;
}

.headerbg33{
width: 650px;
padding-left: 320px;
padding-top: 10px;
float: right;
padding-bottom: 10px;

}




.headerbg21{
width: 300px;
padding-top: 40px;
float: left;
height: 93px;
}

.headerbg1{
          [b]margin-top: ;[/b]
/* If its too high add px, too low add negitive px IE 10px or -10px */
          float: right;
width: 300px;
padding-left: 600px;
height: 30px;
}

.headerbg2{
width : 950px;
height: 93px;
}



.headerbg22{
           [b]direction: ltr;[/b]
/* Should change the link direction back to left too right */
width: 950px;
padding-top: 0px;
float: left;
text-align: left;


}

 

Okay that should produce some interesting results. Again screenshots would be helpful and please excuse basic errors as I didn't refrence any of this (I ussually open up every CSS file I've done and copy/past bits of code out of each)... It may just randomly go overwhere but thats the nature of css...

Edited July 2, 2009 by mossj
Finished off a comment with a semi-colon, doh!