Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje24-01-2012, 22:02 (UTC)    
Título del mensaje: [Ayuda] Como adaptar mi plantilla css

Hola gente paso a explicar mi problema. Tengo una plantilla css ya modificada, osea le agregue las imagenes, cambie lo que queria, todo perfecto. Ahora, a la hora de ponerlo en mi web .es.tl, divido el código en 2 para ponerlo en texto por debajo y encima de la pag (como dice el tutorial) y luego pongo el css code style. Cuando veo mi web, esta todo bien, pero no se ven las imagenes, y ya las habia puesto en el style.css. A demás cuando abro el index con cualquier explorador se ve todo perfecto con las imagenes y todo que subi a pwg. Algo mal estoy poniendo en el editor de diseño. A demás se ve los menús y titulos que vienen predeterminados, pero cuando pongo el código para sacarlo, me borra un contenido de mi web que lo nesecito . Si alguien sabe como solucionar mi problema se los agradeceria. Saludos
Mensaje24-01-2012, 22:47 (UTC)    
Título del mensaje:

Mensaje24-01-2012, 23:30 (UTC)    
Título del mensaje:

Nuestrasxarlas, te agradesco el aporte pero ya lei casi todos los tutoriales, videos, todo y no encuentro el error.


Mira este es mi código de web completo:




Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

   <title>Free Music 2012</title>

   <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

   <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

   <script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script>

   <script src="js/jquery-func.js" type="text/javascript"></script>

</head>

<body>

<div id="page" class="shell">

   <!-- Logo + Search + Navigation -->

   <div id="top">

      <div class="cl">&nbsp;</div>

      <h1 id="logo"><a href="#">MONDAYS</a></h1>

      <form action="" method="post" id="search">

         <div class="field-holder">

            <input type="text" class="field" value="Buscar" title="Buscar" />

         </div>

         <input type="submit" class="button" value="Search" />

         <div class="cl">&nbsp;</div>

      </form>

      <div class="cl">&nbsp;</div>

      <div id="navigation">

         <ul>

             <li><a href="#" class="active"><span>Inicio</span></a></li>

             <li><a href="#"><span>Noticias</span></a></li>

             <li><a href="#"><span>Reproductor</span></a></li>

             <li><a href="#"><span>Radio</span></a></li>

             <li><a href="#"><span>Discografías</span></a></li>

             <li><a href="#"><span>Opiniones</span></a></li>

             <li><a href="#"><span>contacto</span></a></li>

         </ul>

      </div>   

   </div>

   <!-- END Logo + Search + Navigation -->

   <!-- Header -->

   <div id="header">

      <!-- Slider -->

      <div id="slider">

         <div id="slider-holder">

            <ul>

                <li>

                   <div class="slide-info">

                      <h2 class="notext txt-we-love-mondays">WE LOVE MONDAYS</h2>

                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit.</p>

                      <a href="#" class="button-more">More</a>

                   </div>

                   <div class="slide-image">

                      <img src="http://img.webme.com/pic/f/freemusic2012/img1.gif" alt="" />

                   </div>

                </li>

                <li>

                   <div class="slide-info">

                      <h2 class="notext txt-we-love-mondays">WE LOVE MONDAYS</h2>

                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit.</p>

                      <a href="#" class="button-more">More</a>

                   </div>

                   <div class="slide-image">

                      <img src="http://img.webme.com/pic/f/freemusic2012/img1.gif" alt="" />

                   </div>

                </li>

                <li>

                   <div class="slide-info">

                      <h2 class="notext txt-we-love-mondays">WE LOVE MONDAYS</h2>

                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit.</p>

                      <a href="#" class="button-more">More</a>

                   </div>

                   <div class="slide-image">

                      <img src="http://img.webme.com/pic/f/freemusic2012/img1.gif" alt="" />

                   </div>

                </li>

            </ul>

         </div>

         <div class="slider-nav">

            <a href="#" class="prev">Anterior</a>

            <a href="#" class="next">Siguiente</a>

         </div>

      </div>

      <!-- END Slider -->   

   </div>

   <!-- END Header -->

   <!-- Main -->

   <div id="main">

      <!-- Three Column Content -->

      <div class="cols three-cols">

         <div class="cl">&nbsp;</div>

         <div class="col">

            <h2>Título</h2>

            <h3 class="notext txt-monday-again">Subtítulo</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="col">

            <h2>Título</h2>

            <h3 class="notext txt-wedothis">Subtítulo</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. </p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="col col-last">

            <h2>Título</h2>

            <h3 class="notext txt-247">Subtítulo</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="cl">&nbsp;</div>

      </div>

      <!-- END Three Column Content -->

      <!-- Two Column Content -->

      <div class="cols two-cols">

         <div class="cl">&nbsp;</div>

         <div class="col">

            <h2>Título</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="col col-last">

            <h2>Título</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="cl">&nbsp;</div>

      </div>

      <!-- END Two Column Content -->

   </div>

   <!-- END Main -->

   <!-- Footer -->

   <div id="footer">

      <p class="right">&copy; 2010 - CompanyName &nbsp; Design by <a href="http://chocotemplates.com" target="_blank" title="The Sweetest CSS Templates WorldWide">Chocotemplates.com</a></p>

      <p><a href="#">Inicio</a><span>&nbsp;</span><a href="#">Noticias</a><span>&nbsp;</span><a href="#">Reproductor</a><span>&nbsp;</span><a href="#">Radio</a><span>&nbsp;</span><a href="#">Discografías</a><span>&nbsp;</span><a href="#">Opiniones</a><span>&nbsp;</span><a href="#">Contacto</a></p>

      <div class="cl">&nbsp;</div>

   </div>

   <!-- END Footer -->

   <br />

