View Full Version : center-ing header
Hi, can anyone tell me how to center my title ?
<!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" xml:lang="en" lang="en">
<head><font size=5><b>Welcome to ITC<align ="center"/><b>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dynamicMarquee</title>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="900" height="400" id="dynamicMarquee" align="top">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="dynamicMarquee.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<embed src="dynamicMarquee.swf" quality="best" scale="noscale" bgcolor="#ffffff" width="550" height="440" name="dynamicMarquee" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
thanks
Try this:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dynamicMarquee</title>
</head>
<body bgcolor="#ffffff">
<h2 style="font-weight:bold;text-align:center">Welcome to ITC</h2>
<!--url's used in the movie-->
<!--text used in the movie-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="900" height="400" id="dynamicMarquee" align="top">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="dynamicMarquee.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<embed src="dynamicMarquee.swf" quality="best" scale="noscale" bgcolor="#ffffff" width="550" height="440" name="dynamicMarquee" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
rangana
05-15-2008, 01:32 AM
Erroneous.
This part should'nt be in the head section:
<font size=5><b>Welcome to ITC<align ="center"/><b>
Also, these are deprecated (http://www.codehelp.co.uk/html/deprecated.html) :(
To name of deprecated attributes and elements that you used:
font
align
bgcolor
The fix is to go through CSS:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dynamicMarquee</title>
<style type="text/css">
.header{
font-size:20pt;
font-weight:bold;
text-align:center;
display:block;
}
body{
background:#fff;
}
</style>
</head>
<body>
<div id="wrap">
<span class="header">Welcome to ITC</span>
<!--url's used in the movie-->
<!--text used in the movie-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="900" height="400" id="dynamicMarquee" align="top">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="dynamicMarquee.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<embed src="dynamicMarquee.swf" quality="best" scale="noscale" bgcolor="#ffffff" width="550" height="440" name="dynamicMarquee" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>
Nile, you beat me through it
...also, Nile, you missed closing your h2 tag:
<h2 style="font-weight:bold;text-align:center">Welcome to ITC</h3>
...and closes it with the </h3> tag ;)
See if it helps :)
Lol, thanks. I'll fix it. You caught me :rolleyes:
Thanks Nile & rangana. :) Ya, my header is in the center . Now here another qns. What the difference between the html that both of you gave & the link that Medyman provides. the link generates the SWFObject v2.0 HTML & javascript generator
Also, these are deprecated
To name of deprecated attributes and elements that you used:
Opps, I never notice. I just tried opening my .swf file add in the header.Thanks for the tip:D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "7.0.0");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
<param name="movie" value="dynamicMarquee.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="dynamicMarquee.swf" width="800" height="600">
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Medyman
05-15-2008, 03:12 AM
Hyk...
SWFObject only embeds the flash portion. The CSS that Nile and Rangana gave you were to center your title. They serve two different purposes.
The HTML & Javascript that the SWFObject generator generates relates to adding the .swf to your webpage, nothing else.
rangana
05-15-2008, 03:55 AM
Thanks Nile & rangana. :) Ya, my header is in the center . Now here another qns. What the difference between the html that both of you gave & the link that Medyman provides.
Medyman had explained the purpose of SWF generator, now my turn is to explain the difference between mine and Nile's code :)
Our codes differ, but with the same purpose - to center the title ;)
Nile gave you a code using h2 element which is a block level element by default.
I gave you a code using span element which is an inline element, but then is displayed as block level element using:
display:block;
...for centering mechanism, we both used text-align:center to achieve this.
...One thing that Nile missed is to change the bgcolor attribute which is deprecated :(
...Also, I placed all of your elements inside a wrapper (div) for validation purposes
SWFObject only embeds the flash portion. The CSS that Nile and Rangana gave you were to center your title. They serve two different purposes.
The HTML & Javascript that the SWFObject generator generates relates to adding the .swf to your webpage, nothing else.
If i just want to show a sample on how it is going to look like, this is the correct way to embed. right?:) If i want to add in some words,background where do i add it?
Thanks for the tip rangana:)
ps: Nile, rangana& medyman. I not sure if the question i asking you guys is html or a flash-type.I quite confused by it:p
Medyman
05-15-2008, 01:47 PM
If i want to add in some words,background where do i add it
You know HTML, right? Just as it like you normally would. There is nothing special about that page. The Flash embed code is just another element. Add your words above it, below it..whatever
Background etc.. styling can be done via CSS.
ps: Nile, rangana& medyman. I not sure if the question i asking you guys is html or a flash-type.I quite confused by it
Your question is HTML/CSS related. The use of SWFObject in what you're trying to do (add text and styling) has no bearing.
here the html.:D. i changed the name of the swf, sizes, delete the <a herf> tag. The sizes, i not too sure. since IE6 & IE7 they give very varying results It tried it with FF. Its looks like a full-screen flash player.
LOL, the good influence from you guys is great. I would had just tried 1 ver of IE and give up. Looking at posts made me tried on other browsers. Thanks :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600" id="myFlashContent">
<param name="movie" value="dynamicMarquee.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="dynamicMarquee.swf" width="1000" height="600">
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Medyman
05-15-2008, 09:36 PM
hyk, I think you want the flash to be full width, right?
Then use 100% as the width, insted of 1000.
I think you want the flash to be full width
Not really Medyman. A small size marquee will do, as long as viewers are able to see the images clearly on the webpage. :D. A full size marquee will scare the daylight out of people.
molendijk
05-16-2008, 12:51 PM
<style type="text/css">
.header{
font-size:20pt;
font-weight:bold;
text-align:center;
display:block;
}
Rangana, this only centers the text in the header, not the header itself. To center the header-element itself, you could add:
border:1px solid red; position: relative; left: 50%; width: 200px; margin-left: -100px;where the negative margin-left is the width divided by 2.
I provided a border to show the effect.
---
Arie Molendijk.
Medyman
05-16-2008, 02:33 PM
Rangana, this only centers the text in the header, not the header itself. To center the header-element itself, you could add:
border:1px solid red; position: relative; left: 50%; width: 200px; margin-left: -100px;where the negative margin-left is the width divided by 2.
I provided a border to show the effect.
---
Arie Molendijk.
OR....
just use margin:0 auto and you don't need to mess with all those nasty negative margins and relative positioning. :rolleyes:
molendijk
05-16-2008, 02:53 PM
OR....
just use margin:0 auto and you don't need to mess with all those nasty negative margins and relative positioning. :rolleyes:
Medyman, that doesn't work on my machine. Can you give me the full css for the header?
---
Arie.
Medyman
05-16-2008, 11:33 PM
Medyman, that doesn't work on my machine. Can you give me the full css for the header?
---
Arie.
Certainly...
HTML 4.01 Valid
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>margin:auto</title>
<style type="text/css">
html,body {
background-color:#eee;
}
.header {
margin:0 auto;
width:800px;
height:100px;
background:#ccc;
text-align:center;
}
.header h1 {
margin:0;
padding:25px 0 0 0;
color:#fff;
}
</style>
</head>
<body>
<div class="header">
<h1>MARGIN:AUTO</h1>
</div>
</body>
</html>
rangana
05-17-2008, 12:17 AM
Rangana, this only centers the text in the header, not the header itself. To center the header-element itself, you could add:
border:1px solid red; position: relative; left: 50%; width: 200px; margin-left: -100px;where the negative margin-left is the width divided by 2.
I provided a border to show the effect.
---
Arie Molendijk.
Hi Arie,
Apparently, it's centers the whole thing since i've displayed the span element as a block level elemet ;)
...The aim is to center the header and nothing else, so whatever the way, as long as valid should'nt be the issue here :rolleyes:
molendijk
05-17-2008, 01:19 AM
Medyman,
I think that, in the end, my method is shorter.
You have:
.header {margin:0 auto; width:400px; height:100px; background:#ccc; text-align:center;}
.header h1 {margin:0; padding:25px 0 0 0;color:#fff;}
I would only need:
.header {left:50%; width:400px; background:#ccc;color:#fff; text-align: center;
position: relative; margin-left:-200px;}Your method relies on the height and the padding-properties. I don't need them. You can see it by replacing <h1>MARGIN:AUTO</h1> with <h1>MARGIN:AUTO<br>auto</h1> in both cases. It doesn't affect my styling, but it affects yours.
---
Arie.
Medyman
05-17-2008, 01:31 AM
Your method relies on the height and the padding-properties
No, it doesn't. I just added them for styling purposes. In fact the only thing you need to add is margin:auto. Nothing else.
You can see it by replacing <h1>MARGIN:AUTO</h1> with <h1>MARGIN:AUTO<br>auto</h1> in both cases. It doesn't affect my styling, but it affects yours.
I'm not sure what you mean by it has an effect. At most, it'll adjust the the height because of padding. Regardless, you shouldn't be adding <br> tags within <h1> ones.
molendijk
05-17-2008, 11:22 AM
Hi Medyman,
I see what you mean now. Reducing everything to its bare essentials, you can do with this (added the border to show the effect):
.header {
margin:0 auto;
width:300px;
text-align:center;
border:1px solid red;
}what I have to do with this:
.header {
position:relative;
left:50%;
margin-left:-150px;
width:300px;
text-align:center;
border:1px solid red;
}So your method is more economic.
I was inconsciently having 'overall-centering' (x- and y-centering) in my mind, which can be achieved by something like this:
.header {
position:absolute;
height:200px;
width:300px;
text-align:center;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;
border:1px solid red;
}Will your method be 'cheaper' for that one too?
---
Arie.
Medyman
05-17-2008, 02:45 PM
Will your method be 'cheaper' for that one too?
You can substitute all the parts that control horizontal with margin:auto, yes. It doesn't quite work for vertical center. So, what you're doing for vertical center is correct.
The reason I suggest margin:auto for horizontal only instead of using positioning and negative margins is because with that way you have to hardcode the width and in the future if you want to change it, you have to change it in two places (the width and the neg. margin). With margin:auto, you need to do neither.
So, you can get rid of the highlighted and add margin:auto
.header {
position:absolute;
height:200px;
width:300px;
text-align:center;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;
border:1px solid red;
}
molendijk
05-17-2008, 02:58 PM
You can substitute all the parts that control horizontal with margin:auto, yes. It doesn't quite work for vertical center. So, what you're doing for vertical center is correct....
So, you can get rid of the highlighted and add margin:auto
Yes, that's what I thought. Thanks very much.
---
Arie.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.