Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje24-07-2010, 15:56 (UTC)    
Título del mensaje: Problema con plantilla CSS
Responder citando
Estoy adaptando una plantilla css, ví un tutorial, ya casi la tengo, pero tiene algunos errores, y no se como solucionarlos. Estos son mis códigos:

Texto por encima de la página:
Código:
<?xml version="1.0"?>
<!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" xml:lang="cs" lang="cs">
<head>
<title>CrystalX</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<link rel="stylesheet" media="aural" type="text/css" href="css/aural.css" />
</head>
<body id="www-url-cz">
<!-- Main -->
<div id="main" class="box">
  <!-- Header -->
  <div id="header">
    <!-- Logotyp -->
    <h1 id="logo">Luis Leonardo Jiménez Flores<span></span></h1>
    <hr class="noscreen" />
    <!-- Quick links -->
    <div class="noscreen noprint">
      <p><em>Quick links: <a href="#content">content</a>, <a href="#tabs">navigation</a>, <a href="#search">search</a>.</em></p>
      <hr />
    </div>
    <!-- Search -->
    <div id="search" class="noprint">
      <form action="#" method="get">
        <fieldset>
        <legend>Search</legend>
        <label><span class="noscreen">Find:</span> <span id="search-input-out">
        <input type="text" name="" id="search-input" size="30" />
        </span></label>
        <input type="image" src="http://img693.imageshack.us/i/searchsubmit.gif/" id="search-submit" value="OK" />
        </fieldset>
      </form>
    </div>
    <!-- /search -->
  </div>
  <!-- /header -->
  <!-- Main menu (tabs) -->
  <div id="tabs" class="noprint">
    <h3 class="noscreen">Navigation</h3>
    <ul class="box">
      <li id="active"><a href="http://www.free-css.com/">Inicio<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <!-- Active -->
      <li><a href="http://www.free-css.com/">Entretenimiento<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Utilidades<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Descargas<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Computación<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Música<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Otros sitios<span class="tab-l"></span><span class="tab-r"></span></a></li>
    </ul>
    <hr class="noscreen" />
  </div>
  <!-- /tabs -->
  <!-- Page (2 columns) -->
  <div id="page" class="box">
    <div id="page-in" class="box">
      <div id="strip" class="box noprint">
        <!-- RSS feeds -->
        <p id="rss"><strong>RSS:</strong> <a href="http://www.free-css.com/">articles</a> / <a href="http://www.free-css.com/">comments</a></p>
        <hr class="noscreen" />
        <!-- Breadcrumbs -->
        <p id="breadcrumbs">You are here: <a href="http://www.free-css.com/">Home</a> > <a href="http://www.free-css.com/">Category</a> > <strong>Page</strong></p>
        <hr class="noscreen" />
      </div>

      <!-- /strip -->
      <!-- Content -->
      <div id="content">
        <!-- Article -->
      <div class="article">



Texto por debajo de la página:
Código:
 <!-- /content -->
      <!-- Right column -->
      <div id="col" class="noprint" style="position:absolute;left:669px;top:367px;float:left">
        <div id="col-in">
          <!-- About Me -->
          <h3><span><a href="http://www.free-css.com/">About Me</a></span></h3>
          <div id="about-me">
            <p><img src="design/tmp_photo.gif" id="me" alt="Yeah, it´s me!" /> <strong>John Doe</strong><br />
              Age: 26<br />
              Dallas, TX<br />
              <a href="http://www.free-css.com/">Profile on MySpace</a></p>
          </div>
          <!-- /about-me -->
          <hr class="noscreen" />
          <!-- Category -->
          <h3 ><span>Category</span></h3>
          <ul id="category">
            <li id="category-active"><a href="http://www.free-css.com/">Selected category</a></li>
            <!-- Active -->
            <li><a href="http://www.free-css.com/">Category</a></li>
            <li><a href="http://www.free-css.com/">Category</a></li>
            <li><a href="http://www.free-css.com/">Category</a></li>
            <li><a href="http://www.free-css.com/">Category</a></li>
          </ul>
          <hr class="noscreen" />
          <!-- Archive -->
          <h3><span>Archive</span></h3>
          <ul id="archive">
            <li><a href="http://www.free-css.com/">January 2007</a></li>
            <li><a href="http://www.free-css.com/">December 2006</a></li>
            <li><a href="http://www.free-css.com/">November 2006</a></li>
            <li><a href="http://www.free-css.com/">October 2006</a></li>
            <li><a href="http://www.free-css.com/">September 2006</a></li>
            <li id="archive-active"><a href="http://www.free-css.com/">August 2006</a></li>
            <!-- Active -->
            <li><a href="http://www.free-css.com/">July 2006</a></li>
            <li><a href="http://www.free-css.com/">June 2006</a></li>
            <li><a href="http://www.free-css.com/">May 2006</a></li>
            <li><a href="http://www.free-css.com/">April 2006</a></li>
            <li><a href="http://www.free-css.com/">March 2006</a></li>
            <li><a href="http://www.free-css.com/">February 2006</a></li>
            <li><a href="http://www.free-css.com/">January 2006</a></li>
          </ul>
          <hr class="noscreen" />
          <!-- Links -->
          <h3><span>Links</span></h3>
          <ul id="links">
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
          </ul>
          <hr class="noscreen" />
        </div>
        <!-- /col-in -->
      </div>
      <!-- /col -->
    </div>
    <!-- /page-in -->
  </div>
  <!-- /page -->
  <!-- Footer -->
  <div id="footer">
    <div id="top" class="noprint">
      <p><span class="noscreen">Back on top</span> <a href="#header" title="Back on top ^">^<span></span></a></p>
    </div>
    <hr class="noscreen" />
    <p id="createdby">created by <a href="http://www.nuvio.cz">Nuvio | Webdesign</a>
      <!-- DON´T REMOVE, PLEASE! -->
    </p>
    <p id="copyright">© 2007 <a href="http://www.free-css.com/">My Name</a></p>
  </div>
  <!-- /footer -->
