I already found out that display and position cannot both be used at the same time, but can't seem to find another solution. My code right now shows the navbar how I want it but I can't find a way to fix the position so it stays when scrolling. Thanks!
.navbar {
top: 0;
left: 0;
text-align: justify;
border: dotted blue;
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
}
.navbar a {
text-decoration: none;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.navbar:after {
content: '';
width: 100%;
/* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
<div class="navbar">
<a id="home" href="#home">home</a>
<a id="projects" href="#projects">projects</a>
<a id="shop" href="#shop">shop</a>
<a id="about" href="#about">about</a>
<a id="contact" href="#contact">contact</a>
</div>
tried out before and after elements and also to put the whole thing in another div but can't make it work
Edit: have another quick question: is there a quick fix to change the fact that I can highlight the long space between the navigation links?
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
To fix the position of your .navbar when scrolling, you can use position: fixed; and right: 0;
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: justify;
border: dotted blue;
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
}
Apply this CSS rule:
.navbar {
position: fixed;
top: left: 0;
right: 0;
text-align: justify;
border: dotted blue;
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
}
Related
I am coding a Facebook clone with some changes to enhance my skills, but I have ran into a problem.
I have an image(profile picture) and text(user name) under the <h1> of Home. I am trying to align the text exactly to the center to the right of the image
example:
[
top of image
CENTER OF IMAGE TEXT
bottom of image
] ( what I expected/Wanted)
I am not getting the result I want. Instead, the image the text is at the top to the right of the image.
example:
[
top of image
center of image
BOTTOM OF IMAGE TEXT
](result)
The HTML:
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="icons\my profile.jpg">
<p class="my-user-name">Said User</p>
</div>
</div>
The CSS:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
Flexbox is perfect for these cases. Change the .personalInfo div to a flexbox by adding the display: flex property. Then you have access to many other properties for centering, etc.
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
width: 30px; /* demo only */
background-color: blue; /* demo only */
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
/* display: inline-block; -> not necessary anymore*/
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
/* FLEXBOX */
.personal-info{
display: flex;
flex-direction: row; /* display children in a horizontal row */
align-items: center; /* vertically align items in the center */
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personal-info">
<img class="sidebar-profile-picture">
<p class="my-user-name">Said User</p>
</div>
</div>
Not sure I understand your requirement correctly.
You can use flex to achieve the below result.
Let me know if this works
.personnal-info {
display:flex;
align-items: center
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="//via.placeholder.com/50x50">
<p class="my-user-name">Said User</p>
</div>
</div>
hey Mihai T thanks for the response ! It actually worked.
But didn't put it in an ideal position.
I actually fixed the problem by putting position: relative; on personnal-info.
Then I put in my-user-name
position: absolute; top: -8px;
PS: It also worked with bottom: -8px; instead of top: -8px.
Thanks !
Just like the title says, I'm trying to create a rough layout for a website and I want to not only center the words on each side like they already are, but also have them in the middle. When I use transform and put the words in the middle of the page, the h1 element doesn't move but then the p element keeps going down the page rather than adjusting it with every new row. Any tips?
<div class="left-side" >
<h1>Welcome.</h1>
<p>I want to welcome you!</p>
</div>
<div class="right-side">
<h1>Corey Michaud.</h1>
<p>Corey is my name :)</p>
</div>
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
body {
text-align: center;
overflow: hidden;
font-family: 'Rubik', sans-serif;
}
.left-side {
background: white;
width: 50%;
height: 100%;
left: 0;
color: black;
position: absolute;
}
.right-side {
background: black;
width: 50%;
height: 100%;
right: 0;
color: white;
position: absolute;
}
h1 {
font-size: 72px;
font-weight: 700;
}
p {
font-size: 48px;
font-weight: 300;
}
You want to use css flexbox. Add
.left-side, .right-side{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
Hopefully this is helpful!
I'm trying to fix the footer at the bottom of the page but I can't do that. I've already tried a lot of solutions that I found here on StackOverflow and other websites but none of them worked.
What I have right now is a sticky footer.
Here is the footer html (the footer tag is inside the body tag)
/*BODY*/
html,
body {
position: relative;
height: 100%;
margin: 0px 0px 50px 0px;
padding: 0;
}
/*FOOTER*/
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
.master-footer-list {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.master-footer-list li {
display: inline-block;
vertical-align: middle;
padding-top: 17px;
padding-left: 15px;
}
.master-footer-list a:hover {
text-decoration: underline;
}
.master-footer-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer {
font-family: var(--work-sans);
font-weight: 300;
font-size: 14px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer div {
margin-bottom: 0px;
height: 50px;
width: 100%;
background-color: black;
}
footer a {
color: #FF6869;
text-decoration: none;
}
footer span {
color: #C8C7CC;
}
<footer>
<div class="master-footer-wrap">
<img id="footer-logo" src="/assets/images/logo-white.png" />
<ul class="master-footer-list">
<li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
<li>Termos de Uso</li>
<li>Política de Privacidade</li>
</ul>
</div>
</footer>
The easiest solution is to use flexbox. Here is a working fiddle using the Tailwind library:
<div class="flex flex-col min-h-screen">
<header class="h-8 bg-red">
</header>
<main class="flex-1">
The main content
</main>
<footer class="h-8 bg-green">
</footer>
</div>
https://jsfiddle.net/nartub/b4fwg3um/
Classes are self-explanatory but you can refer to the Tailwind docs to see what each class does.
You had a master-footer-wrap and the footer itself set to position fixed. However, you need to set the position: relative for the body and to absolute for the footer. If you do this while either the footer or the master-footer-wrap is still set to position: fixed, it will remain fixed. Check the snippet below for a working example :)
/*BODY*/
html, body {
position: relative;
height: 150%;
margin: 0px 0px 50px 0px;
padding: 0;
}
/*FOOTER*/
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
.master-footer-list {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.master-footer-list li {
display: inline-block;
vertical-align: middle;
padding-top: 17px;
padding-left: 15px;
}
.master-footer-list a:hover {
text-decoration: underline;
}
/* removed master footer wrap css */
footer {
font-family: var(--work-sans);
font-weight: 300;
font-size: 14px;
text-align: center;
position: absolute; /* position absolute instead of fixed */
bottom: -50px; /* move inside the body margin */
left: 0;
right: 0;
margin-bottom: 0px;
height: 50px;
width: 100%;
background-color: black;
}
/* Removed redundant div/wrapper */
footer a {
color: #FF6869;
text-decoration: none;
}
footer span {
color: #C8C7CC;
}
<footer>
<a href="/"><img id="footer-logo" src="/assets/images/logo-white.png"><a/>
<ul class="master-footer-list">
<li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
<li>Termos de Uso</li>
<li>Política de Privacidade</li>
</ul>
</footer>
Your CSS can be greatly simplified. You don't need all of those banners and wrappers. Simply set position: absolute; bottom: 0px; and remove the padding at the bottom of the page, and your footer will stick.
There must be some way to get rid of that hardcoded #footer-logo stuff that makes the text overlap the logo when the width gets thin, but I can't figure it out.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
footer {
font-family: "Comic Sans MS", sans-serif;
font-size: 14px;
text-align: center;
color: #C8C7CC;
background-color: black;
position: absolute;
bottom: 0px;
min-height: 50px; /* improved support for narrow screens */
width: 100%;
}
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
footer a {
color: #FF6869;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
footer ul li {
display: inline-block;
padding-top: 17px;
padding-left: 15px;
}
<footer>
<img id="footer-logo" src="//stackexchange.com/users/flair/6784526.png" />
<ul>
<li>🄯 2019 — wizzwizz4</li>
<li>Lovely link</li>
<li>Visited link</li>
</ul>
</footer>
So I recently added a sort of bubble-slideshow esc thing to my website to make it a bit better. For some unexplainable reason this pushed my footer down to the bottom of my page (and it also extended the page downwards so now I have to scroll even though everything should be able to fit on the page). I was screwing around with it yesterday to figure out how to fix it (I'm not very experienced at CSS), and I couldn't find the problematic line. Now today I check my localhost and the page is completely screwed up and the footer is half way up the page, shall I note that I still have the option to scroll even though beyond half way down my page it's entirely blank.
Below is my CSS, involving the entirety of the different styles I used to make the footer (which is probably more than necessary, but again, noob). It was definitely different last night, hence why it's all screwed up today, but my recent backup doesn't have the footer.
html,
body {
margin: 0;
padding: 0;
height: 90%;
}
#container {
min-height: 100%;
bottom: 0;
position: relative;
}
#footer {
width: 100%;
height: 60px;
bottom: 0;
background: #DADADA;
display: block;
}
ul2 {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
padding: 20px 16px;
}
li5 a {
text-family: verdana;
color: black;
padding: 20px 20px;
text-align: center;
text-decoration: none;
}
<div id="container">
<div id="footer">
<ul2>
<li5>Contact Us
</li5>
<li5>A test project</li5>
<li5>About
</li5>
</ul2>
</div>
</div>
change your height:90% to 100% in html/body set position:absolute or fixed in #footer (depending if you want to scroll and let footer fixed or not, it was unclear to me)
Note: there isn't property text-family, use font-family instead
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
bottom: 0;
position: relative;
}
#footer {
position: fixed; /* or - absolute - */
width: 100%;
height: 60px;
bottom: 0;
background: #DADADA;
display: block;
}
ul {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
padding: 20px 16px;
}
li a {
font-family: verdana;
color: black;
padding: 20px;
text-align: center;
text-decoration: none;
}
<div id="container">
<div id="footer">
<ul>
<li>Contact Us
</li>
<li>A test project</li>
<li>About
</li>
</ul>
</div>
</div>
Also you can try this code, no need for extra container:
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
}
#footer {
width: 100%;
bottom: 0;
background: #DADADA;
display: block;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
text-align: center;
display: block;
bottom: 0;
}
li{
font-family: verdana;
color: black;
padding: 20px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<div id="footer">
<ul>
<li>Contact Us
</li>
<li>A test project</li5>
<li>About
</li>
</ul>
</div>
</body>
</html>
hi i have a problem my code looks like this(I'm a starter)
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
and my stylesheet has
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
text-align: right bottom;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
but it doesnt align
I want to show it at the bottom right of page but i dont want it to be fixed. The picture of absolute code used
Its back to top bottom I'm making
.backtotop {
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: fixed;
bottom: 0; // adjust as per need
right: 0; // adjust as per need
}
Use this Code for bottom right at page in css of
position: fixed;
bottom: 0;
right: 0;
Check the snippest:
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: fixed;
bottom: 0;
right: 0;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
UPDATED :
Checkout This By using position:absolute
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: absolute;
right: 0;
bottom: 0;
}
a{
text-decoration: none;
font-size:30px;
font-style: normal;
color: #23285a;
}
<div class="backtotop">
<a href="#top">
Back to topˆ
</a>
</div>
UPDATED 2 :
If You want to div at center then remove bottom:0 and add top:50%;
Like This :
.backtotop{
font-size: 30px;
width: 20%;
background-color: #b6aeac;
position: absolute;
right: 0;
top:50%;
//bottom: 0;
}
And If it is fixed that you want to display BacktoTop Class Exactly Right To the Name Of Institute then simply align the div at right or if you use table structure then text-align:right in last .
My Be This will Helpful To You.
Still Ask If You Have Any Doubt.