</div>

</body>

</html>



Esto es lo que puse en texto por ensima de la pag:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

   <title>Free Music 2012</title>

   <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

   <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

   <script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script>

   <script src="js/jquery-func.js" type="text/javascript"></script>

</head>

<body>

<div id="page" class="shell">

   <!-- Logo + Search + Navigation -->

   <div id="top">

      <div class="cl"> </div>

      <h1 id="logo"><a href="#">MONDAYS</a></h1>

      <form action="" method="post" id="search">

         <div class="field-holder">

            <input type="text" class="field" value="Buscar" title="Buscar" />

         </div>

         <input type="submit" class="button" value="Search" />

         <div class="cl"> </div>

      </form>

      <div class="cl"> </div>

      <div id="navigation">

         <ul>

             <li><a href="#" class="active"><span>Inicio</span></a></li>

             <li><a href="#"><span>Noticias</span></a></li>

             <li><a href="#"><span>Reproductor</span></a></li>

             <li><a href="#"><span>Radio</span></a></li>

             <li><a href="#"><span>Discografías</span></a></li>

             <li><a href="#"><span>Opiniones</span></a></li>

             <li><a href="#"><span>contacto</span></a></li>

         </ul>

      </div>   

   </div>

   <!-- END Logo + Search + Navigation -->

   <!-- Header -->

   <div id="header">

      <!-- Slider -->

      <div id="slider">

         <div id="slider-holder">

            <ul>

                <li>

                   <div class="slide-info">

                      <h2 class="notext txt-we-love-mondays">WE LOVE MONDAYS</h2>

                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit.</p>

                      <a href="#" class="button-more">More</a>

                   </div>

                   <div class="slide-image">

                      <img src="http://img.webme.com/pic/f/freemusic2012/img1.gif" alt="" />

                   </div>

                </li>

                <li>

                   <div class="slide-info">

                      <h2 class="notext txt-we-love-mondays">WE LOVE MONDAYS</h2>

                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit.</p>

                      <a href="#" class="button-more">More</a>

                   </div>

                   <div class="slide-image">

                      <img src="http://img.webme.com/pic/f/freemusic2012/img1.gif" alt="" />

                   </div>

                </li>

                <li>

                   <div class="slide-info">

                      <h2 class="notext txt-we-love-mondays">WE LOVE MONDAYS</h2>

                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit.</p>

                      <a href="#" class="button-more">More</a>

                   </div>

                   <div class="slide-image">

                      <img src="http://img.webme.com/pic/f/freemusic2012/img1.gif" alt="" />

                   </div>

                </li>

            </ul>

         </div>

         <div class="slider-nav">

            <a href="#" class="prev">Anterior</a>

            <a href="#" class="next">Siguiente</a>

         </div>

      </div>

      <!-- END Slider -->   

   </div>

   <!-- END Header -->

   <!-- Main -->

   <div id="main">

      <!-- Three Column Content -->

      <div class="cols three-cols">

         <div class="cl"> </div>

         <div class="col">



Esto por debajo de la pág