</div>
<!-- /main -->
</body>
</html>


CSS-Code sin Style Tags:



Código:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

/*
    Project: CrystalX
    URL: http://www.nuvio.cz
   
    Output device: screen, projection
   
    Author: Vit Dlouhy (vit.dlouhy@nuvio.cz); Nuvio (www.nuvio.cz)
    Last revision: 2006-12-05, 12:00 GMT+1

    Structure:
        display | position | float | overflow | width | height | border | margin | padding | background | align | font
*/

* {min-height:1px;}
body {border:0; margin:0; padding:0; background:#F2F5FE url("http://img706.imageshack.us/img706/898/39701702.gif") 0 0 repeat-x; font:70%/160% "verdana",sans-serif; color:#192666; _text-align:center;}

a {color:#192666;}
a:hover {color:#4F6AD7;}

p {border:0; margin:15px 0; padding:0;}

div {display:block; border:0; margin:0; padding:0;}

h1, h2, h3, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
h1 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h2 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h3 {font-size:120%; line-height:100%; font-weight:bold;}
h4 {font-size:120%;}
h5 {font-size:100%;}

table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #B7CAF6; font-size:100%;}
tr {display:table-row;}
th, td {display: table-cell; border:1px solid #B7CAF6; margin:0; padding:5px; vertical-align:top; text-align:left;}
th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}

ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
ol {list-style-type:decimal;}
li {display:list-item; border:0; margin:0; padding:0; _height:1px;}
ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}

dl {border:0; margin:15px 0; padding:0;}
dt {border:0; margin:0; padding:0; font-weight:bold;}
dd {border:0; margin:0 0 0 30px; padding:0;}

form {border:0; margin:0; padding:0;}
fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}

hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}

a, img, span {border:0; margin:0; padding:0;}
abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}

del, .through {text-decoration:line-through;}
strong, .strong {font-weight:bold;}
cite, em, q, var {font-style:italic;}
code, kbd, samp {font-family:monospace; font-size:110%;}

/* Floating */
.f-left {float:left;}
.f-right {float:right;}

/* Text align */
.t-left {text-align:left;}
.t-center {text-align:center;}
.t-right {text-align:right;}

.va-middle {vertical-align:middle;}

.clear {clear:both;}
.box {min-height:1px; _height:1px;}
.box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}

.nom {margin:0;}
.noscreen {display:none;}

/* -----------------...........--------------------------------------------------------------------------------------- */

#main {width:770px; margin:50px auto 0 auto; _text-align:left;}

/* Header */
#header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("http://img19.imageshack.us/img19/2267/headeryt.jpg") 0 0 no-repeat; color:#FFF;}

    /* Header - logo */
    #header #logo {position:absolute; top:35px; left:35px; margin:0;}

    #header #logo a {color:#FFF;}
    #header #logo a:hover {color:#B5C4E3; text-decoration:underline;}
   
    /* Header - Search */
    #header #search {position:absolute; top:35px; right:20px;}
    #header #search form {position:relative;}
    #header #search #search-input-out {position:absolute; top:0; right:45px; width:155px; height:28px; margin:0; padding:0; border:0; background:url("http://img191.imageshack.us/img191/2710/searchinput.gif") 0 0 no-repeat; font:bold 90%/100% "verdana",sans-serif; color:#192666;}
    #header #search #search-input {width:140px; margin:5px 8px; padding:3px 0; border:0; background:#FFF; font:bold 100%/100% "verdana",sans-serif; color:#192666;}
    #header #search #search-submit {position:absolute; top:0; right:0px;}
    #header #search fieldset {margin:0; padding:0; border:0;}
    #header #search fieldset {width:200px;}
    #header #search legend {display:none;}

