Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje22-05-2011, 21:04 (UTC)    
Título del mensaje: Texto por encima y por debajo (Ayuda)

Bueno yo otra vez, me descarge una plantilla y la verdad no se como dividir el texto por debajo y texto por arriba. Lo que pasa es que los menus los tiene despues de donde empieza el contenido y ahi esta el problema bueno si alguien pudiera ayudarme ahi estan los textos.
HTML Index
Cita:
!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>ClearPixels | A Free CSS Template by RamblingSoul</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="header">
<h1 id="sitename"><a href="#"><span class="blue">Clear</span>Pixels</a><span class="caption">A Free CSS Template by RamblingSoul</span></h1>
<div id="nav"><form action="#">

<div id="search"><input type="text" class="keyword" value="Search" />
</div>
</form>
<div id="topmenu">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="styles.html">Styles</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="notes.html">Notes</a></li>

<li><a href="#">NoGo</a></li>
<li><a href="#">NoLink</a></li>


</ul>

</div>
</div>
<div class="clear"></div>
<div id="breadcrumb">RSBlues &raquo; <a href="#" class="active">Home</a> &raquo;</div>

</div>
<div id="content">
<div id="right">
<div id="featured">
<div>
ClearPixels is a free CSS Template released under the Creative Commons Attribution 2.5 License by RamblingSoul. You can download other quality css templates from my profile or <a href="http://ramblingsoul.com">website</a>.</div>
<span class="ftd_btm"><a href="#">Read More</a></span></div>
<div class="post">
<h2>Transparent PNG 24<span class="description">Make it workin IE</span></h2>
<p> This template uses transparent PNG files in the background and it won't display properly in IE. You can download the <a href="http://www.twinhelix.com/css/iepngfix/">PNG Fix for IE</a> if you would like to make it work in IE.</p>

<h3>The rest as they say.. is Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dictum nunc quis elit. Mauris molestie. Nulla tristique porta turpis. Ut dui tortor, fermentum in, pellentesque a, ullamcorper gravida, sapien. Proin dignissim, velit vitae fringilla accumsan, metus elit adipiscing quam, ac accumsan urna lectus at justo. Ut placerat ipsum viverra nisl eleifend elementum. Praesent leo. In justo massa, pharetra vitae, malesuada viverra, facilisis at, neque. Etiam consectetuer, mauris ut venenatis porta, lorem tellus bibendum quam, rhoncus consequat mauris sem quis velit. Vestibulum ut ipsum. Aliquam non magna eget turpis placerat lacinia. Vivamus iaculis diam sit amet eros. Etiam ultricies nulla lobortis ligula. Nulla vitae elit. Morbi sed turpis. Donec rhoncus laoreet turpis. Phasellus quis arcu at orci venenatis hendrerit. Ut euismod. Sed pulvinar adipiscing ipsum.</p>
<div class="postbottom">
<ul>
<li class="permalink"><a href="#">Read More</a></li>
<li class="cats"><a href="#">Category</a></li>
<li class="auth"><a href="#">Author</a></li>
<li class="date"><a href="#">18 May 2008 12:50 PM</a></li>

