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
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!
For some reason if I offset h2 even for few px or 0.x %, scrollbars shows up on my page, even tho there is still a lot of space left for h2. But when I add padding-left, scrollbars won't show up and everything is fine. I was trying to find why is this happening using dev tools, but no success. Any ideas?
Code:
h2 {
font-family: "fira sans";
color: #529aaf;
position: relative;
/*left: 50px; here if I leave left: x then I get scrollbars. If I change left to padding, I wont' get them.*/
}
.profile_container {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
margin-top: 200px;
}
.cycle {
background: orange;
height: 100px;
width: 100px;
min-width: 100px;
margin-bottom: 10px;
border-radius: 100%;
background-image: url(images/8.jpg);
background-size: cover;
margin-right: 18%;
margin-top: 10px;
}
.cycle:last-child {
margin-right: 0;
}
.chat_container {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
/*position: absolute;
top: 0;
left: 0;*/
}
.chat_container img {
padding: 5%;
position: relative;
width: 150px;
min-width: 150px;
top: -260px;
}
.chat_container > div {
padding: 5.5%;
position: relative;
width: 150px;
min-width: 150px;
top: -240px;
border-radius: 5%;
}
.chat_container > div {
background: #e2e2e2;
margin-right: 10px;
margin-bottom: 10px;
}
p:last-child {
margin-right: 0;
}
.partners_container {
text-align: center;
overflow: hidden;
}
.partners_container img {
margin-top: 24px
}
<div class="row">
<div class="col col-12 background_row">
<h2>Our customers happily shares their experiences...</h2>
<section class="references">
<div class="profile_container">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
</div>
<div class="chat_container">
<!--<img src="images/chat.png" width="9%"></img>
<img src="images/chat.png" width="9%"></img>
<img src="images/chat.png" width="9%"></img>-->
<div><p>Amazing product!</p></div>
<div><p>I love it!</p></div>
<div><p>So good so far. recommend really </p></div>
</div>
</section>
</div>
</div>
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;
}