/* Main menu (tabs) */
#tabs {background:#192666; margin:0 5px; padding:10px 0 0 0; _height:1px;}

    #tabs ul {margin:0 10px; padding:0; list-style:none;}
    #tabs ul li {margin:0 5px 0 0; padding:0; float:left;}
    #tabs ul li a {display:block; position:relative; padding:7px 15px; border:0; background:url("http://img28.imageshack.us/img28/3607/tablink.gif") 0 0 repeat-x; color:#B5C4E3; font-weight:bold; text-decoration:none; cursor:pointer;}
   
    /* Main menu (tabs - link) */
    #tabs ul li a span.tab-l, #tabs ul li a:hover span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("http://img51.imageshack.us/img51/9318/tablinkl.gif") 0 0 no-repeat;}
    #tabs ul li a span.tab-r, #tabs ul li a:hover span.tab-r {position:absolute; top:0; right:0; _right:-1px; width:8px; height:8px; background:url("http://img257.imageshack.us/img257/3007/tablinkr.gif") 100% 0 no-repeat;}
   
    /* Main menu (tabs - hover) */
    #tabs ul li a:hover {background:url("http://img22.imageshack.us/img22/7787/tabhover.gif") 0 0 repeat-x; color:#FFF;}
    #tabs ul li a:hover span.tab-l {background:url("http://img267.imageshack.us/img267/4556/tabhoverl.gif") 0 0 no-repeat;}
    #tabs ul li a:hover span.tab-r {background:url("http://img594.imageshack.us/img594/4471/tabhoverr.gif") 100% 0 no-repeat;}
   
    /* Main menu (tabs - active) */
    #tabs ul li#active a {background:#FFF; color:#FF9000;}
    #tabs ul li#active a span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("http://img17.imageshack.us/img17/1476/tabactivel.gif") 0 0 no-repeat;}
    #tabs ul li#active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url("http://img806.imageshack.us/img806/2723/tabactiver.gif") 100% 0 no-repeat;}

/* Page (2 columns) */
#page {width:770px; min-height:1px; background:#FFF url("http://img708.imageshack.us/img708/2570/bgpage.gif") 0 0 repeat-y; _height:1px;}
#page-in {min-height:1px; padding:10px 0; background:url("http://img43.imageshack.us/img43/2471/bgpagein.jpg") 0 0 no-repeat; _height:1px;}

/* Strip */
#strip {position:relative; clear:both; padding:3px 20px 10px 20px; color:#6182D1;}
#strip p {margin:0;}
#strip a {color:#6182D1;}
#strip a:hover {color:#192666;}

    /* Strip - breadcrumbs */
    #strip #breadcrumbs {width:520px; margin:0; padding:0;}
   
    /* Strip - RSS */
    #strip #rss {float:right; width:175px; _width:200px; margin:0; padding-left:25px; background:url("http://img199.imageshack.us/img199/8486/icorssm.gif") 0 50% no-repeat}

/* Content */
#content {float:left; width:530px; _width:550px; margin:0; padding:0 0 0 20px;}

    /* Content - article */
    #content .article {clear:both; margin:0; padding:20px; background:url("http://img43.imageshack.us/img43/2421/contentarticlebg.jpg") 0 0 no-repeat;}
    #content .article h2 {margin:0 -20px; padding:10px; background:#DEE5FD url("http://img251.imageshack.us/img251/8026/contenttitlebg.gif") 0 0 repeat-y; color:#192666;}
    #content .article h2 span {background:url("http://img713.imageshack.us/img713/980/icolist.gif") 0 50% no-repeat; padding-left:25px;}
   
    #content .article p {text-align:justify;}
    #content .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #DEE5FD; color:#6685CC;}
    #content .info a {color:#6685CC;}
    #content .info a:hover {color:#FF9000;}
   
    #content .info span.date, #content .info span.cat, #content .info span.user, #content .info span.comments {padding-left:15px;}
    #content .info span.date {background:url("http://img685.imageshack.us/img685/6708/icodate.gif") 0 50% no-repeat;}
    #content .info span.cat {background:url("http://img534.imageshack.us/img534/9739/icocat.gif") 0 50% no-repeat; margin-left:8px;}
    #content .info span.user {background:url("http://img59.imageshack.us/img59/5461/icouser.gif") 0 50% no-repeat; margin-left:8px;}
    #content .info span.comments {background:url("http://img687.imageshack.us/img687/6679/icocomments.gif") 0 50% no-repeat; margin-left:8px;}

    /* Content - More */
    #content .btn-more {margin:0 0 15px 0; padding:0; border:0; position:relative;}
    #content .btn-more a {display:block; position:absolute; top:0; right:0; width:67px; _width:95px; height:21px; margin:0; padding:0 0 0 28px; background:url("http://img193.imageshack.us/img193/1027/btnmore.gif") 0 0 no-repeat; color:#FFF; text-decoration:none;}
    #content .btn-more a:hover {background:url("http://img193.imageshack.us/img193/1027/btnmore.gif") -95px 0 no-repeat;}

