I am a student learning html/css and I am having trouble with my first website. I am having a lot of difficulty configuring the page so it is fluid instead of fixed. I have a box, image and some text configured so they would be absolute on the page but I can't get the page itself to be fluid to fit (and not be too big) for the browser. This is the css/html :
body {
background-color: white;
}
.square {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
background-color: rgb(49, 184, 184);
width: 2023px;
height: 842px;
}
.image {
position: absolute;
left: 588px;
top: 41px;
width: 1376px;
height: 927px;
}
.con {
position: absolute;
font-size: 200px;
color: white;
width: 271px;
height: 209px;
left: 293px;
top: 106px;
}
.view {
position: absolute;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
background-color: rgba(0, 103, 103, 0.7);
border-color: transparent;
font-size: 200px;
color: white;
left: 588px;
top: 104px;
width: 396px;
height: 212px;
}
html, body, square, image, con, view {
display: block
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ConView</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="square"></div>
<img src="indeximage.jpg" class="image">
<p class="con">con</p>
<p class="view">view</p>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire