Help placing a form with CSS/HTML (Complete Beginner)

tyeracj41 · 12-12-2007, 06:12 AM

Hey I just started putting together a site. I'm using a template that I found and making my own modifications. I understand CSS/HTML on a very basic level and I need help placing a form in a specific location. I've included the HTML file and CSS file, and also a screenshot of where I'd like the form. I would REALLY appreciate any help you're willing to offer. Thanks in advance.

ahallicks · 12-12-2007, 09:38 AM

Not complete at all, but might help you get underway

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name / Original design: Andreas Viklund - http://andreasviklund.com/" />
<link rel="stylesheet" type="text/css" href="andreas05.css" />
<title>flipnugget</title>
</head>

<body>
<div id="title"><h1>HOME</h1></div>
<div id="container">
<div id="sidebar">

<h2>menu</h2>
<a class="menu" href="home.html">home</a>
<a class="menu" href="gallery.html">gallery</a>
<a class="menu" href="#">upload</a>
<a class="menu" href="contact.html">contact</a>
<a class="menu2" href="#">login/signup</a></div>



<div id="main">
<h2>andreas05 - the simple solution!</h2>
<a href="images/image-1.jpg" rel="lytebox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
<p>Sometimes, the simple things are the most beautiful. This design was made with simplicity in mind, to make it quick and easy to edit the code and get your website online. The amount of code is very small, and the layout is very basic. No visual effects, no advanced features, just a very simple template.</p>
<p><strong>Note:</strong> If you don't like the dragon (which was made using a freeware font named "Tattoo"), you can easily replace it with an image of your own!</p>

<h2>An open source design!</h2>
<p>This design is released as open source, which means that you can make any changes you may want to, and use the page in any way you want to as long as you give the proper credits to the original author. Have fun! If you want more designs to choose from, you can visit <a href="http://andreasviklund.com/">my website</a> where you can download more <a href="http://andreasviklund.com/templates/">templates</a> by me.</p>

<p class="credits"><a href="home.html" title="menu">home</a>|<a href="gallery.html" title="menu">gallery</a>|<a href="#" title="menu">upload</a>|<a href="contact.html" title="menu">contact</a><br />
<p class="credits"><strong>&copy; 2007 Tim Horn</strong> and <strong>Thomas Carey</strong>
</p>
</div>

<div id="footer"></div>
</div>
</body>
</html>

Code:

/* andreas05 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com/ . Free to use for any purpose as long as the proper credits are given for the original design work.
Version: 2.0, July 15, 2006 */

/* General tags */
*{margin:0; padding:0;}
body{background:#ccc url(images/bodybg.gif) repeat; font:76% verdana,tahoma,sans-serif;}
a{background-color:inherit; color:#286ea0; font-weight:bold; text-decoration:none;}
a:hover{text-decoration:underline;}
p{margin:0 0 16px 0;}
ul, ol{margin:0 0 16px 15px; padding-left:5px;}
ul ul, ol ol{margin:3px 0 0 15px;}
img{float:left; margin:0 10px 5px 0;}

/* Headers */
h1{color:#555; font-size:3.6em; letter-spacing:-3px; margin:0; text-align:right;}
h2{font-size:1.6em; font-weight:normal; letter-spacing:-1px; margin:5px 0 10px;}

/* IDs */
#title{margin:20px auto -9px; width:700px;}
#container{background:#fff url(images/front.png) bottom left no-repeat; border:20px solid #555; color:#555; margin:0 auto 15px; padding:10px; width:700px; line-height:1.3em;}
#sidebar{float:left; padding-left:175px; width:110px; position: relative; min-height:350px}
* html #sidebar {height: 350px;}
#sidebar p{margin:10px 0 5px 0; text-align:center; font-size:0.8em;}
#login{float:left; padding-left:175px; padding-top:175; width:110px}
#main{float:right; width:385px;}
#footer{clear:both;}

/* Menu */
.menu{border:1px solid #ffffff; color:#286ea0; display:block; font-size:1.1em; font-weight:bold; padding:4px 2px 4px 10px; width:110px;}
.menu2{border: 1px solid #ffffff; color:#ff7700; display:block; font-size:1.1em; font-weight:bold; padding:4px 2px 4px 10px; width:110px;}
.menu:hover{background-color:#f8f8f8; border:1px solid #dadada; color:#286ea0; text-decoration:none;}
.menu2:hover{background-color:#f8f8f8; border:1px solid #dadada; color:#ff7700; text-decoration:none;}


/* Various classes */
.hidden {display:none; visibility:hidden;}
.credits{color:#888; font-size:0.9em; margin-bottom:0;text-align:center;}
.credits a{color:#888;}

/* The Form */

form#yourform {
	position: absolute;
	bottom: 0px;
}

Apostropartheid · 12-12-2007, 04:25 PM

Quote:

XHTML 1.1 may not be served with the text/html MIME type--use application/xhtml+xml or application/xml instead. Not that any browsers will recognize this, mind; you'll have to change the HTTP header for it to work effectively. All in all, just use XHTML 1.0 Strict instead.