/* Right column */
#col {float:left; width:200px; margin:0; padding:0; background:#CEDBF9 url("http://img801.imageshack.us/img801/2589/colbg.gif") 0 0 repeat-y;}
#col-in {padding:20px 10px; background:url("http://img337.imageshack.us/img337/4084/coltop.gif") 0 0 no-repeat;}
#col h3 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#A0B9F3 url("http://img694.imageshack.us/img694/771/coltitlebg.gif") 0 0 repeat-y; color:#192666;}

    /* Right column - About me */
    #col #about-me {margin-bottom:15px; line-height:130%;}
    #col #about-me p {margin:0;}
    #col #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}

    /* Right column - Category */
    #col ul#category {margin:15px 0; padding:0; list-style:none;}
    #col ul#category li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
    #col ul#category li a {display:block; padding:3px 0 3px 22px; background:url("http://img695.imageshack.us/i/icoarchive.gif/") 5px 6px no-repeat; text-decoration:none;}
    #col ul#category li a:hover {background-color:#D3DFF8; color:#192666;}
    #col ul#category li#category-active a {background:#E0E8FA url("http://img42.imageshack.us/img42/4243/icoarchive2q.gif") 5px 50% no-repeat; font-weight:bold;}
   
    /* Right column - Archive */
    #col ul#archive {margin:15px 0; padding:0; list-style:none;}
    #col ul#archive li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
    #col ul#archive li a {display:block; padding:3px 0 3px 22px; background:url("http://img695.imageshack.us/img695/9471/icoarchive.gif") 5px 50% no-repeat; text-decoration:none;}
    #col ul#archive li a:hover {background-color:#D3DFF8; color:#192666;}
    #col ul#archive li#archive-active a {background:#E0E8FA url("http://img42.imageshack.us/img42/4243/icoarchive2q.gif") 5px 6px no-repeat; font-weight:bold;}
   
    /* Right column - Links */
    #col ul#links {margin:15px 0; padding:0; list-style:none;}
    #col ul#links li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
    #col ul#links li a {display:block; padding:3px 0 3px 22px; background:url("http://img685.imageshack.us/img685/1492/icolinks.gif") 5px 6px no-repeat; text-decoration:none;}
    #col ul#links li a:hover {background-color:#D3DFF8; color:#192666;}

/* Footer */
#footer {position:relative; clear:both; width:770px; height:60px; margin-bottom:50px; background:url("http://img96.imageshack.us/img96/5325/footerdo.jpg") 0 0 no-repeat; color:#6685CC;}
#footer a {color:#6685CC;}
#footer a:hover {color:#192666;}

    /* Footer - "back on top" */
    #top {position:absolute; top:55px; left:550px;}
    #top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
    #top p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("http://img62.imageshack.us/img62/5306/icotop.gif") 0 0 no-repeat; cursor:pointer;}
    #top a:hover span {background:url("http://img62.imageshack.us/img62/5306/icotop.gif") -30px 0 no-repeat;}

    /*  Footer - copyright */
    #footer p#copyright {position:absolute; top:10px; left:40px; margin:0;}

    /* Footer - created by */
    #createdby {position:absolute; top:10px; left:562px; margin:0; color:#8CA3D8;}
    #createdby a {color:#8CA3D8;}


/*
    Project: CrystalX
    URL: http://www.nuvio.cz

    Output device: aural

    Author: Vit Dlouhy (vit.dlouhy@nuvio.cz); Nuvio (www.nuvio.cz)
    Last revision: 2006-12-05, 12:00 GMT+1
*/

body {voice-family:paul,male; volume:loud; speech-rate:slow; richness:90; stress:20;}

h1, h2, h3, h4, h5 {cue-before:url("ping.au");}

p, table {pause:50ms;}

em, q, cite, blockquote {pitch:medium; pitch-range:60; stress:60; richness:50;}

strong {pitch:medium; pitch-range:60; stress:90; richness:90;}
pre, code {speak-punctuation:code;}


Los códigos originales como cuando los descargue son estos:

