blenderNetworkpatreonblender-logosdheartuserthtimesbookphotopencilmap-markerchevron-rightbancommentcommentstwitterfacebookrsschainnavicongoogle-plusenvelopelinkedinmail-replycalendar-otumblrredditstumbleuponshare-altbloggerflattrflag

I need help..

I need help..

Postby djm » March 10th, 2010, 3:23 am

As you can see I'm in a need of help right now! It's about a homepage for my webpages made as school-projects. What I need help with, really, is how to fix menus (Java, jQuery) and some CSS basics for the menu. Since I'm new to CSS and jQuery, under alot of pressure with different projects in school and home. I need help, thx!
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden

Re: I need help..

Postby IrascibleOne » March 10th, 2010, 4:03 pm

I used JQuery on the slideout menus (and a CSS hover backup for people without Javascript on) on the new version of Imantu. I hope you mean Javascript when you say Java, because I have never made a Java application for a web page. I have done Java before though.

Give me some specifics on exactly what you want to do with the menus and I can try to help.

Now that I think about it, this could be a good article in the blog...
Image
User avatar
IrascibleOne
Site Admin
Site Admin
 
Posts: 1539
Joined: July 31st, 2008, 7:14 pm

Re: I need help..

Postby djm » March 11th, 2010, 12:21 am

I want to make a menu, that slides down when you click on it. Like; Pictures -> animations, concept art, photos... And besides that I also want to make the page have columns. A "main column" where the text is, a column for the menus, a column for adverticing etc.

And about the Java part; yes I meant Javascript.
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden

Re: I need help..

Postby IrascibleOne » March 14th, 2010, 1:44 pm

Sorry I haven't replied a quickly as usual, had finals over the last couple of days so I have been studying for those.

Anyways, columns in CSS can be a pain, depending on how you wanna do it. From what it looks like, you want three columns; content, menu, and ads. You can see my quickie tutorial in the spoiler below.

SHOW SPOILER
First you have the container, it's not really necessary, but I like having a container around all of the main body parts. Within that container we have 3 more div's, one for each of the columns.
Code: Select all
<div id="container">
   <div id="left"></div>
   <div id="center"></div>
   <div id="right"></div>
</div>

For what I am showing you, that is all you will really need in terms of HTML (you still gotta put it within the body tags and all that). There are multiple ways that one can make columns, but the way that I seem to do it most often is with floats. First I have the container:
Code: Select all
#container{
   display: block;
   width: 1000px;
   margin: auto;
}

To explain this, the display:block; line forces the div to display itself, well, like a block. If you set width and height values, it will take those values regardless of whether or not something is actually within the Div. In this case, we make it 1000px wide and the margin:auto; line centers the div on the page.

Now for the columns in CSS:
Code: Select all
#left{
   float: left;
   width: 250px;
   background: green;
}
#center{
   float: left;
   width: 500px;
   background: blue;
}
#right{
   float: right;
   width: 250px;
   background: yellow;
}


As you can see, they are all pretty much the same thing (which means we could combine them for less lines of code, but that is not the point right now). I think the width and the background are self explanatory, they are only really there so that you can see how it is working. Now, for all three we must have the float value. If one does not have a float value, then things won't show up correctly. Assuming the names of the divs are how we want the page to look, both the #left and #center much have a value of left.

As for the right, you would use the right value to make it stay on the right. Technically, I think you can still use left for the rightmost one, but I use right just because that makes more sense to me. If you wanna see the full code I used for this, here is the file:
columns.zip


Feel free to say something if something does not make sense. I'll be back later with the jQuery part. I think I might make it a post in the blog of the site.
You do not have the required permissions to view the files attached to this post.
Image
User avatar
IrascibleOne
Site Admin
Site Admin
 
Posts: 1539
Joined: July 31st, 2008, 7:14 pm

Re: I need help..

Postby djm » March 14th, 2010, 2:47 pm

