aligning using css [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : aligning using css

mark_yieh

06-06-2006, 07:24 AM

Hi everyone. I'm new to css, so this might sound like a silly question, but I'm having trouble aligning an element in the browser. I'm embedding a Flash object and I'm putting it in a <div> tag. Normally I would just do this in the HTML,

<div align="center">
(Flash Object)
</div>

but using css, I can't seem to get the same results. This is what I tried:

//in CSS file
div {position:relative; left:50%; right:50%;}

but this puts the object all the way to the right of the browser. If I used this

//in CSS file
div {position:relative; left:25%; right:25%;}

then I'll get the desired result, but I don't think this is right though because at 25% it shouldn't be centered. Also, if I wanted to add some links to the left side of the Flash object, I would just use the float property right? Like this

//in HTML
<div>
<ul>
<li><a href="urlToPage">link1</a></li>
(more links here)
</ul>
(flash object)
</div>

//in CSS file
div {position:relative; left:25% right:25%;}
ul {float:left;}

but this doesn't seem to work.

There doesn't seem to be an align property for css. So does anyone get what I'm saying and can someone tell me how to straighten this out. Thanks.

Fang

06-06-2006, 10:31 AM

div {width:XXXpx; margin:auto;}

nataliemac

06-06-2006, 11:59 AM

Telling the browser left: 50% and right: 50% is only going to confuse things.

If you use left or top to set a position, you are setting the position of the *top left* corner of your element. For example, saying left: 50% and top: 50% will put the top left corner of your div in the center of the screen. It won't center your div on the screen.

There are a couple of ways to center something using CSS, but the margin: auto that Fang suggested is by far the easiest.

mark_yieh

06-06-2006, 07:52 PM

Ok thanks everyone. I'll give it a try. What about the other concern though. The one about the float property. I want to be able to set some links just to the left of the Flash object. Here's what I tried:

//in HTML file
<div>
<ul>
<li><a href="linkToURL">link1</a></li>
(more links here)
</ul>
<object>
(Flash Object here)
</object>
</div>

//in CSS file
div {margin:0% 50%;}
ul {float: left;}

When I applied this style to the HTML file, it doesn't seem to work.
What should I do? Thanks for helping.

nataliemac

06-06-2006, 08:05 PM

The issue there is that if you center the div on your page, then float a list to the left within the div, the Flash object itself won't be centered in the div, and therefore won't be exactly in the center of the page. Is that what you're looking for? Just the div to be centered, or do you need the Flash object itself to be centered?

mark_yieh

06-06-2006, 11:58 PM

I don't mind if the list will cause the Flash object to not be completely centered. I just want to make the float property work.

Also, I got the advice to align the Flash object by using:

div {width: XXXpx; margin: auto;}

but is there a way to make the same result without using margin: auto?

For example I tried doing:

div {width: XXXpx; margin: 0% 50%;}

The reason I'm hesitant about using margin: auto is because I read somewhere that not all browser provide the correct support for margin: auto

Thanks for all the input.

mark_yieh

06-07-2006, 12:50 AM

How come when I use the margin: auto approach and I leave out the width property, I don't get the desired result?

div {margin: auto;}

I don't understand why div {margin-left: 50%; margin-right: 50%;} doesn't work.

Fang

06-07-2006, 08:01 AM

How come when I use the margin: auto approach and I leave out the width property, I don't get the desired result?

div {margin: auto;}

An element width is required to calculate how much margin is left.
I don't understand why div {margin-left: 50%; margin-right: 50%;} doesn't work.It does, but as the width is assumed to be zero the element is certered on it's left edge.

margin:auto does not work with IE5 and older. To do the same for those browsers add text-align:center to the element's parent and text-align:left to re-align the text.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
body {text-align:center;}
div {margin-left: 50%; margin-right: 50%; text-align:left; border:1px solid red;}
</style>

</head>
<body>
<div>xxxx</div>
</body>
</html>

mark_yieh

06-07-2006, 10:19 AM

Ok I'm really at a lost right now on how to figure this out. I've done a lot of research on this but I still can't seem to figure out how to get this layout to work. What I'm trying to so is to center my flash object and place a couple of links to the left of the object. Should be simple, but I can't seem to figure it out. In HTML, I would just use a table and a div tag and I'm done with it, but I'm trying to embrace CSS, but so far it seems more of a hassle than a benefit. Anyways, here is the code. Can someone please make it work for me and maybe by looking at what you did, I can see the logic in it. Thanks.


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>homePage</title>
<link rel="stylesheet" type="text/css" href="magdaCSS.css"/>
</head>
<body bgcolor="#c4c4c4">




<div>

<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"

width="700" height="500" id="homePage" align="middle">

<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="homePage.swf" /><param name="quality" value="high" /><param

name="bgcolor" value="#eaeaea" /><embed src="homePage.swf" quality="high" bgcolor="#eaeaea"

width="700" height="500" name="homePage" align="middle" allowScriptAccess="sameDomain"

type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>

/* This is the CSS file */
div {width:700px; margin-right: 50%; margin-left: 50%;}
ul {float: left;}

nataliemac

06-07-2006, 12:42 PM

CSS:

body {
background-color: #c4c4c4;
}

div#container {
width: 850px;
margin: 0 auto;
}

div#object {
width: 700px;
height: 500px;
background-color: pink;
float: left;
margin: 0;
padding: 0;
}

ul {
float: left;
width: 125px;
margin: 0;
padding: 0;
}

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>homePage</title>
<link rel="stylesheet" type="text/css" href="magdaCSS.css"/>
</head>
<body>




<div id="container">

<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

<div id="object">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="700" height="500" id="homePage" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="homePage.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#eaeaea" />
<embed src="homePage.swf" quality="high" bgcolor="#eaeaea"
width="700" height="500" name="homePage" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>
</body>
</html>

You had your div set to the same width as your object, which didn't leave any room for the list to float to the left of it. I made the div wider and assigned a width to the <ul> so that it would fit to the side of your div. Also, returned your margins to auto as that makes more sense than the 50% you had set. This should get you on the right track.

Oh, and I set the background of the object div to pink just so I could see it.

--Natalie

mark_yieh

06-08-2006, 10:42 PM

ok I must be missing something because I still can't get it to work. I copied and pasted your code natalie, but still doesn't work. I must be doing something wrong. Using tables in HTML is so much easier.