Voiceover Site (columns problem..)

March 5, 200818 yr

Hi - I'm putting a small site together for a friend who is a voice over artist.

Currently hosted here:

http://www.soundsvisual.com/Kp2/index.html

Any comments?

One thing I am struggling with is that I want the footer to always be in the same place - so when diffeent pages have different amount of copy the footer stays stationary. Been trying margins etc and mon-height but nothing seems to work. Any ideas? Please!

I've posted the code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Kate Parker Voice Overs</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>

<meta name="voiceovers" content=sounds visual/>

<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

<div id="wrapper">



<div id="header">
	<img src="iStock5.jpg" alt="Suni"/>
</div>

<div id="menu">
	<ul>
		<li><a href="index.html">Home</a></li>
                       <li><a href="About.html">About Me</a></li>
		<li><a href="Contact.html">Contact Me</a></li>

	</ul>
</div>




<div id="sidebar">
<br><br><br><i>Testimonials here?</i>

<br><br>
<br><br>
<br><br>

TV and Radio Commercials<br>
<script language="JavaScript" src="audio/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer1" height="14" width="170">
<param name="movie" value="audio/player.swf">
<param name="FlashVars" value="playerID=1&soundFile=KateParkerAds.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
<br>
Narration<br>
<script language="JavaScript" src="audio/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="audio/player.swf" id="audioplayer2" height="14" width="170">
<param name="movie" value="audio/player.swf">
<param name="FlashVars" value="playerID=2&soundFile=KateParkerAds.mp3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

</div>

<div id="content">

	<div class="entry">
		<div class="entry-title"><H2>Kate Parker Voice Overs</H2></div>

		<p>Hi, I’m Kate – a UK based voiceover, heard around the world.  Welcome to my website!
</p>

<p>If you’re looking for a professional, versatile voiceover, you’ve definitely come to the right place.  From teenage to trendy, cool to commercial, my voice has been used to add the right style to thousands of radio ads, tv ads, and on hold messages, as well as a great range of corporate work.</p>

<p>I hope you’ll take the time to have a browse around, find out more about me and listen to examples of my voiceover work.  If there’s anything else you need to know or you’d just like to have a chat about a voice project, please do get in touch.<br><b> Tel. 01380 727724</b></p>

I work from my own ISDN studio at home in Devizes, where I have a voice booth and facilities to supply audio by ISDN, MP3 or other audio formats. (Somethink like that do you think?)

<br><br><br><br><br><br>

</div>

<div id="footer">

</div>

</div>

</body>
</html>

CSS:

body {
Font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;
font-size:62.5%; /* Sets default font size to 10px */
color:#222222;


}

a {text-decoration: none}

img.center {
 display: block;
 margin-left: auto;
 margin-right: auto;
}


/* Main sections*/

#wrapper {
margin:0 auto;
width:700px;
background:#ffffff;
font-size:1.20em;

}
#header {

height:270px;

       	}
#menu {
text-decoration: none;
       height:35px;
line-height:35px;
background:url(bar.png) no-repeat;

}
#sidebar {
float:right;
       min-height: 400px;
      	width:160px;
       padding: 10px;
margin-right:0px;
       background-color: #efefef;

}
#content {
float:left;
       padding: 10px;
width:480px;
       background-color: #efefef;

}

#footer {	
       margin-left: -10px;
       margin-bottom: -20px;
       height:100px;
       width:700px;
background:url(footer.png);
}




/* Menu stuff*/

#menu ul {
       list-style-type: none;
}
#menu li {
float:left;
}
#menu li a {
padding: 0 15px;

color:#ffffff;
margin-right:2px;
}

#menu li a:hover {
       color: yellow;
}







/* Down the bottom */

#footer-valid {
float:left;
padding-top:55px;
padding-left:20px;
cursor:default;
color:#ffffff;
}
#footer-valid a {
color:#ffffff;
text-decoration:none;
}
#footer-valid a:hover {
color:#ffffff;
text-decoration:underline;
}

Cheers for any ideas/help.

Jonny

March 11, 200818 yr

broken link - cant see site

March 11, 200818 yr

This link explains it all - http://matthewjamestaylor.com/blog/keeping...tom-of-the-page

What's the big deal with everyone wanting footers sticking I wonder???

March 11, 200818 yr

Actually I have a friend who is in need of a voice over artist. When the website is up please let me know

April 2, 200818 yr

Author

Actually I have a friend who is in need of a voice over artist. When the website is up please let me know

Hi - if you are still looking for a voice over - Kate's site is now up and live at www.kateparker.co.uk

Regards,J

April 2, 200818 yr

You could put this in your CSS:

div#footer {
position:fixed;
bottom:0px;
}

that should keep the footer stuck to the bottom of the viewport no matter how much content.

although I should point out that the link isn't working so I could be getting the wrong end of the stick.

****just noticed how old the original post is sorry****

Voiceover Site (columns problem..)

Featured Replies

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)