Web Hosting Talk






PDA

View Full Version : HTML/CCS Help! Please Read!

Murdok09
07-10-2007, 11:50 PM
I am building a website and I need a nice template. I found a good looking one, but it is MUCH too complicated to work with (for me).

I need sites with pre-made templates or someone to do EXTENSIVE html and css work on my template.

I would like the following:
Three Columns
Multiple Colors
Easy to Customize

If you would like to see the code here, let me know.
Josh-D
07-11-2007, 12:19 AM
So you want to just use a premade template thats easy to edit? do you have macromedia or any html editors?
Friend07
07-11-2007, 04:11 AM
You can find very nice looking and easy to customize, free templates here, (http://www.oswd.org)
Here (http://www.oswd.org/designs/search/advanced/?validation=any&contrast=any&images=any&color=any&css=any&columns=3) is the direct link to the templates, containing three columns.
Murdok09
07-11-2007, 05:33 AM
I only have Frontpage and NVU. I want Dreamweaver, but I won't pay $300 for it.

I already have a layout from that site you gave me that I like, I just cannot edit it. It has some weird coding in it. You can't delete the header without messing up all the css and order to the page. If you want, I can post the code in question here, or ask individually.
Friend07
07-11-2007, 05:48 AM
The only thing you really need is Notepad. I am using Notepad++.
About the header - the easiest way is to make a new one with the same size and replace the existing one. If you have any problems, you can always post them here or in a private message.
Murdok09
07-11-2007, 06:02 PM
Here's the default header (+around 10,000 extra characters):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<!-- Version: Multiflex-3 Update-2 / Layout-4 -->
<!-- Date: November 29, 2006 -->
<!-- Author: G. Wolfgang -->
<!-- License: Fully open source without restrictions. -->
<!-- Please keep footer credits with a link to -->
<!-- G. Wolfgang (www.1-2-3-4.info). Thank you! -->

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="3600" />
<meta name="revisit-after" content="2 days" />
<meta name="robots" content="index,follow" />
<meta name="publisher" content="Your publisher infos here ..." />
<meta name="copyright" content="Your copyright infos here ..." />
<meta name="author" content="Design: G. Wolfgang www.1-2-3-4.info / Author: Your author infos here ..." />
<meta name="distribution" content="global" />
<meta name="description" content="Your page description here ..." />
<meta name="keywords" content="Your keywords, keywords, keywords, here ..." />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/layout4_setup.css" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/layout4_text.css" />
<link rel="icon" type="image/x-icon" href="./img/favicon.ico" />
<title>Multiflex-3 Update-2 / Layout-4</title>
</head>

<!-- Global IE fix to avoid layout crash when single word size wider than column width -->
<!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]-->

<body>
<!-- Main Page Container -->
<div class="page-container">

<!-- For alternative headers START PASTE here -->

<!-- A. HEADER -->
<div class="header">

<!-- A.1 HEADER TOP -->
<div class="header-top">

<!-- Sitelogo and sitename -->
<a class="sitelogo" href="#" title="Go to Start page"></a>
<div class="sitename">
<h1><a href="index.html" title="Go to Start page">MULTIFLEX&bull;3<span style="font-weight:normal;font-size:50%;">&nbsp;update-2</span></a></h1>
<h2>Open Source Template</h2>
</div>

<!-- Navigation Level 0 -->
<div class="nav0">
<ul>
<li><a href="#" title="Pagina home in Italiano"><img src="./img/flag_italy.gif" alt="Image description" /></a></li>
<li><a href="#" title="Homepage auf Deutsch"><img src="./img/flag_germany.gif" alt="Image description" /></a></li>
<li><a href="#" title="Hemsidan p&aring; svenska"><img src="./img/flag_sweden.gif" alt="Image description" /></a></li>
</ul>
</div>

<!-- Navigation Level 1 -->
<div class="nav1">
<ul>
<li><a href="#" title="Go to Start page">Home</a></li>
<li><a href="#" title="Get to know who we are">About</a></li>
<li><a href="#" title="Get in touch with us">Contact</a></li>
<li><a href="#" title="Get an overview of website">Sitemap</a></li>
</ul>
</div>
</div>

<!-- A.2 HEADER MIDDLE -->
<div class="header-middle">

<!-- Site message -->
<div class="sitemessage">
<h1>EASY &bull; FRESH &bull; ROBUST</h1>
<h2>The third generation Multiflex is here, now with cooler design features and easier code.</h2>
<h3><a href="#">&rsaquo;&rsaquo;&nbsp;More details</a></h3>
</div>
</div>

<!-- A.3 HEADER BOTTOM -->
<div class="header-bottom">

<!-- Navigation Level 2 (Drop-down menus) -->
<div class="nav2">

<!-- Navigation item -->
<ul>
<li><a href="index.html">Overview</a></li>
</ul>

<!-- Navigation item -->
<ul>
<li><a href="#">Page Layouts<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="layout1.html">Layout-1 (1-col)</a></li>
<li><a href="layout2.html">Layout-2 (2-col)</a></li>
<li><a href="layout3.html">Layout-3 (2-col)</a></li>
<li><a href="layout4.html">Layout-4 (3-col)</a></li>
<li><a href="layout5.html">Layout-5 (3-col)</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<!-- Navigation item -->
<ul>
<li><a href="#">Header Layouts<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="header1.html">Header-1 (T+M+B)</a></li>
<li><a href="header2.html">Header-2 (T+M)</a></li>
<li><a href="header3.html">Header-3 (T+B)</a></li>
<li><a href="header4.html">Header-4 (M+B)</a></li>
<li><a href="header5.html">Header-5 (T)</a></li>
<li><a href="header6.html">Header-6 (M)</a></li>
<li><a href="header7.html">Header-7 (B)</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>

<!-- A.4 HEADER BREADCRUMBS -->

<!-- Breadcrumbs -->
<div class="header-breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Templates</a></li>
<li>Multiflex-3</li>
</ul>

<!-- Search form -->
<div class="searchform">
<form action="index.html" method="get">
<fieldset>
<input name="field" class="field" value=" Search..." />
<input type="submit" name="button" class="button" value="GO!" />
</fieldset>
</form>
</div>
</div>
</div>

<!-- For alternative headers END PASTE here -->

<!-- B. MAIN -->
<div class="main">

<!-- B.1 MAIN NAVIGATION -->
<div class="main-navigation">

<!-- Navigation Level 3 -->
<div class="round-border-topright"></div>
<h1 class="first">Title</h1>

<!-- Navigation with grid style -->
<dl class="nav3-grid">
<dt><a href="#">Navlink 11</a></dt>
<dt><a href="#">Navlink 12</a></dt>
<dd><a href="#">Navlink 121</a></dd>
<dd><a href="#">Navlink 122</a></dd>
<dd><a href="#">Navlink 123</a></dd>
<dt><a href="#">Navlink 13</a></dt>
<dt><a href="#">Navlink 14</a></dt>
<dt><a href="#">Navlink 15</a></dt>
</dl>

<!-- Title -->
<h1>Title</h1>

<!-- Subtitle -->
<h2>Subtitle</h2>

<!-- Navigation with bullets -->
<dl class="nav3-bullet">
<dt><a href="#">Navlink 11</a></dt>
<dt><a href="#">Navlink 12</a></dt>
<dd><a href="#">Navlink 121</a></dd>
<dd><a href="#">Navlink 122</a></dd>
<dd><a href="#">Navlink 123</a></dd>
<dt><a href="#">Navlink 13</a></dt>
<dt><a href="#">Navlink 14</a></dt>
<dt><a href="#">Navlink 15</a></dt>
</dl>

<!-- Subtitle -->
<h2>Subtitle</h2>

<!-- Navigation without bullets -->
<dl class="nav3-nobullet">
<dt><a href="#">Navlink 11</a></dt>
<dt><a href="#">Navlink 12</a></dt>
<dd><a href="#">Navlink 121</a></dd>
<dd><a href="#">Navlink 122</a></dd>
<dd><a href="#">Navlink 123</a></dd>
<dt><a href="#">Navlink 13</a></dt>
<dt><a href="#">Navlink 14</a></dt>
<dt><a href="#">Navlink 15</a></dt>
</dl>

<!-- Login -->
<h1>Login</h1>
<div class="loginform">
<form method="post" action="index.html">
<p><input type="hidden" name="rememberme" value="0" /></p>
<fieldset>
<p><label for="username_1" class="top">User:</label><br />
<input type="text" name="username_1" id="username_1" tabindex="1" class="field" onkeypress="return webLoginEnter(document.loginfrm.password);" value="" /></p>
<p><label for="password_1" class="top">Password:</label><br />
<input type="password" name="password_1" id="password_1" tabindex="2" class="field" onkeypress="return webLoginEnter(document.loginfrm.cmdweblogin);" value="" /></p>
<p><input type="checkbox" name="checkbox_1" id="checkbox_1" class="checkbox" tabindex="3" size="1" value="" onclick="webLoginCheckRemember()" /><label for="checkbox_1" class="right">Remember me</label></p>
<p><input type="submit" name="cmdweblogin" class="button" value="LOGIN" /></p>
<p><a href="#" onclick="webLoginShowForm(2);return false;" id="forgotpsswd_1">Password forgotten?</a></p>
</fieldset>
</form>
</div>

<!-- Search form -->
<h1>Search</h1>
<div class="searchform">
<form action="index.html" method="get">
<fieldset>
<p><input name="field" class="field" value=" Search..." /></p>
<p><input type="submit" name="button" class="button" value="GO!" /></p>
</fieldset>
</form>
</div>

<!-- Text formats -->
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>

<h3>Paragraph text</h3>
<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<h3>Bulleted list</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li>Fact 1</li>
<li>Fact 2</li>
</ul>

<h3>Ordered list</h3>
<ol>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li>Fact 1</li>
<li>Fact 2</li>
</ol>

<h3>Text orientation</h3>
<p>Text left.</p>
<p class="center">Text center.</p>
<p class="right">Text right.</p>

<h3>Image<br />(text align left)</h3>
<p><img src="./img/image.jpg" width="50" alt="Image description" title="Image title" />Here is place for text.</p>
<p class="center"><img class="center" src="./img/image.jpg" width="50" alt="Image description" title="Image title" /></p>
<p><img class="right" src="./img/image.jpg" width="50" alt="Image description" title="Image title" />Here is place for text.</p>

<h3>Image<br />(text align right)</h3>
<p class="right"><img src="./img/image.jpg" width="50" alt="Image description" title="Image title" />Here is place for text.</p>
<p class="center"><img class="center" src="./img/image.jpg" width="50" alt="Image description" title="Image title" /></p>
<p class="right"><img class="right" src="./img/image.jpg" width="50" alt="Image description" title="Image title" />Here is place for text.</p>

<!-- Image Links -->
<h3>Text link</h3>
<p><a href="#">Here is a link.</a></p>

<!-- Image Links -->
<h3>Image link</h3>
<p><a href="#"><img src="./img/image.jpg" width="50" alt="Image description" title="Image title" /></a>Text as in image sections above.</p>
<p class="center"><a href="#"><img class="center" src="./img/image.jpg" width="50" alt="Image description" title="Image title" /></a></p>
<p><a href="#"><img class="right" src="./img/image.jpg" width="50" alt="Image description" title="Image title" /></a>Text as in image sections above.</p>
</div>

Here's the header I want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<!-- Version: Multiflex-3 Update-2 / Header-4 (Middle and Bottom) -->
<!-- Date: November 29, 2006 -->
<!-- Author: G. Wolfgang -->
<!-- License: Fully open source without restrictions. -->
<!-- Please keep footer credits with a link to -->
<!-- G. Wolfgang (www.1-2-3-4.info). Thank you! -->

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="3600" />
<meta name="revisit-after" content="2 days" />
<meta name="robots" content="index,follow" />
<meta name="publisher" content="Your publisher infos here ..." />
<meta name="copyright" content="Your copyright infos here ..." />
<meta name="author" content="Design: G. Wolfgang www.1-2-3-4.info / Author: Your author infos here ..." />
<meta name="distribution" content="global" />
<meta name="description" content="Your page description here ..." />
<meta name="keywords" content="Your keywords, keywords, keywords, here ..." />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/header4_setup.css" />
<link rel="icon" type="image/x-icon" href="./img/favicon.ico" />
<title>Multiflex-3 Update-2 / Header-4</title>
</head>

<!-- Global IE fix to avoid layout crash when single word size wider than column width -->
<!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]-->