<li class="comnts"><a href="#">Comments</a></li>
</ul>
</div>
</div>
<div class="post">
<h2>Duis Eget Arcu<span class="description">Short Description or keywords for SEO</span></h2>
<p>Duis eget arcu id augue aliquam lobortis. Vivamus eget diam. Integer tincidunt mauris in nisi. Vestibulum tincidunt eleifend turpis. Ut quis tellus a nibh sodales lacinia. Maecenas sollicitudin. Maecenas a dui eget dui porta ultrices. Phasellus feugiat nunc id ipsum. Vestibulum tincidunt massa eget ipsum. Vestibulum nulla velit, semper sed, semper a, vehicula adipiscing, nulla. Donec congue volutpat mauris. Aliquam erat volutpat. Sed vitae lorem nec pede varius tristique. Aliquam erat volutpat. Ut pede leo, pharetra id, consequat vel, tristique id, pede. Nullam et mauris id dui egestas porttitor. Fusce mollis metus sed diam. Morbi malesuada arcu rutrum odio molestie ullamcorper. Suspendisse vel massa ut risus volutpat commodo. </p>
<p>Suspendisse fringilla nisi eu dui. Morbi sit amet ipsum sit amet dolor imperdiet eleifend. Vestibulum ultrices metus cursus velit. Nulla dignissim vehicula nibh. Nunc vestibulum erat vitae arcu. Curabitur eget sapien et purus fringilla congue. Nam nulla. Duis vitae est. Cras ac lacus. Mauris aliquam tellus quis massa. Praesent vel nunc. Sed ac leo. Praesent eu nisi sed nunc lacinia commodo. Donec aliquam rhoncus nibh. </p>
<p>Aenean elit augue, interdum eget, rhoncus sed, tristique vitae, nisl. Proin scelerisque nulla eu nunc. Pellentesque cursus. Vivamus sit amet neque. Cras quis tortor. Suspendisse tempor pede vitae magna. Donec arcu dui, luctus nec, tincidunt laoreet, porta blandit, lacus. Morbi consectetuer tempus purus. Pellentesque quam magna, placerat quis, consectetuer id, imperdiet et, justo. Donec sed risus. Nullam pellentesque scelerisque metus. Vestibulum velit dui, placerat sit amet, luctus non, elementum sed, enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tincidunt commodo arcu. Aliquam erat volutpat. Nulla tristique ullamcorper elit. Vestibulum eget odio a mi sollicitudin dignissim. Pellentesque ut lacus eget magna dictum euismod. Quisque nibh. </p>

<div class="postbottom">
<ul>
<li class="permalink"><a href="#">Read More</a></li>
<li class="cats"><a href="#">Category</a></li>
<li class="auth"><a href="#">Author</a></li>
<li class="date"><a href="#">18 May 2008 12:50 PM</a></li>
<li class="comnts"><a href="#">Comments</a></li>
</ul>
</div>
</div>

</div>
<div id="sidebar">
<div id="sidebartop"></div>
<h2>Sidebar</h2>
<ul>
<li class="active"><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Dolor Sit Amet</a></li>

<li><a href="#">Consectetuer</a></li>
<li><a href="#">Adipiscing Elit</a></li>
<li><a href="#">Sed Dictum</a></li>
<li><a href="#">Nunc Quis Elit</a></li>

</ul>
<h2>Links</h2>

<ul>
<li><a href="http://ramblingsoul.com">RamblingSoul</a></li>
<li><a href="http://cssfreebies.com">CSSFreebies</a></li>
<li><a href="http://opendesigns.org">OpenDesigns</a></li>

</ul>
<div id="sidebarbtm"></div>
</div>

<div class="clear"></div>
<div id="bottom">
<p>Copyright &copy; 2008 YourSiteName</p>
<p><a href="#">You</a> | <a href="#">Can</a> | <a href="#">Put</a> | <a href="#">Some</a> | <a href="#">Links</a> | <a href="#">Here</a></p>

</div>
</div>

<div id="footer">
<div id="credits">
<a href="http://ramblingsoul.com">CSS Template</a> by RamblingSoul</div>

</div>
</div>

</body>
</html>


