I've gone through previous posts talking about why their media query isn't working, but it seems they are not relevant to my problem. So I'm here to seek help.
Hi guys,
Super newbie here, I've been haunting by this problem for over a week now, and I hope I can get some help here... Here's my code. I don't know the proper way to ask a question, so if there's anything to improve, let me know.
The point of the code is to make a layout that is responsive to the different width of the browser.
/* HTML */
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>HEADER YES PRAISE THE lORD</h1>
<div class="div-1">
\<h2\>Chicken\</h2\>
\<p\>The chicken is a type of domesticated fowl, a subspecies of the red junglefowl. It is one of the most common and widespread domestic animals, with a total population of more than 19 billion as of 2011.\</p\>
</div>
<div class="div-2">
\<h2 style="background\-color:blue;"\>Beef\</h2\>
\<p\>Beef is the culinary name for meat from cattle, particularly skeletal muscle. Humans have been eating beef since prehistoric times. Beef is a source of high\-quality protein and essential nutrients.\</p\>
</div>
<div class="div-3">
\<h2 style="background\-color:lime;"\>Sushi\</h2\>
\<p\>Sushi is a Japanese dish of specially prepared vinegared rice, usually with some sugar and salt, combined with a variety of ingredients, such as seafood, vegetables, and occasionally tropical fruits\</p\>
</div>
</body>
</html>
/* CSS */
{
box\-sizing: content\-box;
}
h1{
text\-align: center;
}
p{
clear:both;
padding: 10px;
}
div h2{
background\-color: red;
float: right;
border\-left: 2px solid black;
border\-bottom: 2px solid black;
text\-align: center;
padding:10px;
margin:0px;
width:100px;
}
.div-1{
box\-sizing: content\-box;
border:2px solid black;
color:white;
background\-color:grey;
margin:10px;
float:left;
}
.div-2{
box\-sizing: content\-box;
border:2px solid black;
color:white;
background\-color:grey;
margin:10px;
float:left;
}
.div-3{
box\-sizing: content\-box;
border:2px solid black;
color:white;
background\-color:grey;
margin:10px;
float:left;
}
#media(min-width: 992px;){
.div-1{
width:33%;
}
.div-2{
width:33%;
}
.div-3{
width:33%;
}
}
#media(min-width: 768px)and(max-width:991px){
.div-1{
width:50%;
}
.div-2{
width:50%;
}
.div-3{
width:100%;
}
}
#media(max-width: 767px){
.div-1{
width:100%;
}
.div-2{
width:100%;
}
.div-3{
width:100%;
}
}
#media screen and (min-width: 800px){
//your code here
}
it is good to use something like
<div class="box first/1"></div>
<div class="box second/2"></div>
insted of
<div class="div-1"></div>
<div class="div-2"></div>
to avoid duplications in your css
Two things:
Add initial-scale=1.0 in your meta content tag.
Specify media type, in this case it is screen.
#media screen and (min-width: 992px;){
.div-1{
width:33%;
}
Related
So, I am using vh, and, to my knowledge, it is 1 percent the view height of the page. It should work like percentages, but for borders and possibly other things. In Chrome, though, it wont work and leaves white space at the bottom of the Web page. Here is what I am using:
div /*It most be any element I'm just using div for an example*/
{
border:.5vh solid red;
}
I am asking this because Chrome (being the frustrating piece of work it is) doesn't convert .1vh to .1% like like internet explorer does and I'm left with white space at the bottom. Here is what I'm working on:
HTML:
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<title>Bradley's Website (Me)</title>
<link rel="stylesheet" href="personalWeb1.css">
<meta charset="UTF-8"/>
<meta name="description" content="My personal website"/>
<meta name="keywords" content="Brad,Website,Personal,Information"/>
<meta name="author" content="Bradley William Elko"/>
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div class="div01">
<h1 class="h101"><a class="a00p5" href="personalWeb1.html" style="text-decoration:none">Bradley's Website</a></h1>
</div>
<div class="div02">
<h2 class="h201">
<a class="a01" href="personalWeb2.html" style="text-decoration:none">My Band</a>
<a class="a01" href="personalWeb3.html" style="text-decoration:none">My Ideas</a>
</h2>
</div>
<div class="div03">
<h2 class="h202">About Me</h2>
</div>
<div class="div04">
<div class="div05">
<p>Date: 10/4/2016 (Latest Update)</p>
<blockquote>
Summary:
<br/>
<br/>
Welcome to my personal website! I am Bradley William Elko, and I am from Brunswick Ohio. I am currently attending MCCC (Medina County Carrer Center). I am taking SEWD1 (a coding class at MCCC). I always had an interest in coding. I am glad to be making my own personal website!
</blockquote>
</div>
</div>
</body>
CSS:
a.a00p5
{
color:#950f0f;
padding-left:1.9px;
}
a.a00p5:hover
{
color:red;
}
a.a00p5:active
{
color:#ffffff;
background-color:#B6B2AE;
}
a.a01
{
color:#950f0f;
border-left:.3vh solid #950f0f;
border-right:.3vh solid #950f0f;
margin-left:1%;
margin-right:1%;
}
a.a02,a.a03,a.a04
{
color:#ffffff;
}
a.a02:hover,a.a02:active
{
color:#3b5998;
}
a.a03:hover,a.a03:active
{
color:#00aced;
}
a.a04:hover,a.a04:active
{
color:#bb0000;
}
.address01
{
text-align:center;
}
body{
overflow:hidden;
margin:0px;
}
div.div01
{
position:relative;
text-align:center;
height:14.3%;
width:100%;
font-family:Arial, Helvetica, sans-serif;
background-color:#73778c;
border-top:.4vh solid #950f0f;
}
div.div02
{
border-top:.3vh solid #950f0f;
border-bottom:.3vh solid #950f0f;
position:relative;
height:5%;
width:100%;
background-color:#73778c;
text-align:center;
}
div.div03
{
position:relative;
background-color:#73778c;
height:10%;
border-bottom:.3vh solid #950f0f;
}
div.div04
{
position:relative;
height:69%;
width:100%;
background-color:#73778c;
border-bottom:.4vh solid #950f0f;
}
div.div05
{
position:relative;
width:50%;
height:80%;
margin-left:auto;
margin-right:auto;
padding-left:1%;
background-color:#b6b2ae;
overflow-y:scroll;
}
h1.h101
{
color:#950f0f;
font-size:6.75vh;
margin:0%;
}
h2.h201
{
text-align:center;
font-size:4.5vh;
margin:0%;
padding:0%;
}
h2.h201,a:hover
{
color:red;
}
h2.h201,a:active
{
color:white;
}
h2.h202
{
font-size:5.2vh;
color:#950f0f;
margin:0px;
text-align:center;
}
img.img01
{
width:100px;
height:100px;
}
img.img02
{
width:100px;
height:81.2px;
}
img.img03
{
width:100px;
height:100px;
vertical-align: bottom;
}
table
{
border:2px solid #950f0f;
margin-top:3%;
margin-bottom:9%;
margin-left:auto;
margin-right:auto;
}
td:active
{
background-color:#ffffff;
}
td.td01
{
border:2px solid #3b5998;
padding-top:35.5px;
padding-bottom:36.5px;
}
td.td02
{
border:2px solid #00aced;
padding-top:35.5px;
padding-bottom:36.5px;
}
td.td03
{
border:2px solid #bb0000;
padding-top:35.5px;
padding-bottom:36.5px;
}
th.th01
{
border:2px solid #3b5998;
background-color:#ffffff;
}
th.th02
{
border:2px solid #00aced;
background-color:#ffffff;
}
th.th03
{
border:2px solid #bb0000;
background-color:#ffffff;
}
If you look closely at the bottom of the Web page (on Chrome), you can see white space at the bottom of the page. You have the really look at the bottom to see it. This doesn't happen on Internet Explorer (I'm using a pre-installed version of IE on windows ten, but I don't know what version). If you don't get the same problem, I get I'm sorry that this wasted your time, but I can show you screenshot proof if you really want it.
Things to note:
I have two other pages so there maybe be other things in my css text document that you may encounter. Ignore it.
If percentages don't work than is there another way to simulate them for borders in Chrome?
Thank you for for your time!
In Chrome, border widths are rounded down to the nearest pixel. Depending on the calculated results of your vh border widths, the sum of the heights and border widths of all your elements may be less than 100%.
You can solve this by applying box-sizing: border-box to all of your elements. This will ensure borders do not change the dimensions of your elements, so you'd only have to ensure your <div> heights add to 100%.
* {
box-sizing: border-box;
}
However, you choose to do it, never use fixed heights if you can avoid it. Let CSS handle the dimensions naturally.
This has been bothering me for a while. I have currently vertically align a border contain the word "Facebook" to an image but, vertical align isn't completely centering the word with the image.
Update 1: I am using Width 100% and Line-Height 100%. This is close to how I want it but not quite. https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 I want the border and the image to align. Here is my old code:
HTML
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
CSS
#div06
{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01
{
border:3px solid blue;
padding: 35px;
margin: 25;
}
Here is my current edit:
#div06{
margin-top:3%;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid #3b5998;
color:#000000;
font-family:arial, bold;
font-size: 30px;
padding: 35px;
margin: 25;
}
It is vertically aligned in the full version but visually it's not (https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?
Also if you need the full code I will provide it below.
Full Code
HTML
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div id="div01">
<h1 id="h101">Bradley's Website</h1>
</div>
<div id="div02">
<h3 id="h301">My Band</h3>
<h3 id="h302">My Handlers</h3>
<h3 id="h303">My Ideas</h3>
</div>
<div id="div03">
<div id="div04">
<h2 id="h201">Formal Unknown Cereal Killer</h2>
</div>
<div id="div05">
<p id="p01">Date: 10/05/2016 (Latest Update)
<blockquote>
Summary:
<br/>
<br/>
Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
</blockquote>
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
<div id="div07">
<img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
</div>
</div>
</div>
</body>
CSS
a:link{
color:#1a0000;
border-right:2px solid;
border-left:2px solid;
padding:5;
}
a:visited{
color:#950f0f;
}
a:hover{
color:red;
}
a:focus{
color:#eeeedd;
}
#div01 {
position:fixed;
top:0px;
left:0px;
right:0px;
height:80px;
bottom:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
background-color:#73778c;
color:#950f0f;
text-align:center;
border-top:3px solid #950f0f;
border-bottom:2px solid #950f0f;
padding-top:0;
display:inline-block;
}
#h101{
margin-top:10;
margin-bottom:10;
}
#div02{
position:fixed;
top:85px;
left:0px;
right:0px;
display:inline-block;
background-color:#73778c;
color:#950f0f;
border-bottom:2px solid #950f0f;
text-align:center;
padding-top:5;
padding-bottom:5;
font-family:verdana;
font-size:12px;
}
#h301{
display:inline;
}
#h302{
margin-left :20%;
margin-right:20%;
display:inline;
}
#h303{
display:inline;
}
#div03{
position:fixed;
padding-top:0;
top:114px;
left:0%;
right:0%;
bottom:0%;
background-color:#73778c;
color:#950f0f;
border-bottom:3px solid #950f0f;
}
#div04{
font-size:30;
text-align:center;
margin-top:-30;
}
#h201{
font-family:Times New Roman;
}
#div05{
margin-left:100;
margin-right:100;
margin-bottom:100;
margin-top:-30;
padding-top:10;
padding-bottom:10;
padding-left:30;
padding-right:20;
border:3px solid #950f0f;
background-color:#e0e0d1;
}
#div06{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#div07{
margin-top:3%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid blue;
padding: 35px;
margin: 25;
}
#img02{
width:10%;
}
Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].
Trying using text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
And to make the chrome dev-tools full screen, press the 3 small dots close to the side (menu button), and beside 'Dock side' there is a button to 'pop out'. This will make a new window with which you can resize as much as you need.
My friend told me I should use a table and it worked! Here is the snippet of code:
HTML
<table>
<tr>
<div id="div06">
<th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
<th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
</div>
</tr>
</table>
CSS
#img01
{
width:100px;
height:100px;
vertical-align:middle;
}
span.span01
{
border:3px solid #ffffff;
color:#000000;
font-family:arial;
font-size: 16px;
padding:38.5px;
margin: 25;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
i learned css in w3 school and i just created a page where it's work as what i want , but if i use inspect element / at phone / other device with smaller screen , it's irregular , especially at the text , i don't know where i missed , here is my code :
<!DOCTYPE html>
<html>
<head>
<style>
/* Here You Put Code */
body {
background-image:url("http://1.bp.blogspot.com/-CYQ5F9q6YlE/VIX6zgIg8EI/AAAAAAAAGwU/nkOudSDpI18/s1600/website-background-rough-surface.jpg");
}
div {
margin:30px;
margin-top:20px;
}
.NODDOS {
font-size:60px;
position:absolute;
border:2px solid black;
box-shadow: 10px 10px 5px #888888;
padding:160px;
padding-top:50px;
padding-bottom:50px;
width:65%;
font-weight:bold;
}
.abcdefg {
font-size:30px;
}
.DONOTHACKUS {
position:absolute;
margin:30px;
margin-top:310px;
margin-left:20px;
}
.DONOTHACK {
font-size:20px;
color:black;
background:;
border:3px solid black;
padding:10px;
box-shadow: 4px 4px 5px #888888;
text-decoration:none;
}
#home {
background : #C2DFFF;
}
.DONOTHACK:hover {
position: relative;
top: -1px;
box-shadow: 4px 4px 5px #888888;
}
.DONOTHACK a.hahaha {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:link {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:visited {
text-decoration: none;
color:#000000;
}
.DONOTHACK a.hahaha:active {
color:blue;
}
.maybeimtooshy {
font-size:50px;
font-weight:bold;
}
.butimustkeeptry {
position:absolute;
margin-left:310px;
margin-top:350px;
}
.totalkwithher {
font-size:20px;
}
.alltime {
position:absolute;
margin-top:600px;
border-bottom:5px solid black;
width:94%;
}
.keeptryjustrun {
position:absolute;
margin-top:595px;
margin-left:100px;
font-weight:bold;
font-size:50px;
}
.keeptrynoshy {
font-weight:normal;
font-size:30px;
}
.ihopeshewillloveme {
height:50px;
width:300px;
}
/*-------------------*/
<!-- Mazaya Salma Zhafarina -->
<!-- I Love You -->
</style>
</head>
<body>
<div>
<div class="NODDOS">English Lesson
<p class="abcdefg">Welcome To English Lesson !</p>
</div>
<div class="DONOTHACKUS">
<div class="DONOTHACK" id="home"><a class="hahaha" href="#">Home</a></div>
<div class="DONOTHACK"><a class="hahaha" href="#">Tentang</a></div>
<div class="DONOTHACK"><a class="hahaha" href="#">Kerjakan Soal</a></div>
</div>
<div class="butimustkeeptry">
<div class="maybeimtooshy">
Siapa Kita ?
</div>
<p class="totalkwithher">
Kita adalah anggota SMP 13 Semarang yang membuat website ini untuk melatih kemampuan siswa
<p class="totalkwithher">
dalam berbahasa inggris melalui soal soal yang diberikan
</p>
</div>
</div>
<div class="keeptryjustrun">
Daftar Sekarang !
<p class="keeptrynoshy">Ayo Daftar Sekarang Dan Kerjakan Soal Untuk Menjadi Yang Terbaik !</p>
<button class="ihopeshewillloveme" href="#">Daftar Disini !</button>
</div>
</div>
</body>
</html>
anyone know where im missed ?
-EDIT- fixed some word
There's a lot to do... First of all, you will need to put this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It makes sure mobile devices don't just make your desktop site smaller (i.e. unreadable without zooming).
Next, you'll need "media queries" in your CSS, like:
#media only screen and (max-width: 960px) {
...
[ put CSS rules for screens below 960px width in here ]
...
}
You can use several media queries, for tablets, smartphones in different sizes etc.
This is the essential part - it's a lot of work...
its too lengthy to solve entire code. plz i suggest use bootstrap in your code. For a beginner its a easiest way to learn responsive design.
please refer to this link Bootstrap Getting started page
So, I'm building a website template, more specifically; I'm making a universal CSS spreadsheet, and it's looking pretty good so far. But I ran into a big problem attempting to make a half sized <div> class whereas two would align side by side. Check out my website so far (mind the swags) and notice how when you stretch the browser out far enough, they aren't centered correctly due to their sizes being 45%. I've found that having two .lefthalf and .righthalf classes kinda helps, but more problems are caused than solutions. Also, making the browser too small causes both <div>s to go on top and below each other, but they are still floating left.
Could anyone find a solution where:
1. They don't fall back when the browser is expanded.
2. When the browser is too small to support alignment, they go above and below each other.
I hope I've made myself very clear and please help if you can.
FEEL FREE TO EXPLORE THROUGH Inspect Element ON MY WEBPAGE
for #2 problem this happened because you padding adds up to the size of the div and makes it overflow.
put this inside your .goog2 class.
.goog2{
box-sizing: border-box;
}
for #1 problem try this put this inside your .goog2 class
.goog2{
width:48%;
margin:1%;
}
if you dont want to have margin on each side of div and align each div on the side just make it 0 for each div.
#div1{
margin-left:0;
}
#div2{
margin-right:0;
}
You can use Bootstrap or Foundation for this issue, you don't have to implement those styles while Bootstrap/Foundation have a good grid system for you to use.
By the way, I solved this problem for you in the snippet.
/*--Kairo Jewell--*/
/*-CSS Stylesheet-*/
* {
box-sizing: border-box;
}
a {
font-size:large;
font-family:arial
}
a:link {
color:#0077ff;
background-color:transparent;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:#0077ff;
background-color:transparent;
text-decoration:none;
font-weight:normal;
}
a:hover {
color:red;
background-color:transparent;
text-decoration:underline;
}
a:active {
color:red;
background-color:pink;
text-decoration:underline;
}
body {
background-color:#e0e0e0;
margin:0px;
}
h1 {
font-family:impact;
color:darkgreen;
}
p {
font-family:arial;
font-size:large;
color:green;
margin-top:0px;
margin-bottom:0px;
}
.goog {
background-color:white;
color:#222222;
margin:5px;
padding:10px;
box-shadow:0px 5px 10px #aaaaaa;
clear:both;
}
.goog2 {
padding: 0px 5px;
width:50%;
float:left;
}
.container {
margin:0 auto;
clear:both;
}
.wrap {
position:center;
margin:0px;
width:auto;
height:inherit;
}
.center {
position:center;
margin:0 auto;
}
#header, #footer {
position:fixed;
margin:0 auto;
width:100%;
}
#header {
z-index:99998;
top:0px;
height:50px;
background-color:00aaaa;
}
#footer {
bottom:0px;
z-index:999999;
height:20px;
}
#content {
margin-top:75px;
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
float:top;
width:80%;
}
span.bad {
font-size:120%;
color:red;
}
span.dark {
font-size:120%;
color:darkgreen;
font-weight:bold;
}
.swag-content {
box-shadow:0px 5px 10px #aaaaaa;
background-color:white;
color:#222222;
}
#media screen and (max-width: 768px) {
.goog2 {
width: 100%;
margin-bottom: 5px;
}
}
<div id="content">
<div class="goog">
<p>Swag</p>
</div>
<div class="container">
<div class="goog2">
<div class="swag-content">
<p>Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag</p>
</div>
</div>
<div class="goog2">
<div class="swag-content">
<p>Swag2Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag</p>
</div>
</div>
</div>
<div class="container"></div>
<div class="goog">
<p>Swag
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>Swag</p>
</div>
</div>
Hope it help
When the browser gets too small to support alignment, you could use a media query to change the CSS. Something along the lines of:
.two-col {
width:48%;
float:left;
height:300px;
background:#222;
margin:0 1% 0 1%;
}
#media screen and (max-width: 768px) {
.two-col {
width:100%;
float:none;
margin:0 0 15px 0;
}
}
http://jsfiddle.net/145fbw6k/
I have a website that I thought was OK, but apparently some people have issues with the text, and because of that I may have shot myself in the foot when it comes to showing off my portfolio to employers. The major problem is I'm not seeing what other people are seeing. Or, maybe they are seeing what I'm seeing, but it's just not designed well.
First of all, I would like you to check my website: http://mmking9999.com
After browsing around for a bit, please have a look at my code and tell me where I went wrong. If you have any other suggestions, let me know. Here's the code for the main page:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="http://mmking9999.com/css/style.css" />
</head>
<body>
<!--Site logo. Clicking on it will redirect to this page.-->
<div class="logo">
<img src="http://mmking9999.com/Images/SiteLogo.png" />
</div>
<!-- Menu window goes here. The text are images that link to other pages.-->
<div class="menu">
<img src="http://mmking9999.com/Images/MenuWindow.png" />
</div>
<div class="portfolio_url">
<img src="http://mmking9999.com/Images/portfoliourl.png" />
</div>
<div class="blog_url">
<img src="http://mmking9999.com/Images/blogurl.png" />
</div>
<div class="random_url">
<img src="http://mmking9999.com/Images/randomurl.png" />
</div>
<div class="email">
<img src="http://mmking9999.com/Images/emailicon.png" />
</div>
<div class="linkedin">
<img src="http://mmking9999.com/Images/linkedinicon.png" />
</div>
<div class="twitter">
<img src="http://mmking9999.com/Images/twittericon.png" />
</div>
<div class="window"><br><br><p>Welcome to my website! My name is Mike Murray, a rookie game developer/designer. Here, you'll find stuff about what I do and what I hope to become in the future. I am an avid gamer, and it was that passion that led me to want to create the video games that people like to play. Having played video games for over 20 years, I figure I should be able to create something cool with the knowledge I have!</p></div>
</body>
</html>
And here is the CSS I'm using:
/*The code for the body sets the default settings for all pages */
body
{
background-image:url('http://mmking9999.com/Images/sitewallpaper.png');
}
/* Link colours. I use bright colours to contrast the black window. */
a:link {
COLOR: #86C6FE;
}
a:visited {
COLOR: #FF0000;
}
a:hover {
COLOR: #FFFF00;
}
a:active {
COLOR: #00FF00;
}
/* Main window. Used to display text and images */
img
{
margin: 2px;
height: auto;
width: auto;
float: left;
}
h1
{
color:red;
text-align:center;
font-family:calibri;
}
p
{
/* font */
color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;
text-align:left; width:700px; margin-left:200px;
}
/* Main window. All info is displayed in here */
div.window
{
background-image:url('http://mmking9999.com/Images/IframeWindow.png');
background-repeat:no-repeat;
position:relative;
width:60%;
height:70%;
top:80px;
left:500px;
/*text*/
/*color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;*/
}
/* Menu */
div.menu
{
position:relative;
width:40%;
height:10%;
}
/*Site logo */
div.logo
{
position:relative;
width:40%;
height:5%;
left:500px;
}
/*Images (so they aren't constrained by the attributes defined in div.window)*/
div.image
{
position:absolute;
left:20px;
}
/* In case I need another row of images */
div.image2
{
position:relative;
left:-150px;
width:90%;
height:90%;
}
/*Menu urls*/
div.portfolio_url
{
position:relative;
left:-175px;
top:30px;
}
div.blog_url
{
position:relative;
left:-305px;
top:90px;
}
div.random_url
{
position:relative;
left:-445px;
top:150px;
}
div.email
{
position:relative;
top:250px;
left:-600px;
}
div.linkedin
{
position:relative;
top:250px;
left:-580px;
}
div.twitter
{
position:relative;
top:250px;
left:-560px;
}
/*iframe
{
position:relative;
top:80px;
left:280px;
width:60%; height:70%;
}*/
Thanks for any advice you can provide.
http://d.pr/i/OhIF
Try using position:absolute rather than relative on your divs.