Everything makes sense, pretty obvious (haha), since I've been working with CSS for 2 weeks now. But as you say, columns are such a pain in the ass (excuse me for the bad choice of word). As it goes for the layout and the looks of the columns I'm still stuck. You see.. You have 3 columns, but 2 rows aswell + foot note and header. I can fix foot note and header without any problems but to make the rows connect with the coulmns by using CSS is still something I'm struggling with.

I'd appreciate if you could show me how it works, more advanced to it (I'm a fast learner). And when we're done with the CSS strggules we'll head over to jQuery. I don't want you to kill yourself by helping me so take one topic at a time, please! xD :lol:
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden

Re: I need help..

Postby IrascibleOne » March 14th, 2010, 4:57 pm

djm wrote:You see.. You have 3 columns, but 2 rows aswell + foot note and header. I can fix foot note and header without any problems but to make the rows connect with the coulmns by using CSS is still something I'm struggling with.


I'm not sure I understand what you are saying here, what do you mean when you say 'make the rows connect with the columns'? Is it possible to show me what you mean?
Image
User avatar
IrascibleOne
Site Admin
Site Admin
 
Posts: 1539
Joined: July 31st, 2008, 7:14 pm

Re: I need help..

Postby djm » March 15th, 2010, 5:06 am

Well, if you look on the layout of this forum you have the top menu, the "last visited, date etc." menu and then we have this row; The container. Every website has got Foot notes and headers. The header, obviously, is the "head" and is at the top of the page. In this case the header is the top menu. The foot note on here is the "who is online" part. See what I mean? I can't really explain more breifly since my english is quite bad and darkscarab is programmed with CSS. With Iframe it's way more simple to explain/show how and what I mean.

If you don't understand what I mean, completely, please visit this site and you'll see exactly how my example worked out:
http://www.kamrat.com/ - I hate that website but it's the only good example I could find right now.
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden

Re: I need help..

Postby IrascibleOne » March 15th, 2010, 10:44 am

Oh, I think I understand now. You are trying to put rows within a column?

Just add more DIVs. Since you want the rows within a column, you would just put the new row DIVs within a column DIV. Then make the width of the row div as wide as the column (or close to it) and you have your row within the column. Kinda like this:

SHOW SPOILER
HTML CODE
Code: Select all
<div id="container">
   <div id="left"></div>
   <div id="center">
      <div class="row"></div>
      <div class="row"></div>
      <div class="row"></div>
   </div>
   <div id="right"></div>
</div>


CSS CODE
Code: Select all
#container{
   display: block;
   width: 1000px;
   margin: auto;
}
#left{
   float: left;
   width: 250px;
   background: green;
}
#center{
   float: left;
   width: 500px;
   background: blue;
}
#right{
   float: right;
   width: 250px;
   background: yellow;
}
.row{
   background: red;
   width: 100%;
   margin: 5px 0px;
}
Image
User avatar
IrascibleOne
Site Admin
Site Admin
 
Posts: 1539
Joined: July 31st, 2008, 7:14 pm

Re: I need help..

Postby djm » March 15th, 2010, 1:20 pm

hm strange.. It didn't work :O
Regards, DJM aka Sheldin!

DeviantArt Profile
http://sheldiner.deviantart.com/

Youtube (Tutorials/Gaming)
http://www.youtube.com/SheldinLP
User avatar
djm
Pro
Pro
 
Posts: 478
Joined: December 11th, 2009, 4:04 pm
Location: Sweden

Re: I need help..

Postby IrascibleOne » March 15th, 2010, 10:14 pm

Here is my file of what I explained above, if that helps at all. I was going to add it, I guess I forgot.
rowsincolumns.zip
You do not have the required permissions to view the files attached to this post.
Image
User avatar
IrascibleOne
Site Admin
Site Admin
 
Posts: 1539
Joined: July 31st, 2008, 7:14 pm
Next
Return to Programming

Who is online

Users browsing this forum: No registered users and 1 guest

cron