Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Single Page website

Featured Replies

Hello,

 

Anyone able to help me. I have a friend who wants a single page website for his photo portfolio. He wants it to make it like this one CLICK HERE.

 

Any idea on how I can do it?

Edited by MikeChipshop

I think that site maybe hacked/or using hidden code, view source and scroll to the bottom. :shok:

Hello,

 

Anyone able to help me. I have a friend who wants a single page website for his photo portfolio. He wants it to make it like this one CLICK HERE.

 

Any idea on how I can do it?

 

That's a pretty generic question...

 

PS: Maybe the 96designs.com owner is interested in a little more than just web design. As Bomb pointed out :lol:

Edited by Pete Prosper

Should this thread not be deleted?

 

You want it kept?

I'd convert that link to plain text if nothing else. Probably not Vulcans fault, the design is rather nice but don't think it should get any backlinks from here.

Edited by Sogo7

  • Author

OH dear :S I didn't notice them links at the bottom :S.

 

My friend found this website on the internet he said this is the sort of thing he's looking for but wants the size a bit bigger.

 

So anyone know the code for the scrolled.

 

If you think this post should be deleted then you can do it. But I need help with a website.

If you can edit it shorten the link. Can't do it at the moment too much hassle on an iPad

  • Author

No I cant edit it.

 

But is anyone able to help me with what code to use to make a website like this.

  • Author

Thanks sash_oo7 but how can i make it so when it slides from right to left. when you click on each menu button.

The gallery is a cut down version of jquery 'Pretty-photo' as far as I can see. BTW the code on the site is question is arse backwards and missing some attributes that puts the extra text onto the fullsize image description. It should read like this..

 

<li><a title="fullsize description text" href="images/work/fullsize1.jpg" class="work-item-preview" rel="prettyPhoto"><img src="images/work/thumb1.jpg" alt="work1"/></a></li>

 

Another thing worth fixing..

Despite using cufon javascript to implement a custom font the designer opted to use an image for the logo and personally think they missed a trick there. Search engines after all have no eyes.

  • Author

Sogo7 this isn't my website. I just want to make one like this for a friend of mine (my friend found this website he wants me to make one like this

 

 

sash_oo7 OK thanks so can i make it instead of having 'next' and 'Prev' can I have Home About Contact etc links?

 

Oh the guy has changed the website to Word Press

Edited by Vulcan

  • Author

Hi,

 

I'm wanting to make the purple box go in line with the dark silver box (this will be the logo).

Also with the menu cant seemed to add it next to the logo area but to the right of it.

 

 

Here is the site Click Here

Edited by Vulcan

  • Author

 

OK thanks sash_oo7.

Are you able to sort out the code below.

 

I'm wanting to make the purple box go in line with the dark silver box (this will be the logo).

Also with the menu cant seemed to add it next to the logo area but to the right of it.

 

 

Here is the site Click Here

  • Author

I haven't got that far yet. I just have an issue with the CSS. For the logo and the menu. Its not going where I want it to be.

  • Author

I haven't got that far yet. I just have an issue with the CSS. For the logo and the menu. Its not going where I want it to be.

 

 

Here is the css and HTML

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">


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

<div id="wrapper">
<div id="header">
<div id="logo"></div>
<ul id="menu">
		<li class="active"><a href="index.html#home">Home</a></li>
           <li><a href="index.html#thephotographer">The Photographer</a></li> 
		<li><a href="index.html#portfolio">Portfolio</a></li>
  			<li><a href="index.html#work">Monthly Tips</a></li>   			
           <li><a href="index.html#contact">Contact</a></li>
	</ul>
</div> 
<!---- Header Ends ----->


</div> <!---- Wrapper Ends ----->

</body>
</html>

 

@import "reset.css";
body {
   background: none repeat scroll 0 0 #98BB6z;
background-image:url(bg.png);
   color: #000000;
   font-family: Arial;
   font-size: 12px;
   line-height: 16px;
   margin: 0;
   padding: 0;
}


#wrapper {
width: 1000px;
height: 670px;
margin: 0 auto;
margin-top: 100px;
background-image: url(mid_bg.png);	

}

#header {
margin:30px;
height:100px;
width: 945px;

}


 #logo {
width: 350px;
height: 100px;
background-color: #C0C;	

}


