Public Forums 71,145 posts

[songket Friend songketJoin date: February 2012Posts: 8Downloads:0Uploads:4 Thanks: 3]

#442101

Hi hankedson,

I want to do as yours but I don’t know how to do it. Reading from swissa and your post, i think you resolved it and could you mind in helping me to do it. I am totally new to joomla and this is my first time using it. I want to do like this:

<em>@hankedson 305376 wrote:</em><blockquote>
<block name=”header” type=”header” main-inner=”1″>topnav,oursocial</block>
</blockquote>
As your first post, thereare topnav and oursocial in header block but mine have nothing in there.
<block name=”header” type=”header”></block>

My site now is just like this:

I really appreciate if you can help me in this problem 🙂

---

Attachments:

1. 
2. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442237

Hi Hank,

Sorry run the menu part by me again? You want so that it is above the logo – it’s bottom is level with the logo’s top?

We can try to do that – may have to adjust the other bits a bit but up to you!!

Or you want the bottom of the “Share” button to be horizontally aligned with the bottom of the logo?

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442241

Hi Swissa,

No, I’ve confused you. Sorry. What I want is three blocks going left to right all on the same horizontal axis
like this line: _______________________________________ (logo) (menu) (social media block comprised of icons and Sharethis)

So ideally, the bottom of the logo, the bottom of the words in the menu and the bottom of the Share this button all line up. I do NOT mean stacking the menu over the logo.

Basically, I’d like to move the menu DOWN and either move the social media (icons and share this) just A TOUCH UP or
move the menu DOWN and the LOGO just A TOUCH DOWN.

I hope that makes it a bit clearer.

Thank you!

Hank

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442242

<em>@hankedson 305597 wrote:</em><blockquote>Hi Swissa,

No, I’ve confused you. Sorry. What I want is three blocks going left to right all on the same horizontal axis
like this line: _______________________________________ (logo) (menu) (social media block comprised of icons and Sharethis)

So ideally, the bottom of the logo, the bottom of the words in the menu and the bottom of the Share this button all line up. I do NOT mean stacking the menu over the logo.

Basically, I’d like to move the menu DOWN and either move the social media (icons and share this) just A TOUCH UP or
move the menu DOWN and the LOGO just A TOUCH DOWN.

I hope that makes it a bit clearer.

Thank you!

Hank</blockquote>

Understand!

We can move the share button up a bit – change it’s ‘margin-top’ from 40px to 33px (This will align it’s bottom exactly with that of the logo) and you can change the social buttons ‘padding-top’ from 18px to 11px.

Using css it will not be possible to have them all on the same axis. For that you WOULD need to build out new positions and then use float:left; and float: right; I think.

Sorry! Heh, but I did get it to match your original picture though!! 😀

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442256

That’s great, Swissa. Thank you so much! I think I will try to build out a new position, but this is a big step forward. I wonder if you can answer a couple of questions.

One, in order for the float parameter to work, does the position parameter have to be at “relative.” Can you explain what the “float” and “relative” settings exactly do?

Also, I apologize for being so dense but could you explain the math how you calculated the “margin-top” numbers to make the bottom of the logo and the share this button align?

Third, with joomlArts templates discussed in this forum I have seen in a number of instances related to creating new positions the term “clearfix.” Do you know if this is just a random name assigned to a class or position OR is “clearfix” a type of tag or class with a definite purpose or meaning and do I need to know that when creating a new position?

Last, I have figured out how to build a new position inserted vertically just below the “topnav” in the header block, which then spans horizontally across the entire page. What I can’t seem to figure out is what is the step to instruct that the new position appear to the right of “topnav” in the header block. My intuition tells me I need to define the width of “topnav” and the width of the new position somewhere and then set “topnav” to the left and the new position to the right. Then put the social media module in the new position. But I don’t know how to do that. I am also assuming the logo stays in the topnav position and that the menu can be lowered on the same horizontal axis as the logo when this is done, as that is how it appears in the sample data version sold at JoomlaArts. Perhaps, this is wrong and I have to create a new position to put the logo in as well. I guess I’m not sure where the logo is located. In any event, my main question here is: Do you know how I define the new position for the social media module placing it just to the right of the “topnav” position?

I realize you may not have time to wade through my confusion, but any part of this you understand and have time to answer, would be terrific.

Thank you again for all your help!! 🙂

Hank

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#442265

Glad I could help a bit.

Float is used to position elements to the maximum of their containing element/position. These don’t have a fixed position hence they float! And it is only horizontal. So if I float right it will go to the border on the right for example. If the position moves the float will too but always stay as far right as it can.

Example. http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

Positions are fixed. That can be an absolute fixed position or one relative to its first position hence you get position: relative; and then you can also add a margin away from it’s relative position.

Example http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=relative

Clearfix is still on my not fully there yet list. Kind of got the concept – it is used to ensure that a floated element fills the parent container. http://www.sycha.com/css-clearfix-floated-element-automatically-fill-parent-container

http://css-tricks.com/all-about-floats/

For CSS this is a great resource – http://www.w3schools.com/cssref/

For T3, rather than me bore you or confuse you, the wiki IS the place to go and the section about layout and blocks should answer your questions about widths and sizing. http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides

Wish you all the best with it Hank!

[hankedson Friend hankedsonJoin date: January 2012Posts: 81Downloads:14Uploads:33 Thanks: 5]

#442270

Great! Thank you, Swissa!

Hank

[Author]

Posts