我想创建一种LinkedIN外观,在封面照片的一半和下面的文本/段落框的一半上放置头像(我认为这看起来很酷),但当我实现这一点时,滚动框停止工作。我已经尝试了zline、相对和绝对,但似乎都不起作用。
提前感谢,我已经坚持了一两天了。
* {
font-family: sans-serif;
box-sizing: border-box;
}
/* The six dividing sections ------ */
html, body {height: 100%; width: 100%; padding: 0%; margin: 0%;}
div {width: 100%; height: 100%;}
#div2 {
background: #e8e8e8;
position: relative;
z-index: -2;
}
/* main classes -------------- */
.lawyer-header {
color: black;
margin-top: 0;
margin-bottom: 10px;
text-align: center;
font-size: 65px;
padding-top: 20px;
padding-bottom: 0;
}
/* THREE CLASSES, Cover, Profile, scroll box */
.ryan-profile {
height: 150px;
width: 150px;
border-radius: 50%;
border: 4px solid #d9d9d9;
display: block;
/* top: 50%;
left: 50%; */
margin-top: -100px;
margin-left: 600px;
margin-bottom: 0;
position: absolute;
z-index: 5;
}
.cover-photo1 {
margin-left: auto;
margin-right: auto;
width:800px;
height:200px;
display: block;
margin-bottom: 0;
position: relative;
z-index: 4;
}
.p-one {
width:800px;
height:255px;
border-style: outset;
text-align: justify;
padding-top: 35px;
padding-left: 15px;
padding-right: 15px;
box-shadow:10px 10px 2.5px #d9d9d9;
background-color: white;
font-size: 15px;
line-height:1.5em;
border:6px;
overflow-y:scroll;
margin-bottom: 0;
margin-top: 0;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
</style>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet">
<body>
<div id="div2">
<section>
<h1 id="about" class="lawyer-header">Lawyer Turned Developer</h1>
<div>
<img class="cover-photo1" src="images/cover-photo1.jpg" alt="Cover Photo">
</div>
<div class="profile-pic-class">
<img class="ryan-profile" src="images/ryan-profile.jpg" alt"Photo of Ryan McAvoy, Developer">
</div>
<div class="scroll-box1">
<figure class="p-one">
<p>After successfully completing a Degree and Masters Degree in Law, I began searching for a job within
the legal industry. Unfortunately (later found to be fortunate), this proved to be very difficult. Having
some previous sales experience, I decided to accept recruitment job offer with Mortimer Spinks. At
the time, I did not know what recruitment entailed nor did I know anything about the industry I was
soon to be recruiting in, technology.</p>
<p>Working as a recruiter was an eye-opening experience into the world of technology. It was only
through working at Mortimer Spinks I began to realise how much technology is integrated into our
daily lives. Moreover, I discovered the depth of work required to develop such technologies. </p>
<p>The part I most enjoyed about recruitment was meeting with developers and talking about the latest
technologies and their personal projects. I’ve always been quite entrepreneurial and once I
discovered the capabilities of technology, I began coming up with solutions to everyday problems.
Naturally, I did not have the skills or finance to build these ideas; having worked in recruitment I
know how expensive building websites and apps can be. I also thought given my age (26 at the time),
it would be too late to learn how to code. I decided to put these ideas to the back of my brain and
focus on my career instead. </p>
<p>Eventually, I managed secure a paralegal position within a highly respectable law firm which has
been involved in some of England’s most notable cases in the last 30 years. I enjoy my current job
and still like law however, these ideas are still festering at the back of my brain. I have considered
the possibility of becoming a solicitor and then using the money from that to fund the various ideas.
It was at this point I thought, why not become a developer yourself. I’m extremely passionate about
technology and really believe, if not already, the tech industry is the future. Why not work as a
developer, learn the required skills and network with the people within the industry I wish to one
day establish my business. It does not make sense to have a career in law with the knowledge that in
five years time I plan to establish a business within a completely different industry. </p>
</figure>
</body>
</html>
发布于 2018-08-10 04:46:38
希望我在这个问题上没有误解你的目标,所以如果我误解了,请告诉我。
无论如何,要提升头像,只需使用margin-left: auto;
和margin-right: auto
将其居中,然后使用margin-top
将其提升到上面的元素中。margin-top
的值是头像高度的50%乘以-1。
我还通过将其设置为包含标题文本的<div>
的background-image
,对您的封面照片进行了一些调整。这固定了封面照片下面的页边距。
text-align: center;* {
font-family: sans-serif;
box-sizing: border-box;
}
/* The six dividing sections ------ */
html,
body {
height: 100%;
width: 100%;
padding: 0%;
margin: 0%;
}
div {
width: 100%;
height: 100%;
}
#div2 {
background: #e8e8e8;
position: relative;
z-index: -2;
}
/* main classes -------------- */
/* THREE CLASSES, Cover, Profile, scroll box */
.ryan-profile {
height: 150px;
width: 150px;
border-radius: 50%;
border: 4px solid #d9d9d9;
display: block;
position: relative;
margin-bottom: 0;
z-index: 5;
}
.cover-photo1 {
margin-left: auto;
margin-right: auto;
width: 800px;
height: 200px;
display: block;
margin-bottom: 0;
position: relative;
z-index: 4;
}
.p-one {
width: 800px;
height: 255px;
border-style: outset;
text-align: justify;
padding-top: 35px;
padding-left: 15px;
padding-right: 15px;
box-shadow: 10px 10px 2.5px #d9d9d9;
background-color: white;
font-size: 15px;
line-height: 1.5em;
border: 6px;
overflow-y: scroll;
margin-bottom: 0;
margin-top: 0;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
}
/* ===== New ===== */
.profile-pic-class img {
margin-left: auto;
margin-right: auto;
margin-top: -75px;
/* Raise your profile picture by 50% of your profile picture's height */
}
.cover-photo {
background-image: url("https://cdn.britannica.com/08/100608-004-B89F31B2.jpg");
background-size: cover;
background-position: center;
}
.cover-photo h1 {
text-align: center;
color: black;
margin-top: 0;
text-align: center;
font-size: 65px;
margin-bottom: 100px;
}
<div id="div2">
<section>
<div class="cover-photo">
<h1 id="about" class="lawyer-header">Lawyer Turned Developer</h1>
</div>
<div class="profile-pic-class">
<img class="ryan-profile" src="images/ryan-profile.jpg" alt "Photo of Ryan McAvoy, Developer">
</div>
<div class="scroll-box1">
<figure class="p-one">
<p>After successfully completing a Degree and Masters Degree in Law, I began searching for a job within the legal industry. Unfortunately (later found to be fortunate), this proved to be very difficult. Having some previous sales experience, I decided
to accept recruitment job offer with Mortimer Spinks. At the time, I did not know what recruitment entailed nor did I know anything about the industry I was soon to be recruiting in, technology.</p>
<p>Working as a recruiter was an eye-opening experience into the world of technology. It was only through working at Mortimer Spinks I began to realise how much technology is integrated into our daily lives. Moreover, I discovered the depth of work
required to develop such technologies. </p>
<p>The part I most enjoyed about recruitment was meeting with developers and talking about the latest technologies and their personal projects. I’ve always been quite entrepreneurial and once I discovered the capabilities of technology, I began coming
up with solutions to everyday problems. Naturally, I did not have the skills or finance to build these ideas; having worked in recruitment I know how expensive building websites and apps can be. I also thought given my age (26 at the time),
it would be too late to learn how to code. I decided to put these ideas to the back of my brain and focus on my career instead. </p>
<p>Eventually, I managed secure a paralegal position within a highly respectable law firm which has been involved in some of England’s most notable cases in the last 30 years. I enjoy my current job and still like law however, these ideas are still
festering at the back of my brain. I have considered the possibility of becoming a solicitor and then using the money from that to fund the various ideas. It was at this point I thought, why not become a developer yourself. I’m extremely passionate
about technology and really believe, if not already, the tech industry is the future. Why not work as a developer, learn the required skills and network with the people within the industry I wish to one day establish my business. It does not
make sense to have a career in law with the knowledge that in five years time I plan to establish a business within a completely different industry. </p>
</figure>
https://stackoverflow.com/questions/51774438
复制相似问题