New to Web Design - Need help with positioning

S

sportsfrk214

New Member
Hey so I'm new here and was looking to see if maybe I could get a little help.

I'm a college student and me and my friends like to make our own short films. We have a "faux" movie production company, and we've been wanting for a while to set up a simple website to show off our films. This is obviously not going to be a big time site, just something for our friends, so I decided to build the site on one of those websites that builds and hosts other sites. But most of them make you use templates and none of them fit the VERY simplistic design I wanted. So I bit the bullet and joined Freewebs, and converted it to an HTML account where you strictly coded the site on your own.

It took me a while to get the hang of it, but I finally was able to figure out how to code something decent. Only problem is, I don't think I did it effectively. My site design is extremely simple. It's essentially a set of images and text that I want positioned in specific locations on the page. Only problem, as I learned, is that it's not easy to do this. I did figure out that I needed to position things "relative", but I was basically reduced to giving each image a selector in a style sheet, and I manually defined numerical values for their positions.

When you view this page in Safari, it looks perfect. However on Firefox it gets a bit messed up, and on Internet Explorer it gets destroyed. I can't imagine that it's very hard to do what I want to do with this website, it's just a simple matter of me not knowing how to do it, or rather not knowing how to do it effectively.

So I was wondering if someone could help, and point me in the right direction. I'm a real newbie at this, and to be honest I'm shocked I was able to code what I did code. Maybe I could just get an idea of how to better set up my page exactly how I want. I have included an image below of the sites homepage, so that those not viewing it on Safari can see what it's meant to look like. Also, pay no attention to the other pages of the site, just the homepage. Once I figure out how to do the one page, I can figure out how to adapt it to my Thanks for any help!

http://risingphoenixfilms.webs.com
filenamepng.png
 
Last edited:
smoovo

smoovo

New Member
With no offense, your code is a big mess... I assuming you have used some software to do the job... :rolleyes:

OK, i worked on your code to try fix it, and this is what i came with. Working 100% with all browsers type and versions, and validate as HTML5 at W3C.

HTML: 
<!doctype html>
<html lang="en">
<head>

<title>Rising Phoenix Films</title>
<style>
* {padding:0; margin:0; border:none;}
html {height:101%;}
body {background:url('http://risingphoenixfilms.webs.com/BrickSeamlessBackground.gif') center fixed repeat;}
#container {width:100%; height:100%; text-align:center;}
#page {width:900px; margin:auto;}
#menu {float:right;}
.clear {width:100%; clear:both;}
.logo{float:left;}
.slogan{float:right; margin:50px 20px 0 0;}
.welcome{float:left;}
.nowplaying{float:right;}
</style>
</head>
<body>
<div id="container"><div id="page">
<div class="logo"><img src="http://risingphoenixfilms.webs.com/Header/RPFLogo.png" /></div>
<div class="slogan"><img src="http://risingphoenixfilms.webs.com/Header/RPFWordmark.png" /></div>

<div id="menu">
<a href="http://risingphoenixfilms.webs.com"><img src="http://risingphoenixfilms.webs.com/Header/HOME.png" /></a>
<a href="http://risingphoenixfilms.webs.com/films.html"><img src="http://risingphoenixfilms.webs.com/Header/FILMS.png"></a>
<a href="http://risingphoenixfilms.webs.com/blog.html"><img src="http://risingphoenixfilms.webs.com/Header/BLOG.png"></a>
<a href="http://risingphoenixfilms.webs.com/connect.html"><img src="http://risingphoenixfilms.webs.com/Header/CONNECT.png"></a>
<a href="http://risingphoenixfilms.webs.com/history.html"><img src="http://risingphoenixfilms.webs.com/Header/HISTORY.png"></a>
<a href="http://risingphoenixfilms.webs.com/extras.html"><img src="http://risingphoenixfilms.webs.com/Header/EXTRAS.png"></a>
</div>

<div class="clear"></div>

<div class="welcome"><img src="http://risingphoenixfilms.webs.com/Welcome.png"></div>
<div class="nowplaying"><a href="http://vimeo.com/4615171"><img src="http://risingphoenixfilms.webs.com/NowPlayingRoom101.png"></a></div>
</div></div>
<script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script>
</body>
</html>


