Member Avatar for kevindougans

Hi guys,

I'm at my wits end.

What am I doing wrong with the "position: xxx" stuff thats making this page have the center containter aligned to the left?

If I remove left: 0 and right: 0 it makes the main container disappear (which i assume is away miles away to the left or right).

Thanks guys,

Kev

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>the shop ibiza</title> 
 
 
 
<style type="text/css"> 
<!--
 
 
/* the bit that does the work */
 
body {
  margin:0;
  border:0;
  padding:0;
  height:100%;
  max-height:100%;
  background:#fff;
  font-family:arial, verdana, sans-serif;
  font-size:76%;
  overflow: hidden;
  }
 
/* for internet explorer */
* html body {
  padding:120px 0 50px 0;
  }
 
 
 
#container {
  font-family:"times new roman", serif;
  font-size: 1.2em;
  position:fixed;
  left:0;
  top:60px;
  bottom:60px;
  right:0;
  overflow:auto;
  background:#fff;
  padding:10px;
  text-align:center;
  margin: 0 auto;
  }
 
* html #container {
  height:100%;
  width:100%;
  }
 
#header_container {
  position:absolute;
  top:0;
  width:100%;
  height:60px;
  overflow:visible;
  background:#fff;
  border-bottom:0px solid #fff;
    z-index:100;
  }
* html #header {height:120px;}
 
 
#footer {
  position:absolute;
  bottom:0;
  width:1000px;
  height:35px;
  overflow:auto;
  text-align:right;
  background:#ec1919;
  border-top:1px solid #000;
  }
* html #footer {height:50px;}
 
/* end of bit that does the work */
 
 
 
 
#content_container {
	position:absolute;
	left:0px;
	top:30px;
	width:1000px;
	height:330px;
    padding-bottom:17px;
	z-index:2;
}
 
#logo {
	position:absolute;
	left:0px;
	top:12px;
	width:254px;
	height:58px;
	z-index:4;
}
#navigation {
	position:absolute;
	left:255px;
	top:40px;
	width:547px;
	height:26px;
	z-index:5;
}
#language_bar {
	position:absolute;
	left:0px;
	top:10px;
	width:1000px;
	height:12px;
	z-index:6;
}
#content {
	position:absolute;
	left:-1px;
	top:3px;
	width:1000px;
	height:330px;
    padding-bottom:17px;
	z-index:7;
}
#blurb {
	position:absolute;
	left: 40px;
	top: 340px;
	width:600px;
	height:170px;
	z-index:8;
	font: normal small "Lucida Grande", Lucida, Verdana, sans-serif;
	word-spacing: 1px;
	text-align: justify;
}
#caption {
	position:absolute;
	left:675px;
	top:350px;
	width:400px;
	height:98px;
	z-index:9;
}
 
 
#nav{
	position:absolute;
	left:338px;
	top:48px;
	width:473px;
	height:16px;
	z-index:200;
	background:white;
}
#nav ul,
#nav ul li {
margin:0;
padding:0;
list-style:none;
z-index: 200;
}
#nav ul li{
float:left;
display:block;
z-index: 200;
}
 
#nav ul li a:link,
#nav ul li a:visited{
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 10px 0 3px;
display:block;
z-index: 200;
}
#nav ul li a:hover{
color:#EBEFF7;
z-index: 200;
}
#nav ul li ul li{
float:none;
display:block;
z-index: 200;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
z-index: 200;
}
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
z-index: 200;
}
 
.submenu {
position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 200;
}
 
img {
   border:0px;
}
 
 
.news_container{
    width:200px;
    height: 100px;
    border-width: .1em;
    border-style: dotted;
    border-color: #900;
}
.news_title {
    position:relative;
    left: 50px;
    width: 50px;
    background: #ec1919;
}
 
.news_body {
    position:relative;
    left: 100px;
    top: 0px;
 
}
 
.news_image {
    position:relative;
    left: 0px;
    float:left;
    top:0px;
    width:50px;
}
 
 
body
{
	text-align: center;
}
 
div#everything
{
	margin: 0px auto;
	text-align: left;
    width: 1000px;
}
 
 
-->
</style> 
 
    <link rel="stylesheet" type="text/css" href="/css/style.css"/> 
    <link rel="stylesheet" type="text/css" href="/css/ticker-style.css"/> 
 
    <link rel="stylesheet" type="text/css" href="/galleryview/galleryview.css"/> 
 
 
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
 
<script type="text/javascript"> 
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
$(this).css('zIndex', 200);
});
 
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
 
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();
});
};
 
$(document).ready(function() {
nav();
});
</script> 
 
<script type="text/javascript" src="/js/script.js"></script> 
<script type="text/javascript" src="/js/jquery.ticker.js"></script> 
 
<script type="text/javascript" src="/galleryview/jquery.galleryview-2.1.1-pack.js"></script> 
<script type="text/javascript" src="/galleryview/jquery.timers-1.2.js"></script> 
 