Css Code ya con la URLS
Cita:
*{
margin: 0px;
padding: 0px;
}
a {
color: #0EA2CC;
text-decoration: none;
}
h1, h2, h3 {font-family:"Trebuchet MS", Verdana, sans-serif;}
h1 {font-size:26px;}
h2 {font-size:18px;}
h3 {font-size:16px;}
body {background:url(http://img.webme.com/pic/m/mayanxternalteam/bg2.jpg) fixed center top; background-color:#ccc; font:12px Verdana, Arial, Helvetica, sans-serif;}
#wrap {width:950px; margin:0 auto 0 auto;}
#header {background:url(http://img.webme.com/pic/m/mayanxternalteam/header.png) no-repeat; height:174px;}
#content {background:url(http://img.webme.com/pic/m/mayanxternalteam/pagebg.png) repeat-y; padding:0 40px 0 40px;}
#right { float:right; width:610px;}
#right p {line-height:20px; margin-bottom:20px;}
#right a {border-bottom: solid 1px #0ea2cc;}
#right a:visited, active {border:none;}
#right a:hover {color:#000; border-bottom:solid 1px #000;}
h1 a, h2 a, h3 a, h4 a {text-decoration:none; border:none!important;}
.clear {clear:both;}
#sidebar {float:left; width:250px; background:url(http://img.webme.com/pic/m/mayanxternalteam/sb2.jpg) left repeat-y;}
#sidebartop {background: url(http://img.webme.com/pic/m/mayanxternalteam/sb1.jpg) left top no-repeat; height:10px;}
#sidebarbtm {background:url(http://img.webme.com/pic/m/mayanxternalteam/sb3.jpg) left top no-repeat; height:9px;}
#sidebar ul {list-style:none; font:bold 14px "Trebuchet MS", Verdana, sans-serif; margin-bottom:15px;}
#sidebar li {display:block; height:36px; margin-bottom:2px;}
#sidebar a, #sidebar a:visited {
display:block;
background:url(http://img.webme.com/pic/m/mayanxternalteam/menu1.jpg) right top no-repeat;
padding: 10px 10px 0 40px;
height: 26px;
color:#999;
}
#right h2 {
color:#014782; font:normal 18px "Trebuchet MS", Verdana, sans-serif;
}
#right h2 a {color:#014782}
#right h2 a:hover {color:#000; background:#ffffee; border:none;}
#sidebar a:hover {background:url(http://img.webme.com/pic/m/mayanxternalteam/menu2.jpg) right top no-repeat; color:#333;}
#sidebar .active a{background:url(http://img.webme.com/pic/m/mayanxternalteam/menu3.jpg) right top no-repeat; color:#000;}
#sidebar h2 {
display:block;
background:url(http://img.webme.com/pic/m/mayanxternalteam/sidebarh2.jpg) no-repeat;
height:40px;
padding:14px 10px 0 40px;
color: #186185;
text-transform:uppercase;
}
#footer {background:url(http://img.webme.com/pic/m/mayanxternalteam/footerbg.png) no-repeat; height:62px;}

#sitename {
display:block;
float:left;
width:210px;
padding:15px 0 0 40px;
text-align:center;
color: #FFFFFF;
font: normal 28px "Trebuchet MS", Verdana, sans-serif;
}
#sitename a{color:#fff;}
.caption {
display:block;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
padding-top:30px;}

#sitename a .blue {
color:#0F9EC8;
font-style: italic;
}
#sitename a:hover {color:#0f9ec8;}
#sitename a:hover .blue{color:#9c6; font-family:Georgia; font-weight:normal;}

