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)
Related
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 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;
}
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.
i'm trying to recreate this image in pure html and css, or add a little javascript if nessascary:
and here's what i have so far:
i'm trying to move that small orange box near the center up to match the blue line, but she won't budge
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
and here's the entire code:
layout.html
<html>
<head>
<title>LCARS</title>
<link rel="stylesheet" href="static/style.css"/>
</head>
<body>
<div class="topleft">
</div>
<div class="topleft2">
</div>
<div class="middletop">
</div>
<div class="bottomleft">
</div>
<div class="bottomleft2">
</div>
<div class="bottomleft3">
</div>
<div class="bottomleft4">
</div>
<div class="content">
</div>
<div class="content2">
</div>
</body>
<footer>
</footer>
</html>
style.css
body {
background-color: black;
}
.topleft {
background-color: #c498c4;
width: 126px;
height: 90px;
}
.topleft2 {
margin-top: 5px;
background-color: #9b98fe;
width: 463px;
height: 112px;
border-radius: 0 0 0 70px;
}
.bottomleft {
margin-top: 7px;
background-color: #cc6061;
width: 463px;
height: 91px;
border-radius: 70px 0 0 0;
}
.bottomleft2 {
margin-top: 5px;
background-color: #cc6061;
width: 126px;
height: 137px;
}
.bottomleft3 {
margin-top: 5px;
background-color: #fe9800;
width: 126px;
height: 38px;
}
.bottomleft4 {
margin-top: 5px;
background-color: #ffa873;
width: 126px;
height: 180px;
}
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 471px;
}
.content {
background-color: /*#6D6A6A*/black;
position: absolute;
left: 127px;
top: 239px;
border-radius: 35px;
width: 900px;
height: 700px;
}
.content2 {
background-color: black;
position: absolute;
left: 127px;
top: -2;
border-radius: 0 0 0 35px;
width: 900px;
height: 200px;
}
While I advise having a look into using absolute positioning extensively, if you're already doing it and you're happy with it, you just have to set top and you should be good to go:
.middletop {
position: absolute;
background-color: #fe9800;
width: 26px;
height: 16px;
left: 476px;
top:199px /* <-- this is what I added */
}
Here is a demo.
Try using
position: absolute;
top: /*the amount of px from the top to your wanted location*/;
left: /*the amount of px from the left to your wanted location*/;
z-index:1000; /*<= this is to be above all other elements*/
Use the css top:100px;. And to see it use: z-index:100;
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: #f2f2f2;
}
#content{
background-color: white;
border: 1px solid gray;
width: 60%;
height: auto;
display: block;
position: relative;
left: 50%;
margin-left: -30%;
padding: 10px;
z-index: 100;
margin-top: 20px;
}
html, body {
height: auto;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px;
} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
.instructions{
margin-top: 50px;
font-family: serif;
font-size: medium;
width: 50%;
left: 50%;
margin-left: -25%;
position: relative;
margin-bottom: 60px;
}
.repbanner{
background-color: red;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 200;
border: 1px #a70000 solid;
text-align: center;
color: white;
font-size: smaller;
text-transform: uppercase;
padding-top: 3px;
padding-bottom: 3px;
}
.dembanner{
background-color: blue;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 200;
border: 1px navy solid;
text-align: center;
color: white;
font-size: smaller;
text-transform: uppercase;
padding-top: 3px;
padding-bottom: 3px;
}
.introbanner{
background-color: white;
width: 108%;
height: auto;
left: 50%;
margin-left: -54.5%;
margin-top: 40px;
position: relative;
z-index: 199;
border: 1px gray solid;
text-align: center;
color: black;
font-size: smaller;
text-transform: uppercase;
margin-bottom: 10px;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
#animals{
width: 100%;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
position: relative;
display: block;
height: auto;
}
.animalmugshot{
width: 150px;
height: 150px;
float: left;
position: relative;
}
img{
position: relative
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<div class="repbanner">
INTRODUCTION
</div>
<div class="instructions">
Hello and thanks for using the Chrome extension Political Animals. Below are the instructions on how the piece works. Enjoy!
<br/>
<br/>
</div>
<div class="dembanner">
Instructions
</div>
<div class="instructions">
Here's how the project works!
1. Surf the Web. Try any website you would like.
2. You should be redirected to a news site. Do not be alarmed!
3. Enjoy!
</div>
<div class="introbanner">
Meet the Cast
</div>
<div id="animals">
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalAnimal.png" alt="Charlie the CEO"/><br/><p>Charlie the CEO</p>
</div>
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalFox.png" alt="Freddy the Financial Agent"/>
<br/>
<p> Freddy the Financial Agent</p>
</div>
<div class="animalmugshot">
<img src="animalshots/thumbnails/PoliticalGiraffe.png" alt="Geoffry the Graphic Designer"/>
<br/>
<p>Geoffry the
<br/>Graphic Designer</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
The div " animals" and "animalmugshots" should be in the "wrapper" and "content" but for some reason, the animals spill over the white "content" body part. I am confused as to why? Hopefully someone can help me out!
The element, #animals, was collapsing upon itself as the children element were being floated.
Floated and absolutely positioned elements are taken out of the flow of the document, therefore causing the parent element(s) to collapse with undefined dimensions.
Adding a defined height to the parent element, or overflow:hidden will solve this collapsing issue.
Working example - made the footer black for visibility purposes.
#animals {
width: 100%;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
text-align: center;
position: relative;
display: block;
height: auto;
overflow: hidden; /* Added this.. */
}
Need to clear your floats in #animals or all divs
div:after //OR
#animals:after {
display: table;
content: '';
clear: both;
}