I have a responsive site with a slideshow. I have set the slideshow to be 100% the width of the browser window, and that is working fine. The problem is, the slideshow is shifted a bit to the right, almost as if there is padding to the left of the image. The result is the user having to scroll to the right to see the entire slideshow. I have tried playing around with the attributes of the div and the slideshow itself, but with no luck. Any help with this issue is appreciated. Here is my CSS and HTML code:
CSS
html
{
background-color:#000000;
}
body
{
margin:0auto;
padding:0;
width:100%;
}
#header
{
margin:0auto;
padding-top:0.5%;
text-align:center;
}
#logo
{
margin:0auto;
max-width:186px;
max-height:123px;
padding-top:1%;
padding-bottom:15%;
text-align:center;
}
#banner
{
width:100%;
}
#home_content
{
width:100%;
padding-top:0.25%;
}
#history_content
{
width:100%;
padding-top:0%;
}
#home_slideshow
{
padding-top:1%;
display:flex;
justify-content:center;
}
#home_slideshow
{
padding-top:1%;
display:flex;
justify-content:center;
}
hr
{
border-color:#1BB7F2;
width:100%;
padding:0%;
}
#home_footer
{
width:100%;
margin-top:60%;
}
#history_footer
{
width:100%;
margin-top:155%;
}
.crossfadeHome>figure
{
animation:imageAnimation24slinearinfinite0s;
backface-visibility:hidden;
color:transparent;
opacity:0;
position:absolute;
text-alin:center;
width:100%;
z-index:0;
margin:0auto;
}
.crossfadeHome>figure:nth-child(1)
{
background-image:url('../photos/img_1.jpg');
background-repeat:no-repeat;
}
.crossfadeHome>figure:nth-child(2)
{
animation-delay:6s;
background-image:url('../photos/img_2.jpg');
background-repeat:no-repeat;
}
.crossfadeHome>figure:nth-child(3)
{
animation-delay:12s;
background-image:url('../photos/img_3.jpg');
background-repeat:no-repeat;
}
.crossfadeHome>figure:nth-child(4)
{
animation-delay:18s;
background-image:url('../photos/img_4.jpg');
background-repeat:no-repeat;
}
#keyframesimageAnimation
{
0%
{
animation-timing-function:ease-in;
opacity:0;
}
8%
{
animation-timing-function:ease-out;
opacity:1;
}
17%
{
opacity:1
}
25%
{
opacity:0
}
100%
{
opacity:0
}
}
.crossfadeHistory>figure
{
backface-visibility:hidden;
color:transparent;
opacity:0;
position:absolute;
text-alin:center;
width:100%;
z-index:0;
margin:0auto;
}
.crossfadeHistory>figure:nth-child(1)
{
background-image:url('../photos/history_1.jpg');
background-repeat:no-repeat;
}
.crossfadeHistory>figure:nth-child(2)
{
animation-delay:7s;
background-image:url('../photos/history_2.jpg');
background-repeat:no-repeat;
}
.crossfadeHistory>figure:nth-child(3)
{
animation-delay:14s;
background-image:url('../photos/history_3.jpg');
background-repeat:no-repeat;
}
.crossfadeHistory>figure:nth-child(4)
{
animation-delay:21s;
background-image:url('../photos/history_4.jpg');
background-repeat:no-repeat;
}
#keyframesimageAnimation
{
0%
{
animation-timing-function:ease-in;
opacity:0;
}
8%
{
animation-timing-function:ease-out;
opacity:1;
}
17%
{
opacity:1
}
25%
{
opacity:0
}
100%
{
opacity:0
}
}
HTML
<!DOCTYPEhtml>
<html>
<head></head>
<body id="body">
<!--HeaderSection-->
<div id="logo">
<img class="logo"src="graphics/logo.jpg"style="display:block;margin:0auto;width:100%;height:auto;max-width:225px;max-height:196px;vertical-align:top;"alt=""title="">
</div>
<div id="header">
<p id="contact_info">
<imgsrc="graphics/icon_phone.png"style="width:11px;height:15px;vertical-align:middle;"alt="PhoneIcon"title="Call Us!!">(518)459-9843
</p>
<pid="contact_info">
 
