Menu
Community /Pin to ProfileBookmark
Trouble With Placing Video
I’m having a bit of trouble with placing an embedded from Blip.TV and a couple of images. I did use the W3C Validator for both my HTML and my CSS. My HTML has 3 errors. 2 of them are for placing my images. I used the align attribute to place my images. For some reason I can’t seem to use the float property in CSS to place my images.
The Blip.TV video I can’t seem to do anything with. I tried align, float, margin: 0 auto, nothing I try works. It just gets bumped to the right. Removing my padding in my Unordered List helps a bit, but it doesn’t fix the problem.
Here is my HTML:
[CODE]<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” type=”text/css” href=”style/style.css” />
<title>12:01 Beyond</title>
</head>
<body><div class=”container”><img src=”Logo_small.png” width=”140″ height=”140″ align=”left” />
<img src=”Grave.gif” align=”right” />
<div class=”center”>
<div class=”side”><ul class=”shows”>
<li><img src=”beyond_midnight_small.jpg” class=”shows” /></li>
<li><img src=”RadioDrome_small.jpg” class=”shows” /></li>
<li><img src=”lost_in_the_static_small.jpg” class=”shows” /></li>
<li><img src=”images/RESERVED_REPLACE.gif” class=”shows” /></li>
<li><img src=”images/RESERVED_REPLACE.gif” class=”shows” /></li>
</ul>
</div>
<div><embed src=”http://blip.tv/play/AYKc0lsC” width=”480″ height=”368″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true”></embed></div>
</div>
</div>
</body>
</html>
Here is my CSS (note, there are a few unused classes because I removed parts of my page):
[CODE]body, html{
background: #1B1B1B;
height: 100%;
margin: 0;
}
div.container{
background: #000;
margin: 0 auto;
padding: 0;
min-height: 100%;
width: 1024px;
}
div.left{
background-image: url(‘../images/film_strip_long.png’);
width: 150px;
float: left;
min-height: 100%;
}
div.right{
background-image: url(‘../images/film_strip_long.png’);
width: 150px;
float: right;
min-height: 100%;
}
div.center{
margin: 0;
padding: 0;
width: 1024px;
float: left;
text-align: center;
min-height: 100%;
}
ul.shows{
margin: 0;
padding: 35px 0 0 55px;
clear: left;
float: left;
}
li{
list-style: none;
padding: 10px 0;
}
.vid{
margin: 0;
}
.side{
padding: 0;
margin: 0;
float: left;
}
Here’s a picture (thumbnail) of my problem:
[URL=http://s14.photobucket.com/albums/a328/GSZX/?action=view¤t=problem.png]
[IMG]http://i14.photobucket.com/albums/a328/GSZX/th_problem.png
Any help is appreciated,
GSZX1337
(I know the page is pretty flat and ugly, I should have some images for it tomorrow.)
Sign in
to post a comment