How do I move the navigation bar to the left, and make corners rounded, and further polish my website?

HTML & CSS
1

Hi there. Haven’t been at CSS for a while, but I’d like to start making my website for my video game better, especially for my portfolio for resumes. In any case, there’s a couple things I’d like to change. Here’s an image of what I would like to do:
https://landra.000webhostapp.com/futurewebsite.png

Right now, this is what my website looks like:
https://landra.000webhostapp.com/index.html

As you can see, here is what I want to do:

  1. Round the corners of the squared boxes.
  2. Move the navigation bar from the top to the left, and space it so it has some padding inside of the main body div.
  3. Add a rounded div at the bottom with credits.
  4. Have animated coins in the header, that when you click on them, it changes the image of the header.

Although I didn’t show it in the pic, I’d also like to add background images to the div, so they aren’t as boring as solid colors.

This is currently my style-sheet I am using:
https://landra.000webhostapp.com/style.css

Any ideas on how I could do this, or tutorials that could help? I’m pretty rusty on CSS at the moment, but I’d be willing to spend some hours learning again to brush-up, although I am on a bit of a deadline.

Thanks for reading.

2

Well for a start You need to visualize the layout the way you want it.

what I mean by that think of “DIV’s” as “main” they help to layout your websites the way you want to see your page, they are like containers or “divides” if you want to call it,

judging by the image I’d say at least ± 5 DIV’s to begin with obviously it depends on peoples style that changes the number of DIV’s but if it was me i’d use at least 4 to 5 DIV’s for this.

Now to answer your questions.

Using border-radius:; to apply the rounded borders be wary they don’t work on most older browsers so if you are not concerned for that than border Radius is your friend :).

In my mind that can be best achieved using <ul></ul> tags simply styling them to either display:inline-block; for newer browsers or float:left but please be wary there are rules applied to float elements as they are a little bit problematic for people who is learning css or re-learning css. Otherwise make use of a div layout like so DIV | DIV bellow the heading and to avoid them from warping you can use % along with box-sizing:border-box that piece of code is used to tell the browser to calculate the width to make sure padding’s are used within the equation so that width doesn’t change when adding padding :slight_smile:.

Doing that would just mean adding another DIV with text-align:center and obviously your text required.

That would be to make use of javascript or “CSS checkbox” but using the checkbox hack doesn’t work on older browsers either, so just take note of that. but if you are familiar with javascript that shouldn’t be hard :slight_smile:

If you are concerned for the color being too boring maybe consider using texture If you are the designer of the game than you could always create your own texture to give it a bit of style. But if you must use images simply don’t go overboard doing this requires the Background-image:URL(); code while in brackets place the file location of the image.

This is my favourite website to learn coding https://www.w3schools.com/css/ obviously some people would disagree with me perhaps there are some tutorials on this site where you can learn css I am not even 100% familiar with this site yet either :slight_smile:

I gave these pointers since you said you are willing to learn again this site can very well help you if you run into some coding issues.

Happy Coding :slight_smile:

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.