El index es así:
Código:
<?xml version="1.0"?>
<!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" xml:lang="cs" lang="cs">
<head>
<title>CrystalX</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<link rel="stylesheet" media="aural" type="text/css" href="css/aural.css" />
</head>
<body id="www-url-cz">
<!-- Main -->
<div id="main" class="box">
  <!-- Header -->
  <div id="header">
    <!-- Logotyp -->
    <h1 id="logo"><a href="http://www.free-css.com/">Crystal<strong>X</strong><span></span></a></h1>
    <hr class="noscreen" />
    <!-- Quick links -->
    <div class="noscreen noprint">
      <p><em>Quick links: <a href="#content">content</a>, <a href="#tabs">navigation</a>, <a href="#search">search</a>.</em></p>
      <hr />
    </div>
    <!-- Search -->
    <div id="search" class="noprint">
      <form action="#" method="get">
        <fieldset>
        <legend>Search</legend>
        <label><span class="noscreen">Find:</span> <span id="search-input-out">
        <input type="text" name="" id="search-input" size="30" />
        </span></label>
        <input type="image" src="design/search_submit.gif" id="search-submit" value="OK" />
        </fieldset>
      </form>
    </div>
    <!-- /search -->
  </div>
  <!-- /header -->
  <!-- Main menu (tabs) -->
  <div id="tabs" class="noprint">
    <h3 class="noscreen">Navigation</h3>
    <ul class="box">
      <li><a href="http://www.free-css.com/">Home<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li id="active"><a href="http://www.free-css.com/">Weblog<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <!-- Active -->
      <li><a href="http://www.free-css.com/">About Me<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Photos<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Portfolio<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Contact<span class="tab-l"></span><span class="tab-r"></span></a></li>
      <li><a href="http://www.free-css.com/">Links<span class="tab-l"></span><span class="tab-r"></span></a></li>
    </ul>
    <hr class="noscreen" />
  </div>
  <!-- /tabs -->
  <!-- Page (2 columns) -->
  <div id="page" class="box">
    <div id="page-in" class="box">
      <div id="strip" class="box noprint">
        <!-- RSS feeds -->
        <p id="rss"><strong>RSS:</strong> <a href="http://www.free-css.com/">articles</a> / <a href="http://www.free-css.com/">comments</a></p>
        <hr class="noscreen" />
        <!-- Breadcrumbs -->
        <p id="breadcrumbs">You are here: <a href="http://www.free-css.com/">Home</a> &gt; <a href="http://www.free-css.com/">Category</a> &gt; <strong>Page</strong></p>
        <hr class="noscreen" />
      </div>
      <!-- /strip -->
      <!-- Content -->
      <div id="content">
        <!-- Article -->
        <div class="article">
          <h2><span><a href="http://www.free-css.com/">This is my best article</a></span></h2>
          <p class="info noprint"> <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span> <span class="cat"><a href="http://www.free-css.com/">Category</a></span><span class="noscreen">,</span> <span class="user"><a href="http://www.free-css.com/">My name</a></span><span class="noscreen">,</span> <span class="comments"><a href="http://www.free-css.com/">Comments</a></span> </p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
            Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
            ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
            auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
            Sed id ante.</p>
          <p class="btn-more box noprint"><strong><a href="http://www.free-css.com/">Continue</a></strong></p>
        </div>
        <!-- /article -->
        <hr class="noscreen" />
        <!-- Article -->
        <div class="article">
          <h2><span><a href="http://www.free-css.com/">This is my third article</a></span></h2>
          <p class="info noprint"> <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span> <span class="cat"><a href="http://www.free-css.com/">Category</a></span><span class="noscreen">,</span> <span class="user"><a href="http://www.free-css.com/">My name</a></span><span class="noscreen">,</span> <span class="comments"><a href="http://www.free-css.com/">Comments</a></span> </p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
            Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
            ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
            auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
            Sed id ante.</p>
          <p class="btn-more box noprint"><strong><a href="http://www.free-css.com/">Continue</a></strong></p>
        </div>
        <!-- /article -->
        <hr class="noscreen" />
        <!-- Article -->
        <div class="article">
          <h2><span><a href="http://www.free-css.com/">This is my second article</a></span></h2>
          <p class="info noprint"> <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span> <span class="cat"><a href="http://www.free-css.com/">Category</a></span><span class="noscreen">,</span> <span class="user"><a href="http://www.free-css.com/">My name</a></span><span class="noscreen">,</span> <span class="comments"><a href="http://www.free-css.com/">Comments</a></span> </p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
            Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
            ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
            auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
            Sed id ante.</p>
          <p class="btn-more box noprint"><strong><a href="http://www.free-css.com/">Continue</a></strong></p>
        </div>
        <!-- /article -->
        <hr class="noscreen" />
        <!-- Article -->
        <div class="article">
          <h2><span><a href="http://www.free-css.com/">This is my first article</a></span></h2>
          <p class="info noprint"> <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span> <span class="cat"><a href="http://www.free-css.com/">Category</a></span><span class="noscreen">,</span> <span class="user"><a href="http://www.free-css.com/">My name</a></span><span class="noscreen">,</span> <span class="comments"><a href="http://www.free-css.com/">Comments</a></span> </p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
            Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
            ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
            auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
            Sed id ante.</p>
          <p class="btn-more box noprint"><strong><a href="http://www.free-css.com/">Continue</a></strong></p>
        </div>
        <!-- /article -->
        <hr class="noscreen" />
      </div>
      <!-- /content -->
      <!-- Right column -->
      <div id="col" class="noprint">
        <div id="col-in">
          <!-- About Me -->
          <h3><span><a href="http://www.free-css.com/">About Me</a></span></h3>
          <div id="about-me">
            <p><img src="design/tmp_photo.gif" id="me" alt="Yeah, it´s me!" /> <strong>John Doe</strong><br />
              Age: 26<br />
              Dallas, TX<br />
              <a href="http://www.free-css.com/">Profile on MySpace</a></p>
          </div>
          <!-- /about-me -->
          <hr class="noscreen" />
          <!-- Category -->
          <h3 ><span>Category</span></h3>
          <ul id="category">
            <li id="category-active"><a href="http://www.free-css.com/">Selected category</a></li>
            <!-- Active -->
            <li><a href="http://www.free-css.com/">Category</a></li>
            <li><a href="http://www.free-css.com/">Category</a></li>
            <li><a href="http://www.free-css.com/">Category</a></li>
            <li><a href="http://www.free-css.com/">Category</a></li>
          </ul>
          <hr class="noscreen" />
          <!-- Archive -->
          <h3><span>Archive</span></h3>
          <ul id="archive">
            <li><a href="http://www.free-css.com/">January 2007</a></li>
            <li><a href="http://www.free-css.com/">December 2006</a></li>
            <li><a href="http://www.free-css.com/">November 2006</a></li>
            <li><a href="http://www.free-css.com/">October 2006</a></li>
            <li><a href="http://www.free-css.com/">September 2006</a></li>
            <li id="archive-active"><a href="http://www.free-css.com/">August 2006</a></li>
            <!-- Active -->
            <li><a href="http://www.free-css.com/">July 2006</a></li>
            <li><a href="http://www.free-css.com/">June 2006</a></li>
            <li><a href="http://www.free-css.com/">May 2006</a></li>
            <li><a href="http://www.free-css.com/">April 2006</a></li>
            <li><a href="http://www.free-css.com/">March 2006</a></li>
            <li><a href="http://www.free-css.com/">February 2006</a></li>
            <li><a href="http://www.free-css.com/">January 2006</a></li>
          </ul>
          <hr class="noscreen" />
          <!-- Links -->
          <h3><span>Links</span></h3>
          <ul id="links">
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
            <li><a href="http://www.free-css.com/">Something</a></li>
          </ul>
          <hr class="noscreen" />
        </div>
        <!-- /col-in -->
      </div>
      <!-- /col -->
    </div>
    <!-- /page-in -->
  </div>
  <!-- /page -->
  <!-- Footer -->
  <div id="footer">
    <div id="top" class="noprint">
      <p><span class="noscreen">Back on top</span> <a href="#header" title="Back on top ^">^<span></span></a></p>
    </div>
    <hr class="noscreen" />
    <p id="createdby">created by <a href="http://www.nuvio.cz">Nuvio | Webdesign</a>
      <!-- DON´T REMOVE, PLEASE! -->
    </p>
    <p id="copyright">&copy; 2007 <a href="http://www.free-css.com/">My Name</a></p>
  </div>
  <!-- /footer -->
