Jump to content


Photo

Noobie questions


  • Please log in to reply
4 replies to this topic

#1 Slim1950

Slim1950

    Forum Newcomer

  • Members
  • Pip
  • 4 posts

Posted 17 March 2017 - 07:50 PM

I introduced myself as a newcomer in the appropriate forum.

If my questions are way too beginnerish, have patience, I am a quick study, But please help me out. Rt now, I am taking a course at udemy for $20, but he keeps losing me. And he doesn't get at the very beginner type questions I have. So here they are.

 

Question #1.  How do I take an image and make it my background image? Should be straightforward, and I used to do it in HTML several versions ago, but now there are sections, and CSS style sheets and all that other stuff.

 

My second question. I need to do a drop down menu that gives a user a choice of quite a few other links.

For instance, a drop down menu that has a list of chapters that link to corresponding pages. 

 

Man, am I rusty at this stuff. I did this way back when the Internet first came on the scene, but have apparently forgotten so much that I am embarrassed to ask...

 

So



#2 Fee

Fee

    Forum Newcomer

  • Members
  • Pip
  • 15 posts
  • Gender:Male
  • Location:Scotland
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 19 March 2017 - 06:19 PM

Try not to let CSS intimidate you, I understand it can be pretty overwhelming getting started/coming back after a long period of time. A good plan is probably first to get the basics of linking up a stylesheet understood. And then from there understanding how this effects your html. Have a read of this: 

 

https://www.tutorial...what_is_css.htm

 

Once you've followed through some of the above tutorials, working with a background image is probably actually a good way to get your feet wet with CSS. Mainly because (if you do it the right way) it will introduce you to different selectors and some browser compatibility prefixes. Anyway, take a look at the following CSS: 

html{
   background: url(img/background.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

The first thing I will point out is that the second line, in which you declare your intended background image would in and of itself suffice to create a background image. However the above CSS is a good way of ensuring the background image will cover the entire browser window, dealing with different screen sizes, devices etc which is half the battle when it comes to building websites these days. 

 

Secondly, you will notice we are applying this style to the html element, rather than the body element, which may have been what you expected. The reason for this is  that the body element doesn't immediately take up the entire height of the viewport whereas the html element does. 

 

To specify which image you want to use, simply declare a background: url() and paste in the directory path to your desired image within the parenthesis. If your stylesheet isn't in the root folder in relation to your images, you can begin the path with ./ to return to the root directory. Then we apply some values to our background property. Firstly, no-repeat, this ensures our image isn't repeated in a tile like fashion. Next we position the background image. By default it will start at 0, 0 (the top left). Since we are intending to cover the entire screen we need it positioned in the middle, so we specify center center to ensure it is placed 50% horizontally and vertically. 

 

Finally we specify the background-size: cover; The background-size property in CSS is really useful, but also a bit complex. If you feel like it, read up on it a bit. But for this I'll suffice to say specifying cover ensures the image will stretch to fill the container whilst maintaining width/height aspect ratio. You'll notice we've declared this four times, with different prefixes at the start. We do this to ensure different browsers support our cover. Webkit covers chrome, Android, iOS and safari I believe. moz covers Firefox and o covers opera. I believe microsoft browsers support it directly, but if not we can use the -ms- prefix. 

 

With regards to a dropdown menu, this is a bit more tricky, and is probably beyond the scope of what I could explain in a single post. My advice here would be to use Google. There is quite literally thousands of tutorials on dropdown menus, some will involve the use of JavaScript, but if you don't want that Googling something to the effect of "Pure CSS Dropdown Menu" will be a good starting point to research. 

 

I hope some of this will be helpful, as I said don't let yourself become overwhelmed with the amount of things there is to learn, these things take time and no one ever stops learning and improving. If it's too much just grab the first line of code and it will suffice to begin with. 



#3 Slim1950

Slim1950

    Forum Newcomer

  • Members
  • Pip
  • 4 posts

Posted 19 March 2017 - 09:13 PM

Thanks so much for your reply. I will go to work deciphering it all and seeking to understand. I will let you know of the fruit of your reply and am sure I will be back with more questions. I notice in your profile, you see yourself as a beginner. Well, if you are a beginner, what does that make me? :)



#4 Fee

Fee

    Forum Newcomer

  • Members
  • Pip
  • 15 posts
  • Gender:Male
  • Location:Scotland
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 19 March 2017 - 10:00 PM

Please do. I'm happy to put together some stuff for a drop down menu too, but I see little point in reinventing the wheel so to speak when it has been done hundreds of times before and probably to a higher standard than I am capable of. I did actually consider marking myself as intermediate, but there is so much to learn that I feel I have barely scrapped the iceberg. It's essentially just where I see myself, we all have our own views on where we are versus where we would like to be. And with that in mind I still consider myself as someone who has a lot to learn. 



#5 hugmax

hugmax

    Forum Newcomer

  • Members
  • Pip
  • 9 posts

Posted 29 March 2017 - 10:28 AM

Take a look at bootstrap documentation.

you can use it to make good menus and stuff






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users