Web design links and resources

I use 123-reg for all my domains. Then hosting with 5quid hosting.

PostRe: Web design links and resources by **Mafro** » Fri Oct 05, 2012 6:47 pm

Also use 123-reg (for PCS). Cheap, and never had any problems.

Friend is asking for help with a website, they want to set up an online business that can accept payment via credit cards, I know most large hosting companies provide built in widgets but does anyone know who offers the best one? Or are they all fairly similar?

I'm using Aptana to create a website and the 960 grid system.

This is how it looks in the IE preview: [1] http://i.imgur.com/rRh80az.jpg

This is how it looks in the Firefox preview: [2] http://i.imgur.com/4YiOJ5X.jpg

Here is the HTML: [3] http://i.imgur.com/j6BZJOa.png

Here is the CSS: [4] http://i.imgur.com/F8vJVY9.png and [5] http://i.imgur.com/2RG1dtD.png

I don't understand why the gap between the navigation and the header image are so different between browsers.

Any help is appreciated.

I posted it on reddit first and couldn't be arsed copying it over. I'll do that now.

HTML

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css">
<link rel="stylesheet" type="text/css" media="all" href="css/text.css">
<link rel="stylesheet" type="text/css" media="all" href="css/960.css">
      
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>New Web Project</title>
      

    </head>
    <body background="images/bg.jpg">
       
      
        
      <div id="wrapper" class="container_16">
         <div id="navigation" class="grid_16">
            <div id="nav" class="grid_16">
               <div class="grid_2 alpha"><a href="index.html" >home</a></div>
               <div class="grid_2"><a href="cottage.html">caladh reidh</a></div>
               <div class="grid_2"><a href="location.html" >location</a></div>
               
               <div id="logo" class="grid_4"><a href="imdex.html"><img src="images/logo.png" alt="Caladh Reidh"> </a></div>
            
               <div class="grid_2"><a href="availability.html" >availability</a></div>
               <div class="grid_2"><a href="enquiry.html" >enquiry</a></div>
               <div class="grid_2 omega"><a href="links.html" >links</a></div>
               </div>
            
         </div>
         
         <div id="header-image" class="grid_16">
            <img src="images/header-image1.jpg" alt="Plockton">
            
         </div>
           
            
              
   
            
            
         
         
           
         
        
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      </div>
    </body>
</html>

CSS

Code: Select all

/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 960px;
}


   
#main-text
{
   color:#FFFFFF;
   text-align:center;
   margin-top:213px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:13px;
   
   
}

#navigation  {
   text-align:center;
   margin:0px;
   
}


#nav {
   width:auto;
   float:left;
   margin: 0 0 3em 0;
   padding: 0;
   list-style: none;
   font: Arial;
   font-size:15px;
   margin-top: 30px;
   text-decoration: none;
}



#nav a{
   text-decoration: none;
   color: #1c82b5;
   
   
}

#nav a:hover{
   color:#CCCCCC;
}



#logo {
   text-align:center;
   margin-top:0px;
}

#header-image {
   margin-top:0px;
   width:940px;
   height:380px;
}



/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12,
.push_13, .pull_13,
.push_14, .pull_14,
.push_15, .pull_15 {
  position: relative;
}

.container_12 .grid_3,
.container_16 .grid_4 {
  width: 220px;
}

.container_12 .grid_6,
.container_16 .grid_8 {
  width: 460px;
}

.container_12 .grid_9,
.container_16 .grid_12 {
  width: 700px;
}