<body>
<!-- Main Page Container -->
<div class="page-container">

<!-- Implement this header in your Multiflex-3 Basic or Full Layout: -->
<!-- 1. Copy the marked rows below -->
<!-- 2. Paste and replace marked rows in "layoutNN_basic.html" or "layoutNN_full.html" file -->
<!-- 3. Open CSS-file "header4_setup.css", and follow its instructions -->

<!-- START COPY here -->

<!-- A. HEADER -->
<div class="header">

<!-- A.1 HEADER MIDDLE -->
<div class="header-middle">

<!-- Sitelogo and sitename -->
<a class="sitelogo" href="#" title="Go to Start page"></a>
<div class="sitename">
<h1><a href="index.html" title="Go to Start page">MULTIFLEX&bull;3<span style="font-weight:normal;font-size:50%;">&nbsp;update-2</span></a></h1>
<h2>Open Source Template</h2>
</div>

<!-- Navigation Level 0 -->
<div class="nav0">
<ul>
<li><a href="#" title="Pagina home in Italiano"><img src="./img/flag_italy.gif" alt="Image description" /></a></li>
<li><a href="#" title="Homepage auf Deutsch"><img src="./img/flag_germany.gif" alt="Image description" /></a></li>
<li><a href="#" title="Hemsidan p&aring; svenska"><img src="./img/flag_sweden.gif" alt="Image description" /></a></li>
</ul>
</div>