</div>
<!-- /main -->
</body>
</html>


En la carpeta de CSS
vienen tres archivos, se llaman "aural", "main" y "print". Puse los códigos de "aural" y "main".
Estos son los códigos:

Aural:
Código:
/*
    Project: CrystalX
    URL: http://www.nuvio.cz

    Output device: aural

    Author: Vit Dlouhy (vit.dlouhy@nuvio.cz); Nuvio (www.nuvio.cz)
    Last revision: 2006-12-05, 12:00 GMT+1
*/

body {voice-family:paul,male; volume:loud; speech-rate:slow; richness:90; stress:20;}

h1, h2, h3, h4, h5 {cue-before:url("ping.au");}

p, table {pause:50ms;}

em, q, cite, blockquote {pitch:medium; pitch-range:60; stress:60; richness:50;}

strong {pitch:medium; pitch-range:60; stress:90; richness:90;}
pre, code {speak-punctuation:code;}


Main:
Código:
/*
    Project: CrystalX
    URL: http://www.nuvio.cz
   
    Output device: screen, projection
   
    Author: Vit Dlouhy (vit.dlouhy@nuvio.cz); Nuvio (www.nuvio.cz)
    Last revision: 2006-12-05, 12:00 GMT+1

    Structure:
        display | position | float | overflow | width | height | border | margin | padding | background | align | font
*/

* {min-height:1px;}
body {border:0; margin:0; padding:0; background:#F2F5FE url("../design/bg.gif") 0 0 repeat-x; font:70%/160% "verdana",sans-serif; color:#192666; _text-align:center;}

a {color:#192666;}
a:hover {color:#4F6AD7;}

p {border:0; margin:15px 0; padding:0;}

div {display:block; border:0; margin:0; padding:0;}

h1, h2, h3, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
h1 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h2 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h3 {font-size:120%; line-height:100%; font-weight:bold;}
h4 {font-size:120%;}
h5 {font-size:100%;}

table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #B7CAF6; font-size:100%;}
tr {display:table-row;}
th, td {display: table-cell; border:1px solid #B7CAF6; margin:0; padding:5px; vertical-align:top; text-align:left;}
th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}

ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
ol {list-style-type:decimal;}
li {display:list-item; border:0; margin:0; padding:0; _height:1px;}
ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}

dl {border:0; margin:15px 0; padding:0;}
dt {border:0; margin:0; padding:0; font-weight:bold;}
dd {border:0; margin:0 0 0 30px; padding:0;}

form {border:0; margin:0; padding:0;}
fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}

hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}

a, img, span {border:0; margin:0; padding:0;}
abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}

del, .through {text-decoration:line-through;}
strong, .strong {font-weight:bold;}
cite, em, q, var {font-style:italic;}
code, kbd, samp {font-family:monospace; font-size:110%;}

/* Floating */
.f-left {float:left;}
.f-right {float:right;}

/* Text align */
.t-left {text-align:left;}
.t-center {text-align:center;}
.t-right {text-align:right;}

.va-middle {vertical-align:middle;}

.clear {clear:both;}
.box {min-height:1px; _height:1px;}
.box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}

