PDA

View Full Version : absolute positioning and ccs centre!!


rangersjedi
06-26-2008, 11:29 AM
Hi,

I am building a website about star wars figures and i need some advise
again! lol

First of i have 2 elements on the page a spry menu and a swf slideshow.

I would like the spry menu to be always on the left and the slideshow
centred to suit which ever resolution the user has!!

Its ok when viewed at 1024 x 768 but when i go to my laptop there

is a big space on the right hand side because i had to set the margin

on the left hand side for the swf div to 180 to avoid overlapping the spry

menu!! Confused how do you think i feel lol

But i dont want the slideshow to overlap the spry menu if the window
is resized!!

Both the swf and menu divs are set to absolute.

How would i achieve this?

Also what resolution is the most common for people veiwing websites!

I have looked around and they say that 1024 x 768 is most common

what do you experts think?

Any advise would be great.

http://www.leahstoys.co.uk/power%20of%20the%20force%20figures/warok/index.html



Cheers

Paul

Rob_Che
06-26-2008, 12:13 PM
Hey Rangersjedi

I would say your content (menu + main content div) to be no more than say, 7890px...

Then you need to get Wrapping ! (http://www.dreamweaverclub.com/css-center-content.php)

Rob

Corrosive
06-26-2008, 12:17 PM
Hey Rangersjedi

I would say your content (menu + main content div) to be no more than say, 7890px...

Then you need to get Wrapping ! (http://www.dreamweaverclub.com/css-center-content.php)

Rob

I hope that's a typo Rob! Should be 789px (knock the '0' off the end :wink: ) or that's a BIG webpage.

Ricky55
06-26-2008, 12:30 PM
Looking good mate, you've done a lot since I last had a look.

Why don't you just centre the whole site rather than just the Flash content?

rangersjedi
06-26-2008, 12:43 PM
Looking good mate, you've done a lot since I last had a look.

Why don't you just centre the whole site rather than just the Flash content?

Hi Ricky,

How would i do that? Would that mean the menu would be centred?

Oh im a proud dad again! :-D



Cheers

Paul

Corrosive
06-26-2008, 12:51 PM
Hi Ricky,

How would i do that? Would that mean the menu would be centred?

Oh im a proud dad again! :-D



Cheers

Paul

Congratulations! :mrgreen:

Look at the tutorial link in Rob Che's post for a tutorial on how to centre content. You need to get 'wrapping' as he said.

rangersjedi
06-26-2008, 02:19 PM
Congratulations! :mrgreen:

Look at the tutorial link in Rob Che's post for a tutorial on how to centre content. You need to get 'wrapping' as he said.

Hi,

I did that and hears what i got! I set the wrapper/container to 10% left and

right.

Now the menu is on top of the swf!!

The swf is around 800 px by itself will i need to reduce the size of the swf?

I told you i would be back lol


http://www.leahstoys.co.uk/power%20of%20the%20force%20figures/warok/index.html


Cheers

Paul

Corrosive
06-26-2008, 02:36 PM
Yes, I see what you mean. Could you post the code at all?? I'd also make the left and right margins 'auto' rather than 10%.

rangersjedi
06-26-2008, 02:43 PM
Yes, I see what you mean. Could you post the code at all?? I'd also make the left and right margins 'auto' rather than 10%.

Hi,

Thanks for replying i changed it to auto and it moves the 2 along to the left

and they are no longer centred!!

Heres the code

<!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>A Wing Pilot</title>
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<style type="text/css">
<!--
body {
background-color: #F4E8DA;
}
-->
</style>
<link href="../../css/pagelayout.css" rel="stylesheet" type="text/css" />

<link href="../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
a:link {
text-decoration: none;
color: #F6E5D1;
}
a:visited {
text-decoration: none;
color: #F6E5D1;
}
a:hover {
text-decoration: none;
color: #F6E5D1;
}
a:active {
text-decoration: none;
color: #F6E5D1;
}
-->
</style>
</head>

<body>
<div id="contain">
<div id="mb"><a href="../../star wars figures/index.html"></map></a>
</div>



<div id="swf">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','845','heigh t','550','src','a wing slideshow','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgco lor','#F6E5D1','wmode','transparent','movie','a wing slideshow' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="845" height="550">
<param name="movie" value="a wing slideshow.swf" />
<param name="quality" value="high" />
<param name="BGCOLOR" value="#F6E5D1" />
<param name="wmode" value="transparent" />
<embed src="a wing slideshow.swf" width="845" height="550" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#F6E5D1" wmode="transparent"></embed>
</object>
</noscript>
</div>

<div id="menu">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Luke Stormtrooper </a> </li>

<li><a href="../romba/index.html">Romba</a></li>
<li><a href="../warok/index.html">Warok</a></li>
<li><a href="../paploo/index.html">Paploo</a></li>
<li><a href="#">Lumat</a></li>
<li><a href="../barada/index.html">Barada</a> </li>
<li><a href="../han carbonite/index.html">Han Solo Carbonite</a></li>
<li><a href="../amananam/index.html">Amanaman</a></li>
<li><a href="../yak/index.html">Yak Face</a></li>
<li><a href="../ev-9d9/index.html">EV-9D9</a></li>
<li><a href="index.html">A Wing Pilot</a></li>
<li><a href="../lando/index.html">Lando Calrissian General</a></li>
<li><a href="../gunner/index.html">Imperial Gunner</a></li>
<li><a href="../dignitary/index.html">Imperial Dignitary</a></li>
<li><a href="#">Luke Endor</a></li>
<li><a href="../anakin/index.html">Anakin Skywalker</a></li>
<li><a href="#">R2-D2 Pop Up Sabre</a></li>
</ul>
</div>
</div>





<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>


Thanks Again for helping me:-D

Cheers

Paul

Corrosive
06-26-2008, 03:20 PM
Hi,

Thanks for replying i changed it to auto and it moves the 2 along to the left

and they are no longer centred!!

Heres the code

<!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>A Wing Pilot</title>
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<style type="text/css">
<!--
body {
background-color: #F4E8DA;
}
-->
</style>
<link href="../../css/pagelayout.css" rel="stylesheet" type="text/css" />

<link href="../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
a:link {
text-decoration: none;
color: #F6E5D1;
}
a:visited {
text-decoration: none;
color: #F6E5D1;
}
a:hover {
text-decoration: none;
color: #F6E5D1;
}
a:active {
text-decoration: none;
color: #F6E5D1;
}
-->
</style>
</head>

<body>
<div id="contain">
<div id="mb"><a href="../../star wars figures/index.html"></map></a>
</div>



<div id="swf">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','845','heigh t','550','src','a wing slideshow','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgco lor','#F6E5D1','wmode','transparent','movie','a wing slideshow' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="845" height="550">
<param name="movie" value="a wing slideshow.swf" />
<param name="quality" value="high" />
<param name="BGCOLOR" value="#F6E5D1" />
<param name="wmode" value="transparent" />
<embed src="a wing slideshow.swf" width="845" height="550" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" bgcolor="#F6E5D1" wmode="transparent"></embed>
</object>
</noscript>
</div>

<div id="menu">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Luke Stormtrooper </a> </li>

<li><a href="../romba/index.html">Romba</a></li>
<li><a href="../warok/index.html">Warok</a></li>
<li><a href="../paploo/index.html">Paploo</a></li>
<li><a href="#">Lumat</a></li>
<li><a href="../barada/index.html">Barada</a> </li>
<li><a href="../han carbonite/index.html">Han Solo Carbonite</a></li>
<li><a href="../amananam/index.html">Amanaman</a></li>
<li><a href="../yak/index.html">Yak Face</a></li>
<li><a href="../ev-9d9/index.html">EV-9D9</a></li>
<li><a href="index.html">A Wing Pilot</a></li>
<li><a href="../lando/index.html">Lando Calrissian General</a></li>
<li><a href="../gunner/index.html">Imperial Gunner</a></li>
<li><a href="../dignitary/index.html">Imperial Dignitary</a></li>
<li><a href="#">Luke Endor</a></li>
<li><a href="../anakin/index.html">Anakin Skywalker</a></li>
<li><a href="#">R2-D2 Pop Up Sabre</a></li>
</ul>
</div>
</div>





<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>


Thanks Again for helping me:-D

Cheers

Paul

Have you tried relative positioning for the elements? This means making them 'relative' to the edge of your container and not absolutely positioned on the page.

This might also be a pain in the arse but, once I have my design finalised, I start again and rebuild it from scratch. This means that everything is as clean as it can be and it's easier to spot problems. looking at your layout I'd start with a big wrapper/container div, the size of the site and then place relative positioned divs inside to hold the elements of the site.

rangersjedi
06-26-2008, 03:31 PM
Have you tried relative positioning for the elements? This means making them 'relative' to the edge of your container and not absolutely positioned on the page.

This might also be a pain in the arse but, once I have my design finalised, I start again and rebuild it from scratch. This means that everything is as clean as it can be and it's easier to spot problems. looking at your layout I'd start with a big wrapper/container div, the size of the site and then place relative positioned divs inside to hold the elements of the site.

Hi Mate,

Thanks again for the help i shall try it again starting from scratch

and see what happens.

What would changing the positioning from absolute to relative

buy me?

Cheers

Paul

Corrosive
06-26-2008, 05:11 PM
I'm sure Domedia or DJ could explain it better than me. It just seems to be more 'browser proof' and the elements will remain where you put them. You could also consider using % positioning rather than px if you are feeling brave?

domedia
06-26-2008, 05:26 PM
Both are good.. it's just a matter of preference.. there's so many ways you can achieve a layout with CSS. When I started using CSS I used relative positioning exclusively.. not I tend to mix them more. The more important thing is that you know what they both are and how to use them

Corrosive
06-26-2008, 05:50 PM
Both are good.. it's just a matter of preference.. there's so many ways you can achieve a layout with CSS. When I started using CSS I used relative positioning exclusively.. not I tend to mix them more. The more important thing is that you know what they both are and how to use them

Thanks Dom. I think I've settled on using relative divs for the 'concrete' bits of my page design (header, navbar, columns, footer etc.) and then layers for stuff like photos etc. but sometimes I change my mind! Sorry that's really confusing but as Dom says, it's whatever works in multiple browsers. :confused:

rangersjedi
06-26-2008, 07:02 PM
Thanks Dom. I think I've settled on using relative divs for the 'concrete' bits of my page design (header, navbar, columns, footer etc.) and then layers for stuff like photos etc. but sometimes I change my mind! Sorry that's really confusing but as Dom says, it's whatever works in multiple browsers. :confused:

Thanks for the help guys i have just went for absolute!!:wink:

No doubt i will be back with more questions soon!! lol

Thanks again for taking the time to help me8-)

Ricky55
06-27-2008, 10:01 AM
I bet you're starting to wonder if it would have been easier to do the whole thing in Flash.

Are you OK with this now or do you still need help?

Good to hear that you are a Dad!

Rob_Che
06-27-2008, 03:17 PM
Congrats on the new-born !

Keep posting though, don't be shy about asking silly questions, I'm not !

rangersjedi
06-27-2008, 05:30 PM
I bet you're starting to wonder if it would have been easier to do the whole thing in Flash.

Are you OK with this now or do you still need help?

Good to hear that you are a Dad!

Cheers Richard,

Yes im sorted now.

Cheers

Paul

rangersjedi
06-27-2008, 05:31 PM
Congrats on the new-born !

Keep posting though, don't be shy about asking silly questions, I'm not !

If you see me past posts you will see im not!! lol :lol: