How would I add a border around the div "border" class? within CSS, I tried doing it before but the border would just show as a straight line on the top of the site and nothing around the div contents. please help! I want there to be a border around the first image along with the h2, h3, menchies class, h4, and walgreens class. Here is the HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Joshua Eachus</h1>
<div >
<img src="headshot.jpg" alt="Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p > Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out
with the cash register when ready. I also am constantly busy
making sure every topping and yogurt machine is filled up for the customers.
I would usually be closing so I work 5 to 8 hour shifts every time.
When closing I would put all the toppings away, clean the whole store
completely and prep food for the next day.</p>
<h4>Walgreens</h4>
<p > I am currently working at Walgreens, which has been a great introduction into retail
and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens,
one of the main tasks is running the photo department, where I print many kinds of photos,
create canvases and many more projects. Other tasks includes stocking,
outdating, cleaning duties and counting registers.</p>
</div>
<h5>Achievements</h5>
<img src="ptk.jpg" alt="PTK">
<p >I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically
devoted to recognizing the achievements of honor students at 2-year institutions. Currently,
PTK has approximately 3 million members globally.</p>
</body>
</html>
Here is the CSS Code:
html{background-color:white;}
h1{text-align:center;
font-size:50px;}
h2{position:fixed;
top:180px;
left:475px;
font-size:40px;}
h3{position:fixed;
top:230px;
left:365px;
font-size:33px;}
h4{position:fixed;
top:450px;
left:365px;
font-size:33px;}
h5{position:fixed;
top:130px;
right:430px;
font-size:33px;}
.img{height:470px;
width:320px;
position:fixed;
top:220px; left:15px;}
.img2{width:500px;
height=100px;
position:fixed;
top:250px; right:280px;}
.menchies{position:fixed;
top:290px;
left:350px;
font-size:20px;
width:30%;}
.Walgreens{position:fixed;
top:520px;
left:350px;
font-size:20px;
width:30%;}
.ptk{position:fixed;
top:540px;
right:250px;
font-size:18px;
width:30%;}
CodePudding user response：
Stop using position fixed
You are using CSS to shoot yourself in the foot, stop it. Go watch some Layout Land and take Kevin Powell's free Conquering Responsive Layouts course.
/*
html {
background-color: white; Background is already white
}
*/
h1 {
text-align: center;
font-size: 3rem;
/* Use font sizes that respect the user setting */
}
body {
max-width: 60ch;
margin-inline: auto;
}
.border {
border: 2px solid tomato;
}
/*
DO NOT POSITION FIX EVERYTHING
h2 {
position: fixed;
top: 180px;
left: 475px;
font-size: 40px;
}
h3 {
position: fixed;
top: 230px;
left: 365px;
font-size: 33px;
}
h4 {
position: fixed;
top: 450px;
left: 365px;
font-size: 33px;
}
h5 {
position: fixed;
top: 130px;
right: 430px;
font-size: 33px;
}
.img {
height: 470px;
width: 320px;
position: fixed;
top: 220px;
left: 15px;
}
.img2 {
width: 500px;
height=100px;
position: fixed;
top: 250px;
right: 280px;
}
.menchies {
position: fixed;
top: 290px;
left: 350px;
font-size: 20px;
width: 30%;
}
.Walgreens {
position: fixed;
top: 520px;
left: 350px;
font-size: 20px;
width: 30%;
}
.ptk {
position: fixed;
top: 540px;
right: 250px;
font-size: 18px;
width: 30%;
}
*/<h1> Joshua Eachus</h1>
<div >
<img src="headshot.jpg" alt="Portrait of Joshua Eachus">
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p > Between January 2020-November 2020 I was a team member at menchies, I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt
machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p > I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I
print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<h2>Achievements</h2>
<img src="ptk.jpg" alt="PTK">
<p >I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million
members globally.</p>CodePudding user response：
Here I have rearranged your site layout! Just have a look at it and try to understand how to do it in proper way. Please click on full page when you run this in the Stack Overflow code snippet because this is not mobile friendly.
If you want to learn more about this, visit W3Schools CSS Website Layout tutorial or any other one which is related to this.
h1{
font-size: 50px;
text-align: center;
line-height: 5px;
}
h2{
font-size: 40px;
text-align: center;
line-height: 0px;
padding-bottom: 10px;
}
h3{
font-size: 30px;
line-height: 5px;
}
p{
font-size: 20px;
text-align: justify;
}
.container{
width: 100%;
border: 1px solid #ff00ff;
padding: 10px;
box-sizing: border-box;
}
.section{
padding: 15px;
display: inline-block;
vertical-align: middle;
}
.one{
width: 20%;
}
.two{
width: 35%;
}
.three{
width: 35%;
}
img{
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Employment</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Joshua Eachus</h1>
<div >
<div >
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="Joshua Eachus">
</div>
<div >
<h2>Job Experience</h2>
<h3>Menchies</h3>
<p > Between January 2020-November 2020 I was a team member at menchies,
I would mainly greet customers, help them around the store if needed and cash them out with the cash register when ready. I also am constantly busy making sure every topping and yogurt machine is filled up for the customers. I would usually be closing so I work 5 to 8 hour shifts every time. When closing I would put all the toppings away, clean the whole store completely and prep food for the next day.</p>
<h3>Walgreens</h3>
<p > I am currently working at Walgreens, which has been a great introduction into retail and has truly taught me many things. There is a diverse and large amount of tasks I do at Walgreens, one of the main tasks is running the photo department, where I print many kinds of photos, create canvases and many more projects. Other tasks includes stocking, outdating, cleaning duties and counting registers.</p>
</div>
<div >
<h3>Achievements</h3>
<img src="https://i.ibb.co/VLV0qfv/Wood-Floor-Texture-Seamless.jpg" alt="PTK" style="height: 200px;">
<p>I am a member of Phi Theta Kappa. Founded on November 19, 1918 Phi Theta Kappa is the world’s largest organization specifically devoted to recognizing the achievements of honor students at 2-year institutions. Currently, PTK has approximately 3 million members globally.</p>
</div>
</div>
</body>
</html>Your problem is because you have used position:fixed; in almost every element. Please stop doing that and if you want to clarify whether your border is working properly or not, please give some padding to it and then you will see it works properly.
.border{
border: 1px solid #ff00ff;
padding: 10px;
}<div >
</div>If you can show what you actually need to make, I will be able to do it without using position: fixed; If you have a image of what you exactly need, just share it with us.
Thanks and best regards!