I'm new to web design and am making a static site. Looking to make one with a solid background image which stays in place when the user scrolls (implemented already minus scrolling) and then include some portfolios and slideshows in it (it's based on a photography design).
I have some jquery in place to hold a large background image no matter the user. Also some jquery for a slideshow which is not yet implemented.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="scripts/fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="scripts/fancybox/source/jquery.fancybox.pack.js"></script>
<title>Untitled Document</title>
AND
$(document).ready(function() {
$(".fancybox").fancybox();
});
If I haven't given enough info just ask and I can tell you whatever you need!
Edit: Full code of the page -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="scripts/fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="scripts/fancybox/source/jquery.fancybox.pack.js"></script>
<title>Untitled Document</title>
<style type="text/css">
#fsbg {
height: auto;
width: 100%;
position: fixed;
z-index: -100;
left: 0px;
top: 0px;
min-height: 100%;
min-width: 1000px;
}
</style>
<style>
#navigation li {
font: 34px Ostrich "Ostrich Sans";
display: inline;
list-style: none;
text-shadow: inherit;
}
#navigation a {
padding: 25px 35px;
background-color:;
color: #FFF;
text-decoration: none;
text-shadow: inherit;
}
#navigation a:hover {
background-color: #FFF;
color: #CCC;
}
#maintext {
font-family: "Ostrich Sans", "Ostrich Sans Rounded";
font-size: 100px;
color: #000;
background-color: #FFF;
height: 900px;
width: 700px;
position: fixed;
left: 25%;
top: 20%;
text-shadow: inherit;
}
</style>
</head>
<body topmargin="60">
<nav>
<div id="navigation">
<div id="maintext">
<p>Gallery</p>
<p><img src="images/alaska.jpg" width="700" height="462" alt="alaska" /></p>
</div>
<div id="main_body">
<h5> </h5>
</div>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">photography</a></li>
<li><a href="#">media</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">contact me</a></li>
</ul>
</div>
<img src="images/1920x1080.jpg" name="fsbg" width="1920" height="1281" id="fsbg" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</nav>
</body>
</html>
First, you can't have
position:fixedbecause that destroys scrolling. Second, use auto margins on the left and right to center it.EDIT: two more things:
1) take out these two lines affecting
#maintext:2) in response to your comment
Look up the difference between different types of positioning. Here's something I found really quick: http://www.yorku.ca/nmw/facs1939f13/week02/css_relVSabsVSfixed.html I don't want to give you the answer to only this situation, since that wouldn't be constructive, but I will get you started:
When you have fixed, it doesn't affect the rest of the page. When you have static positioning, like my answer above told you to do, it affects the flow. So since the
#maintextpart came first, it will appear first. I hope you know what to do!