Problem with the positioning of an aside in an html page
Question
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
1 answers
solution1
1 ACCPTED 2022-12-13 22:34:26
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* { margin: 0; padding: 0; } body { background-color: lightcyan; }.wrapper { background-color: rgb(35, 168, 221); height: 100vh; max-width: 75%; }.container { background-color: lightcyan; max-width: 80%; height: 100%; margin-left: auto; margin-right: auto; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>ELECTRIC PAGES Reading Notes</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <main> <div class="wrapper"> <div class="container"> <h2>Reading Notes</h3> </div> </div> </main> </body> </html>
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.