.nom {margin:0;}
.noscreen {display:none;}

/* -----------------...........--------------------------------------------------------------------------------------- */

#main {width:770px; margin:50px auto 0 auto; _text-align:left;}

/* Header */
#header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("../design/header.jpg") 0 0 no-repeat; color:#FFF;}

    /* Header - logo */
    #header #logo {position:absolute; top:35px; left:35px; margin:0;}

    #header #logo a {color:#FFF;}
    #header #logo a:hover {color:#B5C4E3; text-decoration:underline;}
   
    /* Header - Search */
    #header #search {position:absolute; top:35px; right:20px;}
    #header #search form {position:relative;}
    #header #search #search-input-out {position:absolute; top:0; right:45px; width:155px; height:28px; margin:0; padding:0; border:0; background:url("../design/search_input.gif") 0 0 no-repeat; font:bold 90%/100% "verdana",sans-serif; color:#192666;}
    #header #search #search-input {width:140px; margin:5px 8px; padding:3px 0; border:0; background:#FFF; font:bold 100%/100% "verdana",sans-serif; color:#192666;}
    #header #search #search-submit {position:absolute; top:0; right:0px;}
    #header #search fieldset {margin:0; padding:0; border:0;}
    #header #search fieldset {width:200px;}
    #header #search legend {display:none;}

/* Main menu (tabs) */
#tabs {background:#192666; margin:0 5px; padding:10px 0 0 0; _height:1px;}

    #tabs ul {margin:0 10px; padding:0; list-style:none;}
    #tabs ul li {margin:0 5px 0 0; padding:0; float:left;}
    #tabs ul li a {display:block; position:relative; padding:7px 15px; border:0; background:url("../design/tab_link.gif") 0 0 repeat-x; color:#B5C4E3; font-weight:bold; text-decoration:none; cursor:pointer;}
   
    /* Main menu (tabs - link) */
    #tabs ul li a span.tab-l, #tabs ul li a:hover span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("../design/tab_link_l.gif") 0 0 no-repeat;}
    #tabs ul li a span.tab-r, #tabs ul li a:hover span.tab-r {position:absolute; top:0; right:0; _right:-1px; width:8px; height:8px; background:url("../design/tab_link_r.gif") 100% 0 no-repeat;}
   
    /* Main menu (tabs - hover) */
    #tabs ul li a:hover {background:url("../design/tab_hover.gif") 0 0 repeat-x; color:#FFF;}
    #tabs ul li a:hover span.tab-l {background:url("../design/tab_hover_l.gif") 0 0 no-repeat;}
    #tabs ul li a:hover span.tab-r {background:url("../design/tab_hover_r.gif") 100% 0 no-repeat;}
   
    /* Main menu (tabs - active) */
    #tabs ul li#active a {background:#FFF; color:#FF9000;}
    #tabs ul li#active a span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("../design/tab_active_l.gif") 0 0 no-repeat;}
    #tabs ul li#active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url("../design/tab_active_r.gif") 100% 0 no-repeat;}

/* Page (2 columns) */
#page {width:770px; min-height:1px; background:#FFF url("../design/bg_page.gif") 0 0 repeat-y; _height:1px;}
#page-in {min-height:1px; padding:10px 0; background:url("../design/bg_page_in.jpg") 0 0 no-repeat; _height:1px;}

/* Strip */
#strip {position:relative; clear:both; padding:3px 20px 10px 20px; color:#6182D1;}
#strip p {margin:0;}
#strip a {color:#6182D1;}
#strip a:hover {color:#192666;}

    /* Strip - breadcrumbs */
    #strip #breadcrumbs {width:520px; margin:0; padding:0;}
   
    /* Strip - RSS */
    #strip #rss {float:right; width:175px; _width:200px; margin:0; padding-left:25px; background:url("../design/ico_rss.gif") 0 50% no-repeat}

/* Content */
#content {float:left; width:530px; _width:550px; margin:0; padding:0 0 0 20px;}

    /* Content - article */
    #content .article {clear:both; margin:0; padding:20px; background:url("../design/content_article_bg.jpg") 0 0 no-repeat;}
    #content .article h2 {margin:0 -20px; padding:10px; background:#DEE5FD url("../design/content_title_bg.gif") 0 0 repeat-y; color:#192666;}
    #content .article h2 span {background:url("../design/ico_list.gif") 0 50% no-repeat; padding-left:25px;}
   
    #content .article p {text-align:justify;}
    #content .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #DEE5FD; color:#6685CC;}
    #content .info a {color:#6685CC;}
    #content .info a:hover {color:#FF9000;}
   
    #content .info span.date, #content .info span.cat, #content .info span.user, #content .info span.comments {padding-left:15px;}
    #content .info span.date {background:url("../design/ico_date.gif") 0 50% no-repeat;}
    #content .info span.cat {background:url("../design/ico_cat.gif") 0 50% no-repeat; margin-left:8px;}
    #content .info span.user {background:url("../design/ico_user.gif") 0 50% no-repeat; margin-left:8px;}
    #content .info span.comments {background:url("../design/ico_comments.gif") 0 50% no-repeat; margin-left:8px;}

    /* Content - More */
    #content .btn-more {margin:0 0 15px 0; padding:0; border:0; position:relative;}
    #content .btn-more a {display:block; position:absolute; top:0; right:0; width:67px; _width:95px; height:21px; margin:0; padding:0 0 0 28px; background:url("../design/btn_more.gif") 0 0 no-repeat; color:#FFF; text-decoration:none;}
    #content .btn-more a:hover {background:url("../design/btn_more.gif") -95px 0 no-repeat;}