<!-- Navigation Level 1 -->
<div class="nav1">
<ul>
<li><a href="#" title="Go to Start page">Home</a></li>
<li><a href="#" title="Get to know who we are">About</a></li>
<li><a href="#" title="Get in touch with us">Contact</a></li>
<li><a href="#" title="Get an overview of website">Sitemap</a></li>
</ul>
</div>
</div>

<!-- A.2 HEADER BOTTOM -->
<div class="header-bottom">

<!-- Navigation Level 2 (Drop-down menus) -->
<div class="nav2">

<!-- Navigation item -->
<ul>
<li><a href="index.html">Overview</a></li>
</ul>

<!-- Navigation item -->
<ul>
<li><a href="#">Page Layouts<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="layout1.html">Layout-1 (1-col)</a></li>
<li><a href="layout2.html">Layout-2 (2-col)</a></li>
<li><a href="layout3.html">Layout-3 (2-col)</a></li>
<li><a href="layout4.html">Layout-4 (3-col)</a></li>
<li><a href="layout5.html">Layout-5 (3-col)</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<!-- Navigation item -->
<ul>
<li><a href="#">Header Layouts<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="header1.html">Header-1 (T+M+B)</a></li>
<li><a href="header2.html">Header-2 (T+M)</a></li>
<li><a href="header3.html">Header-3 (T+B)</a></li>
<li><a href="header4.html">Header-4 (M+B)</a></li>
<li><a href="header5.html">Header-5 (T)</a></li>
<li><a href="header6.html">Header-6 (M)</a></li>
<li><a href="header7.html">Header-7 (B)</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>

