I am trying to make a div a clickable link and was told it is better to put the link inside the div rather than around the div. I noticed that whenever I mouseover one of the divs the webpage suddenly gains an extra 500 or so pixels on the right.
The page isn't supposed to be scrollable, and you can only scroll by holding the middle mouse button and dragging. This happens in Chrome 41.0.2272.101 and Opera 28, but NOT in Firefox 36.0.4.
Here is my code.
HTML5:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>John Doe</title>
<link type='text/css' rel='stylesheet' href='stylesheet.css'/>
<script type='text/javascript' src='jquery-1.11.2.js'></script>
<script type='text/javascript' src='scripts.js'></script>
<meta charset='utf-8'>
<meta name='description' content='Portfolio website displaying projects by John Doe.'>
<meta name='keywords' content='Portfolio, John Doe, Projects, Software'>
<meta name='author' content='John Doe'>
</head>
<body>
<!-- Top welcome bar. Holds name and description of profession(s). -->
<div id='welcome_bar'>
<div id='welcome_bar_name'>John Doe</div>
<p id='welcome_bar_description'>Software Engineer</p>
</div>
<!-- Holds all the navigation "blocks" leading to the about, portfolio,
contact, and [unused page] pages. -->
<div id='nav_block'>
<div id='block_list'>
<div class='block_container'>
<div id='left_out' class='block'>
<a href='webpages/about/about.html'>
<!-- Short description of page this block leads to "who I am". -->
<div id='about_description' class='block_description'>
<p>who I am</p>
</div>
<p class='block_title'>About Me</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/about_icon.png' alt='about_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='left_in' class='block'>
<a href='#'>
<!-- Short description of the page this block leads to "what I am proud of". -->
<div id='portfolio_description' class='block_description'>
<p>what I am proud of</p>
</div>
<p class='block_title'>Portfolio</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/portfolio_icon.png' alt='portfolio_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_in' class='block'>
<a href='#'>
<div id='sparepage_description' class='block_description'>
<p>stuff stuffs</p>
</div>
<p class='block_title'>Stuff Stuff</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/stuffstuff_icon.png' alt='stuffstuff_icon.png'/>
</div>
</a>
</div>
</div>
<div class='block_container'>
<div id='right_out'class='block'>
<a href='#'>
<div id='contact_description' class='block_description'>
<p>let's chat</p>
</div>
<p class='block_title'>Contact</p>
<div class='block_icon_container'>
<img class='block_icon' src='images/contact_icon.png' alt='contact_icon.png'/>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3:
html {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
max-width: 100%;
height: 100%;
background-color: white;
}
#welcome_bar {
position: relative;
top: 10%;
left: 12.5%;
padding: 0;
width: 75%;
height: 10%;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
#font-face {
font-family: "Roboto Regular";
src: url("fonts/Roboto-Regular.ttf");
}
#welcome_bar_name {
position: relative;
left: 5px;
top: 5px;
padding-left: 10px;
width: 75%;
height: 50%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.65);
font-size: 3em;
}
#welcome_bar_description {
position: relative;
left: 8px;
top: -15px;
padding-left: 10px;
width: 35%;
height: 20%;
font-family: Roboto Regular;
color: rgba(0, 0, 0, 0.5);
font-size: 1.5em;
}
#nav_block {
position: relative;
top: 12%;
left: 12.5%;
padding: 0;
width: 75%;
height: 68%;
}
#block_list {
display: table;
position: relative;
top: 5%;
padding: 0;
width: 100%;
height: 90%;
}
.block_container {
display: table-cell;
width: 22%;
height: 100%;
}
.block {
height: 100%;
position: relative;
}
.block a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
}
#left_out {
width: 99%;
background-color: #00AE93;
}
#left_in {
width: 98%;
margin-left: 1%;
margin-right: 1%;
background-color: #9CA645;
}
#right_in {
width: 98.5%;
margin-left: 1%;
margin-right: 1%;
background-color: #EDB613;
}
#right_out {
width: 99%;
margin-left: 1.2%;
background-color: #D55435;
}
#about_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#portfolio_description {
position: relative;
top: 20%;
width: 90%;
height: 5%;
background-color: white;
}
#sparepage_description {
position: relative;
top: 10%;
width: 90%;
height: 5%;
background-color: white;
}
#contact_description {
position: relative;
top: 25%;
width: 90%;
height: 5%;
background-color: white;
}
#font-face {
font-family: "Ubuntu M";
src: url("fonts/Ubuntu-M.ttf");
}
#about_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #00AE93;
}
#portfolio_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #9CA645;
}
#sparepage_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #EDB613;
}
#contact_description p {
text-align: center;
vertical-align: middle;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Ubuntu M;
font-size: 1.25em;
color: #D55435;
}
.block_icon_container {
top: 48%;
position: relative;
margin: 0 auto;
padding: 3px;
}
#font-face {
font-family: "Ubuntu L";
src: url("fonts/Ubuntu-L.ttf");
}
.block_title {
position: relative;
max-width: 100%;
top: 45%;
height: auto;
color: white;
font-size: 1.5em;
font-family: Ubuntu L;
text-align: center;
}
.block_icon {
margin: 0;
padding: 0;
max-width: 100%;
opacity: 0.6;
}
Under .block a, I noticed that if you remove the width, the page doesn't expand when you mouse over the block. The size of the percentage seems to effect how far the page is expanded as well.
This bug probably wouldn't be noticed unless visitors randomly scrolled using the middle mouse button, but it bugs me.
Related
I am working on my laptop in VSCode, after I make my site, I go to stylizing him and after I make this after my pleasure, when I minimize Google, it doesn't keep his resolution.
This is full screen on google chrome.
And this is google chrome minimized.
What could I do for websites keep his style as I put him in full screen?
HTML:
<!--HTML SOURCE--!>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Proiecte</li>
<li>Staff</li>
<li>Contact</li>
</ul>
<img class="background" src="casey-horner-O0R5XZfKUGQ-unsplash.jpg">
</div>
</header>
<body>
<h1 class="titlu"> Titlu </h1>
<div>
<img class="h" src="Other-html-5-icon.png">
<img class="c" src="CSS.png">
</div>
<div class="cards">
<img class="x" src="pngegg.png">
<img class="y" src="pngegg.png">
<img class="z" src="pngegg.png">
</div>
<div class="faicon">
<i class="fa fa-line-chart" aria-hidden="true"></i>
</div>
<div class="textfaicon">
<h1> Economisire </h1>
<p><b>Economisesti timp si mai ales,<br>
economisesti bani! Cat astepti sa<br>
cauti o echipa care sa iti poata <br>
crea site-ul dorit, noi iti suntem<br>
aproape. Cerem foarte putin pentru<br>
serviciile pe care le oferim!</b>
</p>
</div>
</body>
</html>
CSS:
/* CSS */
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap');
body{
margin: 0px;
padding: 0px;
font-family: 'Roboto', sans-serif;
}
* {
box-sizing:
border-box;
}
.background {
position: absolute;
width: 100%;
height: 120%;
padding-left: 0%;
padding-bottom: 10%;
-webkit-filter: brightness(50%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.titlu{
position: relative;
color: white;
padding-left: 45%;
padding-top: 15%;
font-size: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(31, 37, 77);
opacity: 100%;
letter-spacing: 2px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
display: block;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #0c3a55;
}
.h{
position: relative;
height: 300px;
width: 300px;
bottom: -270px;
margin-bottom: 10%;
padding: 0%;
left: 8%;
}
.c{
position: relative;
height: 300px;
width: 220px;
bottom: -100px;
margin-bottom: 0%;
padding: 0%;
left: 50%;
}
.x{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.y{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.z{
position: relative;
height: 500px;
width: 250px;
left: 10%;
}
.cards{
position: relative;
bottom: -150px;
left: 13%;
padding: 0%;
margin: 0%;
width: 200;
}
.faicon{
position: relative;
text-align: center;
right: 2%;
bottom: 290px;
font-size: 40px;
}
.textfaicon{
text-align: center;
position:relative;
color:#0c3a55;
font-size: 10px;
bottom: 280px;
right: 2%;
letter-spacing: 2px;
}
I suggest you to try bootstrap, it will make your page responsive to all types of devices and you will write less CSS. Good luck.
This is the first site I've made, and I'm just struggling with a few things. Let me explain the issues.
I have a screen with a resolution of 1366 X 768, which I have designed on, and it looks great there. However, when I move it over to my larger screen(2560X1080), several elements shift around and it looses the design that I intended. How do I set a max resolution? I've tried, but nothing seems to work.
I have a table set up half way down my page, and I can NOT get them to align horizontally. I probably just have too much code, and it's made a mess somehow.
Help appreciated.
body {
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
width: 70%;
height: 2000px;
padding-top: 100px;
max-width: 900px;
}
div#wrapper {
max-width: 1000px;
margin: 0 auto;
box-shadow: 0 0 10px #777;
}
.top {
border: solid 1px black;
margin: 0 auto;
width: 100%;
padding: ;
height: 200px;
}
h1 {
color: #cc4f41;
text-decoration: ;
}
div {
display: block;
height: 225px;
}
.headertext {
font-size: 25px;
float: right;
margin-top: 30px;
margin-left: 50px;
}
.japanname {
margin-left: 600px;
margin-top: 30px;
position: absolute;
float: left;
font-size: 30px;
}
.rank {
float: left;
margin-left: 50px;
position: absolute;
margin-top: 115px;
margin-left: 550px;
font-size: 10px;
}
.container {
position: relative;
width: 80%;
}
.logoimage {
height: auto;
margin-left: 2%;
float: left;
padding-left: 100px;
height: 200px;
width: 200px;
display: flex;
flex-direction: row;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: ;
overflow: hidden;
width: 30%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
.container:hover .overlay {
transform: scale(1);
}
.text {
color: #cc4f41;
font-family: permanent marker;
font-size: 20px;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* basic info box*/
.info {
margin: 0 auto;
max-width: 900px;
padding-top: 17%;
height: 600px;
border-radius: 100%;
background-image: ;
}
.whois {
font-size: 40px;
margin-left: 18%;
margin-top: 5%;
color: #ebd234;
position: absolute;
font-kerning: auto;
line-height: 35px;
font-family: permanent marker;
}
.infopara {
margin-left: 15%;
margin-right: 50%;
margin-top: 170px;
position: absolute;
font-size: 12px;
}
.fullbody {
position: absolute;
float: right;
margin-left: 33%;
max-width: 25%;
}
.hw {
margin-top: 120px;
margin-left: 470px;
height: 30px;
position: absolute;
border: 2px #cc4f41 dotted;
border-radius: 40%;
padding: 20px;
font-size: 14px;
}
.infotable {
position: absolute;
margin-top: 350px;
margin-left: 100px;
padding: 10px;
text-align: center;
table-layout: fixed;
width: 300px;
}
.infotable th {
font-size: 20px;
color: #cc4f41;
border-bottom: 2px solid #cc4f41;
}
/*abilities*/
.abilities {
height: 600px;
margin: 0 auto;
}
.head2 {
font-size: 30px;
margin-left: 70px;
margin-top: 33px;
height: 50px;
}
.glove {
position: absolute;
max-width: 10%;
}
.abhead {
position: absolute;
margin-left: 75px;
font-size: 20px;
font-style: oblique;
}
.twocolumn {
width: 45%;
display: inline-block;
height: 400px;
padding-top: 5%;
padding-left: 25px;
border: 5px solid black;
border-radius: 30%;
}
.dot2 {
position: absolute;
width: 15%;
opacity: 50%;
}
/*disciples*/
.disciple {
background-color: black;
height: 500px;
}
.genos {
position: absolute;
color: white;
margin-top: 5%;
max-width: 35%;
}
.head3 {
font-size: 30px;
margin-left: 80%;
padding-top: 3%;
height: 50px;
color: white;
}
.h3 {
color: white;
position: absolute;
font-size: 40px;
margin-left: 25%;
margin-top: 20%;
font-family: permanent marker;
}
.discp {
color: white;
margin-left: 37%;
padding-top: 36%;
padding-right: 10%;
font-size: 12px;
}
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>Saitama</title>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- top box -->
<div class="top">
<div class="container">
<img src="img/closeupface.png" style="float:left" class="logoimage">
<div class="overlay">
<div class="text">Just a hero for fun</div>
</div>
<div class="headertext" style="float:right">
<h1>Saitama</h1>
</div>
<div class="japanname">サイタマ</div>
<div class="rank">B-Class: Rank 7</div>
</div>
</div>
<!-- basic info box -->
<div class="info">
<div class="whois">WHO IS
<BR> HE?</div>
<div class="infopara" align="center">The main protagonist of the series and the titular One-Punch Man and the most powerful being to exist in the series. Saitama faces a self-imposed existential crisis, as he is now too powerful to gain any thrill from battle.</div>
<table class="infotable">
<tr>
<th>AGE</th>
<th>GENDER</th>
<th>JOB</th>
</tr>
<tr>
<td>25</td>
<td>Male</td>
<td>Hero</td>
</tr>
</table>
<div class="hw" style="float:right">175cm<br>70kg</div>
<img src="img/fullbody.png" style="float:right " class="fullbody">
</div>
<br><br><br>
<!-- abilities -->
<div class="abilities">
<img src="img/glove-01.png" class="glove">
<div class="head2">ABILITIES</div>
<!-- color for background : #ebd234 -->
<div class="twocolumn" style="background-color: #ebd234">
<div class="abhead">Unparalleled Strength</div><br><br><br>
<div class="abhead">Enhanced Leap</div><br><br><br>
<div class="abhead">Shockwave Generation</div><br><br><br>
<div class="abhead">Air Manipulation</div><br><br><br>
<div class="abhead">Non-physical interaction</div><br><br><br>
<div class="abhead">Unparalleled Speed & Reflexes</div><br><br><br>
<div class="abhead">Immeasurable Dexterity</div>
</div>
<div class="twocolumn" style="background-color: #cc4f41">
<div class="abhead">Immeasurable Agility</div><br><br><br>
<div class="abhead">Immense Stamina</div><br><br><br>
<img src="img/face-01.png" class="dot2">
<div class="abhead">Invulnerability</div><br><br><br>
<div class="abhead">Enhanced Lung Capacity</div><br><br><br>
<div class="abhead">Vacuum Adaptation</div><br><br><br>
<div class="abhead">Temperature Immunity</div><br><br><br>
<div class="abhead">Pain Suppression</div><br><br><br>
</div>
</div>
<br><br>
<!-- disciples -->
<div class="disciple">
<div class="head3">DISCIPLES</div>
<img src="img/genos.png" class="genos">
<div class="h3">GENOS</div>
<div class="discp"> The deuteragonist of One-Punch Man. He is a 19-year-old cyborg and the disciple of Saitama. He is always aiming to become more powerful and fights for justice. Under the Hero Association, he is given the name Demon Cyborg and is currently S-Class
Rank 14.</div>
</div>
</body>
</html>
As #MaxiGui suggest always try to use relative units like rem,em,vh,vw if you want to create a responsive website. use px only in the case where you are certain that the height and width is not going to change irrespective of the screen dimension.
You have used fixed value for some margin, height and width try to remove them and then it will work
I spent a hour to find the problem but I still can't find it.
When I zoom in and out in my browser, some elements are moving and some get bigger. For me, the element that is moving, is in his meant position at 67% zoom.
#structure {
background-color: blue;
height: 640px;
width: 1136px;
}
/* Starting the left side menu */
#select {
background-image: url('http://image.prntscr.com/image/876c2fde408443e0969559dfb4130848.png');
height: 640px;
width: 100px;
border-right: 4px solid rgba(69, 39, 28, 0.9);
float: left;
}
.menu {
height: 40px;
width: 40px;
margin-left: 30px;
margin-bottom: 34px;
}
.menu img {
height: 100%;
width: 100%;
}
#menu1 img, #menu7 img {
height: 120%;
width: 100%;
}
#menu1 {
height: 120px;
width: 40px;
margin-bottom: 50px;
margin-left: 37px;
margin-bottom: 30px;
}
#menu1 img {
margin-top: 7px;
height: 95px;
width: 28px;
}
#menu7 {
height: 40px;
width: 40px;
margin-top: 85px;
margin-left: 30px;
margin-bottom: 25px;
}
/* Closing the left side menu */
/* Starting slideshow Images */
#slideImg img {
position: relative;
height: 640px;
width: 683px;
float: left;
}
/* Closing slideshow Images */
/* Starting the quests side */
#quests {
background-image: url('http://image.prntscr.com/image/46c0de9e96474d5686b175d7cc343516.png');
height: 640px;
width: 350px;
float: left;
}
#seasonLevel {
height: 62px;
width: 62px;
z-index: 60px;
float: left;
position: relative;
top: 8px;
left: 10px;
}
#seasonLevel div {
position: relative;
top: 4px;
border: 3px solid white;
border-radius: 50%;
height: 60px;
width: 60px;
}
#seasonLevel div div {
border: 1px solid white;
border-radius: 50%;
height: 50px;
width: 50px;
margin: auto;
}
#seasonLevel div div p {
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
position: relative;
bottom: 22px;
}
#seasonDesc {
width: 220px;
height: 65px;
position: relative;
left: 23px;
top: 12px;
float: left;
font-family: sans-serif;
}
#seasonDesc p:first-child {
font-size: 32px;
font-weight: bold;
position: relative;
bottom: 30px;
color: white;
font-weight: 600;
}
#seasonDesc p:last-child {
font-size: 23px;
font-weight: 600;
position: absolute;
top: 25px;
color: #DEDEDE;
opacity: 0.7;
}
#sunCont {
background-color: rgba(0, 0, 0, 0.3);
z-index: 50px;
height: 47px;
width: 314px;
position: relative;
right: 8px;
top: 33px;
z-index: 30px;
float: right;
}
.sun {
background-color: black;
opacity: 0.4;
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: 0.01px;
margin-top: 9px;
display: inline-block;
position: relative;
left: 5px;
border: 1px solid white;
}
.rs {
height: 145px;
width: 331px;
position: relative;
background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
border: 0.2px solid black;
box-shadow: 0px 2px 0px black;
float: right;
}
/* Closing the quest side */
<!DOCTYPE html>
<html>
<head>
<title>VainGlory</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='style.css' rel = 'stylesheet' type = 'text/css'>
</head>
<body>
<div id = 'structure'>
<!--LS-->
<div id = 'select'>
<div id = 'menu1'> <img src = 'http://image.prntscr.com/image/ddc0c251ac4d4ca6970047e49f575ff4.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/421e8f797e5e4af5abd56e2c84c48884.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/4cb6887febbd4bc7a6f8242688165a9c.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/64bf74940f2449de99f8eedd0115dc55.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/10dd330b566d4b1d9cedc7793c67460b.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/2f4fdfd4a3964536a84689e5316c04e8.png'> </div>
<div id = 'menu7'> <img src = 'http://image.prntscr.com/image/ac57c5f7b73f44b8aa92c58a2289cff8.png'> </div>
</div>
<!--MID-->
<div id = 'slideImg'>
<div> <img src = 'http://image.prntscr.com/image/1025277995cb442a950a05fe3b168614.jpg'> </div>
</div>
<!--RS-->
<div id = 'quests'>
<div class="rs">
<div id="seasonLevel">
<div>
<div>
<p>10<p>
</div>
</div>
</div>
<div id = 'seasonDesc'>
<p>Autumn 2016</p>
<p>Remaining: <span id='time'></span></p>
</div>
<div id="sunCont">
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
</div>
</div>
<div class="rs">
</div>
<div class="rs">
</div>
<div class="rs">
</div>
</div>
<!--CLOSE-->
</div>
<script src="javas.js"></script>
</body>
</html>
From a quick look, it looks as though the problem is coming from the border being rendered incorrectly. As far as I know, there's not really a way for a browser to display half a pixel (ex: 0.2px in the rs class),
.rs {
height: 145px;
width: 331px;
position: relative;
background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
**border: 0.2px solid black;** <-- This here
}
You'll notice that if you add
* {
box-sizing: border-box;
}
(For testing purposes, what this is doing is making sure that every element in your document displays the border within the element itself rather than bumping out the width of the boxes.)
EDIT: If you add this box-sizing style to both the .rs class and the #select id, if should solve the problem. Both of these have borders defined which are bumping your width larger than you initially accounted for.
The problem fixes itself and just shows some blue on the right side. (which makes sense since we changed the width of the interior objects)
I think that the reason it is displaying correctly in the 67% zoom is because the 0.5 pixel is being rendered as roughly 1px. The math is a little complicated for me to figure out right away, but if you really want to know - I can look into that!
My suggestion would be to make sure that any of your borders are either whole numbers or by setting your box-sizing on your elements to work as "border-box" rather than the default which adds width to your elements.
.rs {
height: 145px;
width: 331px;
position: relative;
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
border: 0.2px solid black;
}
This code will do its job!
I've taken up interest in HTML/CSS Coding as of late and have run into a problem very quickly that I cant seem to solve or properly understand based on other answered questions similar to mine.
My positioning is based off pixels when it should be percent?
How to get my elements and pictures to stop rescaling as the browser shrinks, have it simply cut off like in near every website?
How do I choose between Absolute and Relative positioning?
Here's 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">
© Hecc
</div>
</div>
</body>
</html>
Either fix my code to what is desired (I'll just see what you did and understand it) or explain what I need do.
Whatever you do, thank you for reading and/or assisting.
You could change min-width: 100%; to min-width: 1000px; in html, body, #wrapper to set the min page width to 1000px. this will make the browser add a scrollbar when the window width is below 1000px.
Only applying min-width: 1000px; to html, body, #wrapper will not work for you since you also used absolute positioning. To fix this add position: relative; to #wrapper.
Why do we need to add position: relative; to #wrapper?
Absolute positioned elements will always position based on the first parent that has position: relative;. If none has this rule, it will just position based on the body. (https://developer.mozilla.org/de/docs/Web/CSS/position)
To learn more about position relative and absolute refer to: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
With those changes being made, your website will stop scaling when the browser window reaces < 1000px in width. Ofc you can change the 1000px to any width you want.
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">
© Hecc
</div>
</div>
</body>
</html>
Edit 1:
Added max-width to #wrapper to provide an example for (if i understand correctly):
What do I need to do for proper positioning if somebody looks at this
with a higher pixel count screen?
Edit 2:
I think i know what u want now. Consider wrapping your <img> and <p> inside a div and position the div and not the img and the p tag separately.
I just updated the source to provide an example. (and removed the max-width thing)
I am familiar with HTML/CSS but am not advanced by any means.
I am having difficulty styling my form element.
I want to add padding around my form however whenever I do this is only pads the top and the left
The other issue is that when I re-size the window really small the form tag seems to protrude out of the
I would like to know what the proper way to do this is.
Also, if you could look over my simple code and let me know if there is a better/more standard way to do what I am trying to do here.
* {
box-sizing: border-box;
font-size: 15px;
margin: 0;
}
body {
padding: 5%;
}
section {
height: 100%;
float: left;
position: relative;
}
div {} .left-section {
width: 25%;
}
.right-section {
width: 75%;
}
.body-left {
background-color: #000000;
height: 93%;
}
.body-right {
background-color: #DCDCDC;
height: 86%;
}
.header {
background-color: #808080;
height: 7%;
}
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
padding: 5px;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
}
input {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
position: absolute;
padding: 10px;
left: 0;
height: 80%;
width: 90%;
top: 50%;
transform: translateY(-50%);
}
button {
background-color: #808080;
border-style: solid;
border-width: small;
border-color: #555555;
border-radius: 5px;
height: 80%;
width: 10%;
position: absolute;
color: #555555;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<html>
<head>
<title>whisper</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="left" class="left-section">
<div id="header_left" class="header">
</div>
<div id="body_left" class="body-left">
<ol id="users"></ol>
</div>
</section>
<section id="right" class="right-section">
<div id="header_right" class="header">
</div>
<div id="body_right" class="body-right">
<ol id="messages"></ol>
</div>
<div id="footer" class="footer">
<form id="form_id" action="#">
<input id="user_input" />
<button id="btn_id">send</button>
</form>
</div>
</section>
</body>
</html>
P.S. I have checkout this page but I couldn't find a sufficient answer.
I do not know if this helps but I switched the padding of 5 pixels from the footer class to the form styling.
.footer {
background-color: #808080;
height: 7%;
width: 100%;
position: absolute;
}
form {
position: absolute;
height: 100%;
width: 100%;
display: block;
padding: 5px;
}