</p>
<p id="contact_info">
<img src="graphics/icon_clock.png"style="width:17px;height:17px;vertical-align:middle;"alt="ClockIcon"title="Our Hours">
</p>
</div>
<div id="banner">
<hr/>
<p id="page_home_header">
</p>
</div>
<div id="page_home_main">
<p id="home_content">
</p>
<p id="page_home_link">
link
<br/>
<br/>
site
</p>
</div>
<div id="home_slideshow"class="crossfadeHome">
<figure>
<img src="photos/img_1.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_2.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_3.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
<figure>
<img src="photos/img_4.jpg"style="width:100%;height:auto;"alt=""/>
</figure>
</div>
<!--FooterSection-->
<footer id="home_footer">
<hr/>
<p id="footer_copyright">©<script>document.write(newDate().getFullYear())</script>mysite</p>
</footer>
</body>
</html>
Make sure you check typos in your code.
Change margin:0auto; to margin:0 auto; and text-alin:center; to text-align:center;.
If you want to know more about margin, click here.
To check errors in your css you can visit CSSLint.
Related
I've got this code as far as I can take it. Original I had two items scrolling. Then I wanted to add a third. However when I added the third item it threw everything off. I believe I'm missing something in the keyframe calculation somewhere. Not sure.
What am I missing? I need to have three items, or four, or five but always have them center no matter what device. They're centering perfectly with two items but not if I add another item.
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
.header-banner .header-promotion {
background-color:#2abad9;
color:#fff;
padding:16px 0;
text-align:center;
font-size:.875rem;
letter-spacing:.0375rem
}
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
#ticker-banner.hd-tickerloop2 .hd-loop-container {
display:flex;
align-items:center;
width:200%;
-webkit-animation:tickerloop2 20s infinite;
animation:tickerloop2 15s infinite;
animation-duration:15s
}
#ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd-tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd-loop-container:focus-within {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused
}
#ticker-banner.hd-tickerloop2 .ticker-item {
width:75%;
}
.ticker-item {
font-size:12px;
line-height:1.4em;
color:#fff;
text-decoration:none
}
#ticker-banner.hd-tickerloop2 .ticker-item {
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0 2em
}
#keyframes tickerloop2 {
0% { transform:translateX(0); flex-direction:row; }
40% { transform:translateX(0); flex-direction:row; }
50% { transform:translateX(-50%); flex-direction:row; }
89.9999% { transform:translateX(-50%); flex-direction:row; }
90% { transform:translateX(-50%); flex-direction:row;}
95% { transform:translateX(0); flex-direction:row-reverse;}
99.9999% { transform:translateX(-50%); flex-direction:row-reverse;}
100% { transform:translateX(0); flex-direction:row;}
}
<div class="header-banner">
<div class="header-promotion">
<div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
<div class="hd-loop-container">
<div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
<div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
<div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
.header-banner .header-promotion {
background-color:#2abad9;
color:#fff;
padding:16px 0;
text-align:center;
font-size:.875rem;
letter-spacing:.0375rem
}
#ticker-banner.hd-tickerloop {
overflow:hidden;
width:100%
}
#ticker-banner.hd-tickerloop2 .hd-loop-container {
display:flex;
align-items:center;
width:300%;
-webkit-animation:tickerloop2 20s infinite;
animation:tickerloop2 15s infinite;
animation-duration:15s
}
#ticker-banner.hd-tickerloop2 .hd-loop-container:hover,#ticker-banner.hd-
tickerloop2 .hd-loop-container:active,#ticker-banner.hd-tickerloop2 .hd-
loop-
container:focus-within {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused
}
#ticker-banner.hd-tickerloop2 {
width:75%;
margin-right:5%;
}
.ticker-item {
font-size:12px;
line-height:1.4em;
color:#fff;
text-decoration:none
}
.ticker-item{
width:100%;
}
#ticker-banner.hd-tickerloop2 .ticker-item {
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0 2em
}
#keyframes tickerloop2 {
0% { transform:translateX(5%); flex-direction:row;}
40% { transform:translateX(5%); flex-direction:row; }
45% { transform:translateX(-30%); flex-direction:row; }
60% { transform:translateX(-30%); flex-direction:row; }
70% { transform:translateX(-63%); flex-direction:row;}
100% { transform:translateX(-63%); flex-direction:row;}
}
</style>
</head>
<body>
<div class="header-banner">
<div class="header-promotion">
<div id="ticker-banner" class="hd-tickerloop hd-tickerloop2">
<div class="hd-loop-container">
<div id="ticker-item1" class="ticker-item" tabindex="0">Do You Want To Save 10%? Click Here To Subscribe + Save</div>
<div id="ticker-item2" class="ticker-item" tabindex="0">Receive Free Shipping On All U.S. Orders of $65 Or More</div>
<div id="ticker-item3" class="ticker-item" tabindex="0">Clean Beauty. Because Girl, You're Too Pretty To Posion™</div>
</div>
</div>
</div>
</div>
</body>
</html>
try runing hole code
I am trying to teach myself to use the Skrollr plugin properly, I am mainly interested in the classic example listed in the documentation. (http://prinzhorn.github.io/skrollr/examples/classic.html).
My problem is that my footer doesn't appear at the bottom of the page, instead it appears below the first image in my Skrollr gallery. I want to keep the footer separate from #skrollr-body as this gallery would only appears on a specific page.
This is my code, it's essentially a slightly simplified version of the example.
html:
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#dragons + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(/assets/img/rocks.jpg)"
data-anchor-target="#dragons + .gap"
data-bottom-top="transform: translate3d(0px, -50%, 0px);"
data-top-bottom="transform: translate3d(0px, 50%, 0px);">
</div>
</div>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#bacons + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(/assets/img/tiles.jpg)"
data-anchor-target="#bacons + .gap"
data-bottom-top="transform: translate3d(0px, -50%, 0px);"
data-top-bottom="transform: translate3d(0px, 50%, 0px);">
</div>
</div>
<div
class="parallax-image-wrapper parallax-image-wrapper-100"
data-anchor-target="#kittens + .gap"
data-bottom-top="transform:translate3d(0px, 200%, 0px)"
data-top-bottom="transform:translate3d(0px, 0%, 0px)">
<div
class="parallax-image parallax-image-100"
style="background-image:url(/assets/img/sky.jpg)"
data-anchor-target="#kittens + .gap"
data-bottom-top="transform: translate3d(0px, -50%, 0px);"
data-top-bottom="transform: translate3d(0px, 50%, 0px);">
</div>
</div>
<div id="skrollr-body">
<div id="dragons"></div>
<div class="gap gap-100"></div>
<div id="bacons"></div>
<div class="gap gap-100"></div>
<div id="kittens"></div>
<div class="gap gap-100"></div>
</div>
<div id="footer">
some footer stuff
</div>
and css:
* {
padding:0;
margin:0;
}
html, body {
height:100%;
}
#content {
height:100%;
position: relative;
}
.skrollr-desktop body {
height:100% !important;
}
.parallax-image-wrapper {
position:fixed;
left:0;
width:100%;
overflow:hidden;
}
.parallax-image-wrapper-50 {
height:50%;
top:-50%;
}
.parallax-image-wrapper-100 {
height:100%;
top:-100%;
}
.parallax-image {
display:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.parallax-image-50 {
height:200%;
top:-50%;
}
.parallax-image-100 {
height:100%;
top:0;
}
.parallax-image.skrollable-between {
display:block;
}
.no-skrollr .parallax-image-wrapper {
display:none !important;
}
#skrollr-body {
height:100%;
overflow:visible;
position:relative;
}
.gap {
background:transparent center no-repeat;
background-size:cover;
}
.skrollr .gap {
background:transparent !important;
}
.gap-50 {
height:50%;
}
.gap-100 {
height:100%;
}
#footer {
clear: both;
height: 100px;
background-color: red;
}
Put the footer element inside #skrollr-body. To make everything work on desktop/mobile, the only body content that will reside outside of #skrollr-body are your fixed position controls and attributes for the parallax-image-wrapper & parallax-image sets.
If you require additional "fixed" positioned elements in your layout, you'll need to list those outside #skrollr-body setting a data-anchor-target attribute for the div, and then call that target #id you created down in the #skrollr-body wherever you need it to display.
Like how they do with #dragons, #bacons, & #kittens targets in the classic example docs.
I just hit sth that appears to be a bug or at least a really weird feature of CSS/HTML.
Now, the problem is that i got three divs in a row, all inside a parent div.
The first and the second one are supposed to be text containers in a chat-like matter. The last one is supposed to be excluded and be a paging navigation.
On the very first page, that works fine. On every other page, the last text container div expands over the navigation. When using the Chrome developer tools, it shows me that the second div is only having its real size, while the background still expands over the navigation. But if i delete the navigation, the second text container resizes to its real size.
Also, when using
position:absolute;
it doesn't expand. Setting the position to relative explicitly didn't fix the problem and setting the background-color to sth else didn't change the white background.
I made you a quick demonstration under jsfiddle.net.
So the final question is: Why does the second text div expand? Or doesn't it but it looks like it does?
//edit: As suggested in the comments, here is the raw CSS/HTML outside jsfiddle. I still don't think that's a good idea, but if you say so..
<div class="decoded_chat" pagenr="1" style="display: block;">
<div class="decoded_user decoded_user_first" isme="0">
<a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">
<img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">
<div class="decoded_user_name">
Zuckerberg
</div>
</a>
<div class="decoded_msg_date">
02.02.2014, 01:36 Uhr
</div>
<div class="decoded_msg">
I will listen to the songs when I'm not so tired
</div>
<div class="decoded_msg">
I don't know.. Possibly
</div>
<div class="decoded_user decoded_user_last" isme="0">
<a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">
<img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">
<div class="decoded_user_name">
Zuckerberg
</div>
</a>
<div class="decoded_msg_date">
02.02.2014, 01:33 Uhr
</div>
<div class="decoded_msg">
I've been ill all week.. Just haven't had time for much
</div>
<div class="decoded_chat_pager">
<a href="javascript:void(0);" pagenr="0" class="cloudview_msg_prev">
« Vorherige Seite
</a>
<a href="javascript:void(0);" pagenr="2" class="cloudview_msg_next">
Nächste Seite »
</a>
</div>
</div>
a {
text-decoration: none;
color: white;
}
.chat_list {
width:100%;
}
.decoded_chat {
text-align:left;
width:100%;
margin:auto;
background-color:white;
color:black;
border-radius:10px;
}
.cloudview_msg_next {
float:right;
}
.decoded_chat_pager {
margin:auto;
margin-top:5px;
text-align:left;
width:95%;
}
.decoded_msg {
margin-bottom:3px;
}
.decoded_user {
padding:15px 10px;
min-height:50px;
}
.decoded_user_last {
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.decoded_user_first {
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.decoded_user_name {
color:black;
margin-bottom:5px;
}
.mychatmessage {
background-color:#BFF2BF;
}
.decoded_msg_date {
float:right;
color:grey;
margin-top:-30px;
}
.decoded_user_avatar {
position:absolute;
}
.decoded_user_name {
font-weight:bold;
}
.decoded_user_name, .decoded_msg {
margin-left:64px;
}
table {
text-align:center;
}
.flipped-180 {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter:"FlipH";
}
#detailopener, #return_to_msg, #return_to_cloud, #cloudview_delete {
display:none;
}
.chat_list_names {
color:grey;
}
.invi {
position:fixed;
width:1px;
height:1px;
top:-2000px;
left:-2000px;
}
.next_page_chat_list {
text-align:right;
padding-right:5px;
}
.last_page_chat_list {
padding-left:5px;
text-align:left;
}
.loadingtext {
margin-top:7px;
}
#opener {
position:fixed;
left:25px;
bottom:25px;
cursor:pointer;
display:none;
}
.dontdroponme {
opacity:0.3;
}
#dropper {
position:fixed;
right:25px;
bottom:25px;
cursor:pointer;
display:none;
}
.dropinfo {
border-radius:7px;
color:white;
padding:5px 25px;
}
.dorpinfo img {
width:48px;
}
.chatlist_button img, .decoded_user_avatar {
box-shadow:0 0 5px #888;
border-radius:5px;
}
.chatlist_button {
background-color:white;
border-radius:5px;
box-shadow:0 0 5px #888;
padding:5px;
cursor:move;
max-width:200px;
margin:auto;
}
.ui-draggable-dragging {
position:absolute;
z-index:5;
}
body {
height:100%;
margin:0;
background-color:#3B5998;
color:white;
font-size:12px;
font-family:Calibri;
}
#innerbody {
margin:auto;
width:55%;
text-align:center;
}
#innerbody_floater {
height:50%;
width:100%;
margin:0;
}
Copy from http://www.w3schools.com/css/css_positioning.asp
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html:
Hey guy's I've been trying out something different with my CSS backgrounds in order to make a header line. I want to have it set up so the line is made up of 5 equally sized portions with each portion being a different color. Here is an example
I have the code set up but I can't get the background to show up properly I have my code down below. Any help would be appreciated, thanks!
HTML:
<div id="div-line">
<div class="blockOne"></div>
<div class="blockTwo"></div>
<div class="blockThree"></div>
<div class="blockFour"></div>
<div class="blockFive"></div>
</div>
CSS:
#div-line {
width:100%;
height:5px;
}
.blockOne {
width:20%;
background-image:url(../images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(../images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(../images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(../images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(../images/BlueBlock.png);
background-repeat:repeat-x;
}
You need to float the DIV elements and add height.
Working DEMO
Added a generic CSS class block in HTML:
<div id="div-line">
<div class="block blockOne"></div>
<div class="block blockTwo"></div>
<div class="block blockThree"></div>
<div class="block blockFour"></div>
<div class="block blockFive"></div>
</div>
and tweaked CSS:
#div-line {
width:100%;
height:5px;
}
.block {
height:100%;
float:left;
width:20%;
}
.blockOne {
background-color:red;
}
.blockTwo {
background-color:black;
}
.blockThree {
background-color:red;
}
.blockFour {
background-color:black;
}
.blockFive {
background-color:red;
}
You could achieve this by using background for color. And the reason why your divs are not showing up is because you need to give them a height and also you need to float them to the left.
#div-line div {
float:left;
}
#div-line {
width:100%;
height:5px;
}
.blockOne {
width:20%;
height:100%;
background:#00FFFF;
}
.blockTwo {
width:20%;
height:100%;
background:#FFA500;
}
.blockThree {
width:20%;
height:100%;
background:#00FFFF;
}
.blockFour {
width:20%;
height:100%;
background:#FFA500;
}
.blockFive {
width:20%;
height:100%;
background:#00FFFF;
}
Working sample here.
Why do you want to use background images where you can use background-color ?
You can offload the server atleast if you use background color.
.blockN {
width: 20%;
background-color: #0094ff; // or your color
}
Do something like this
.blockOne {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(images/BlueBlock.png);
background-repeat:repeat-x;
}
OR
.blockOne {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockTwo {
width:20%;
background-image:url(./images/blueBlock.png);
background-repeat:repeat-x;
}
.blockThree {
width:20%;
background-image:url(./images/darkOrangeBlock.png);
background-repeat:repeat-x;
}
.blockFour {
width:20%;
background-image:url(./images/orangeBlock.png);
background-repeat:repeat-x;
}
.blockFive {
width:20%;
background-image:url(./images/BlueBlock.png);
background-repeat:repeat-x;
}
The thing you are trying to do ie, background-image:url(images/orangeBlock.png) is used in linux.
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.