2
Я составляю персональный профиль на одну страницу для школьного проекта. Мне нужно вернуться на домашнюю страницу нашего класса в школьной интрасети. Я хочу, чтобы ссылка была расположена прямо под моим именем в красном прямоугольнике. Мой HTML ниже, и JSFiddle из code can be viewed here (заменен Lorem Ipsum и родовые имена по причинам конфиденциальности):HTML расположение тегов
<!DOCTYPE html>
<html>
<head>
<title>John Smith</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="title">
<h1><img width="50px" style="border-radius:100%" src="http://goo.gl/fj0Qm1"/> John Smith</h1>
<p><a href="#">9IST Home</a></p>
</div>
<div class="about">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar dictum odio a aliquet. In cursus erat non fermentum elementum. Sed imperdiet odio quam, quis efficitur nunc dignissim quis. Donec porta finibus justo. Vivamus eleifend neque at finibus viverra. Proin at mi nec ligula blandit aliquet. Praesent sodales odio in risus gravida, ut sodales diam imperdiet. Integer at malesuada arcu, id hendrerit libero. Aliquam at leo sit amet quam porta scelerisque et eu felis. Vestibulum quis ligula in enim iaculis accumsan. Sed consequat, tellus vitae iaculis dignissim, ligula erat luctus tellus, non dapibus tortor enim eget risus.</p>
</div>
<div class="school-life">
<h3>School Life</h3>
<p>Quisque scelerisque nunc nec mauris elementum venenatis. In hac habitasse platea dictumst. Etiam placerat, dolor a pretium elementum, neque urna tincidunt velit, in sodales velit arcu sed justo. Ut eu imperdiet felis. Phasellus eget justo id nulla lobortis semper. Pellentesque sodales cursus purus sit amet vehicula. Fusce hendrerit risus sed bibendum aliquet. Morbi fringilla iaculis orci, non finibus purus tristique sed. In ac fringilla massa, sed egestas nulla. Aliquam eleifend, orci et sollicitudin mollis, purus ipsum rutrum libero, eget aliquam metus ligula vitae leo. Fusce sodales, tortor non lobortis lacinia, libero elit maximus mi, eu eleifend quam nulla id nibh. Aliquam pulvinar mi vitae convallis posuere. Fusce pharetra nibh sit amet diam tempus, id pellentesque tellus condimentum. Praesent porta sollicitudin nisi quis ultrices. Donec molestie purus arcu, sit amet iaculis tortor tempor eu.</p>
</div>
<div class="favourites">
<h3>My Favourites</h3>
<p>Morbi tristique ut nisi non euismod. Maecenas id massa cursus, auctor nisl ut, commodo enim. Nulla sed malesuada turpis. Cras quis justo elit. Etiam vitae leo metus. Aliquam sed urna scelerisque, vestibulum dui nec, viverra nibh. Mauris eu interdum sem, eu varius est. Vivamus tellus nulla, interdum a varius ac, rutrum eget velit. Suspendisse iaculis semper neque, nec pretium mi pharetra ut. Suspendisse condimentum a purus vel viverra. Suspendisse nec consequat dui. Duis tristique fermentum orci rutrum eleifend. Donec finibus, tellus interdum convallis commodo, risus lectus accumsan nibh, ac lacinia turpis est ut sem. Pellentesque elit tellus, faucibus id dictum in, ultrices in mi. Proin eget velit consequat, mollis arcu eget, fermentum ligula. Proin venenatis nisi et dui vulputate sodales.</p>
</div>
<div class="hopes">
<h3>Hopes for the future</h3>
<p>Donec a lobortis quam. Donec ultrices nunc diam, a sollicitudin diam finibus eget. Mauris aliquam vulputate nisl ut auctor. Aenean eget mi ligula. Phasellus consequat neque ullamcorper, ultricies orci vel, eleifend elit. Suspendisse non augue at ex semper sagittis. Maecenas sed congue risus, nec aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec commodo nunc ultricies felis cursus, non auctor libero cursus. Morbi pharetra nec sapien sit amet pretium. Duis tempus faucibus est non dignissim. Vestibulum vestibulum vestibulum libero, in convallis mi condimentum sed. Integer tincidunt mollis risus, vitae ornare eros porta vitae. Morbi aliquet lorem commodo, bibendum ex ac, dictum nibh. Curabitur tempus congue semper. Duis risus tortor, tempor in consequat quis, dictum non nisl.</p>
</body>
</html>
и мой CSS здесь:
* {
box-sizing: border-box;
}
body {
font-family:helvetica;
background-color:orange;
}
a {
color:black;
text-decoration:none;
}
h1 {
font-size:50px;
color:white;
}
.container {
margin: auto;
width: 1000px;
}
.title {
width:auto;
margin-top: 0px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
padding-top: 0px;
padding-bottom:0px;
}
.title a {
color:#ffff00;
text-decoration:underline;
}
.main-content {
display: block;
overflow: hidden;
}
.about {
width: 33.33%;
height: 700px;
background-color: lightblue;
float: left;
padding:10px 10px 10px 10px;
margin:0px 0px 0px 0px;
display: inline;
}
.school-life {
width: 33.33%;
height: 700px;
background-color: lightgreen;
float: left;
padding:10px 10px 10px 10px;
margin:0px 0px 0px 0px;
display: block;
}
.favourites {
width: 33.33%;
height: 700px;
background-color: moccasin;
float: left;
padding:10px 10px 10px 10px;
margin:0px 0px 0px 0px;
display: block;
}
.hopes {
width:100%;
height:auto;
background-color: black;
color:white;
padding: 40px 10px 10px 10px;
bottom: 0;
}
li {
list-style-type:none;
}
.hopes h3 {
padding-top:40px;
}
Любая помощь очень ценится благодаря
Лучший ответ для меня, так как он объясняет, что не так, как быстро, грязное решение. –