<script type="text/javascript" src="/galleryview/src/galleria.js"></script> 
 
 
</head> 
 
<body> 
<div id="everything"> 
<div id="header_container"> 
	<div id="logo"><img src="/assets/header.png" width="1000" height="57" alt="logo" /></div> 
  <div id="nav"> 
<ul> 
            <li><a href="/"><img src="/assets/btn_about.png" alt="about" /></a> 
            </li> 
            <li><a href="#"><img src="/assets/btn_services.png" /></a> 
                <ul class="submenu"> 
                <li><a href="/en/services/events">Event Management</a></li> 
                <li><a href="/en/services/incentives">Incentives & Conference</a></li> 
                <li><a href="/en/services/product_placement">Product Placement</a></li> 
                <li><a href="/en/services/marketing">Marketing & on island promotions</a></li> 
                <li><a href="/en/services/photo_shoots">Photo shoot & production</a></li> 
                <li><a href="/en/services/weddings">Bespoke wedding design</a></li> 
                <li><a href="/en/services/private_parties">Private parties</a></li> 
                <li><a href="/en/services/boat_charter">Boat & Air Charter</a></li> 
                <li><a href="/en/services/money_cant_buy">Money can't buy</a></li> 
 
                </ul> 
            </li> 
            <li><a href="/en/news"><img src="/assets/btn_news.png" alt="" /></a> 
            </li> 
            <li><a href="/en/clients"><img src="/assets/btn_clients.png" /></a> 
            </li> 
            <li><a href="#"><img src="/assets/btn_gallery.png" /></a> 
                <ul class="submenu"> 
                <li><a href="#">Coming Soon</a></li> 
                </ul> 
            </li> 
            <li><a href="#"><img src="/assets/btn_your_photos.png" /></a> 
                <ul class="submenu"> 
                <li><a href="#">Coming Soon</a></li> 
                </ul> 
            </li> 
            <li><a href="/en/contact"><img src="/assets/btn_contact.png" /></a> 
            </li> 
    </ul> 
    </div> 
</div> 
 
<div id="container"> 
 
 
<div id="language_bar"> 
  <div align="right"><img src="/assets/language_bar.png" width="92" height="10" alt="languages" /></div> 
</div> 
 
<div id="content_container"><div id="myGallery"> 
<img src="/images/about/image-1.jpg" class="active" height="325" width="1000" alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-2.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-3.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-4.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-5.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-6.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-7.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-8.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-9.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
</div> 
 
 
<div id="blurb"> 
The Shop is Ibiza's most established and best loved award winning marketing and special events agency.
During our 10 years on the island our reputation has grown as one of professionalism and dedication.
Our expert, all year round team is at your disposal.
Our aim is simple, offer the best service possible to our corporate and private clients.
We may be Ibiza's biggest service agency but we remain compact and personally dedicated to treating
    every project as if it was our own.
 
 
</div> 
<div id="caption"> 
<div align="center"><img src="/assets/tagline.png" alt="tagline" width="213" height="75" /></div> 
</div> 
 
 
</div> 
 
<div class="clear"></div> 
 
</div> 
 
<div id="footer"> 
<div id="ticker-wrapper" class="no-js"> 
	<ul id="js-news" class="js-hidden"> 
		<li class="news-item"><a href="#">DJs (and set times) to be announced soon for 2011 Internation Music Summit.</a></li> 
		<li class="news-item"><a href="#">Guest list for our events must be sorted 72 hours before doors open.</a></li> 
		<li class="news-item"><a href="#">We would like to wish everyone a "Happy New Year".</a></li> 
		<li class="news-item"><a href="#">Lots of new clients coming soon, watch this space...</a></li> 
	</ul> 
</div> 
</div> 
 
<script type="text/javascript"> 
	$(function () {
		$('#js-news').ticker();
	});
</script> 
 
 
</div> 
 
</body> 
</html>
  • 3 Contributors
  • 3 Replies
  • 224 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by kevindougans
Member Avatar for drjohn

you're using position:fixed and position:absolute

That usually causes lots of problems.

Position:fixed says place it exactly here in the browser, no matter what the user does about scrolling, at these points relative to the corners of the viewport.

I'd suggest scrapping this design which is seriously doomed to failure and will be the source of lots of head banging against walls.

Make a new design.
Use a #wrapper div and give it a width, and style it margin:auto; - now it is centered.
Put your other divs inside it, give each of them a width and float them to the left or to the right. OR set margin:auto on them to center them. Use position:relative.

Member Avatar for shaya4207

+1 for all that drjohn said...

Member Avatar for kevindougans

alright. start again it is. anyone got any ideas on techniques to use for making a website thats basically a header, a widescreen styled filmstrip of images, and a footer... i.e. how to resize for bigger and smaller monitors?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.