.container_12 .grid_12,
.container_16 .grid_16 {
  width: 940px;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

/* `Grid >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .grid_1 {
  width: 40px;
}

.container_16 .grid_2 {
  width: 100px;
}

.container_16 .grid_3 {
  width: 160px;
}

.container_16 .grid_5 {
  width: 280px;
}

.container_16 .grid_6 {
  width: 340px;
}

.container_16 .grid_7 {
  width: 400px;
}

.container_16 .grid_9 {
  width: 520px;
}

.container_16 .grid_10 {
  width: 580px;
}

.container_16 .grid_11 {
  width: 640px;
}

.container_16 .grid_13 {
  width: 760px;
}

.container_16 .grid_14 {
  width: 820px;
}

.container_16 .grid_15 {
  width: 880px;
}

/* `Prefix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_3,
.container_16 .prefix_4 {
  padding-left: 240px;
}

.container_12 .prefix_6,
.container_16 .prefix_8 {
  padding-left: 480px;
}

.container_12 .prefix_9,
.container_16 .prefix_12 {
  padding-left: 720px;
}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
  padding-left: 80px;
}

.container_12 .prefix_2 {
  padding-left: 160px;
}

.container_12 .prefix_4 {
  padding-left: 320px;
}

.container_12 .prefix_5 {
  padding-left: 400px;
}

.container_12 .prefix_7 {
  padding-left: 560px;
}

.container_12 .prefix_8 {
  padding-left: 640px;
}

.container_12 .prefix_10 {
  padding-left: 800px;
}

.container_12 .prefix_11 {
  padding-left: 880px;
}

/* `Prefix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .prefix_1 {
  padding-left: 60px;
}

.container_16 .prefix_2 {
  padding-left: 120px;
}

.container_16 .prefix_3 {
  padding-left: 180px;
}

.container_16 .prefix_5 {
  padding-left: 300px;
}

.container_16 .prefix_6 {
  padding-left: 360px;
}

.container_16 .prefix_7 {
  padding-left: 420px;
}

.container_16 .prefix_9 {
  padding-left: 540px;
}

.container_16 .prefix_10 {
  padding-left: 600px;
}

.container_16 .prefix_11 {
  padding-left: 660px;
}

.container_16 .prefix_13 {
  padding-left: 780px;
}

.container_16 .prefix_14 {
  padding-left: 840px;
}

.container_16 .prefix_15 {
  padding-left: 900px;
}

/* `Suffix Extra Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_3,
.container_16 .suffix_4 {
  padding-right: 240px;
}

.container_12 .suffix_6,
.container_16 .suffix_8 {
  padding-right: 480px;
}

.container_12 .suffix_9,
.container_16 .suffix_12 {
  padding-right: 720px;
}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
  padding-right: 80px;
}

.container_12 .suffix_2 {
  padding-right: 160px;
}

.container_12 .suffix_4 {
  padding-right: 320px;
}

.container_12 .suffix_5 {
  padding-right: 400px;
}

.container_12 .suffix_7 {
  padding-right: 560px;
}

.container_12 .suffix_8 {
  padding-right: 640px;
}

.container_12 .suffix_10 {
  padding-right: 800px;
}

.container_12 .suffix_11 {
  padding-right: 880px;
}

/* `Suffix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .suffix_1 {
  padding-right: 60px;
}

.container_16 .suffix_2 {
  padding-right: 120px;
}

.container_16 .suffix_3 {
  padding-right: 180px;
}

.container_16 .suffix_5 {
  padding-right: 300px;
}

.container_16 .suffix_6 {
  padding-right: 360px;
}

.container_16 .suffix_7 {
  padding-right: 420px;
}

.container_16 .suffix_9 {
  padding-right: 540px;
}

.container_16 .suffix_10 {
  padding-right: 600px;
}

.container_16 .suffix_11 {
  padding-right: 660px;
}

.container_16 .suffix_13 {
  padding-right: 780px;
}

.container_16 .suffix_14 {
  padding-right: 840px;
}

.container_16 .suffix_15 {
  padding-right: 900px;
}

/* `Push Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .push_3,
.container_16 .push_4 {
  left: 240px;
}

.container_12 .push_6,
.container_16 .push_8 {
  left: 480px;
}

.container_12 .push_9,
.container_16 .push_12 {
  left: 720px;
}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
  left: 80px;
}

.container_12 .push_2 {
  left: 160px;
}

.container_12 .push_4 {
  left: 320px;
}

.container_12 .push_5 {
  left: 400px;
}

.container_12 .push_7 {
  left: 560px;
}

.container_12 .push_8 {
  left: 640px;
}

.container_12 .push_10 {
  left: 800px;
}

.container_12 .push_11 {
  left: 880px;
}

/* `Push Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .push_1 {
  left: 60px;
}

.container_16 .push_2 {
  left: 120px;
}

.container_16 .push_3 {
  left: 180px;
}

.container_16 .push_5 {
  left: 300px;
}

.container_16 .push_6 {
  left: 360px;
}

.container_16 .push_7 {
  left: 420px;
}

.container_16 .push_9 {
  left: 540px;
}

.container_16 .push_10 {
  left: 600px;
}

.container_16 .push_11 {
  left: 660px;
}

.container_16 .push_13 {
  left: 780px;
}

.container_16 .push_14 {
  left: 840px;
}

.container_16 .push_15 {
  left: 900px;
}

/* `Pull Space >> Global
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_3,
.container_16 .pull_4 {
  left: -240px;
}

.container_12 .pull_6,
.container_16 .pull_8 {
  left: -480px;
}

.container_12 .pull_9,
.container_16 .pull_12 {
  left: -720px;
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
  left: -80px;
}

.container_12 .pull_2 {
  left: -160px;
}

.container_12 .pull_4 {
  left: -320px;
}

.container_12 .pull_5 {
  left: -400px;
}

.container_12 .pull_7 {
  left: -560px;
}

.container_12 .pull_8 {
  left: -640px;
}

.container_12 .pull_10 {
  left: -800px;
}

.container_12 .pull_11 {
  left: -880px;
}

/* `Pull Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .pull_1 {
  left: -60px;
}

.container_16 .pull_2 {
  left: -120px;
}

.container_16 .pull_3 {
  left: -180px;
}

.container_16 .pull_5 {
  left: -300px;
}

.container_16 .pull_6 {
  left: -360px;
}

.container_16 .pull_7 {
  left: -420px;
}

.container_16 .pull_9 {
  left: -540px;
}

.container_16 .pull_10 {
  left: -600px;
}

.container_16 .pull_11 {
  left: -660px;
}

.container_16 .pull_13 {
  left: -780px;
}

.container_16 .pull_14 {
  left: -840px;
}

.container_16 .pull_15 {
  left: -900px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after,
.container_16:before,
.container_16:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after,
.container_16:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12,
.container_16 {
  zoom: 1;
}

The difference seems to just be between the Aptana previews and when I test in a real browser is shows as the Firefox version. Which isn't what I want. Not sure why there is such a big gap above the image.

I need both new hosting and want to register some new domains.

What are the current suggestions/flavored hosts?

I'm with Register1 now but their control panel is a load of shite.

Thinking of getting some domains with 123-reg, how are Apis for hosting?

Curious to know what people use these days, it's all a bit of a mystery to me, especially AWS hosting as I have no idea what I'll be paying!

For .com domains I use Hover. The $15 per year fee includes domain privacy, if you were to get the same on 123-reg it would cost £14.99 which right now is around $23.

Apis Networks has their datacenter located in Atlanta, Georgia. If your traffic is primarily going to be UK based it's better to go with a company that uses datacenters in the UK. I use Tsohost who are based just outside London and they use cPanel for their control panel (demo).

systematic wrote:For .com domains I use Hover. The $15 per year fee includes domain privacy, if you were to get the same on 123-reg it would cost £14.99 which right now is around $23.

Apis Networks has their datacenter located in Atlanta, Georgia. If your traffic is primarily going to be UK based it's better to go with a company that uses datacenters in the UK. I use Tsohost who are based just outside London and they use cPanel for their control panel (demo).

Silly question but what are the differences between cPanel and cloud based hosting on there?

£2.99 a month seems alright.

Bumping my last question, anyone?

Cloud and cPanel Hosting; What's The Difference?

PostRe: Web design links and resources by **Holpil** » Thu Aug 08, 2013 4:41 pm

Crazydomains.co.uk is selling .COM's for £1 each.

That's right.

I've had a few .co.uk's from them and they're good. I can see once they've captured a good chunk of the market they'll raise their prices, hence why it's worth maybe taking a 5 year+ registration on a domain you think might have some longevity.

PostRe: Web design links and resources by **BTB** » Fri Aug 09, 2013 9:56 am

Not quite sure where to post this, but what would be the easiest way to embed this onto a site via HTML, preferably with an embed code

I've done embed codes before but they were all for images, not animated pages.

http://cal-s3-designstore.s3.amazonaws. ... aphic.html

ffs anny

I just typed that on an ipad as well.

PostRe: Web design links and resources by **BTB** » Fri Aug 09, 2013 10:34 am

Thanks guys!

Alpha eX wrote:
systematic wrote:For .com domains I use Hover. The $15 per year fee includes domain privacy, if you were to get the same on 123-reg it would cost £14.99 which right now is around $23.

Apis Networks has their datacenter located in Atlanta, Georgia. If your traffic is primarily going to be UK based it's better to go with a company that uses datacenters in the UK. I use Tsohost who are based just outside London and they use cPanel for their control panel (demo).

Silly question but what are the differences between cPanel and cloud based hosting on there?

£2.99 a month seems alright.

We use tsohost at work to host a small network of video content, I've used the cloud hosting backend a lot and its pretty awesome. It saves a lot of time and even if something goes to gooseberry fool it takes minutes to just delete and recreate sites, set up a test site before doing a live site etc without needing to contact any support at all. We're on the Ultimate hosting. Also for some reason dns resolution seems to only take a few hours in tsohost, I guess this has something to do with how or where they manage their domains if you move them to them.

Generally you don't need cpanel, yeah it's proprietary but it's good. If you have typical requirements and like to save time just try it out. It's monthly payment anyway.

It's really quite fast as well. Not as quick as dedicated obviously but really very good.

BTB wrote:Thanks guys!

Just interested, where did you inherit that from in your workflow, looks like someone created it either from scratch or one of the new Adobe tools. It's something I'd like to get into.

PostRe: Web design links and resources by **BTB** » Fri Aug 09, 2013 12:22 pm

Green Gecko wrote:
BTB wrote:Thanks guys!

Just interested, where did you inherit that from in your workflow, looks like someone created it either from scratch or one of the new Adobe tools. It's something I'd like to get into.

I didn't make it/don't know the person who did, so not too much help i'm afraid. I work for a company that do content marketing/distribution and this has been made by a client.

I think they used the new adobe tools to make it. Would be a lot easier if it was an image/gif for when i'm distributing it though...

Web design links and resources

Who is online

Affiliates