Zymic Webmaster Forums > Help Me Please :s

Zymic Webmaster Forums > Web Design & Development > General Web Design Discussion

Keithoms

Nov 30 2008, 04:49 PM

Ive got the free template *sigh* number #89

I would like to duplicate the login box at the top and put an identical one to the left of it.

Can someone please explain how to do this?

Andrew

Dec 1 2008, 01:56 PM

Considering I'm the one who coded it, I can do it.
What I did doesn't look right because of the logo that is there, but it's defeinitely like you said. I had to change alot of little things because as soon as I added it, the navigation and content dropped down out of their places.
So here is the modified version:
Index.html:

CODE

<!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">

<head>
  <title>Collateral - Free Template for Zymic!</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="wrapper">
    <div id="header">

        <div id="logo">
        </div>
        <div id="updates">
        Updates:&nbsp;&nbsp;<span>put any text here </span>
        </div>
        <div id="login">
        <div id="loginwelcome">Welcome Guest</div>

            <form action="#">
                <p>
                <input title="username" name="username" class="username" value="Username" onclick="if ( value == 'Username' ) { value = ''; }"/>
                <input name="password" type="password" class="password" title="password" value="Password" onclick="if ( value == 'Password' ) { value = ''; }"/>
                <input type="submit" name="Login" class="submit" value="login" tabindex="3" />
                </p>
            </form>
        </div>
        <div id="login2">
        <div id="loginwelcome2">Welcome Guest</div>

            <form action="#">
                <p>
                <input title="username" name="username" class="username" value="Username" onclick="if ( value == 'Username' ) { value = ''; }"/>
                <input name="password" type="password" class="password" title="password" value="Password" onclick="if ( value == 'Password' ) { value = ''; }"/>
                <input type="submit" name="Login" class="submit" value="login" tabindex="3" />
                </p>
            </form>
        </div>
            <ul id="navigation">

                <li class="on"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Contact</a></li>

            </ul>
    <div id="content">
        <p class="parahead">Welcome to Collateral</p>
        <p class="paracontent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <a href="http://www.crownstyles.com">standard</a> dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        <p class="parahead">Free Stock Images</p>
        <p class="paracontent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type <a href="http://trippin.uni.cc">specimen</a> book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        <div id="stock">

            <img src="images/stock.png" alt="Stock Images!" />&nbsp;&nbsp;&nbsp;<img src="images/stock.png" alt="Stock Images!" />
        </div>
        <p class="parahead">Zymic Free Templates</p>
        <p class="paracontent">Thanks for downloading a template from <a href="http://www.zymic.com">Zymic!</a> Please read the read me file located in the template zip file as it contains all the information needed to customize this particular template.</p>
        <p class="parahead">Zymic Free Templates</p>
        <p class="paracontent">You may not delete or edit the <a href="http://www.zymic.com">Zymic</a> copyright on the footer of this template without our permission. If you delete our copyright you are breaking various copyright laws. We regulary search for illegal copyright removals (using bots and report staff).</p>
        <p class="paracontent">To remove the copyright please send a small fee of $5 using paypal to templates@zymic.com - Since the template simply has HTML text copyright, simply delete/edit it after payment. We will keep a record of the paypal invoice for proof or purchase.</p>

    </div>
    <div id="footer">
        <div id="copyright">Copyright &copy; 2008 Zymic.com - Design: <a href="http://www.crownstyles.com">Crown</a> & Code: <a href="http://trippin.uni.cc">Trippin7464</a></div>
    </div>
</div>
</body>
</html>

Style.css:

CODE

body {
  background: url(images/background.png) repeat-x #e6e3dc;
  margin: 0;
}

a {
  color: #9bb50b;
  text-decoration: none;
}

a:hover {
  color: #728507;
  text-decoration: underline;
}

#wrapper {
  width: 900px;
  margin: 0 auto;
}

#header {

}

#logo {
  background: url(images/logo.png) no-repeat;
  width: 266px;
  height: 50px;
  margin-top: 17px;
  margin-left: 7px;
}

