CSS positioning

[intellagentz 0]

can anyone explain how to position the custom button I created at www.learn2monetize.com/hvr It appears to be off to the right. The other issue is, is that when I click on it, it brings me to the correct page link..but the button itself no longer renders. As an aside...I think this framework requires more than an elementary CSS abilities so I think something should be done about this (ex tutorials, more examples, sub-categorized forums). Most importantly however, you should do a better job of disclosing this to the prospective user so they are fairly warned in advance. Just my 2 cents.

[kastelic 6]

Which button exactly?

[intellagentz 0]

I sort of fixed the problem by trial and error, but i found that i had to include the custom buttons on the top right "inside the top branding" hook. When i tried any other hook, the images were positioned relative to the margin of the screen. I'm not sure how to fix the position of an image using CSS so that it aligns with the margin of the page wrap. I'm by no means a CSS expert.

[catrina 103]

Do you still need further assistance?

[intellagentz 0]

Yes and no. I've spent an ungodly amount of time on my buttons and it's almost become an obsession...but in my view, the header area and "the fold" are prime website real estate so I wanted to exploit that. I'm fairly happy with it, but I still don't know how to position items within the header. Right now, the buttons are hooked using the "inside_top_branding" hook. That is essentially helping me align right and within the context of the page margin. If I were to use any other hook, I wouldn't know how to position it in the same way, without the image moving relative to screen size (which usually means off to the right). I'd like to understand for my own sake.

[cmunns 16]

The hooks will place it in different areas of the html, but when you place these buttons it's best to wrap them in some sort of div to use for positioning the buttons as a whole. Is this where you got stuck? It looks good now, but what exactly do you need clarifying on?

[intellagentz 0]

Yes it is where I get stuck. I still don't think I'm 100% clear on how to set up the divs and the proper syntax and placement of that syntax. Secondly, I don't know if you can absolute position an image on it's own. So lets say I wanted to add another element (image link) over my Header. How would I set up the div for that and what kind of position syntax would I use, absolute or fixed? Is there a good source of CSS tutorials you can point to while we're at it? How would I set up a

[catrina 103]

If you wanted to add an image link in your header that you want to stay fixed there (stays there regardless of scrolling down), you can use the fixed property (example/tutorial). If you wanted to add an image link that "moves" along with the other elements in the layout when you scroll, use the absolute property. In your case, it's best to use the absolute positioning.

[intellagentz 0]

The problem I have with absolute positioning is that it is not "relative" to the margins of the margin set up for my page. Perhaps that's a function of the global set up. In other words, sometimes, an image will go beyond the margin of the template page, depending on the size of screen width. That's where I believe "relative" positioning comes into play. I suppose I'll have to deal with it on a case by case basis as I go along.

[cmunns 16]

It will all depend on what the parent element is (ie where in the html your code is located) Read more here: http://www.westciv.com/style_master/academy/css_tutorial/properties/page_layout.html

[intellagentz 0]

right, so is correct to say that some CSS coding (ex relative positioning) can only take place within the Stylesheet itself (ie rather than the custom code area)

[Andrew 207]

@Carl no, you can add CSS anywhere you like, and it will have the same effect. Relative positioning, doesn't actually help you position something. It helps you position things: inside of it. So parent element = `position:relative` means you can position absolutely inside of it: child element `position: absolute;` (relative to the parent)