Insert css reset

In the page I'm creating with iWeb I'm having problems of size with the css menu, the padding-left and padding-bottom show different sizes in Firefox than in Safari or iWeb. I've heard that a reset css code has to be used, the code I want to use is: * { margin: 0; padding: 0; }, but I'm a newby and don't know where has to be inserted, in the html of the page? in the css menu code? in the index.html file?
I didn't find any detailed explanation, everybody says it ghas to be ineserted but not how or where.
Can anybody give me a hand?
Thanks

I did't uploaded yet, I'm making the proves in the box.
Actually the code is:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple Menu In CSS3 Only</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
     background: transparent;
     margin: 30px;
     padding: 0px;
#menu     {
     float: left;
     margin: 0px;
     /* Box Shadow */
     box-shadow: 0 0px 0 #000;
     -moz-box-shadow: 0 0px 0 #000;
     -webkit-box-shadow: 0 0px 0 #000;
     /* Rounded Corners */
     -moz-border-top-left-radius: 5px;
     -moz-border-bottom-left-radius: 5px;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-bottom-left-radius: 5px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     /* Rounded Corners */
    -moz-border-top-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
#menu ul {
     padding: 0;
     margin: 0;
     float: left;
     /* Background Gradient */
     background-color: gray;
     background-image: none;
    background-image: url(none);
#menu li {
     border-spacing: 0px 0px;
     margin: 1px;
     float: left;
     list-style: none;
     background: none;
     text-align: center;
#menu a { border-spacing: 0px 0px; outline: none; }
#menu li a:link, #menu li a:visited {
     background-color: white;
     border-spacing: 0px 0px;
     padding-left: 16px;
     padding-bottom: 5px;
     padding-right: 15px;
     padding-top: 5px;
     font-family: "Verdana", "Trebuchet MS", sans-serif;
     font-size: 14px;
     font-weight: normal;
     display: block;
     color: black;
     text-decoration: none;
     text-transform:none;
     /* CSS3 Text Shadow */
     text-shadow: 0px 0px 0px;
     /* CSS3 Background Gradient */
     background-color: #e6e6e6;
#menu li a:hover    {
     background-color: white;
     cursor: pointer;
     color: white;
     text-shadow: 0px 0px 0px;
     /* Background Gradient */
     background-color: #ffac04;
    background-image: none;
    background-image: url(none);
#menu li:first-child a, #menu ul {
     /* Rounded Corners */
     -moz-border-top-left-radius: 5px;
     -moz-border-bottom-left-radius: 5px;
     -webkit-border-top-left-radius: 5px;
     -webkit-border-bottom-left-radius: 5px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
#menu li:last-child a, #menu ul {
     /* Rounded Corners */
    -moz-border-top-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
