View Full Version : Need some formatting advice for a beginner

Feb 29th, 2012, 04:58 PM
I need to design a webpage for selling livestock. I want to have a tabbed bar across the top with links to a page designated to each type of animal.. maybe 6 or 7 tabs in total. I also want a box at the bottom with contact information on every page. Each tab will just be a link a page with 5 or 6 pictures of animals and descriptions below them. What's the best way to do this? Should I even bother with CSS on a simple site like this.

I want the home page to look like this:

home our farm horses horses for sale sheep sheep for sale about us

************************page content********************************

John Doe
[email protected]

I know html basics but really don't the easiest way to do this. I'm sure I could figure it out but I doubt it would be the "right" way to do it. First thing that comes to mind for the header/tabs is just making a table but idk. I'm just using a text editor to make it.


Feb 29th, 2012, 10:03 PM
I do all of my HTML in a text editor. Believe me, there is nothing wrong with that.

You shouldn't be using tables except to present tabular (spreadsheet-like) data. So for a price chart, for example. you would use a table. But the overall page structure should not use a table for construction. Also, CSS is not difficult to use so don't try to avoid it. Besides, you really can't avoid it these days even if you wanted to.

For a very basic start to your page try this on for size:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Sample Layout</title>
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon"/>
<style type="text/css" media="screen,print">
/* the CSS above "resets" most (but certainly not ALL) things to get browsers on a somewhat level playing field */
#wrapper{width:70%;min-width:900px;margin:10px auto 10px auto;border:2px solid #efefef;background-color:#fefefe;position:relative;}
#header h1{font-size:24px;font-weight:normal;font-family:'trebuchet ms','arial';line-height:150px;padding-left:30px;}
#nav{position:relative;height:26px;border-bottom:1px solid #135;}
#nav ul{list-style-type:none;overflow:auto;width:96%;padding:0 2%;position:absolute;}
#nav li{float:left;width:12.5%;}
#nav a{display:block;text-decoration:none;font-weight:bold;font-size:18px;font-family:'trebuchet ms';padding:2px 10px;color:#135;text-align:center;border:1px solid #135;border-left:0;background-color:#efefef;border-radius:6px 6px 0px 0px;height:21px;line-height:21px;}
#nav li.current a{border-bottom:1px solid #fff;background-color:#fff;}
#nav li:first-child a{border-left:1px solid #135;}
#nav a:hover{color:#fff;background-color:#135;}
#nav li.current a:hover{color:#135;}
#content h1{font-size:20px;font-weight:bold;font-family:'verdana';margin:15px 0px;}
#content p{margin:15px 0px}
#footer{text-align:center;border-top:1px solid #111;padding:20px;}
<div id="wrapper">
<div id="header"> <!-- open header -->
<h1>Business name here, perhaps with a logo image worked in...</h1>
</div> <!-- close header -->
<div id="nav"> <!-- open nav -->
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li class="current"><a href="">Three</a></li>
<li><a href="">Four</a></li>
<li><a href="">Five</a></li>
<li><a href="">Six</a></li>
<li><a href="">Seven</a></li>
<li><a href="">Eight</a></li>
</div> <!-- close nav -->
<div id="content"> <!-- open content -->
<h1>This is the page content area</h1>
<p>You can enter text and images here in this main section.</p>
<p>So I will start running the lorem ipsum to fill it up...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies tincidunt elit. In cursus, elit ac lacinia tempus, eros nisl suscipit purus, pharetra consequat neque ligula at velit. Ut sapien enim, laoreet at consectetur quis, sodales vel erat. Donec placerat ultricies turpis, vitae rhoncus risus lacinia at. Fusce a erat libero. Cras auctor nunc id nibh tincidunt malesuada. Nulla lacus dolor, tempus posuere luctus nec, dictum nec nisl. In non nisi at ipsum tincidunt accumsan. Sed eu tortor metus. Integer ornare feugiat porta. Nulla sollicitudin dictum placerat. Pellentesque accumsan interdum ornare. Mauris tincidunt, ligula vel interdum faucibus, quam mauris feugiat odio, sed malesuada purus velit eu lorem. Proin lacinia diam eget velit tempor consectetur.</p>
<p>Duis metus est, gravida a semper posuere, egestas et ipsum. Donec vel nisl erat. Fusce tincidunt dictum commodo. Ut in mauris eu turpis ullamcorper egestas. Mauris non nunc diam, sed congue justo. In ut leo in arcu vulputate scelerisque sit amet sodales nunc. Nam id ligula tellus.</p>
<p>Mauris vitae rhoncus turpis. Nunc aliquam, sem quis placerat aliquam, nisi mauris placerat odio, nec feugiat mi lectus ut libero. Morbi mollis, enim eget feugiat accumsan, quam urna tincidunt nisl, ac rhoncus ligula felis sed felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat porta enim eu commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vestibulum pretium odio non mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis est nibh, in scelerisque leo. Fusce malesuada tristique lorem in venenatis. Integer vel justo velit, nec vestibulum velit. Ut dictum nulla sed quam tincidunt convallis. Maecenas eu ante magna, vel euismod nulla. Sed non purus viverra nisl consequat commodo tristique sed metus. Etiam mollis nulla at dolor interdum tristique. Sed hendrerit tempor eleifend.</p>
<p>Fusce non arcu nisl, vel facilisis erat. Morbi quis ultrices neque. Duis quis mi turpis, id placerat urna. Nullam feugiat dignissim augue, nec consequat nisl pulvinar eu. Phasellus bibendum rutrum purus sed ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tellus lacus, tempor eu auctor fringilla, lobortis scelerisque erat. Nulla ipsum neque, scelerisque ac facilisis ut, convallis fermentum augue.</p>
<p>Nam et enim ut nulla tincidunt vestibulum in quis nunc. Proin porta, mauris id pulvinar suscipit, dolor lorem ornare enim, eu sodales nibh est quis massa. Mauris nibh libero, hendrerit ut tristique vel, tincidunt non quam. Curabitur ultricies odio sed sem ornare sit amet elementum ligula bibendum. Sed semper ipsum ac nulla vehicula quis volutpat ante dignissim. Nulla dictum dui id tortor fermentum ut dapibus tellus mattis. Suspendisse eu gravida purus. Nam tellus nibh, fringilla ut ullamcorper vitae, tempor ac nibh. Nulla convallis ornare mauris posuere tempor. Pellentesque ullamcorper suscipit ornare. Curabitur vestibulum, turpis a fermentum posuere, dolor nisl euismod neque, vitae molestie lacus nisl sed nunc.</p>
</div> <!-- close content -->
<div id="footer"> <!-- open footer -->
<a href="">Your contact information goes in the footer here...</a>
</div> <!-- close footer -->
</div> <!-- close wrapper -->

In the above example code you would just need to change which <li> element in the navigation section has the class of "current" for each given page.

Give this a few updates to suit your needs and post back if you get stuck. A link to your live test site once this is up and running would be best for our purposes in assisting you.