#navbar{
margin-top: 50px;	

}

ul#menu {
float: right;	
height:45px;
margin:14px 20px 0 0;
padding:0 15px 0 0;
   -moz-border-radius:3px;
-webkit-border-radius:3px; 
 border-radius:3px
}

ul#menu{float:right;height:45px;margin:14px 20px 0 0;padding:0 15px 0 0;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
ul#menu li{float:left;padding:16px 0 0 15px;font-weight:bold;font-size:13px;text-transform:uppercase;color:#999;text-shadow:1px 1px 1px #fff;list-style:none}
ul#menu li a{color:#999;text-decoration:none}
ul#menu li a:hover{color:#555; border-bottom:2px solid #e3e3e3; border-margin:10px;}
ul#menu li.active a{color:#59c907;}

u want logo and nav to be on the same line?

 

if thats so make some changes in ur css

 

#header {
       margin:30px;
       height:100px;
       width: 945px;
       overflow:hidden;
}

 

 #logo {
       width: 350px;
       height: 100px;
       background-color: #C0C; 
       margin:50px 0 0 0;/*increase this if needed  */

}

 

 

ul#menu {
       float: right;   
       height:45px;
       margin:0px 20px 0 0;
       padding:0 15px 0 0;
   -moz-border-radius:3px;
       -webkit-border-radius:3px; 
        border-radius:3px
}

Edited by sash_oo7

  • Author

Thanks sash_oo7 but the nav bar doesn't show also the logo div isn't staying with the box / header div.

Edited by Vulcan

  • Author

Just to say I'm trying to get ever coding with inside the border (silver area). Every thing there seems to go up to the wrapper edge.

post-24649-0-93032300-1343863848_thumb.png

Edited by Vulcan


<div id="wrapper">
<div id="header">
<div id="logo"></div>
<ul id="menu">
		<li class="active"><a href="index.html#home">Home</a></li>
           <li><a href="index.html#thephotographer">The Photographer</a></li> 
		<li><a href="index.html#portfolio">Portfolio</a></li>
  			<li><a href="index.html#work">Monthly Tips</a></li>   			
           <li><a href="index.html#contact">Contact</a></li>
	</ul>
<div class="clear"></div>
</div> 
<!---- Header Ends ----->


</div> <!---- Wrapper Ends ----->





<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

 

@import "reset.css";
body {
   background: none repeat scroll 0 0 #98BB6z;
background-image:url(bg.png);
   color: #000000;
   font-family: Arial;
   font-size: 12px;
   line-height: 16px;
   margin: 0;
   padding: 0;
}


#wrapper {
width: 1000px;
height: 670px;
margin: 0 auto;
margin-top: 100px;
background-image: url(mid_bg.png);	

}

#header {
margin:30px;
height:100px;
width: 945px;


}


 #logo {
width: 350px;
height: 100px;
background-color: #C0C;
margin:50px 0 0 0;
float:left;	

}


#navbar{
margin-top: 70px;	

}

.clear{clear:both;}

ul#menu{float:right;height:45px;margin:74px 20px 0 0;padding:0 15px 0 0;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
ul#menu li{float:left;padding:16px 0 0 15px;font-weight:bold;font-size:13px;text-transform:uppercase;color:#999;text-shadow:1px 1px 1px #fff;list-style:none}
ul#menu li a{color:#999;text-decoration:none}
ul#menu li a:hover{color:#555; border-bottom:2px solid #e3e3e3; border-margin:10px;}
ul#menu li.active a{color:#59c907;}

  • Author

Thanks you :)

 

Why does the site look so messy when you are designing it but then when you look at it in the browser its how you want it?

Thanks you :)

 

Why does the site look so messy when you are designing it but then when you look at it in the browser its how you want it?

 

Depends what you're viewing the site in while you design it.

You should ALWAYS only check the site in a browser as this is it's native environment and where it will be seen in the end.

This site is relatively simple but consists of 4 pages.

 

The easiest way to achieve this is to go with a Wordpress site, and pick a theme that is designed for displaying scrolling photos - see http://bokeh3.photocrati.com/

 

Doug

 

 

 

 

 

 

Hello,

 

Anyone able to help me. I have a friend who wants a single page website for his photo portfolio. He wants it to make it like this one CLICK HERE.

 

Any idea on how I can do it?

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.