a.active:link, a.active:active, a.active:visited {
     color: #fff !important;
     text-shadow: 0px 0px 0px!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: url(none)!important;
     /* Box Shadow */
     box-shadow: inset 0 0 0px #000;
     -moz-box-shadow: inset 0 0 0px #000;
     -webkit-box-shadow: inset 0 0 0px #000;
</style>
</head>
<body>
     <div id="menu">
          <ul>
               <li><a href="http://barbarossanautica.com/Bienvenida.html">Bienvenida</a></li>
               <li><a href="http://barbarossanautica.com/Nosotros.html">Nosotros</a></li>
               <li><a href="http://barbarossanautica.com/Nuestros_barcos/Nuestros_barcos.html">Nuestros Barcos</a></li>
               <li><a href="http://barbarossanautica.com/Tarifas_y_ocupacion.html">Tarifas y Ocupación</a></li>
               <li><a href="http://barbarossanautica.com/Contacto.html">Contacto</a></li>
               <li><a href="hyyp://barbarossanautica.com/Servicios_Nauticos.html">Servicios Nauticos</a></li>
               <li><a href="http://barbarsossanautica.com/Venta_de_Embarcaciones/Venta_de_Embarcaciones.html">Venta de Embarcaciones</a></li>
          </ul>
     </div>
</body>
</html>
I've got several variants but all with the same problem, even the first without any variation on the code shows the same behaviour of different padding right and bottom.
Searching in internet I found this about the different behaviour of Firefox, and then the need of the reset.
In my actual web (the one uploaded) is still the css3menu.
Thanks

Similar Messages

How to insert css reset

I have problems with the web I'm creating, my menu shows different sizes in Firefox than in Safari and other navigators. I've heard about Eric Meyer reset and try to use it, but been a newby I don't know where have to insert the code. Must it be in the html of the page? or inside the snippet of the menu itself?
Can anyone give me a detailed explanation the reset I'm traying to use is * { margin: 0; padding: 0; }
but don't know where have to paste it.
thanks

CSS code needs to be placed in a linked or embedded CSS file or alternatively (but not recommended) added via a style attribute in the HTML tag.
Can you post a link to a publicly accessible page that doesn't require authentication (log in) to access it?
A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
*http://forums.mozillazine.org/viewforum.php?f=25
The helpers at that forum are more knowledgeable about web development issues.<br>
You need to register at the MozillaZine forum site in order to post at that forum.

The History of CSS Resets

When artists begin a new painting, they don’t immediately reach for the cadmium red and the phthalo blue. They first prime the canvas. Why? To ensure that the canvas is smooth and has a uniform white hue.
Many web designers prefer to use a CSS "reset" to "prime" the browser canvas and ensure that their design displays as uniformly as possible across the various browsers and systems their site visitors may use.
Read more http://sixrevisions.com/css/the-history-of-css-resets/
Just thought I would share, especially with Muz.
Gramps

I have developed quite a few desktop type webapplications using so-called ajax technology, mainly the Spry framework. Uniform styling viewed in any modern browser is a very important factor, especially when it affects positioning and spacing.
The only way for me to achieve this is by starting with a common baseline in each browser and CSS resets gives me the best result.
I do however share your view that if styling is of no concern and the clients are not fussy, a minor difference in each browser should not be an issue. Once bigger differences are drastically spoiling your layout and after hours spent in finding a solution, CSS resets is a very welcome one stop shop.
Gramps

Is it possible to 'disable' certain CSS Resets

Hi,
I've added a small cms-system to my muse website.
When I edit text in this texteditor it doesn't display correctly on the live pages (for example text isn't bold or italic, headings, a bullet list aren't visible on the live pages).
I don't know much about coding and css, so their supportdesk checked it out and it seems to be that the my CSS is resetting the new styles and/or browser's default styling. The markup/tags after text-editing is correct and visible in the page sourcecode (through browser).
So they adviced me to debug or maybe disable the CSS resets.
How and where can I do this? And is it possible to disable css resets on only some ( the needed) parts?
Thanks in advance.

Hi,
There is no way to prevent Muse from resetting CSS. But you can achieve the desired effect by expliciltly styling your embedded HTML (cms system). The tutorial http://helpx.adobe.com/en/muse/tutorials/styling-css-embedded-html-forms.html may be helpful. While it is specific to HTML forms, it does explain how to add styling CSS to embedded HTML.
Of course you will need some knowledge of CSS to know what to add in the <style> tags. For example, you may want to add h1,h2,h3,h4,h5,h6 {font-weight: bold;} to override Muse CSS reset for headings. Or li { list-style: disc; } to override Muse CSS reset for lists. The support desk for the CMS system may be able to provide this information.
Abhishek

Inserting CSS Buttons in Muse Site?

Is there a way to insert a CSS button like one that could be generated from this website into a Muse site that I'm creating?
http://www.cssbuttongenerator.com/
If not, is Muse capable of creating a similarly styled button?

Hello,
In Widget Library section, you have a State Button widget in composition.
You can use that button and apply different states/effects to it and create a hyperlink to it.
Hope this helps.
Regards,
Sachin

Insert css menu bar

Dear all,
i am trying to insert a menubar developed by a thirdparty css menu builder into adobe muse, but whenever i try to insert the scripts via "object>insert html" it does not seem to work.
i am using a CSS menu builder form "CSS3 Menu. Free CSS Menu Maker"
i cant use the default menu builder from Muse becuase i have too many drop downs.
here is an example of one of my sites that i used a java script menu builder instead. "Kraft Foods Portal"
i am transitioning to css because java menu builder is obselete and Css is able to make it look cooler.
any help would be highly appreciated. thanks.

Muse can build it's own menu system using CSS. (Menu widget)
Not sure if you can even bring a third party menu builder inside Muse and work properly.

How to insert CSS styling to embedded HTML from a Wufoo form?

I have embedded HTML code form a Wufoo form but none of the CSS styling followed. Does anyone know how to link the style sheet? I have tried to upload through the hosting server directly but nothing changed. Am I missing a step?
Thanks a bunch for your thoughts!!!

No experience with them, but I would assume they hold all the good stuff on their server since for obvious reasons they want you to use their services. They mention download options for their CSS files, though, so maybe you missed that option or as (bad) luck would have it chose a template that doesn't allow this.
Mylenium

CSS resetting

Just stumbled across this in another thread, and hadn't heard
of it before - sounds almost like some sort of Holy Grail...
Have looked at Eric Meyer's pages about it - is the idea
simply that you add in a reset style sheet to each page which
basically puts everything on a level playing field in each browser?
And then any styling subsequent to that overwrites those
defaults? ie even something like a <body> tag would be
defined twice - firstly to rest, and secondly to style as you would
on your site?

> Yep. That's a possible way, even though I don't do it on
my sites. In
> many cases the defaults work quite well, and the rest is
defined or
> overwritten by me anyway.
I'm with you, Micha. The reset gets in my way more often than
not.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Michael Fesser" <[email protected]> wrote in message
news:[email protected]..
> .oO(Iain71)
>
>>Just stumbled across this in another thread, and
hadn't heard of it
>>before -
>>sounds almost like some sort of Holy Grail...
>>
>> Have looked at Eric Meyer's pages about it - is the
idea simply that you
>> add
>>in a reset style sheet to each page which basically
puts everything on a
>>level
>>playing field in each browser?
>
> Yep. That's a possible way, even though I don't do it on
my sites. In
> many cases the defaults work quite well, and the rest is
defined or
> overwritten by me anyway.
>
>> And then any styling subsequent to that overwrites
those defaults? ie
>> even
>>something like a <body> tag would be defined
twice - firstly to rest, and
>>secondly to style as you would on your site?
>
> You can have as many rules as you want for a particular
element. That's
> part of the cascading mechanism.
>
> But you should think about if "resetting" all and
everything is really
> necessary. What do you expect from it?
>
> Micha

CSS Acts in different ways according to the logged in user.

Hi All,
I have used CSS within my Master Page i.e. Oslo. I have changed the SharePoint 2013s' default Start.aspx file as the new Sites' home page. I also used this CSS code snippet for creating a web menu because SharePoint's default navigation is rather odd.
However the menu within the master page was a success and I created several pages using the master page and each new page contains the CSS custom made web menu without any error.
But when I logged using a different Farm Admin Account the CSS menu changes to a somewhat else. But when I logged in using the built in Administrator account the menu is displayed as it should be. But when I logged in as a different Farm Admin the menu is
not showing as it should be. I have tried inserting the CSS directly to the Master Page and from the Style Library. Both ways are Ok with the built-in Administrator. But when I logged in using another Farm admin the use of Style Library was a useless thing
and the direct code input method is was the only success one. The style library has all the permission for all users.
The source code is at the below.
<style type="text/css">
.ms-navedit-editLinksText{
display: none;
/*This script part will remove the default SharePoint Navigation & the Site Name Sections **/
ms-core-navigation {
display:none
body{
width:absolute
/* This CSS Snippet will style the Web Menu in the MasterPage. */
/* CSS Document */
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
html,body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
:focus {/* remember to define focus styles! */
outline: 0;
ol, ul {
list-style: none;
table {/* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
caption, th, td {
font-weight: normal;
text-align: left;
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
blockquote, q {
quotes: "" "";
a img {
border: 0;
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
.clear {
clear: both;
h1 {
font-size: 18px;
h2 {
font-size: 16px;
/* Lay out design */
/************** start menu design *************/
#mainMenu {
width: relative;
height: 80px;
background: url(http://pc/PublishingImages/SitePages/Home/menu-bg.png) repeat-x;
#main-Menu ul {
padding-left:10px;
#main-Menu ul li{
top: 20px;
background-color: #4e34ee;
float: left;
display: block;
text-align: center;
margin-left: 5px;
-moz-border-radius: 0px;
-webkit-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
/* Tab Content - menucool.com */
ul.tabs
padding: 7px 0;
font-size: 0;
margin:0;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the tabs as desired*/
ul.tabs li
display: inline;
margin: 0;
margin-right:7px; /*distance between tabs*/
ul.tabs li a.tab1
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x;*/
background-color:#0072c6;
border-radius: 4px 4px 0 0;
outline:none;
text-align:center;
ul.tabs li a.tab2
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#00aa9e;
border-radius: 6px 6px 0 0;
outline:none;
ul.tabs li a.tab3
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#00adc6;
border-radius: 6px 6px 0 0;
outline:none;
ul.tabs li a.tab4
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#00adc6;
border-radius: 6px 6px 0 0;
outline:none;
ul.tabs li a.tab5
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#0072c6;
border-radius: 4px 4px 0 0;
outline:none;
ul.tabs li a.tab6
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#00aa9e;
border-radius: 6px 6px 0 0;
outline:none;
ul.tabs li a.tab7
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#8dc63b;
border-radius: 6px 6px 0 0;
outline:none;
ul.tabs li a.tab8
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#ab23cd;
border-radius: 6px 6px 0 0;
outline:none;
ul.tabs li a.tab9
font: normal 15px Calibri;
text-decoration: none;
padding: 16px 16px;
border: 0px solid #CCC;
border-bottom-color:#B7B7B7;
color: #000;
/*background: #F0F0F0 url(http://pc/PublishingImages/SitePages/Home/menu-sep.png) 0 0 repeat-x; */
background-color:#00adc6;
border-radius: 4px 4px 0 0;
outline:none;
ul.tabs li a:visited
color: #000;
ul.tabs li a:hover
border: 1px solid #B7B7B7;
background:gray 0 -36px repeat-x;
ul.tabs li.selected a, ul.tabs li.selected a:hover
top: 0px;
font-weight:bold;
border: 1px solid #B7B7B7;
border-bottom-color: white;
ul.tabs li.selected a:hover
text-decoration: none;
#sub1{ background: #e3d0e6; }
#sub2{ background: #00adef; }
#sub3{ background: #8dc63b; }
#sub4{ background: #8dc63b; }
/************** end menu design *************/
</style>
The web menu is at the below.

<div id="mainMenu">
<ul class="tabs" data-persist="true">
<li><a href="http://pc/SitePages/Home.aspx" class="tab1"><b>HOME</b></a></li>
<li><a href="http://pc/Pages/IT-Help-Desk.aspx" class="tab2"><b>IT HELP DESK</b></a></li>
<li><a href="http://pc/Pages/Electronic-Forms.aspx" class="tab3"><b>ELECTRONIC FORMS</b></a></li>
<li><a href="http://pc/Pages/Contacts.aspx" class="tab4"><b>CONTACTS</b></a></li>
<li><a href="http://pc/Budget/Forms/AllItems.aspx" class="tab5"><b>DOCUMENTS STORAGE</b></a></li>
<li><a href="http://pc/Pages/Image-Library.aspx" class="tab6"><b>IMAGE LIBRARY</b></a></li>
</ul>
</div>

I cannot figure the error I am facing. Could someone help me to solve this matter ?
Thank You,
Regards,
Chiranthaka

I haven't seen this issue before. What I would do is, log in as each user then view the source of the page in the browser (right click the page and click "View Page Source" from the context menu, or use developer tools/firebug in the browser). Compare
the HTML generated for the menu for each user and see if any other CSS classes get applied. My gut is that another class is being applied for the other users, or the HTML is different in some way.
Brandon Atkinson
Blog: http://sharepointbrandon.com

CSS Menu incorporated into Image. How is it done?

Hello everyone I hope your weekend if proving fruitful!
I have a little problem with Dreamweaver. Basically it is this:
I have created a banner in Photoshop with a gorgeous artwork image (I am pleased with it to be honest!). To add to its aethetic appeal I have decided to incorporate a CSS Menu into it. Please note the menu will not be at the top (in other words ABOVE the image) or below the image.   I am wanting to position it around 200 pixes from the top.
The technique I have used so far is this:
Create image in Photoshop
Use the slice tool to slice the image and slice the part where I want my CSS Menu to go
Save as "Html and images"
Import into Dreamweaver and remove the part that has been sliced for the navigation bar
Insert a div tag at insertion point and apply my bar
Please note I am okay at putting the html coding and css into the right place (I think!) but the problems I am having is that it seems disjointed and the menu bar is not fitting seamlessly without gaps into the image.
Would a possible solution be to slice up the image save only as "images" (no html) and then incorporate parts of the image (e.g. top, middle, bottom) into div tags and incorporate the menu bar that way?
Please note I am new to this so please don't laugh too hard at my stupidity!
I'll catch you later!
Thank you
Jake

No need to slice the banner image. Simply put your banner in the background with CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
/**CSS Reset to fix the box model**/
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    background:#CCC;
    font-size: 100%;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding: 0;
    width: 1000px; /*adjust width in px or % as req'd*/
    margin: 0 auto;/**with width, this is centered**/
header h1, header h2 {
    font-size: 26px;
    color: #999;
    display: inline;
    text-align: right;
    padding: 2%
/**TOP MENU**/
nav {
    min-height: 200px; /**same as banner height**/
/**banner in the background**/
    background: #198EBA url(http://placehold.it/1056x200/198EBA/FFFFFF&text=Banner.jpg) no-repeat;
nav ul li {
    list-style: none;
    margin-top: 150px; /**adjust where desired**/
nav li {
    display: inline-block;
    margin: 0 2%;
    font-size: 20px;
nav li a {
    text-decoration: none;
    color: #CCCEEE;
nav li a:hover,
nav li a:active,
nav li a:focus {
    text-decoration:underline;
    color:#0F9}
</style>
</head>
<body>

<header>
<h1>SiteName</h1>
<h2>Some Pithy Slogan</h2>
</header>


<nav>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>

</body>
</html>
Nancy O.

Is there a way to make a collapsible panel with only CSS?

I am trying to make a drop down menu in my about section check out the pic that are attached for more information.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>epecho | The visual works of Danel Roldán</title>
<link href="../css/reset.css" rel="stylesheet" type="text/css" />
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="container clear_children">

<ul id="nav_main">
    <p id="branding"><a href="news.html">epecho</a></p>
    <li><a href="work.html">work</a></li>
    <li><a href="about.html">about</a></li>
    <ul class="nav_sub">
        <li><a href="#">epecho</a></li>
        <li><a href="#">process</a></li>
        <li><a href="#">quote</a></li>
    </ul>
    <li><a href="resume.html">resume</a></li>
    <li><a href="contact.html">contact</a></li>
</ul>


<div class="content clear_children">
    
    <div class="content_main cc_tallest">
      <h1 id="headingepechodesign">EPECHO DESIGN</h1>
      <h2 id="headingaboutepecho">&rsaquo; ABOUT EPECHO</h2>
      <p>Epecho design specializes in standards based web sites,
        branding and print design. It is our passion to effectively
        communicate visually, who you are now, and where you
        want to go. Contact us if you have a project you think would
        benefit from our collaboration.</p>
      <p>Epecho design is the passion of Danel Roldan — a freelance
        designer, and was birthed in 2004. This site is an ensemble
        of creative projects that strive to maintain simplicity at
        their core. It is also a home of collective thought and a
        resource pool of ideas and the inspiration behind them.</p>
    </div>
    
</div>


<div class="footer">
    <p>Copyright Epecho Design 2008-2009</p>
    <p id="above"><a href="" id="logo"><img src="../images/button_top.gif" width="22" height="17" alt="epecho_logo"/></a></p>
</div>

</div>

<script type="text/javascript" src="../js/si-clear-children.js"></script>
</body>
</html>
Layout CSS
=Body
=Navigation
=Content
=Side Bar
=index
=News
=Works
=Projects
=About
=Resume
/* =Body
body {
background-color: #120100;
background-repeat: no-repeat;
background-position: center top;
background-attachment:fixed;
background-image: url(../images/pg_bg.jpg);
/* I HAVE TO FIND OUT WHAT I WAS USING THIS FOR
ol {
height: 133px;
width: 540px;
list-style-type: none;
position: relative;
p {
text-align: left;
em {
font-family:Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
.new {
clear:right;
color:#FFCC00;
font-family:Verdana, Helvetica, sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
a {
color:#B7EEE7;
font-family:Verdana, Helvetica, sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
line-height:18px;
text-decoration:none;
/* =Navigation
#nav_main {
width: 147px;
height: 325px;
background: url(../images/nav-main.png);
background-repeat: no-repeat;
background-position: center top;
top: 125px;
padding-top: 150px;
position: absolute;
#branding {
width: 69px;
height: 78px;
background-image: url(../images/branding.png);
background-repeat: no-repeat;
background-position: center top;
position: absolute;
text-indent: -9999px;
left: 45px;
top: 64px;
#nav_main li {
list-style-type: none;
text-align: center;
margin-top: 10px;
#nav_main a:link {
color:#6F6F6F;
font-weight:bold;
letter-spacing:1px;
text-transform: uppercase;
font-size: 85%;
#nav_main a:visited {
color:#6F6F6F;
font-weight: bold;
text-transform: uppercase;
font-size: 85%;
#nav_main a:hover {
font-weight: bold;
text-transform: uppercase;
font-size: 85%;
color: #878888;
#nav_main a:active {
color:#CCCCCC;
font-weight: bold;
text-transform: uppercase;
font-size: 85%;
#nav_mainOn {
color:#B7EEE7;
#nav_main .nav_sub ul{
text-align: center;
white-space: nowrap;
display: none;
list-style-image: none;
list-style-type: none;
position: relative;
#nav_main .nav_sub li {
position: relative;
visibility: hidden;
font-weight: normal;
#nav_main .nav_sub li ul, ul li {
display: block;
#nav_main .nav_sub li a:link {
font-size: 12px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
#nav_main .nav_sub a:visited {
font-size: 12px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
#nav_main .nav_sub a:hover {
color: #A5A136;
#nav_main .nav_sub a:active {
#nav_sub02 {
height:25px;
padding:0;
text-align:left;
margin-top: 10px;
margin-right: 0;
margin-bottom: 8px;
margin-left: 10px;
#nav_sub02 img {
float:left;
margin:0 20px 0 5px;
padding:0;
position:relative;
.container {
width: 940px;
margin-right: auto;
margin-left: auto;
position: relative;
.content {
text-align:left;
left: 225px;
border-left-width: thin;
border-left-style: dotted;
border-left-color: #930;
border-right-width: thin;
border-right-style: dotted;
border-right-color: #930;
width: 540px;
padding-left: 20px;
.content_main {
width: 469px;
padding-bottom: 125px;
padding-top: 125px;
.content_main h3 {
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
font-weight: bold;
color: #a79f22;
line-height: 20px;
/* =Side Bar
.sidebar {
position: absolute;
top: 280px;
left: 580px;
width: 134px;
.sidebar ul {
list-style-type: none;
text-align: left;
#sidebar li {
list-style-type: none;
text-align: left;
/* =Resume
#vcard-wrap {
position: relative;
height: 133px;
width: 540px;
.vcard {
width: 240px;
.vcard .name {
border-collapse:separate;
border-spacing:0;
.vcard .first-name {
font-family: "Lucida Console", Monaco, monospace;
font-size: 466%;
font-weight: 900;
line-height: 80px;
.vcard .sir-name {
font-family: "Lucida Console", Monaco, monospace;
font-size: 390%;
line-height: 50px;
#adress {
left: 236px;
height: 133px;
width: 304px;
list-style-type: none;
position: absolute;
top: 0px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #930;
#adress li span {
float: left;
height: 22px;
line-height: 0px;
padding-top: 20px;
text-align: center;
#adress .logo {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-position: center center;
width: 44px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: dotted;
border-bottom-style: dotted;
border-right-color: #930;
border-bottom-color: #930;
text-indent: -9999px;
#adress .email {
width: 254px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #930;
#adress .street-address {
width: 147px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: dotted;
border-bottom-style: dotted;
border-right-color: #930;
border-bottom-color: #930;
#adress .phone {
width: 155px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #930;
#adress .locality {
width: 90px;
#adress .state {
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #930;
padding-right: 5px;
#adress .postal-code {
width: 60px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #930;
#adress .region {
text-align: center;
padding-left: 10px;
a.thankyou_btn {
display: block;
width: 6in;
height: 2.5in;
text-decoration: none;
margin-top: 350px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-image: url(../images/thankyou.png);
background-repeat: no-repeat;
background-position: center center;
a.emailerror_btn {
display: block;
width: 6in;
height: 2.5in;
text-decoration: none;
margin-top: 350px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position: center center;
/* =index
a.enter_btn {
display: block;
width: 6in;
height: 2.5in;
text-decoration: none;
margin-top: 350px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-image: url(../images/enter.png);
background-repeat: no-repeat;
background-position: center top;
a.enter_btn:hover {
background-position: 0px -240px;
.attic {
float:left;
height:160px;
margin:0px;
padding:0px;
text-align:left;
width:216px;
.attic a {
float:left;
height:160px;
position:relative;
text-decoration:none;
width:216px;
.attic a:hover {
border: 1px solid #95470E;
.attic img {
border-style:none;
float:left;
margin:8px;
padding:0;
position:relative;
.attic span.head {
color:#B7EEE7;
font-family:Times, serif;
font-size:17px;
font-style:italic;
font-weight:normal;
margin:8px 0 3px 8px;
padding:0;
.attic span.sub {
color:#8A8A8A;
font-family:Helvetica, Verdana, sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
margin:0 8px 8px;
padding:0;
.atticNEW {
float:left;
height:163px;
margin:0px;
padding:0px;
text-align:left;
width:216px;
.atticNEW a {
background-color:#323232;
float:left;
height:160px;
margin:0;
position:relative;
text-decoration:none;
top:0;
width:216px;
padding: 0px;
.atticNEW a:hover {
background-color:#525252;
.atticNEW img {
border-style:none;
float:left;
padding:0;
margin: 8px;
position: relative;
.atticNEW span.head {
color:#B7EEE7;
font-family:Times, serif;
font-size:17px;
font-style:italic;
font-weight:normal;
padding:0;
margin-top: 8px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 8px;
.atticNEW span.sub {
color:#8A8A8A;
font-family:Helvetica, Verdana, sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
margin:0 8px 8px;
padding:0;
/* =Projects
#workBox {
clear:left;
float:left;
padding:0;
position:relative;
width:700px;
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
#workBox.sample {
float:left;
margin:0;
padding:0;
position:relative;
width:550px;
.sampleTxt {
clear:both;
padding:0;
position:absolute;
width:115px;
left: 578px;
top: 0px;
.sampleTxt p.head {
color:#B7EEE7;
font-family:Times, serif;
font-size:17px;
font-style:italic;
font-weight:normal;
margin:8px;
padding:0;
.sampleTxt p.sub {
color:#999999;
font-family:Helvetica, Verdana, sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
line-height:18px;
margin:0 8px 8px;
padding:0;
.sampleTxt a {
color:#B7EEE7;
font-family:Helvetica, Verdana, sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
line-height:18px;
margin:0;
padding:0;
text-decoration:none;
.sampleTxt a:hover {
color:#B7EEE7;
font-family:Helvetica, Verdana, sans-serif;
font-size:11px;
font-style:normal;
font-weight:normal;
line-height:18px;
margin:0;
padding:0;
text-decoration:underline;
#headingwelcometoepecho {
width: 18px;
height: 186px;
background-image: url(../images/welcometoepecho.png);
background-repeat: no-repeat;
background-position: top left;
top: 283px;
left: -69px;
position: absolute;
text-indent: -9999px;
/* =News
#headingnewsandevents {
background-image: url(../images/newsandevents.png);
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999px;
width: 248px;
height: 128px;
position: relative;
#headingongoingprojects {
width: 18px;
height: 177px;
background-image: url(../images/ongoingprojects.png);
background-repeat: no-repeat;
background-position: top left;
top: 3px;
left: -60px;
position: absolute;
text-indent: -9999px;
#headingtipsandtidbits {
width: 18px;
height: 157px;
background-image: url(../images/tipsandtidbits.png);
background-repeat: no-repeat;
background-position: top left;
top: 322px;
left: -59px;
position: absolute;
text-indent: -9999px;
#headingourloveandourpassion {
width: 18px;
height: 245px;
background-image: url(../images/ourworkourloveourpassion.png);
background-repeat: no-repeat;
background-position: top left;
top: 273px;
left: -71px;
position:absolute;
text-indent: -9999px;
/* =Work
#headingworkandprojects {
width: 306px;
height: 128px;
background-image: url(../images/workandprojects.png);
background-repeat: no-repeat;
background-position: top left;
position: relative;
text-indent: -9999px;
#headingaboutepecho {
width: 18px;
height: 186px;
background-image: url(../images/aboutepecho.png);
background-repeat: no-repeat;
background-position: left top;
top: 275px;
left: -70px;
position: absolute;
text-indent: -9999px;
/* =About
#headingepechodesign {
background-image: url(../images/epechodesign.png);
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999px;
width: 248px;
height: 128px;
position: relative;
#headingpreparingforperfection {
width: 18px;
height: 243px;
background-image: url(../images/preparingforperfection.png);
background-repeat: no-repeat;
background-position: left top;
top: 274px;
left: -70px;
position: absolute;
text-indent: -9999px;
#headingprocessiskey {
background-image: url(../images/processiskey.png);
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999px;
width: 277px;
height: 128px;
position: relative;
#headingprojectandidentityquestionaire {
width: 18px;
height: 302px;
background-image: url(../images/projectandidentityquestionair.png);
background-repeat: no-repeat;
background-position: left top;
top: 275px;
left: -71px;
position: absolute;
text-indent: -9999px;
#headinghowmayihelpyou {
background-image: url(../images/howmayihelpyou.png);
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999px;
width: 309px;
height: 128px;
position: relative;
#headingemployment {
width: 18px;
height: 124px;
background-image: url(../images/employment.png);
background-repeat: no-repeat;
background-position: left top;
top: 280px;
left: -69px;
position: absolute;
text-indent: -9999px;
#headingprofessionalskills {
width: 18px;
height: 192px;
background-image: url(../images/professionalskills.png);
background-repeat: no-repeat;
background-position: left top;
top: 0px;
left: -58px;
position: absolute;
text-indent: -9999px;
#headingeducation {
width: 18px;
height: 107px;
background-image: url(../images/education.png);
background-repeat: no-repeat;
background-position: left top;
top: 273px;
left: -58px;
position: absolute;
text-indent: -9999px;
#headingotherintrests {
width: 18px;
height: 150px;
background-image: url(../images/otherintrests.png);
background-repeat: no-repeat;
background-position: left top;
top: 0px;
left: -58px;
position: absolute;
text-indent: -9999px;
#headingadditionalskills {
width: 18px;
height: 171px;
background-image: url(../images/additionalskills.png);
background-repeat: no-repeat;
background-position: left top;
top: 273px;
left: -58px;
position: absolute;
text-indent: -9999px;
.footer {
clear:both;
.footer p {
clear:both;
text-align:center;
font-size: 10px;
p#above {
margin:10px 0 0;
padding:0;
/* =Clears
.clear_children, .cc_tallest {
position: relative;
* html .clear_children {
display: inline;
.cc_tallest:after {
content: '';
} /* PREVENTS A REDRAW BUG IN SAFARI */
.expanded {
width: 700px;

I think you posted this on the wrong forum, you can make collapsible panels in flash but not with CSS.

Top 2 workable way to Create Windows 7 Password Reset Disk in any condition

This article describes how to create and use a Windows 7 password reset disk for a computer before and after you forgot the password. You can use Windows 7 password reset CD to gain access to your computer.
Scenario 1: I dont forget the password yet.
Windows 7 has its own backup feature, and you can proactively create a Windows 7 password reset disk before you forget it. With it, you can easily reset your Windows 7 password and get right into your PC.
Follow the easy steps below to create a password reset disk to your own Windows 7 account. Heres how:
Note that this procedure requires one blank, formatted floppy disk.
1. Click on "Start"->"Control"->"User Accounts and Family Safety"->"User Accounts".
2. In the task pane, click "Create a password reset disk". The "Forgotten Password Wizard" appears.
3. Click "Next", and then choose the portable media drive.
4. Click "Next", and then enter your current password in the next box and click "Next".
5. Windows 7 begin to create the password reset disk on your chosen media. When the progress bar reaches 100% complete, click "Next" and then click "Finish".
6. Now you can remove your device and store the disk in a safe place. Once you forget the password in the future, you can take it out.
Follow the easy steps below to use a password reset disk to recover Windows 7 password. Heres how:
1. The created password disk can now be used during log-ins to reset the password. A reset password link appears on the account screen after an unsuccessful attempt to log in.
2. Click on "Rest Password", and the "Password Reset Wizard" dialog opens. Here you need to insert the reset disk to the PC.
3. Follow the wizard to type a new password twice to make sure you type the correct password. You are suggested to create a new password hint, so that you can remember the password with it if you forget it.
4. Windows switches to the Windows log-in screen again where you can use the new password to log in.
Scenario 2: I have already forgotten the password.
If you have already forgotten your Windows 7 password but dont have a password reset disk at hand, you can choose another way to reset the password.
Here is how to create Windows 7 password reset CD/USB:
1. This procedure needs a CD or USB flash drive. Insert your media device into another computer which can access to system as administrator.
2. Launch Windows 7 password reset disk software. On the main interface, choose "reset Windows local account password".
3. Choose your target device, and click "Burn" to start Windows 7 password reset disk creation.
Here is how to reset Windows 7 password:
1. With this Windows 7 Password Reset USB software, boot the computer that you want to reset the password for.
2. Under Windows PE, you enter the main interface of this software. Choose your Windows system, and select the user account you need to reset password.
3. Click "Reset", and then "Yes" & "OK" sequentially to finish removing Windows 7 password.
Quite easy, isn't it? After fully control system password reset, you will never worry about your bad memory
+Message was edited: link has been removed+

well, as to reset Windows 7 password on toshiba laptop, it is a good solution to take a Windows password recovery tool, like Windows Password Unlocker
+Message was edited: link has been removed+

Css upload problem

I've just installed CS3 Design Premium and made changes to a
css file and uploaded it to the remote host using the put button.
The page did not find the stylesheet and displayed all over the
place. I then went to another pc and uploaded the same file to the
same place using Dreamweaver 8 and the page found the css and
displayed correctly. I then tried it on a different site with the
same result - CS3 went missing while the same file uploaded with
DW8 had no problems. View source on both pages showed the correct
link to the stylesheet.
I'm a bit confused - has any body had a similar experience or
know what's causing this?

IE uses different basic settings for margins, padding, etc. in fact no two browser are exactly the same, this is why so many css 'hack's' are around, and also why if your styles overwrite any other css styles in a css script, 'odd' behavior can occur.
One solution is to always start yor css with a css reset, and whenever you attach a css file or change your css you should always review it.
for info on css reset see: http://meyerweb.com/eric/tools/css/reset/
Another solution is to use IE conditional statments to change the css to IE specific settings
Format for IE conditional statment is:

HTH
PZ

CSS Menu in Wordpress site

I am attempting to update a menu in a Wordpress site using CSS. I would like to have a repeating background image for each list item that is currently active and on hover, as I have done below. The problem is the image, although 50px high, only shows as the font size (14x) and only shows for the length of the characters. I need to figure out how to force the image to display full height and give some left and right padding.
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
height: 50px;
#menu li {
display: inline;
#menu a {
color: #1f2320;
font-size: 14px;
margin-left: 20px;
font-weight: bold;
#menu a:link {
#menu a:hover {
color: #679800;
text-decoration: none;
#menu li a:hover {
color: #679800;
text-decoration: none;
background-image: url(menu_over.jpg);
background-repeat: repeat-x;

Hi Nancy; I fixed the borders issue, but cannot seem to get over the fact that everytime I add the full height (50px) for the line height, all that happens is the links are pushed down several pixels. There must be something in the Wordpress theme CSS that's making this happen. I rarely build CSS menus from scratch...
This works fine, but the borders, backgrounds, etc. only extend the height of the font:
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
margin-left: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFC315;
line-height: normal;
#menu li {
display: inline;
line-height: 100%;
#menu li a {
height: 50px;
border-right-width: 1px;
border-right-style: solid;
font-size: 14px;
font-weight: bold;
border-right-color: #ffc315;
color: #262927;
padding-right: 9px;
padding-left: 9px;
#menu a:link {
#menu a:hover {
color: #679800;
#menu li a:hover {
color: #679800;
The full CSS file looks like this, and contains some strange things I suppose are WP-oriented:
Theme Name: Subway
Theme URI: none
Description: site
Tags:
Author: me
Author URI:
Latest updated:
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
/* remember to define focus styles! */
:focus {
outline: 0;
body {
line-height: 1;
color: black;
ol, ul {
list-style: none;
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
caption, th, td {
text-align: left;
font-weight: normal;
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
blockquote, q {
quotes: "" "";
/* END CSS RESET */
html{ background-color:#262927; font-family:Tahoma, Arial, Helvetica, sans-serif}
#wrapper{margin:0px auto; margin-top:20px;background-color:#181B19; width:960px; border:1px solid #383C37;
font-family: 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;}
#header{
background-image:url('banner.jpg');
width:920px;
height:312px;
background-repeat:no-repeat;
padding-top:10px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
#menu {
height: 50px;
width: 960px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
background-image: url(menu_bg.jpg);
background-repeat: no-repeat;
padding-top: 12px;
#menu ul {
display: inline;
margin-left: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFC315;
line-height: normal;
#menu li {
display: inline;
line-height: 100%;
#menu li a {
height: 50px;
border-right-width: 1px;
border-right-style: solid;
font-size: 14px;
font-weight: bold;
border-right-color: #ffc315;
color: #262927;
padding-right: 9px;
padding-left: 9px;
#menu a:link {
#menu a:hover {
color: #679800;
#menu li a:hover {
color: #679800;
#blog-title,#blog-description{margin-top:10px;margin-left:10px;}
#blog-title *{color:white; text-decoration:none}
#blog-description *,#blog-description{color:#DDDCD2;}
.sidebar{float:right; width:300px;margin-right:20px;margin-bottom:19px; color:#C1BCAC; background-color:#1f2320; border:1px solid #262927;padding:10px 0px 10px 0px;}
#container{float:left; width:580px; margin-left:20px; color:#C1BCAC; font-size:1.1em;margin-bottom:19px;}
#container blockquote{margin:0;padding:5px;background-color:#1f2320; border-top:1px solid #262927;border-bottom:1px solid #262927;}
#container blockquote blockquote{margin:0px 10px;padding:5px;background-color:#1f2320; border-top:1px solid #262927;border-bottom:1px solid #262927;}
.post {padding-bottom:30px;}
.clearboth{clear:both;}
.page-link{clear:both;width:100%;}
/* -----| Typography |--------------------------------------------------- */
a{color:white; text-decoration:none;}
a:hover{text-decoration:underline;}
h1, h2, h3, h4, h5, h6, #container blockquote, .entry-date,#wp-calendar caption {margin-bottom:0.8em; font-family: Georgia, 'Times New Roman', serif; font-weight: normal; margin-top:0px; padding-top:0px;line-height:1.3em;}
h1{
font-size:1.7em;
display: none;
h2{font-size:1.4em;}
h3, #wp-calendar caption{font-size:1.2em;}
p, #container li{margin-bottom:0.9em;margin-top:0.5em;line-height:1.7em;}
blockquote p{margin-bottom:0.5em;}
#container ul{ list-style-type:disc;padding-left:2em;}
#container ol{ list-style-type: decimal;padding-left:2em;}
.day{font-size:2em; color:white;}
#container h1{
color:#ffc315;
border-bottom:1px solid #262927;
margin-bottom:20px;
display:block;
#container h1 a,#container h2 a{
color:#ffce15;
padding-bottom:10px;
display:block;
text-decoration:none;
#container h1 a:hover,#container h2 a:hover{background-color:#262927;}
h2,h3,h4,h5,h6{
color:#ffce15;
.author{padding-bottom:5px;}
#container h2 a{border-bottom:1px solid #262927;}
#container .entry-meta{border-top:none;clear:both;line-height:1.4em;padding-bottom:10px;}
.entry-content{clear:both;}
/*DATE*/
.entry-date{float:right;border:1px solid #262927; background-color:#262927;padding:2px 5px 2px 5px;margin:0px 0px 10px 10px;}
.entry-date *{text-align:center;}
.sidebar ul, .sidebar ul li{list-style-type:none; padding:0;margin:0}
.sidebar ul{margin:0px 20px 0px 20px;}
.sidebar ul ul{margin:0px;}
.sidebar ul li{margin-bottom:15px;margin-top:15px;}
.sidebar ul li ul li{margin-bottom:5px;margin-top:5px;}
#wp-calendar, .calendar_wrap{width:100%; text-align:center;}
#wp-calendar caption{
color:#ffc315;
#wp-calendar td,#wp-calendar th{text-align:center;}
#wp-calendar th{font-weight:bold;}
#wp-calendar a{
color:#ffce15;
background-color:#181B19;
border:1px solid #262927;
display:block;
text-align:center
#wp-calendar a:hover{
color:#ffce15;
background-color:#262927;
display:block;
border:1px solid #262927;
text-decoration:none;
#footer{margin:10px auto; font-size:0.7em; padding:5px 0px 5px 0px; width:920px; color:#666666; text-align:right}
#footer a{color:#666666;}
.meta-sep{color:#333333;}
.nav-previous{float:left; width:45%;}
.nav-next{float:right; width:45%; text-align:right;}
.nav-previous a, .nav-next a{
display:block;
padding:3px;
color:#ffce15;
background-color:#1f2320;
border:1px solid #262927;
.nav-previous a:hover, .nav-next a:hover{ background-color:#262927; color:white; text-decoration:none;}
.navigation{margin-bottom:20px;margin-top:20px;}
.entry-meta{border-top:1px solid #262927;margin-top:20px;padding-top:10px;}
abbr{border:none;}
#s{border:1px solid #262927; background:#181B19; width:180px; color: #C1BCAC;padding:3px;}
#searchsubmit{border:1px solid #262927; width:50px;background:#262927; color:#C1BCAC;padding:3px;}
#searchsubmit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
#noresults-s,#comment{border:1px solid #383C37; background:#262927; width:180px; color: #C1BCAC;padding:3px;}
#comment{width:450px;}
#noresults-searchsubmit{border:1px solid #262927; width:50px;background:#262927; color:#C1BCAC;padding:3px;}
#submit{border:1px solid #262927; background:#262927; color:#C1BCAC;padding:3px;margin-top:5px;}
#noresults-searchsubmit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
#submit:hover{
color:#ffce15;
border:1px solid #C1BCAC;
.alignright{float:right; margin:10px 0px 5px 10px;}
.alignleft{float:left; margin:10px 10px 5px 0px;}
.aligncenter{margin:10px auto;}
.avatar{float:right; padding:5px; border:1px solid #999999; background-color:#FFFFFF;}

Template or CSS style sheet

Which is the better way to start a website from scratch?
1. To make a comprehensive Template with lots of CSS rules and then base all the other pages on the template OR
2. Make individual pages and apply external CSS styles to each page?
I'm really confused about how to structure my website. I've looked at a lot of tutorials on how to build all these separate elements but I'm having a hard time visualizing an overall structure.

Adding to Nancy's comments and with the knowledge that you are a newbie, I would suggest that you start with a single page first, called index.html.
Start with the markup (HTML) first as per
1. ensure that you start with the proper document structure
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Title</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
2. Enter the content into the BODY element
<div class="header">
    <h1>Company Name</h1>
<div class="nav">
      <ul>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Archives</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Subscribe via. RSS</a></li>
    </ul>
</div>
</div>
<div class="article">
<h2>Article</h2>
<p>Eu fugiat nulla pariatur. Velit esse cillum dolore ut aliquip ex ea commodo consequat. Duis aute irure dolor qui officia deserunt sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua.</p>
</div>
<div class="aside">
<h3>Did you know?</h3>
<p>Eu fugiat nulla pariatur. Velit esse cillum dolore ut aliquip ex ea commodo consequat. </p>
<div class="footer">
<h4>© Comapny name</h4>
</div>
3. View in your favourite browser and you will see that it looks horrible. It needs some styling.
4. Create a file in a css subdirectory called style.css
5. In style.css start with browser reset rules as per http://meyerweb.com/eric/tools/css/reset/. This will help to ensure that you don't have browser problems down the track.
6. Enter a few style rules into the CSS file
body {
    width: 1000px;
    margin: auto;
.header {
    height: 120px;
    background: #063;
.header h1 {
    color: silver;
.nav {
    background: darkgray;
    height: 35px;
.nav ul li {
    position: relative;
    text-align: left;
    width: 10em;
    float: left;
.nav ul a {
    display: block;
    background-color: darkgray;
    padding: 0.5em 0.75em;
    color: white;
    text-decoration: none;
I did not finish the CSS, leaving it up to your imagination.
The above is the workflow that I would suggest for all newbies. At each stage, check in the browser to see the effect of the addition/change/deletion.

Insert css reset

Similar Messages

Maybe you are looking for