I'm trying to put an image on the left side, and text on the right side. I've managed to do this, however, the text goes all the way till the end of the page until it breaks off onto a new line, which is not what I want it to do. I'd like it to stop around the same Y position as my navigation bar stops, but I'm not sure how to do it. I've looked around and tried a few different methods, but none of them seemed to work.
MY HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LoL</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="#Best champions for each role"><img src="assets/lol.png" alt="Logo"
id="image1"></a>
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li><a href="#Farming">Farming</a></li>
<li><a href="#Best champions for each role">Best champions for each role</a>
</li>
</ul>
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >
<p1>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas nulla pariatur?</p1>
<banner></banner>
</body>
</html>
MY CSS
#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}
#image2 {
width: 30%;
right: 200px;
margin-left: 285px;
float: left;
border: 5px;
border-style: groove;
border-color: black;
}
ul {
top: 150px;
display: flex;
list-style-type:none;
width:60%;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}
li {
float: right;
width: 33.33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}
li a:hover {
background-color: #111;
}
body {
background-color: rgba(96,96,96,1.00)
}
p1 {
font-family: Comic Sans MS;
font-size: 11px;
margin-left: 5px;
}
Aucun commentaire:
Enregistrer un commentaire