Código:
<h2>Título</h2>

            <h3 class="notext txt-monday-again">Subtítulo</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="col">

            <h2>Título</h2>

            <h3 class="notext txt-wedothis">Subtítulo</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. </p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="col col-last">

            <h2>Título</h2>

            <h3 class="notext txt-247">Subtítulo</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="cl"> </div>

      </div>

      <!-- END Three Column Content -->

      <!-- Two Column Content -->

      <div class="cols two-cols">

         <div class="cl"> </div>

         <div class="col">

            <h2>Título</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="col col-last">

            <h2>Título</h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare consequat tortor quis porttitor. Aliquam sed fringilla arcu. Maecenas sit amet cursus augue. Donec felis eros, luctus at blandit ac.</p>

            <p><a href="#" class="more">Leer más</a></p>

         </div>

         <div class="cl"> </div>

      </div>

      <!-- END Two Column Content -->

   </div>

   <!-- END Main -->

   <!-- Footer -->

   <div id="footer">

      <p class="right">© 2010 - CompanyName   Design by <a href="http://chocotemplates.com" target="_blank" title="The Sweetest CSS Templates WorldWide">Chocotemplates.com</a></p>

      <p><a href="#">Inicio</a><span> </span><a href="#">Noticias</a><span> </span><a href="#">Reproductor</a><span> </span><a href="#">Radio</a><span> </span><a href="#">Discografías</a><span> </span><a href="#">Opiniones</a><span> </span><a href="#">Contacto</a></p>

      <div class="cl"> </div>

   </div>

   <!-- END Footer -->

   <br />

</div>

</body>

</html>




Y este es el código style.css:



Código:

* { padding: 0; margin: 0; outline: 0; }

body, html { height: 100%; }

