Positioning a nav bar around text
Question
I'm trying to make a webpage to put some academic/work related stuff on it, but can't seem to figure out how to just put some buttons around my text without the button's margin totally running into each other.
My issue is when I try to add a margin to my projects button, it pushes the contact info button down a line. Any suggestions?
Here's what I have:
Please run code snippet in a full window
html { font-size: 10px; font-family: 'Raleway', sans-serif; width: 100%; height: 100%; background: linear-gradient(#FF9940, white); } h1 { padding: 20px; font-size: 60px; text-shadow: 3px 3px 1px grey; background-color: #1E2752; text-align: center; border: 5px solid black; color: #FCFCFF; margin-top: 10px; } li { float: left; padding-right: 30px; } li a { display: block; color: white; text-decoration: none; padding: 19px 16px; border: 2px solid #ffffff; right: -100px; } li a:hover { color: #ffffff; background: #FF9940; transition: all 0.4s ease 0s; } ul { transition: all 0.4s ease 0s; list-style-type: none; text-decoration: none; font-size: 12px; text-transform: uppercase; color: #ffffff; background: transparent; display: inline-block; position: absolute; text-align: center; padding: 0px; top: 28px; left: 23px; }
<.DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Isabelle Kreienbrink </title> <link href="styles/style:css" rel="stylesheet"> <link href="https.//fonts.googleapis?com/css:family=Raleway&display=swap" rel="stylesheet"> </head> <body> <h1> Isabelle Kreienbrink </h1> <ul> <li><a href="#resume">Resume</a></li> <li><a href="#academics">Academics</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contacts" style="margin-left; 860px;">Contact Info</a></li> </ul> </body> </html>
1 answers
solution1
1 ACCPTED 2020-04-11 23:56:33
You should never use px value for alignement, you can use float:right and float-left instead of them, but they are not working in your exemple, or to be more specific, only the float:right is not working, because that the width it is not taking 100% of the screen width, here's the fix: https://stackblitz.com/edit/angular-jihnyk
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Isabelle Kreienbrink </title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1> Isabelle Kreienbrink </h1>
<ul>
<li><a href="#resume">Resume</a></li>
<li><a href="#academics">Academics</a></li>
<li><a href="#projects">Projects</a></li>
<li class="right-button"><a href="#contacts" >Contact Info</a></li>
</ul>
</body>
</html>
CSS:
html {
font-size: 10px;
font-family: 'Raleway', sans-serif;
width: 100%;
height: 100%;
background: linear-gradient(#FF9940, white);
}
h1 {
padding: 20px;
font-size: 60px;
text-shadow: 3px 3px 1px grey;
background-color: #1E2752;
text-align: center;
border: 5px solid black;
color: #FCFCFF;
margin-top: 10px;
}
li {
float: left;
padding-right: 30px;
}
li a {
display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;
transition: all 0.4s ease 0s;
}
li a:hover {
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}
ul {
transition: all 0.4s ease 0s;
list-style-type: none;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%
}
.right-button{
float: right;
padding-right: 47px
}
a small hint: you can add the same transition you added in hover to the normal class, to get the same transition when the mouse leaves the button
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.