positioning with CSS

Craigj1303 · #1 (**permalink**) Apr 22nd, 2007, 10:27

Hi Guys

I am just starting my first web site for my dads artwork. i'm working on the Home Page and I want to do it in the correct manner by using CSS for layout.

So far I have a banner, a navbar and a flash element underneath. The banner and navbar are centre aligned by using the text-align:center in the <body>tag in the CSS file. The problem is I want to position the flash element directly underneath the navbar but I can't seem to get it in sync. I have used the position:absolute rule. It looks like it's centred but then changes position when I maximise the window of the browser.

Could anybody offer any advice on the positioning for me? Link to the file is below.

Thanks,

Craig

http://uk.geocities.com/johnson463@btinternet.com/

karloff · #2 (**permalink**) Apr 22nd, 2007, 12:45

try adding

margin : 0 auto;

to any element you want to center. absolute positioning is never a good way to go.

Lchad · #3 (**permalink**) Apr 22nd, 2007, 13:13

Hey Craig, since this is your first design, I'm going to show you how I'd do it.

Here's your new css

Code: Select all

body {

    background-attachment: fixed;

    background-color: #FFFFFF;

    background-image: url(background.gif);

    background-repeat: no-repeat;

    margin: 0 auto;

}





.navbar {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #330000;
    display: inline;
    padding-right: 32px;
    padding-left: 32px;
    text-decoration: none;
    text-align: center;
    

}



.navbar:hover {

    font-family: Verdana, sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: bold;

    color: #FFFFFF;

    background-color: #CC6600;

    display: inline;

    padding-left: 32px;

    padding-right: 32px;

    text-decoration: none;

}

#container {
    margin: 0 auto;
    width: 700px;
    text-align: center;
    
    }
#middlecontainer {
    width: 700px;
    margin: 0 auto;
    background: #EFE6C5;
    text-align: left;
    }

And this is what I'd suggest for your html

Code: Select all

<body>
<div id="container">

<img src="optwaterhome.gif" width="700" height="90" alt="banner" /> <a href="watercolour.html" class="navbar">HOME</a> <a href="optwaterhome.gif" class="navbar">GALLERY</a> <a href="optwaterhome.gif" class="navbar">ABOUT THE ARTIST</a> <a href="optwaterhome.gif" class="navbar">CONTACT US</a>
</div>
  
<div id="middlecontainer">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="365" height="255">

      <param name="movie" value="Untitled-5.swf" />
      <param name="quality" value="high" />
      <embed src="Untitled-5.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="365" height="255"></embed>   
</object>
   
  
</div>

</body>

Check this out and if you have any questions, let me know.

Craigj1303 · #4 (**permalink**) Apr 22nd, 2007, 16:47

Thanks LChad. That seems to do the trick but in Internet Explorer the whole page is aligned left. In Firefox & Netscape the page seems to be centred as desired. Any ideas?

Also, this isn't anything majorly wrong but in the division that holds the flash animation do you know why there is a bit of the beigey background color showing under the flash part?

Lchad · #5 (**permalink**) Apr 22nd, 2007, 19:00

Add to your css
html {
margin: 0;
padding: 0;
}

That might also take care of the extra spacing near the flash. I can't actually test that because I don't have your flash. If that doesn't work play with adding overflow: hidden; to the maincontent div. (or is it overflow: visible;?)
try both

Craigj1303 · #6 (**permalink**) Apr 22nd, 2007, 19:30

I added that rule to the css and the overflow bit but the page is still aligned left in Internet Explorer. And still has the space under the flash too!

Weirdly though the space under the flash animation only seems to be apparent in Firefox & Netscape!!
http://uk.geocities.com/johnson463@btinternet.com/

moojoo · #7 (**permalink**) Apr 22nd, 2007, 21:59

What version of Internet Explorer?

Craigj1303 · #8 (**permalink**) Apr 22nd, 2007, 22:28

Version 7, on windows XP

Quote:

Originally Posted by Lchad

This isn't going to center your site in IE but I saw an unnecessary div.
Delete your #flash div and change your css of your #middlecontainer to this

Code: Select all

#middlecontainer {
    width: 700px;
    margin: 0 auto;
    background: #EFE6C5;
    text-align: left;
    }

In the html change the code around the Flash to this:

Code: Select all

<div id="middlecontainer">FLASH INFO HERE</div>

I played with your code and I have it perfectly centered in IE. The only difference between my code and yours is the javascript. Try a test run. Delete the javascript and see if it centers the design. If it does center, you know your javascript is the problem.

Quote:

<script language="JavaScript" src="http://uk.geocities.com/js_source/ygNSLib9.js?v3"></script><script language="JavaScript">var yvnContents='http://geocities.yahoo.com/themis/as.php?cc=uk&s=382106086&l=NE&b=0&t=1177278850';yv nR='uk';yfnEA(0);</script>

and

Quote:

!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet><script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.geocities.yahoo.com/visit.gif?uk1177278850" alt="setstats" border="0" width="1" height="1"></noscript>
<IMG SRC="http://geo.yahoo.com/serv?s=382106086&t=1177278850&f=uk-w58" ALT=1 WIDTH=1 HEIGHT=1>

You'll have to post a question in the javascript forum because I have no clue about that.

Try adding this to your css code as well:

Code: Select all

* {
margin: 0;
padding:0;
}

If deleting the flash div doesn't straighten out your extra space below the flash, try adding a height of 255px to the #middlecontainer div

Some of this is trial and error...

I got rid of that flash div hours ago and the middlecontainer was already coded as you suggested from earlier.

As for the Script, that seems to be something that is added to my HTML by my service provider when I upload. It's really annoying . It's only webspace provided by them, not a proper host. However, even when I run the HTML from my PC local site, without the script it still aligns left!

Also, neither deleting the flash div or making the middlecontainer: height 255px got rid of the extra space below the flash animation

moojoo · #9 (**permalink**) Apr 24th, 2007, 15:03

The problem with embedding flash is you have to use some javascript to bypass IE's active X sillyness. bleh.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS and positioning	djme	Web Page Design	6	Feb 3rd, 2006 13:27
Positioning with CSS	Tino	Web Page Design	8	Jan 21st, 2006 15:45
css positioning	ivyholly	Web Page Design	14	Dec 20th, 2005 18:43
Positioning with css	Hub	Web Page Design	12	Dec 13th, 2005 19:45
div positioning	benbacardi	Web Page Design	10	May 24th, 2004 12:25

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
positioning with CSS