/* Right column */
#col {float:left; width:200px; margin:0; padding:0; background:#CEDBF9 url("../design/col_bg.gif") 0 0 repeat-y;}
#col-in {padding:20px 10px; background:url("../design/col_top.gif") 0 0 no-repeat;}
#col h3 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#A0B9F3 url("../design/col_title_bg.gif") 0 0 repeat-y; color:#192666;}

    /* Right column - About me */
    #col #about-me {margin-bottom:15px; line-height:130%;}
    #col #about-me p {margin:0;}
    #col #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}

    /* Right column - Category */
    #col ul#category {margin:15px 0; padding:0; list-style:none;}
    #col ul#category li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
    #col ul#category li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_archive.gif") 5px 6px no-repeat; text-decoration:none;}
    #col ul#category li a:hover {background-color:#D3DFF8; color:#192666;}
    #col ul#category li#category-active a {background:#E0E8FA url("../design/ico_archive2.gif") 5px 50% no-repeat; font-weight:bold;}
   
    /* Right column - Archive */
    #col ul#archive {margin:15px 0; padding:0; list-style:none;}
    #col ul#archive li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
    #col ul#archive li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_archive.gif") 5px 50% no-repeat; text-decoration:none;}
    #col ul#archive li a:hover {background-color:#D3DFF8; color:#192666;}
    #col ul#archive li#archive-active a {background:#E0E8FA url("../design/ico_archive2.gif") 5px 6px no-repeat; font-weight:bold;}
   
    /* Right column - Links */
    #col ul#links {margin:15px 0; padding:0; list-style:none;}
    #col ul#links li {margin:0; padding:0; border-bottom:1px solid #E0E8FA;}
    #col ul#links li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_links.gif") 5px 6px no-repeat; text-decoration:none;}
    #col ul#links li a:hover {background-color:#D3DFF8; color:#192666;}

/* Footer */
#footer {position:relative; clear:both; width:770px; height:60px; margin-bottom:50px; background:url("../design/footer.jpg") 0 0 no-repeat; color:#6685CC;}
#footer a {color:#6685CC;}
#footer a:hover {color:#192666;}

    /* Footer - "back on top" */
    #top {position:absolute; top:55px; left:550px;}
    #top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
    #top p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("../design/ico_top.gif") 0 0 no-repeat; cursor:pointer;}
    #top a:hover span {background:url("../design/ico_top.gif") -30px 0 no-repeat;}

    /*  Footer - copyright */
    #footer p#copyright {position:absolute; top:10px; left:40px; margin:0;}

    /* Footer - created by */
    #createdby {position:absolute; top:10px; left:562px; margin:0; color:#8CA3D8;}
    #createdby a {color:#8CA3D8;}


Print:
Código:
/*
    Project: CrystalX
    URL: http://www.nuvio.cz

    Output device: print

    Author: Vit Dlouhy (vit.dlouhy@nuvio.cz); Nuvio (www.nuvio.cz)
    Last revision: 2006-12-05, 12:00 GMT+1

    Structure:
        display | position | float | overflow | width | height | border | margin | padding | background | align | font
*/

body {border:0; margin:0; padding:0; font-size:12pt}

a {color:#000; text-decoration:none;}

h1, h2, h3 {page-break-after:avoid; page-break-inside:avoid;}

table {border-collapse: collapse; border-width:1px; border-style:solid;}
th, td {display:table-cell; border-width:1px; border-style:solid;}


hr {display:block; height:2px; margin:0; padding:0; background:#000; border:0 solid #000; color:#000;}

blockquote {page-break-inside:avoid}
ul, ol, dl {page-break-before:avoid}

.noprint {display:none;}


Así se ve mi sitio:


Quiero que se vea así:


Hojala que me pudieran ayudar a decirme en que estoy mal
↑
Mensaje24-07-2010, 15:59 (UTC)    
Título del mensaje:
Responder citando
Hola,

La imagen que adjuntastes no funciona, te recomiendo subir tu imagen a xooimage.com

http://www.paginawebgratis.es/forum/viewtopic.php?t=51407

Saludos.
↑
Mensaje24-07-2010, 16:04 (UTC)    
Título del mensaje: imagen
Responder citando
si se ve
↑
Mensaje24-07-2010, 16:06 (UTC)    
Título del mensaje:
Responder citando
Yo no puedo visualizar la imagen de imageshack

Saludos.
↑
Mensaje24-07-2010, 16:28 (UTC)    
Título del mensaje: plantilla
Responder citando
ya mejor voy a adaptar un diseño más fácil, ya borren este tema
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.