<!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;
}
Related
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)
im new to css and html i wanna cr8 a product box value like this
http://i.imgur.com/kMogtMz.png
I tried with these but didn't get any result.
I want .fill class to be dynamically modifiable.
Anyone can help me ?
.box {
width: 250px;
height: 30px;
background: grey;
color: white
}
.box .fill {
float: left;
width: 78%;
background: orange;
height: 100%;
}
.box .empty {
position: absolute;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill"><div class="fill-badge">Radeon 7870</div></div>
<div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>
You just need to look at your absolute and relative positioning. Make sure that all elements that are absolutely positioned are inside an element with relative defined as a position. So in this case you just need to add position: relative; to the .box.
.box {
width: 250px;
height: 30px;
background: grey;
color: white;
position: relative;
}
.box .fill {
float: left;
background: orange;
height: 100%;
}
.box .empty {
float: right;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
left: 0;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
position: absolute;
right: 0;
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill" style="width:60%;">
<div class="fill-badge">Radeon 7870</div>
</div>
<div class="empty">
<div class="empty-badge">125.6 GB/S</div>
</div>
</div>
Edited to show inline style.
You must set the .box position to relative. http://jsfiddle.net/Lzmop76a/
.box {
width: 250px;
height: 30px;
background: grey;
color: white
position: relative;
}
I would do it using a background color and a background image for the same element like:
.box {
width: 240px;
padding: 0 5px;
height: 30px;
line-height: 30px;
background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
color: white;
}
.box span{
float:right;
}
<div class="box">
Radeon 7870 <span>125.6 GB/S</span>
</div>
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example