Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

br.avery

macrumors regular
Original poster
Dec 1, 2008
108
0
Hi all,
I am in the process of building a simple online portfolio, I really like how the following portfolio is set up, does anyone know what program was used to make this site?

http://amy-allen.com/

I know it's extremely simple coding but I'm not too familiar with this web design/coding stuff.
 
You can just write it in notepad or whatever. ;)

It's just a text, you need to learn basics of HTML/CSS to do this.

I can make you something like this if you would like. I will have a week free so PM me if you are interested.
 
Neat trick, most likely this was hand coded, transparent PNG + position: fixed is all you need.
 
how do i do that fixed position of the contact information on the right?
 
this website is very simple and easy to make, you don't even need to do any kind of programming stuff to make such kind of website....all you need is to get some basic knowledge of html and css and you are ready to go.
 
Code:
<html>
	<head>
		<title>Amy Allen</title>
		
		<link href="stylesheets/main.css" rel="stylesheet" type="text/css" />

		
	</head>
	<body>
	
	<div id="topBar"></div>

	<div id="bottomBar"></div>
	<div id="viewport">
	
	<div id="overlay">
		
		<div id="title">
			<img src="images/vertical-title.png" alt="Amy Allen" />
			
			<div id="fillSpace"></div>
			
			<p><span id="name"><strong>Amy Allen</strong></span><br>
				<span id="position">HAIR STYLIST</a></span><br /><br />

				phone: 817.403.5434<br>
				<a href="mailto:amyamyallen@gmail.com">amyamyallen@gmail.com</a>
			</p>
			
			
			
		</div>
		
	</div>		
		
	<img src="images/1.jpg" /><br />
	<img src="images/2.jpg" /><br />
	<img src="images/3.jpg" /><br />

	<img src="images/4.jpg" /><br />
	<img src="images/5.jpg" /><br />
	<img src="images/6.jpg" /><br />
	<img src="images/7.jpg" /><br />
	<img src="images/8.jpg" />
	
	
	</div>
	
	
	</body>
</html>

That's the site! Simples, Half a dozen DIVs mostly using postion:fixed and some margins and you're done! Very nice effect, for little effort
 
Set your html to have a overflow-y:scroll css value. Keeps your site centered when navigating from long pages to short ones.

I'm not great at web stuff. Yes I created my site but it was all by trial and error. What exactly does setting the overflow like above do? Oh and which element is it for? The container div?
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.