Report Blog Entry
hello!!! welcome to my blog. (//o^) today i'll show you how to position your navigation and contact anywhere in your layout! copy and paste these codes to your "about me" blurb!
~~ contact table ~~
/* replace "no." with whatever number you want */
.contact{
direction: ltr;
position: fixed;
left: 20px;
right: (no./900)px;
top: 20%;
max-width: (no.)px;
max-height: (no.)px;
background-color: (replace this with any color); }
</style>
to make sure you understand this code, i'll teach you a bit of css. let's start from top to bottom!
direction: ltr; isn't really important if your layout already has your profile piccie on the left and blurbs on the right. if your layout is the opposite, then this is really important so that it doesnt look odd!
position: fixed; makes an element stay in a fixed position, staying there even if you scroll.
left: and right: determines the space from that side. for example, if you used left: 30px;, the element would move 30 pixels away from the left, and the same goes for all directions. i put 900px as an option so that you can use it if youre confused. if you want to set your own number, use a very big one.
however, you may be confused on why top: has a % mark after it. making a number a percentage tells the css to use, for example, 15% of the body to position it.
max-width and max-height are self-explanatory. if the object is under the maximum, it stays the same. but if it's over that mark, then this tells it to stay the way that the set css told it to stay.
background-color is also self-explanatory. set it to any color you want, and for hex codes, start with a hashtag to indicate that it's a hex code! (if you want to set it to an image, search up "background-image css".)
~~ navigation ~~
<style>
nav {
position: fixed;
left: 0;
right: 0;
bottom: 60px;
min-width: 100vh;
max-height: 35px;
}
:root { --logo-blue: 0%; }
<style>
from what we've learned, we don't need to explain max-height. but what about bottom:? why does it have set pixels? simply put, the area with the search and logo count as a part of the nav. i recommend to not tamper with this part.
left: and right:'s numbers dont have any units because they default to pixels. but it doesn't really matter what they default to, since they're both set as zero.
in min-width:, we see a new unit: "vh". this means viewport height, and it works the same with percentages when the parent element is the body tag. 50vh would cover 50% of the screen, so setting the nav to be 100vh makes it so that it exactly fits.
:root is the root color of everything. all of it is not important right now, so we'll just be focusing on --logo-blue for now. this is the area with the search and logo's background, and setting it to 0% will remove it completely.
NOTE!!! i have no idea how to get rid of the logo and search, but removing both are probably against the TOS anyway.
thanks for reading! happy coding, and if you have any questions, feel free to comment!
Comments
Displaying 0 of 0 comments ( View all | Add Comment )