#updates {
  color: #e6e3dc;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  padding-top: 5px;
}
#updates span {
  font-size: 13px;
}

#login {
  background: url(images/loginbg.png);
  width: 356px;
  height: 73px;
  position: relative;
  top: -71px;
  left: 560px;
  color: #e6e3dc;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  font-size: 13px;
}

#loginwelcome {
  padding-left: 20px;
  padding-top: 15px;
}

#login form {
  padding-left: 20px;
}

#login .username {
  border: none;
  background: url(images/formfield.png) transparent no-repeat;
  width: 131px;
  height: 21px;
  color: #859c0a;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  text-indent: 4px;
  font-size: 13px;
}

#login .password {
  border: none;
  background: url(images/formfield.png) transparent no-repeat;
  width: 131px;
  height: 21px;
  color: #859c0a;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  text-indent: 4px;
  font-size: 13px;
}

#login .submit {
  border: none;
  background: none;
  width: 50px;
  font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
  color: #e6e3dc;
  font-size: 15px;
}

ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

#navigation {
float:right;
  font-size:12px;
  margin-top: -94px;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
}


#navigation li {
  float:left;
  margin-right: 3px;
}

#navigation li a{
  display: block;
  text-decoration: none;
  color: #e6e3dc;
  width: 58px;
  height: 24px;
  text-align: center;
  padding-top: 5px;
}


#navigation li a:hover {
	background: url(images/button.jpg) no-repeat;}

#navigation .on {
	background: url(images/button.jpg) no-repeat;}

#content {
  background: url(images/contentback.jpg) repeat-x #FFFFFF;
  margin-top: -58px;
  padding: 10px;
}

.parahead {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 23px;
  color: #9bb50b;
  margin: 0;
  margin-top: 10px;
}

.paracontent {
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  font-size: 13px;
  padding-left: 15px;
  margin: 0;
  width: 90%;
}

#stock {
  margin: 0 auto;
  margin-top: 15px;
  width: 78%;
}

#footer {
  background: url(images/footback.png) no-repeat;
  height: 22px;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  font-size:14px;
  color: #FFFFFF;
  margin-bottom: 9px;
}

#copyright {
  width: 100%;
  text-align: center;
}

#copyright a {
  color: #000000;
  text-decoration: none;
}

#copyright a:hover {
  color: #728507;
  text-decoration: underline;
}

#login2 {
  background: url(images/loginbg.png);
  width: 356px;
  height: 73px;
  position: relative;
  top: -145px;
  left: 208px;
  color: #e6e3dc;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  font-size: 13px;
}

#loginwelcome2 {
  padding-left: 20px;
  padding-top: 15px;
}

#login2 form {
  padding-left: 20px;
}

#login2 .username {
  border: none;
  background: url(images/formfield.png) transparent no-repeat;
  width: 131px;
  height: 21px;
  color: #859c0a;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  text-indent: 4px;
  font-size: 13px;
}

#login2 .password {
  border: none;
  background: url(images/formfield.png) transparent no-repeat;
  width: 131px;
  height: 21px;
  color: #859c0a;
  font-family: "Tahoma", Arial, Helvetica, sans-serif;
  text-indent: 4px;
  font-size: 13px;
}

#login2 .submit {
  border: none;
  background: none;
  width: 50px;
  font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
  color: #e6e3dc;
  font-size: 15px;
}

Keithoms

Dec 1 2008, 07:53 PM

Ahh, thank you very much! You can see how your great template is being put to use @ lithiumwebsolutions.co.uk

EDIT: Ok, ive just made the changes to the site. Absolute......ly perfect! Thank you so much for the work you have done. If i had any more money id top up your account.

Liqfan

Dec 2 2008, 07:57 AM

Is that a free one off zymic? Never seen it, but it shure is nice! I assume you paid for the copyright removal?

Andrew

Dec 3 2008, 05:03 AM

Yes, I think everyone has already asked

But it has been paid for.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.