...

View Full Version : video link not aligned to centre



johnnyk
10-31-2010, 04:12 PM
Having issues trying to position an embedded video link to the centre of the screen. I have right clicked the image, gone to align_centre yet the link is not in the centre of the screen :(
Any advice would be appreciated.

abduraooft
10-31-2010, 04:18 PM
Any advice would be appreciated. From the given input, we can only use some image editing programs like Photoshop to correct the alignment. If you are seeking help on your code, we need to see it, Or a link to your page would be much better.

johnnyk
10-31-2010, 04:28 PM
(I have not given the link a Div tag and have been trying to align it in properties)

<!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>cfpma</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url("css/advanced.css");

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

<body leftmargin="300">

<div id="wrapper">

<div id="container">


<div align="center">
<object width="532" height="385">
<param name="movie" value="http://www.youtube.com/v/amcZ6R3hPEY?fs=1&amp;hl=en_GB"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/amcZ6R3hPEY?fs=1&amp;hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="532" height="385"></embed>
</object>
</div>
</div>

<ul>

<li><a href ="INDEX.html" target="_self">HOME</a></li>
<li><a href ="STILLS.html" target="_self">STILLS</a></li>
<li><a href ="VIDEO.HTML" target="_self">VIDEO</a></li>
<li><a href ="SONIC.HTML" target="_self">SONIC</a></li>
<li><a href ="CONTACT.HTML" target="_self">CONTACT</a></li>

</div>
</div>


</div>
</body>
</html>

abduraooft
10-31-2010, 04:39 PM
Post your CSS files too.

johnnyk
10-31-2010, 04:43 PM
@charset "utf-8";
@import url("gallery.css");

#container {
width:990px;
}

body {
background-color:#afafaf;
}

#wrapper {
background-image:url(../images/cleared%20screen_new.jpg);
background-position:center;
background-repeat:repeat;
padding-bottom:100px;
padding-top:50px;

}


#dataglyph {
margin-left: 500px;
margin-top: 0px;
padding-top:70px;
}

#banner {
margin-left: 267px;
margin-top: -10px;
}

#sub_banner {
margin-top:5px;
margin-bottom:15px;
margin-left: 290px;
}



#text {
font-size:100%;
margin-top:20px;
padding-left:295px;
padding-right:25px;
padding-bottom:20px;
text-align:justify;
}

ul
{
list-style-type:none;
margin-top:50px;
padding:0;
margin:0;
padding-top:6px;
padding-bottom:125px;
text-align:center;
}
li
{
display:inline;
}
a:link,a:visited
{

font-size:111%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000;
padding:38px;
padding-top:3px;
padding-bottom:3px;
text-decoration:none;
text-transform:uppercase;

}
a:hover,a:active {
background-color:transparent;
}


<ul>
<li><a href="#HOME">Home</a></li>
<li><a href="#STILLS">News</a></li>
<li><a href="#VIDEO">Contact</a></li>
<li><a href="#SONIC">About</a></li>
<li><a href="#CONTACT">About</a></li>
</ul>

johnnyk
10-31-2010, 04:48 PM
I think this has something to do with the #wrapper and #container div tags enclosing the <ul>. The home page does not have the <ul> enclosed but seems to work :(

abduraooft
10-31-2010, 04:51 PM
I'd recommend you to position a div using the dead centre method (http://www.wpdfd.com/editorial/thebox/deadcentre4.html) and then put the video and links inside it.

johnnyk
10-31-2010, 05:16 PM
When I include the <ul> within the div tags the list also moves off-centre. What am I doing wrong?

abduraooft
10-31-2010, 05:28 PM
What am I doing wrong? Again, we need to see your current code to say something about it.

johnnyk
10-31-2010, 05:37 PM
<!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>cfpma</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url("css/advanced.css");


</style>

<body>

<div id="wrapper">

<div id="container">


<div id="video">
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/amcZ6R3hPEY?fs=1&amp;hl=en_GB"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/amcZ6R3hPEY?fs=1&amp;hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></div>



<ul>
<li><a href ="INDEX.html" target="_self">HOME</a></li>
<li><a href ="STILLS.html" target="_self">STILLS</a></li>
<li><a href ="VIDEO.HTML" target="_self">VIDEO</a></li>
<li><a href ="SONIC.HTML" target="_self">SONIC</a></li>
<li><a href ="CONTACT.HTML" target="_self">CONTACT</a></li>

</div>
</div>

</body>
</html>

Major Payne
11-01-2010, 09:28 PM
Didm't see the CSS for "<div id="video">", but try:



#video {
width: 480px;
height: 385px;
margin: 0 auto;
}

That would center the video div within the "container" div, but I don't see where it is centered. Try:



#container {
width: 990px;
margin: 0 auto;
}


Centering anything requires setting a width less than 100% for the container.

This is NOT needed:



body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}


Put ALL your CSS on an external CSS file. Use this at the very TOP of all the CSS:


* { margin: 0; padding: 0; border: 0; }

I'm sure I missed something in all the code posted, but validate your CSS and HTML:

CSS Validator (http://jigsaw.w3.org/css-validator/)

HTML Validator (http://validator.w3.org/#validate_by_uri+with_options)

Why Validate?: http://validator.w3.org/docs/why.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum