How do I make it so when you zoom out of the page, the pages follow with it, and put itself to proportion always?

HTML & CSS
1

Heres my HTML

<!DOCTYPE html>
<html>
  <head>
    <title> 
    Layout 2
    </title>
  <meta charset="utf-8" />
  <link rel="stylesheet"
  type= "text/css" href=
  "index.css" />
  </head>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">

  <body>
    <div id="container">
    
      <div id="header">
      sup
      </div> <!-- end header -->
      <div id="boxLeft"> </div>
      <div id="boxMid"> </div>
      <div id="boxRight"> </div>
      <div id="bottomLong"> </div>
      <div id="bottomShort"> </div>
      <div id="content">
      
      </div> <!-- end content -->
      
      <div id="nav">
        <div id="navPic"> </div>
        <div id="link1"> </div>
        <div id="link2"> </div>
        <div id="link3"> </div>
        <div id="link4"> </div>
      </div> <!-- end nav -->
      
    </div> <!-- end container -->
  </body>
  </html>

Heres my CSS

body {
  background-size: cover;
  background-color: white;
  margin:0 auto;
}

#container {
  text-align: left;
  background-color: white;
  left: 0px;
  height: 600px;
  width: 1341.5px;
  position: relative;
  top: -10px;
  background-size: cover;
  z-index: 1;
  width: 80%;
  height: 100%;
} 
#content {
  position: absolute;
  background-color: black;
  left: 210px;
  height: 500px;
  top: 167px;
  width: 1185px;
}
li {
  list-style-type: none;
}
#home {
  text-decoration: none;
  font-family: 'Fjalla One', sans-serif;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 50px;
  background-color: white;
  z-index: 1;
}
a {
  text-decoration: none;
  color: #e6b3ff;
  font-family: 'Fjalla One', sans-serif;
}
#nav {
  position: fixed;
  font-family: 'Fjalla One', sans-serif;
  width: 180px;
  height: 769px;
  top: 0px;
  left: -10px;
  background-color: black;
}
#navPic {
  position: absolute;
  width: 140px;
  top: 30px;
  left: 20px;
  height: 100px;
  z-index: 1;
  background-color: white;
}
#link1 {
  position: absolute;
  background-color: white;
  width: 100px;
  top: 170px;
  left: 20px;
  z-index: 1;
  height: 20px;
}
#link2 {
  position: absolute;
  background-color: white;
  width: 130px;
  top: 200px;
  left: 20px;
  z-index: 1;
  height: 20px;
}
#link3 {
  position: absolute;
  background-color: white;
  width: 115px;
  top: 230px;
  left: 20px;
  z-index: 1;
  height: 20px;
}
#link4 {
  position: absolute;
  background-color: white;
  width: 100px;
  top: 260px;
  left: 20px;
  z-index: 1;
  height: 20px;
}
#header {
  background-color: black;
  z-index: 1;
  top: 100px;
  left: 210px;
  height: 30px;
  width: 210px;
  position: absolute;
}
#boxLeft {
  position: absolute;
  background-color: black;
  left: 210px;
  height: 180px;
  top: 710px;
  width: 365px;
  z-index: 1;
}
#boxMid {
  position: absolute;
  background-color: black;
  left: 620px;
  height: 180px;
  top: 710px;
  width: 365px;
  z-index: 1;
}
#boxRight {
  position: absolute;
  background-color: black;
  left: 1030px;
  height: 180px;
  top: 710px;
  width: 365px;
  z-index: 1;
}
#bottomLong {
  background-color: black;
  width: 1185.5px;
  height: 30px;
  top: 935px;
  left: 210px;
  position: absolute;
}
#bottomShort {
  background-color: black;
  width: 365px;
  height: 30px;
  top: 1010px;
  left: 210px;
  position: absolute;
  padding-bottom: 35px;
  background-image: white;
  background-clip: content-box, padding-box;

}

Thanks
EDIT: For some reason, this site does not allow “#” and it bolds the word, just to be informed, yes I did add a “# or .” before every css property.

2

Hi,

Unfortunately you have fallen into the beginners trap of using position:absolute and using fixed sizes (especially heights) which means that your design would be unusable in the real world with real content.

A web page is not a drawing with fixed dimensions but an ever changing viewport that has no edges that you know about.

What you need to do to start with is avoid absolute positioning (apart from your fixed side nav - which is another long story I’ll keep back for later) and instead let elements flow naturally down the page with one element following the next logically.

They don’t need to be positioned or sized at all. (They can take their width from a main page wrapper naturally without being specified. The main page wrapper would generally only have a max-width and would expand and collapse as required with the viewport width.)

If you add more content to Content then the elements underneath will move down naturally and make room as required. Unlike your current version where content spills out and overlaps everything else.

If you want horizontal alignment of blocks then you would need to utilise methods that allow you to maintain the flow of the page. In the ‘olden days’ that would mean floats but for modern browsers you can use display:table and table-cell properties, inline-blocks or flex (or in the future css grid). You can see some examples of those properties in this codepen.

Unfortunately I don’t have time today to knock up a quick demo but I’m sure one of the others here will jump in with some specific code.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.