}He leido el tutorial; he leido los temas relacionados, he buscado tambien otros temas, he leido, he probado y NO encuentro la forma de solucionar el problema
Clasico problema por lo que veo, no soy el primero a quien le pase, ni el ultimo... espero.
En fin, una imagen habla por mil palabras no?
Lamentablemente tengo todo en localhost, asi que no puedo darles detalles online de como viene la mano, si les cuento mas o menos, es un template CSS para LifeType (php/mysql/blog/open).
El codigo al respecto seria:
HTML:
Código :
<body> <div id="container"> <div id="header"> <h1><bla/h1> <h2></h2> <ul id="nav"> <li>bla</li> <li>bla</li> <li>bla</li> <li>bla</li> </ul> </div> <div id="content"> <h1>bla</h1> <div>bla</div> <p class="article_menu"> Por SidV el 16 Marzo, 2006 19:57 <br /> </p> </div> <div id="sidebar"> <h1>Menú</h1> <ul class="submenu"> <li>bla</li> <li>bla</li> <li>bla</li> <li>bla</li> </ul> <h1>buscar</h1> <div id="Search"> <form id="search_form" method="post" action="bla"> <fieldset> <label for="searchTerms"><input type="text" id="searchTerms" name="searchTerms" value="" /></label> <input type="submit" name="Search" value="Buscar" class="button" /> <input type="hidden" name="op" value="Search" /> <input type="hidden" name="blogId" value="1" /> </fieldset> </form> </div> <h1>calendario</h1> <div id="Calendar"> <table class="calMonth"> <thead> <tr class="calMonthNav"> <th class="calMonthBackward">bla</th> <th class="calMonthCurrent" colspan="5">Marzo 2006</th> <th class="calMonthForward">bla</th> </tr> <tr class="calMonthHeader"> <th scope="col" abbr="Lunes">Lu</th> <th scope="col" abbr="Martes">Ma</th> <th scope="col" abbr="Miércoles">Mi</th> <th scope="col" abbr="Jueves">Ju</th> <th scope="col" abbr="Viernes">Vi</th> <th scope="col" abbr="Sábado">Sa</th> <th scope="col" abbr="Domingo">Do</th> </tr> </thead> <tbody> <tr> <td class="calMonthDay"> </td> <td class="calMonthDay"> </td> <td class="calMonthDay">1</td> <td class="calMonthDay">2</td> <td class="calMonthDay">3</td> <td class="calMonthDay">4</td> <td class="calMonthDay">5</td> </tr> <tr> <td class="calMonthDay">6</td> <td class="calMonthDay">7</td> <td class="calMonthDay">8</td> <td class="calMonthDay">9</td> <td class="calMonthDay">10</td> <td class="calMonthDay">11</td> <td class="calMonthDay">12</td> </tr> <tr> <td class="calMonthDay">bla</td> <td class="calMonthDay">14</td> <td class="calMonthDay">bla</td> <td class="calMonthToday">bla</td> <td class="calMonthDay">17</td> <td class="calMonthDay">18</td> <td class="calMonthDay">19</td> </tr> <tr> <td class="calMonthDay">20</td> <td class="calMonthDay">21</td> <td class="calMonthDay">22</td> <td class="calMonthDay">23</td> <td class="calMonthDay">24</td> <td class="calMonthDay">25</td> <td class="calMonthDay">26</td> </tr> <tr> <td class="calMonthDay">27</td> <td class="calMonthDay">28</td> <td class="calMonthDay">29</td> <td class="calMonthDay">30</td> <td class="calMonthDay">31</td> <td class="calMonthDay"> </td> <td class="calMonthDay"> </td> </tr> </tbody> </table> </div> <h1>recientemente...</h1> <div id="Recently"> <ul> <li>bla</li> <li>bla</li> <li>bla</li> </ul> </div> <h1>Categorías</h1> <ul class="submenu"> <li>bla</li> <li>bla</li> <li>bla</li> </ul> <h1>Agregar</h1> <div id="Syndicate"> <ul> <li>bla</li> <li>bla</li> <li>bla</li> </ul> </div> </div> <div class="clearer"> </div> <div id="footer"> <p />blabla </div> </body>
Es largo, pero porque trate de dejarles todo para que entiendan...
El CSS:
Código :
#container {
width:500px;
margin:0 auto;
}
#header {
background-color:#eeeeee;
margin:10px;
padding:30px 10px 30px 10px;
border-top:2px solid #ccc;
}
#sidebar {
float:right;
width:154px;
margin:0px 0px 10px 0;
}
#sidebar h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
margin:10px 5px 15px 10px;
}
#sidebar p {
padding:5px;
margin:5px 5px 5px 10px;
line-height:17px;
word-spacing:-1px;
}
ul.submenu {
margin:0;
padding:0;
}
.submenu li {
marign:0;
padding:0;
list-style:none;
}
.submenu a {
display:block;
height:13px;
padding:7px 7px 7px 17px;
margin:1px 0 0 0;
background-color:#fff;
background-image:url(imgs/submenua_normal.jpg);
background-position:left;
background-repeat:repeat-y;
}
.submenu a:hover {
background-image:url(imgs/submenua.jpg);
background-position:bottom;
background-repeat:no-repeat;
background-color:#fff;
padding:7px 7px 7px 15px;
}
.submenu a:focus {
background-image:url(imgs/submenua.jpg);
background-position:bottom;
background-repeat:no-repeat;
background-color:#fff;
padding:7px 7px 7px 15px;
}
.submenu a:active {
background-image:url(imgs/submenua.jpg);
background-position:bottom;
background-repeat:no-repeat;
background-color:#fff;
padding:7px 7px 7px 15px;
}
#content {
margin:10px 185px 10px 0px;
text-align: justify;
float:left;
display:inline;
padding:5px;
}
#content h1 {
font-family:Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
border-bottom:1px solid #eee;
padding:5px;
color:#000;
}
#content h1 a {
color:#000;
text-decoration:none;
display:block;
background-image:url(imgs/h1.png);
background-position:right;
background-repeat:no-repeat;
}
#content h1 a:hover {
color:#444;
background-image:url(imgs/h1_hover.png);
}
#content h2 {
font-size:11px;
color:#ccc;
margin:10px 0 10px 0;
padding:5px;
}
#content p {
padding:5px;
line-height:18px;
word-spacing: 0.1em;
}
#content .article_menu {
text-align:right;
padding:5px;
margin:10px 0 20px 0;
border-top:1px solid #eee;
}
#content .article_menu b {
float:left;
font-weight:normal;
}
#content .article_menu a {
padding:0 0 0 15px;
background-image:url(imgs/comment.png);
background-position:left;
background-repeat:no-repeat;
color:#333;
text-decoration:none;
}
#content p a {
color:#333;
text-decoration:none;
}
#content p:hover a {
border-bottom:1px dotted #000;
}
#content p:hover a:hover {
border-bottom:1px solid #000;
}
#content .article_menu a:hover {
color:#000;
background-image:url(imgs/comment_hover.png);
}
#content ul {
margin:0 0 0 15px;
padding:0;
border-top:1px solid #f6f6f6;
}
#content li {
margin:5px 0 5px 0;
border-bottom:1px solid #f6f6f6;
padding:0 0 5px 20px;
list-style:none;
background-image:url(imgs/arrow.png);
background-position:top left;
background-repeat:no-repeat;
color:#999;
}
#footer {
background-color:#eee;
border-top:2px solid #ccc;
padding:10px;
text-align:center;
}
.clearer {
clear : both;
height : 1px;
font-size : 1px;
}
Del #header no les puse todos los css porque no da problemas eso...
El drama esta entre sidebar y el contenido...
Hasta he probado un clearfix y tampoco anda....
Código :
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}Alguna idea?
Por favor... agradeceria cualquier centro, muchas gracias desde ya.
