My first website - Advice please.

Report · Feb 12, 2017

Good morning

I am mid way through completing my first website and would like some advice on how I can improve (if required, as it seems to be working) on my code. I know there is always room for improvement - please be kind.

The issues I am currently having:

My horizontal list in the footer will not "inline"

Could someone kindly direct me to where I can find a contact sheet template?

Here is my HTML for index page:

<!doctype html>

<html>

<head>

</head>

<body>

John with a J Photography

</header>

<ul>

<li><a href="about.html">About</a></li>

<li><a href="portfolio.html">Portfolio</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<p id="above-phots">These are a few shots I have taken over the years since taking up Photography. Please look at my Portfolio for more examples of my work.</p>

<p id="title">Whitstable Harbour</p>

<p id="content">A small fishing town famous for its oysters, with a working harbour. Whitstable Harbour is full of history and character. This shot was taken with a Nikon D3200, Tamron 70-300mm lens f4.0 1/800. The image has some editing using Adobe Lightroom.</p>

</div>

<p id="title">Fradley Junction</p>

<p id="content">Fradley Junction is where the Coventry Canal joins the Trent and Mersey Canal. It's one of the busiest places on the waterways where canals, boats and people meet. This shot was taken with a Nikon D750, Nikon 24-70mm. The image has some editing using Adobe Lightroom.</p>

</div>

<p id="title">Fradley Junction Tree</p>

<p id="content">Lone tree also at Fradley Junction where the Coventry Canal joins the Trent and Mersey Canal. This shot was taken with a Nikon D750, Nikon 24-70mm. The image has some editing using Adobe Lightroom.</p>

</div>

<p id="title">Chapel Down Winery (Tenterden)</p>

<p id="content">This shot was taken with a Nikon D750, Nikon 24-70mm. The image has some editing using Adobe Lightroom.</p>

</div>

<p id="title">Atlas Way (Birmigham)</p>

<p id="content">This shot was taken with a Nikon D3200, Nikon 18-55mm f4.6. The image has some editing using Adobe Photoshop.</p>

</div>

<p id="title">Spoons</p>

<p id="content">This shot was taken with a Nikon D3200, Nikon 50mm f1.4. The image has some editing using Adobe Photoshop.</p>

</div>

<p id="main-info-text">Please get in touch through my <a href="contact.html">CONTACT</a> page if you would to see if I can help you with any of your photographic needs.</p>

</div>

<li><a href="#">Twitter.</a></li>

<li><a href="#">Facebook.</a></li>

<li><a href="#">Linkedin.</a></li>

</ul>

</div>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------------------

Here is the CSS:

* {

margin: 0px;

padding: 0px;

}

#wrap {

border: 1px solid #949393;

height: auto;

width: 950px;

margin: auto;

}

#header {

background-color: #949393;

height: 80px;

text-align: center;

font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

font-weight: 300;

font-size: 75px;

}

#menu {

font-size: 10px;

text-decoration: none;

background-color: #949393;

height: 50px;

text-align: center;

}

#menu ul {

list-style: none;

}

#menu ul li {

display: inline-block;

font-size: 25px;

margin: 10px;

}

#menu ul li a:hover {

color: #D0CDCD;

}

a:hover, a:visited, a:link, a:active {

text-decoration: none;

color:#F4A00E;

}

#main1 {

width: 930px;

height: 800px;

border: 0px solid #3CAF19;

margin: auto;

margin-top: 15px;

}

#first {

/*background-color: #F60C10;*/

float: left;

width: 300px;

height: 300px;

margin: 5px;

}

#above-phots {

font-size: 20px;

padding: 5px;

font-weight: 300;

text-align: center;

font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

}

#title {

color: #F4A00E;

font-size: 18px;

font-weight: bold;

padding: 10px;

}

#content {

text-align: justify;

font-size: 16px;

font-weight: 300;

padding: 10px;

}

#second {

/*background-color: #F60C10;*/

float: left;

width: 300px;

height: 300px;

margin: 5px;

}

#third {

/*background-color: #F60C10;*/

float: left;

width: 300px;

height: 400px;

margin: 5px;

}

#fourth {

/*background-color: #F60C10;*/

float: left;

width: 300px;

height: 200px;

margin: 5px;

}

#fifth {

/*background-color: #F60C10;*/

float: left;

width: 300px;

height: 200px;

margin: 5px;

}

#sixth {

/*background-color: #F60C10;*/

float: left;

width: 300px;

height: 200px;

margin: 5px;

}

#main-info {

width: 930px;

height: 30px;

border: 0px solid #2827CF;

margin: auto;

margin-top: 15px;

margin-bottom: 15px;

}

#main-info-text {

text-align: center;

padding: 5px;

}

#seventh {

float: left;

margin: 5px;

}

#seventh img {

margin: 5px;

padding: 5px;

}

#footer {

height: 80px;

background-color: #949393;

width: 900;

margin: auto;

margin-top: 15px;

border: 0px solid #3CAF19;

text-align: center;

font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

font-weight: 300;

}

.copyright_text {

margin: 25px;

float: left;

}

.social {

list-style-type: none;

float: right;

margin: 5px 20px;

list-style-type: inline;

}

.social li a {

}

#contact {

margin-top: 100px;

width: 50px;

}

Again many thanks for taking the time to look at this and reply.

Regards

John

Report · Feb 12, 2017

Try adding the below css:

.social li {

display: inline;

}

Also you should only use an 'id' once on your page. classes can be used multiple times. So all your 'title' and 'content' ids I would convert into classes.

There is no html closing </br> tag so replace </br> with <br> in the text below:

Youre also missing a width attribute like px or % (if you need it) on your footer css selector:

width: 900;

Not sure why you are declaring a border of 0px?

border: 0px solid #2827CF;

In most cases there is no need to set height on your css selectors, that will end up causing you a lot of issues, let the content determine the height of the container.

You can set a min-height or a specific height when you know what the height of the container will be say for instance if you set it at a specific height for a vertical scrolling area or you might know the height of an image that is inserted into a container.

Theres no need to keep setting the same font family on your selectors:

font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

You can just set it once on the body tag:

body {

font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

}

Report · Feb 13, 2017

Many thanks for your help again.

I have made all the recommended changes and have also learnt something new.

When might be the only time you would use the "id" attribute?

Cheers

John

Report · Feb 13, 2017

IDs are unique identifiers. Can be used only 1 x per page.

You use an ID when you need to target an element . For example as a link or for a JavaScript event.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 13, 2017

Hi Osgood

Many thanks for your help and advice, very much appreciated.

The 0px border, was originally 1px and I used it as a visual reference.

I will look at my code when I get back from work tonight and make some amendments.

Regards

John

Report · Feb 13, 2017

Something to keep in mind:

On the web, fonts set in css while only using the font-family property will only appear for people who have those fonts installed on their system.

If you want to use fonts that aren't part of the Web Safe list CSS Web Safe Fonts you will need to obtain font files licensed for web use (like those at Google.com/fonts) and use the @font-face css rules CSS3 @font-face Rule to attach them to your site.

That way, even if the viewer of your site doesn't have a given font installed, you would be linking to the font files and their browser would be able to read them.

My first website - Advice please.

1 Correct answer