First Website issues

[LilChaoos]

Hi,i'm new in coding and i've started a project for a friend.

I gotta this -> http://caniscioltiasd.altervista.org


So my questions are two.

Why the facebook icon move when i switch too higher resolution?


And how i can make the menu opens in the white box?


Thanks for support!

[XManBG]

Hi,

about the Facebook icon, your DIV id="follow" has width of 900px, which is too long for that icon. When you change your window size, the whole div is jumping.

Which menu do you mean?! The big bar in the middle doesn't have one?!

[LilChaoos]

Uhm,thanks,i will fix the icon. The menu is the big green bar, i would make that when you click on the one of the 3 element the content opens in the big white box,how i can do that?


Edit: i've modified the fb icon but it still move when i switch resolution.. :S

[XManBG]

There are many ways to do the content loading in the middle box. It depends on, what content do you like to show: you can use AJAX and load from external html file; or you can prepare some divs positioned in the middle and hide/show them on menu clicks however you like; or you can just "create" new content in the existing middle div by using the $(element).html("content") with jQuery, or document.getElementById("id").innerHTML with JS.

As far as I can see, the width of this div id="follow" is still 900px... You have probably changed something else.

[LilChaoos]

Thanks a lot for support,it really appreciated. I've finally modified the #follow,but know on higher resolution it goes to the left.. how can i fix it?


For the content can you make me an example of this " you can prepare some divs positioned in the middle and hide/show them on menu clicks however you like" ?


REALLY,THANKS!

[LilChaoos]

Oh,that's ok ! I've fixed all the page -> http://caniscioltiasd.altervista.org .

My last problem is the DIV SHOW on click,can you help me?

[XManBG]

You have to understand the structure of a page. It's about the boxes principle. Each element is a box, which is placed somewhere on that page background. If you place one box named ".headerleft" on the left, then it is there, and no other box can get over it, or inside it, if you not tell this explicitly. Your "#follow" is actually a box inside the middle div named "#content". You have told to "#follow" to get outside of the borders of "#content" by setting the margin-left:-25px. That's theoretically OK, but not if you change the window size. Doing this, you're "pushing" the boxes together. The best hint I can give you, is to rethink the page structure and reorder the "boxes", i.e. your div-s, accordingly by paying attention to all margins, padding, position, top, left or right, float, width and height.

About filling out with content: you can make it easy by using the jQuery library and catch the clicks on your menu points. To do so, you'll need different menu point id-s, just to know which one has been clicked.

For example, lets say, you'll name the first <a class="testomenu" id="chisiamo">. Then the syntax for catching its click using jQuery is $("#chisiamo").click(function(){$("#content").append(" ... all the stuff you like to show ... ")});. Of course you can do it also without jQuery by using the standard JS onclick="" function like <a class="testomenu" onclick=" ... function to do the same content showing or inserting ... ">.

[LilChaoos]

I've fixed the page,as you can see! Now i didn't understand the "Of course you can do it also without jQuery by using the standard JS onclick="" function like <a class="testomenu" onclick=" ... function to do the same content showing or inserting ... ">." Can you make me a real example? Thanks a lot!

[LilChaoos]

Up

[Brillig]

What exactly do you mean by making the menu opens in the white box?

I'm seeing latin show up when the menus click.