Minimalistic Web Template

Keep things simple with this Minimalistic Website Template. Easy to customize and easy to navigate, this is the template of choice if you're looking for a fuss-free solution to building your new website.​

​

​

​

Download - View​

Web design sub pages:






This website template will work with all modern web browsers.


What is included:

• HTML files source code
• CSS file source code
• Images: compressed versionsminimalisticwebtemplate
• The design source, in this case, the PSD files
• Sliced PSD file (Photoshop source design)

Third party Stock Photos licensed from Veer:





Third party fonts used:
Font details coming soon.......

Credits:
Credit details coming soon......

Version 2

 

Minimalistic Website Template upgraded to version 2: simplified the navigation structure by removing all arrows and the scroll bars.

 

It's hard to solve your problem without your code. Do you have a live version of the template hosted on the internet? If not just add it to a zip file as an attachment. I think your problem can easily be solved by adding or removing some z-index value in the css file.

 

Just as I thought it's a z-index problem:
Edit this in your style.css file change the z-index value of the navigation tag from 9990 to 9:

Code:

ul.navigation {
    background-image: url("../images/border-dashed.gif");
    background-position: center top;
    background-repeat: repeat-x;
    list-style-type: none;
    margin: 0 0 50px 8px;
    padding: 5px 0 0;
    position: relative;
    width: 200px;
    z-index: 9;
}

I just tested the code change with firebug it should work with this change if not let me know.

 

Minimalistic Website Template updated to Version 3.
A sample error fix added an extra " in this part:

 

There are many ways to solve your last problem, here is an easy one: just add a bunch of line breaks inside the end of the div with the class name content.

Also change your other line breaks from:

to

 

I would write the HTML br tag without the forward slash / like this <br> (easy to remember and not mess up)
The line break tag in HTML is a empty tag meaning there is no END TAG
A paragraph tag would have an open and close like this

Code:

 <p>some info</p>

if you were working in XHTML then the tag would look like this

Code:

<br> tag must be properly closed, like this: <br />

You might also consider using as a charset

Code:

<meta charset="UTF-8" />
 
instead of
 
<meta charset="iso-8859-1" />

as you are taking requests for paintings from people from anywhere on earth.
"ISO-8859-1" is the Latin-1 (western European languages) encoding. Most non-English files (text for headings, titles, prompts, button labels, etc.) are in UTF-8. Which means that when when someone of a non-English location is viewing your page or uses the contact page (if it had a form) the gibberish would be reduced. This would enlarge the viewing audience and possible buyers.

 

I would agree UTF8 is the better choice; we use UTF8 for this website, and UTF8 or iso-8859-1 for the templates. We should be more consistent with all website templates, though, and just stick to UTF8.

When it comes to the line break we use <br /> for backwards compatibility, however it is starting to become practically unnecessary. (Example serve your website in XHTML+XML without having to recode everything, but your DTD)
You can use <br /> or <br> in this website template, however you cannot do this in HTML or XHTML:

The /> may only be used optionally for void elements.
Void elements can not contain any content, this counts for HTML as well as XHTML, XML and HTML5.

It's also best to be consistent on one page (or better, the whole website) and stick to <br>, <br/>, but not both.

Note this website template is coded with some HTML5 elements, but will work with a browser that only supports HTML4 because of the backwards compatibility nature of HTML5 or the fall back browser support for the elements.

 

Hi Cahyle,

Can you post a screenshot and/or tell us which browser and operating system you use? It's going to be easier for others to help you out that way.