body {
   background: #e1e5e8;
   font-family: "Georgia", Tahoma, Sans-Serif;
   font-size: 12px;
   line-height: 18px;
   color: #888;
}
input, textarea, select { font-family: "Georgia", Tahoma, Sans-Serif; font-size:12px; }
.field { padding: 4px 5px; border: solid 1px #e7e7e7; color: #969696; height: 15px; }
.field-focused { color: #333; }
input.button { padding: 4px 5px; cursor: pointer; }

a { color: #45c7ee; text-decoration: underline; cursor: pointer; }
a:hover { text-decoration: none; }
a img { border: 0; }

h2 { font-size: 19px; line-height: 1; font-weight: normal; color: #464646; font-family: "Trebuchet MS", Tahoma, Sans-Serif; margin-bottom: 5px; }

p { padding-bottom: 18px; }

.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.cl { font-size: 0; line-height: 0; clear: both; display: block; height: 0; }

.notext { font-size: 0; line-height: 0; text-indent: -4000px; background-repeat: no-repeat; }

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

#page { width: 874px; margin: 0 auto; }
#page { padding: 0 28px; min-height: 100%; height: auto !important; height: 100%; background: url(images/bg.gif) repeat-y center 0; }

#top { padding: 20px 0 16px; }

#logo { float: left; display: inline; width: 233px; font-size: 0; line-height: 0; }
#logo a { display: block; height: 67px; text-indent: -4000px; background: url(images/logo.gif); }

#search { float: right; display: inline; padding-top: 18px; width: 227px; }
#search .field-holder { float: left; display: inline; width: 196px; background: url(images/search-field.gif) no-repeat 0 0; padding: 1px; }
#search .field { width: 186px; border: 0; background: none; }
#search .button { float: right; display: inline; width: 25px; height: 25px; font-size: 0; line-height: 0; text-indent: -4000px; }
#search .button { background: url(images/search-button.gif) no-repeat 0 0; border: 0; }

#navigation { height: 38px; background: url(images/navigation.gif) no-repeat; padding: 8px 10px 6px; margin-top: 16px; }
#navigation ul { font-size: 13px; line-height: 38px; text-transform: capitalize; }
#navigation ul li { float: left; display: inline; list-style-type: none; padding-right: 2px; }
#navigation ul li a { float: left; display: inline; color: #fff; text-decoration: none; padding-left: 17px; }
#navigation ul li a span { float: left; display: inline; padding-right: 17px; background-position: right 0 !important; }
#navigation ul li a:hover,
#navigation ul li a.active,
#navigation ul li a:hover span,
#navigation ul li a.active span { color: #717171; background: url(images/nav-active.gif) no-repeat 0 0; }

#header { padding-bottom: 10px; }

#slider { height: 327px; background: url(images/slider.gif) no-repeat 0 0; position: relative; }
#slider .slider-nav a { display: block; width: 18px; height: 49px; font-size: 0; line-height: 0; text-indent: -4000px; position: absolute; top: 120px; }
#slider .slider-nav a.prev { left: 0; background: url(images/button-prev.gif); }
#slider .slider-nav a.next { right: 0; background: url(images/button-next.gif); }

#slider-holder { height: 327px; }
#slider-holder .jcarousel-clip { height: 327px; width: 874px; position: relative; overflow: hidden; }
#slider-holder .slide-image { float: right; display: inline; }
#slider-holder .slide-info { float: left; display: inline; width: 424px; padding-top: 23px; }
#slider-holder .slide-info p { padding-bottom: 8px; }
#slider-holder ul { width: 874px; height: 327px; position: relative; overflow: hidden; }
#slider-holder ul li { list-style-type: none; float: left; display: inline; height: 267px; width: 712px; padding: 56px 108px 4px 54px; position: relative; overflow: hidden; }

#main { border-bottom: solid 1px #e3e7e9; margin-bottom: 6px; }

h2.txt-we-love-mondays { height: 94px; background-image: url(images/txt-we-love-mondays.gif); }
h3.txt-monday-again { background-image: url(images/txt-monday-again.gif); }
h3.txt-wedothis { background-image: url(images/txt-wedothis.gif); }
h3.txt-247 { background-image: url(images/txt-247.gif); }

.button-more { display: block; width: 66px; height: 22px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(images/button-more.gif) no-repeat 0 0; }
.more { padding-left: 10px; background: url(images/arr.gif) no-repeat 0 center; }

.cols { padding: 15px 0 10px; }
.cols .col { float: left; display: inline; }
.cols .col-last { margin-right: 0 !important; }
.cols .col h3.notext { height: 45px; margin-bottom: 5px; }

.three-cols .col { width: 264px; margin-right: 41px; }
.two-cols .col { width: 420px; margin-right: 34px; }

#footer { height: 41px; background: url(images/footer.gif) no-repeat 0 0; line-height: 41px; padding: 10px 10px 10px 22px; color: #fff; }
#footer p { padding-bottom: 0; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { color: #237087; }
#footer span { margin: 0 6px; }


Cuando pongo todo esto en editar diseño. Me aparece asi:

Parte de arriba:
http://s2.subirimagenes.com/imagen/previo/thump_7363535webmala2.png

Parte de abajo:
http://s3.subirimagenes.com:81/imagen/previo/thump_7363547webmala.png

Cuando veo el código completo del index (el que te mostre primero) en cualquier explorador se ve asi:

Parte de arriba:
http://s3.subirimagenes.com:81/imagen/previo/thump_7363559webbuena1.png

Parte de abajo:
http://s2.subirimagenes.com/imagen/previo/thump_7363566webbuena2.png



Si puesdes y tienes tiempo, ¿te fijarias si tengo algun error en algun codigo porfavor? ya no se que mas hacer

Desde ya gracias.
Mensaje25-01-2012, 00:02 (UTC)    
Título del mensaje: hi xd

hola bien cuando quize adaptar mi pagina pues no me salio bien te explicare con un poco de practica lo logre lo que tienes que saber es que el html y css son como dos imanes bien te explicare como se los utiliza

el css siemore va en css desing como ya sabras
Ejem Pequeño
#sidebar_content Este de aqui es un ID o algo para que te servira pra el Html
background:{black;}

Bien ahora como se utiliza los ID en Html
<div id=sidebar_content>
Este ele ejemplo
</div>

y bien te explicare como se ordena los codigos

El Html del cabezal hasta el contenido va en Ensima de la Pagina

Lo que hay en detro de estos dos bloques va el contenido que pones en tu web

Lo demas que queda de Html lo ponemos en Debajo de la pagina

El css va en Css-Desing

Aka te dejo un tutto donde explica mejor y detallado
http://www.paginawebgratis.es/forum/viewtopic.php?t=68052&highlight=adaptar+css

[/code]
______________
WebTwo de RadioVijaer.
Mensaje25-01-2012, 03:17 (UTC)    
Título del mensaje:

Davixm gracias por tu aporte, vi el tutorial y realize paso por paso pero todavía no salio . La verdad no se que será pero quiero solucionarlo lo antes posible ya que quiero poner mi web on. Gracias nuevamente y seguiré intentando. Si se les ocurre alguna otra sugerencia avisenme porfavor .
Mensaje25-01-2012, 04:14 (UTC)    
Título del mensaje: Solución

Chicos gracias por sus aportes, ya encontré la solucion. Era que la style.css, tenia los links viejos de un hosting que me borro las imagenes, las subi a pwg y reemplaze y listo equivocaciones que suelen pasar. Muchas gracias.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group