<!-- A.3 HEADER BREADCRUMBS -->

<!-- Breadcrumbs -->
<div class="header-breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Templates</a></li>
<li>Multiflex-3</li>
</ul>

<!-- Search form -->
<div class="searchform">
<form action="index.html" method="get">
<fieldset>
<input name="field" class="field" value=" Search..." />
<input type="submit" name="button" class="button" value="GO!" />
</fieldset>
</form>
</div>
</div>
</div>

<!-- END COPY here -->

</div>

</body>
</html>


I have tried just copy/pasting headers, but it doesn't work. There is a special place in the first code for pasting new headers, but I can't get rid of the original.

Please help me resolve this problem!
Friend07
07-12-2007, 02:47 AM
Hi,
am sorry for the delay.
I must say that the author of this template has done a marvelous job.
All you have to do is choose a layout first, and then choose a header. Based on your first post I'm suggesting that you want 3 column layout, witch would be Layouts 4 and 5. Let's say you want Layout 4. Open layout4.html in any text editor like notepad and paste the code of the header in the marked place. Now delete any other .HTML file in that directory, except layout4.html. Rename layout4.html to index.html and you are ready to go. To make it easier for you, I attached you the index file in zip archive, so you can just download it and extract it in the root folder, replacing the original. The only thing you have to do is replacing the links in navigation menu (witch are still linking to the other layouts and headers) with your own.
Please let me know if that fix your problem, or if you want more help!!!
zooley
07-15-2007, 01:47 PM
Try these sites for easy and great looking templates: http://csstinderbox.raykonline.com/, http://www.openwebdesign.org/
HarleyJane
07-15-2007, 01:59 PM
I have Dreamweaver, and I never use it. I ended up downloading a good and *free* HTML editor. I find that I prefer to use this all the time. It's called HTML Kit.

It's like Notepad, but still gives you little tips for HTML coding.