- Enjoy. ;)

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
Last edited:
S

sportsfrk214

New Member
None taken! I don't think I made it clear enough in my post that I've NEVER used HTML before. I basically built this site on the fly with whatever I could pick up online. I didn't use any software, I wrote it myself, but since I have no clue what I'm doing it's a mess lol.

But wow thank you. That is really amazing what you did, I can't thank you enough. That really looks absolutely fantastic. Just a question:

How would I go about moving things on my own? Is it even possible? I don't want to nit pick when you basically did tons of amazing work for me, but ideally I'd like to move the logo and the wordmark/pagelinks closer together, and I'd like to move the Now Playing Poster up closer to where it was in the picture I posted. How would I do that?
 
smoovo

smoovo

New Member
It is my pleasure to help, and you did more than OK for someone that doesn't have clue with HTML... :).

I edit the code as you requested, but if from some reason you want to play with it, the margin is the key to move things.

HTML: 
<!doctype html>
<html lang="en">
<head>

<title>Rising Phoenix Films</title>
<style>
* {padding:0; margin:0; border:none;}
html {height:101%;}
body {background:url('http://risingphoenixfilms.webs.com/BrickSeamlessBackground.gif') center fixed repeat;}
#container {width:100%; height:100%; text-align:center;}
#page {width:850px; position:relative; margin:auto;}
#menu {float:right;}
.clear {width:100%; clear:both;}
.logo{float:left;}
.slogan{float:right; margin:50px 20px 0 0;}
.welcome{float:left;}
.nowplaying{position:absolute; top:220px; right:50px;}
</style>
</head>
<body>
<div id="container"><div id="page">
<div class="logo"><img src="http://risingphoenixfilms.webs.com/Header/RPFLogo.png" /></div>
<div class="slogan"><img src="http://risingphoenixfilms.webs.com/Header/RPFWordmark.png" /></div>

<div id="menu">
<a href="http://risingphoenixfilms.webs.com"><img src="http://risingphoenixfilms.webs.com/Header/HOME.png" /></a>
<a href="http://risingphoenixfilms.webs.com/films.html"><img src="http://risingphoenixfilms.webs.com/Header/FILMS.png"></a>
<a href="http://risingphoenixfilms.webs.com/blog.html"><img src="http://risingphoenixfilms.webs.com/Header/BLOG.png"></a>
<a href="http://risingphoenixfilms.webs.com/connect.html"><img src="http://risingphoenixfilms.webs.com/Header/CONNECT.png"></a>
<a href="http://risingphoenixfilms.webs.com/history.html"><img src="http://risingphoenixfilms.webs.com/Header/HISTORY.png"></a>
<a href="http://risingphoenixfilms.webs.com/extras.html"><img src="http://risingphoenixfilms.webs.com/Header/EXTRAS.png"></a>
</div>

<div class="clear"></div>

<div class="welcome"><img src="http://risingphoenixfilms.webs.com/Welcome.png"></div>
<div class="nowplaying"><a href="http://vimeo.com/4615171"><img src="http://risingphoenixfilms.webs.com/NowPlayingRoom101.png"></a></div>
</div></div>
<!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>

- Enjoy again.

____________________
[email protected]
www.SMooVo.com – Web Design
 
S

sportsfrk214

New Member
Wow thank you so much! Much appreciated! And I'll keep margins in mind if I ever need to edge things around. Hopefully from here I can learn what you did and apply it to my other pages. Thanks again, this has been a life saver =D
 
PixelPusher

PixelPusher

Super Moderator
Staff member
You should refrain from using only images in you menus. This damages your SEO efforts considerably there is no anchor text in your links.

Also I would suggest using a list to build your menu.
 
J

JoomlaExpert

New Member
The website is indeed very simple. It needs more creativity to it. I suggest you used Joomla website in making that page more lively and theatrical. Joomla creates professional websites and you can learn it with easy to follow Joomla video tutorials.
 
You must log in or register to reply here.
Top