#nav {float:right; width:645px; padding:0 40px 0 0; height:134px;}
#breadcrumb { background:url(http://img.webme.com/pic/m/mayanxternalteam/breadcrumb.jpg) center bottom no-repeat;
padding:7px 40px 5px ;
height: 18px;
color:#999999; text-transform:uppercase;
font: bold 16px"Trebuchet MS", Verdana, sans-serif;}
#breadcrumb a.active {color:#000!important;}
#breadcrumb a{text-decoration:none; color:#999;}
#breadcrumb a:visited, breadcrumb a:active {color:#999;}
#breadcrumb a:hover {color:#333;}
#nav #search{
padding-left: 475px;
padding-top: 17px;
height: 48px;
}
#nav #search .keyword{
background: transparent url(http://img.webme.com/pic/m/mayanxternalteam/search.png) no-repeat;
height: 33px;
width: 132px;
padding: 10px 20px 0 10px;
font-size: 12px;
color: #999;
border:none;
overflow:hidden;
}
#header form {padding:0; margin:0;}
#topmenu { height:51px; font:bold 14px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase; padding-top:15px;}
#topmenu ul {list-style:none; padding-left:10px;}
#topmenu li {display:inline; margin-left:3px;}
#topmenu a, #topmenu a:visited {display:block; float:left; background:url(http://img.webme.com/pic/m/mayanxternalteam/nav2.png repeat-x; text-align:center; padding:5px 25px 0 25px; height:25px; color:#999999;}
#topmenu .active a {background:url(http://img.webme.com/pic/m/mayanxternalteam/nav1.png) repeat-x; color:#333;}
#topmenu .active a:hover {background:url(http://img.webme.com/pic/m/mayanxternalteam/nav4.png) repeat-x; color:#333;}
#topmenu a:hover {background:url(http://img.webme.com/pic/m/mayanxternalteam/nav3.png) repeat-x; color:#fff;}
#featured {
background:url(http://img.webme.com/pic/m/mayanxternalteam/ftrdbox.jpg) no-repeat;
height:150px;
color:#00CCFF;
margin-bottom:15px;
}
#featured div {
padding:25px 10px 0 50px;
height: 90px;
font:normal 16px "Palatino Linotype", "Book Antiqua", Palatino, serif;

}
.ftd_btm {display:block; height:20px; padding:15px 5px 0 35px; background:url(http://img.webme.com/pic/m/mayanxternalteam/ftrdlink.png)8px 12px no-repeat}
#featured a {color:#fff; border-bottom:none;}
#featured a:visited, #featured a:active{color:#E3F7FD;}
#featured a:hover { text-decoration:underline; color:#fff!important;}
.postbottom {background:url(http://img.webme.com/pic/m/mayanxternalteam/postbttm.png) no-repeat; height:26px; margin-bottom:20px;}
.postbottom ul {list-style:none;}
.postbottom li {display:inline; margin:0!important; padding:0!important;}
.postbottom a, .postbottom a:visited, .postbottom a:active{color:#fff; border:none!important; display:block; float:left; height:20px; padding:6px 5px 0 30px;}
.postbottom a:hover {color:#000;}
.permalink a, .permalink a:visited, .permalink a:active {background:url(http://img.webme.com/pic/m/mayanxternalteam/ico_more.png)5px 5px no-repeat;}
.cats a{background:url(http://img.webme.com/pic/m/mayanxternalteam/ico_cat.png)5px 5px no-repeat;}
.auth a{background:url(http://img.webme.com/pic/m/mayanxternalteam/ico_usr.png)5px 5px no-repeat;}
.date a{background:url(http://img.webme.com/pic/m/mayanxternalteam/ico_date.png) 5px 5px no-repeat;}
.comnts a{background:url(http://img.webme.com/pic/m/mayanxternalteam/comment.png)5px 5px no-repeat;}

.post h2 {display:block; margin-bottom:15px;}
.post .description {display:block; font-size:12px; color:#999;}

.post blockquote {background:#eee url(http://img.webme.com/pic/m/mayanxternalteam/quote.png) 5px 5px no-repeat; padding:8px 8px 0 35px; font:normal 14px "Palatino Linotype", "Book Antiqua", Palatino, serif; display:block; border: solid 1px #ddd; }

.post .extract { float:left; margin-right:10px; width:250px;}

.post ul {margin-left:25px;}
.post ol {margin-left:25px;}
.post li {padding:3px;}
.post .leftalign {display:block; padding:5px; background:#eee; margin:8px; float:left; border:solid 1px #ddd;}
.post .rightalign {display:block; padding:5px; background:#eee; margin:8px; float:right;border:solid 1px #ddd;}


/*tables and Forms */

#right table {
width:90%;
border:1px solid #0075A4;
margin-bottom:20px;
background: #E3F6FF;
margin-top: 15px;
}
#right th {
background:#0075A4;
padding:5px 15px 5px 15px;
color:#8ADBFF;
text-align:center;
border-bottom:1px solid #000000;
font: bold 16px "Trebuchet MS", Verdana, sans-serif;
text-transform: uppercase;
}
#right td {
border-bottom:1px solid #0075A4;
padding:5px 15px 5px 15px;
border-right:1px solid #0075A4;
}


.textfield {
display: block;
width:50%;
margin:3px 3px 3px 30px;
padding:3px;
border: 1px solid #CBE0E7;
background: #E9F2F5;
}
label {
display: block;
margin:3px;
padding: 5px;
font-weight: bold;
}
.button {
display: block;
padding:0px;
margin:3px;
border: 1px solid #9DC6D2;
color:#000000;
background: #E9F2F5;
}
.textfield:hover {
background:#FFFFCC;
}
.textfield:focus {
background:#ffffff;
border: 1px solid #3A2C1B;
}
.hide {display:none;}
#bottom {padding:20px; background:url(http://img.webme.com/pic/m/mayanxternalteam/bottombg.png) repeat-x; margin-top:15px;}
#bottom p {display:block; padding:3px; text-align:center;}
#credits {text-align:right; font-size:10px; padding:5px 40px 0 40px; }
.pagenavi { height:22px; padding: 5px 5px 0 5px; background: #eee; border: solid 1px #ddd; margin:25px 0 15px 0;}
.pagenavi .alignleft {display:block; text-align:left;}
.pagenavi .alignright {display:block; float:right;}
.pagenavi a, .pagenavi a :visited, .pagenavi a :active {color:#000; font-weight:bold; text-decoration:none; border:none!important;}
.pagenavi a:hover {color:#0099CC!important;}

/*shopping Cart */
#catalogue {margin:10px 0 10px 0; background:#eee; border:solid 1px #ddd; padding:5px;}
.item {width:135px; float:left; height:220px;}
.item h3 {display:block; padding:3px;}
.item span {display:block; padding:3px;}
.item .price {color:#993300; font-weight:bold; }
.item span img {border:none!important;}
.item span a {border:none!important; text-decoration:none;}
.item img {}
img.productimg {border:solid 1px #716148; margin:0 0 0 8px;}
.clear2 {width:100%; clear:left;}
.sec_head {
display:block;
background: #0077A2 url(http://img.webme.com/pic/m/mayanxternalteam/ftrdbox.jpg) no-repeat 0px -60px;
padding:3px;
margin-bottom:15px;
color: #FFF !important;
}


Ultima edición por mayanxternalteam el Dom May 22, 2011 5:08 pm; editado 1 vez
Mensaje23-05-2011, 14:42 (UTC)    
Título del mensaje:

Hola!,

Mira este tema, es la misma plantilla pero y adaptada te servirá:

http://www.paginawebgratis.es/forum/viewtopic.php?t=29327
Mensaje23-05-2011, 16:35 (UTC)    
Título del mensaje:

Hola,

* Recomendamos Que Utilices Estas Plantillas Buenas Y Fáciles De Adaptar,
* Desde El Foro De PWG:
http://www.paginawebgratis.es/forum/viewforum.php?f=19
* Desde La Pagina Web De CssPlantillas:
* Diseños Avanzados:
http://www.cssplantillas.es.tl/Dise%F1os-avanzados-1.htm
* Diseños Profesionales:
http://www.cssplantillas.es.tl/Dise%F1os-profecionales.htm
* Diseños Ice Blue:
http://www.cssplantillas.es.tl/ice-blue.htm

* Adaptar Plantillas ( VideoTutorial )
http://www.youtube.com/watch?v=qHSPJIMrfiA

* Espero Que Te Haya Servido, Saludos
______________
Web-Master, De PWG
Nombre: Plus-24
Descripción: Ayuda Web-Master, A Usuarios De PWG.
Estado En El Foro: Usuario Junior
Email: Plus24online@yahoo.com
Derechos Del Autor: Copyright Plús-24 2011, Todos Los Derechos Reservados.
Por Favor No Editen Mis Respuestas O Temas Gracias Desde Yá.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group