Geek Answers Handbook

HTML / CSS placement ~ Screen size / Resolution and resizing of the browser

I was interested in HTML / CSS encoding for a long time and very quickly ran into a problem that I can’t solve or correctly understand based on other answers to questions similar to mine. My positioning is pixel based, when should it be percent? How to make my elements and images stop scaling when the browser is compressed, does it just turn off, like on every website? How to choose absolute and relative positioning?

Here is my HTML & CSS:

body {
    font-family: "Courier New", Courier, monospace;
    background: linear-gradient(to bottom, #1D4350 , #A43931);
    background-attachment: scroll;
    
}
html, body, #wrapper {
    min-width: 100%;
    min-height: 100%;
   
}
#content {
    height: 1200px;
}
.Octagon { 
    color: #2aa186;
    text-align: center;
    line-height: 30%;
    margin-top: 25px;
}
.LT {
    text-align: center;
    color: #3a5454;
    line-height: 0%;
    font-style: italic;
}
.boi {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
  right: 16px;
}
.boi:active {
    top: 2px;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
}
.boi:active, 
.iob:active {
    top: 2px;
}
#manyarms {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
    width: 310px;
    height: 250px;
}
#sensible {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    width: 310px;
    height: 250px;
    right: 10px;
}
#verr {
    position: absolute;
    margin-left: 31px;
    margin-top: 285px;
    color: #6458b7;
}
#special {
    position: absolute;
    left: 77.9%;
    top: 50%;
    color: #6458b7;
}
.boi:hover,
.iob:hover {
    text-shadow: 0 0 10px #a193ff;
}
#footer {
    padding-left: 95%;
}
<html>
<head>
        <title>The Pragmatic Octopus</title>
        <meta charset="utf-8"/>
    	<link rel='stylesheet' href='style.css'/>
	    <script src='script.js'></script> 
</head>
<body>
<div id="wrapper">
<div id="header">
	    <h1 class="Octagon">The Pragmatic Octopus</h1>
	    <p class="LT">Lee Townsend</p>
        <a href="www.google.com">
	    <p class="boi">Contact</p>
        </a>
        <a href="www.google.com">
    	<p class="iob">Information</p>
        </a>
</div>
<div id="content">
    <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792        .jpg" alt="mmm~" id="manyarms">
    <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" id="sensible">
    <p id="verr">Here comes a very special boi!</p>
    <p id="special">He loves to pose for photos!</p>
</div>
<div id="footer">
    &copy; Hecc
</div>
</div>
</body>
</html>
Run codeHide result

Either set my code to what you need (I will just see what you have done and understood), or explain what I need. Whatever you do, thanks for reading and / or help.

+4
1

min-width: 100%; min-width: 1000px; html, body, #wrapper, 1000px. , 1000 .

min-width: 1000px; to html, body, #wrapper , . , position: relative; #wrapper.

position: relative; #wrapper? position: relative;. , . (https://developer.mozilla.org/de/docs/Web/CSS/position)

, : https://css-tricks.com/absolute-positioning-inside-relative-positioning/

- , < 1000 . Ofc 1000px .

body {
    font-family: "Courier New", Courier, monospace;
    background: linear-gradient(to bottom, #1D4350 , #A43931);
    background-attachment: scroll;
}
html, body, #wrapper {
    min-width: 1000px;
    min-height: 100%;
}
#wrapper {
    position: relative;
    /* max-width: 1200px; Edit 1 */
}
#content {
    height: 1200px;
}
.Octagon { 
    color: #2aa186;
    text-align: center;
    line-height: 30%;
    margin-top: 25px;
}
.LT {
    text-align: center;
    color: #3a5454;
    line-height: 0%;
    font-style: italic;
}
.boi {
  cursor: pointer;
  margin-right: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
  right: 16px;
}
.boi:active {
    top: 2px;
}
.iob {
  cursor: pointer;
  margin-left: 30px;
  padding: 8px 18px;
  border: 1px solid #204156;
  border-color: #52AEC9;
  color: #52AEC9;
  position: absolute;
  top: 8px;
}
.boi:active, 
.iob:active {
    top: 2px;
}
/* Edit 2 */
#wrapperForTheFirstImage {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
    width: 310px;
    height: 250px;
}
#wrapperForTheSecondImage {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    width: 310px;
    height: 250px;
    right: 10px;
}
/* Removed 
#manyarms {
    position: absolute;
    margin-top: 30px;
    margin-left: 31px;
    width: 310px;
    height: 250px;
}
#sensible {
    position: absolute;
    margin-top: 30px;
    margin-right: 31px;
    width: 310px;
    height: 250px;
    right: 10px;
} */
#verr {
    /*position: absolute;
    margin-left: 31px;
    margin-top: 285px;*/
    color: #6458b7;
}
#special {
    /*position: absolute;
    left: 77.9%;
    top: 50%;*/
    color: #6458b7;
}
/* Edit 2 END */
.boi:hover,
.iob:hover {
    text-shadow: 0 0 10px #a193ff;
}
#footer {
    padding-left: 95%;
}
<html>
<head>
        <title>The Pragmatic Octopus</title>
        <meta charset="utf-8"/>
    	<link rel='stylesheet' href='style.css'/>
	    <script src='script.js'></script> 
</head>
<body>
<div id="wrapper">
<div id="header">
	    <h1 class="Octagon">The Pragmatic Octopus</h1>
	    <p class="LT">Lee Townsend</p>
        <a href="www.google.com">
	    <p class="boi">Contact</p>
        </a>
        <a href="www.google.com">
    	<p class="iob">Information</p>
        </a>
</div>
<div id="content">
    <!-- Edit 2 -->
    <div id="wrapperForTheFirstImage">
        <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792        .jpg" alt="mmm~">
        <p>Here comes a very special boi!</p>
    </div>
    <div id="wrapperForTheSecondImage">
        <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm">
        <p>He loves to pose for photos!</p>
    </div>
    <!-- Edit 2 END -->
</div>
<div id="footer">
    &copy; Hecc
</div>
</div>
</body>
</html>
Hide result

1:

max-width #wrapper, ( ):

, - ?

2:

, , . <img> <p> div div, img p. , . ( )

+1

More articles:


All Articles