#1 
[Diseño para Css design] Music Template el Vie Mar 05, 2010 10:08 pm
[Diseño para Css design] Music Template el Vie Mar 05, 2010 10:08 pm
~ Admin TFW ~
Sexo: 
Mensajes: 3262 
Reputacion: 109
Puntos: 10097
Registrado: 16/11/2009
Localización: mexico
Edad: 17
vista previa en vivohttp://img41.xooimage.com/files/8/8/c/index-1980ee2.htm
Texto por encima de la pagina
- Código:
<!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>
</head>
<body>
<div id="container">
<!-- Adaptado por Help-4-pwg -->
<!-- Start of Page Title -->
<div id="page_title">
<h1><span>The Music Website</span></h1>
</div>
<!-- End of Page Title -->
<div id="header_image"><span> </span></div>
<!-- Start of Page Header -->
<!-- Adaptado por Help-4-pwg -->
<div id="header_container_left">
<div id="header_container_right">
<div id="header_container">
<div id="page_header">
<div id="header_hidden"> </div>
<!-- Start of Header Punchline -->
<div id="header_punchline">
<h3><span>Your Punchline Goes Here</span></h3>
</div>
<!-- End of Header Punchline -->
<!-- Start of Header Navigation Menu -->
<div id="header_menu">
<!-- Adaptado por Help-4-pwg -->
<ul>
<li id="menu_1"><a href="http://www.freewebsitetemplates.com/"><b>Home</b></a></li>
<li id="menu_2"><a href="http://www.freewebsitetemplates.com/"><b>About Us</b></a></li>
<li id="menu_3"><a href="http://www.freewebsitetemplates.com/"><b>Products</b></a></li>
<li id="menu_4"><a href="http://www.freewebsitetemplates.com/"><b>Services</b></a></li>
<li id="menu_5"><a href="http://www.freewebsitetemplates.com/"><b>Contacts</b></a></li>
</ul>
</div>
<!-- End of Page Header : Menu -->
<!-- Start of Header Links -->
<div id="header_links">
<ul>
<li><a href="http://www.freewebsitetemplates.com/">make your own music</a></li>
<li><a href="http://www.freewebsitetemplates.com/">grab the hottest tracks</a></li>
<li><a href="http://www.freewebsitetemplates.com/">read previews</a></li>
</ul>
</div>
<!-- End of Header Links -->
<div class="clearthis"> </div>
</div>
</div>
</div>
</div>
<!-- End of Page Header -->
<!-- Start of Main Content -->
<div id="maincontent_container">
<div id="maincontent">
texto por debajo de la pagina
- Código:
</div><!-- Adaptado por Help-4-pwg -->
</div>
<!-- End of Main Content -->
<!-- Start of Page Footer -->
<div id="page_footer">
Powered by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> | Adaptado por <a href="http://www.help-4-pwg.es.tl/">help-4-pwg</a></
</div>
<!-- Adaptado por Help-4-pwg -->
<!-- End of Page Footer -->
</div>
</body>
</html>
css sin style tags
- Código:
* {
margin: 0px;
padding: 0px;
}
body {
background: url('http://img49.xooimage.com/files/d/4/a/background-176c8cb.gif') #3e3437 repeat 0px 0px;
color: #b1b0ae;
font-family: verdana, arial, sans-serif;
font-size: 11px;
text-align: center;
}
/* ADAPTADO POR HELP-4-PWG */
a {
color: #b1b0ae;
text-decoration: underline;
}
a:hover {
color: #8b8a89;
}
span {
display: none;
}
img {
border: none;
}
/* ADAPTADO POR HELP-4-PWG */
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
/* ADAPTADO POR HELP-4-PWG */
p {
margin: 10px 0px 20px;
text-align: justify;
line-height: 14px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#container {
margin: 0px auto;
width: 719px;
text-align: left;
}
/* ADAPTADO POR HELP-4-PWG */
.link-more {
font-size: 10px;
font-family: tahoma, arial, sans-serif;
font-weight: bold;
text-align: right;
line-height: 10px;
}
.link-more a {
text-decoration: none;
}
/* Page Title */
#page_title {
padding: 16px 0px 11px;
}
#page_title h1 {
height: 34px;
background: url('http://img27.xooimage.com/files/9/6/c/website_title-1980e58.gif') no-repeat 50% 0%;
}
/* Page Header Containers */
#header_image {
position: absolute;
margin-left: 533px;
width: 136px;
}
/* ADAPTADO POR HELP-4-PWG */
#header_image span {
float: right;
display: block;
background: url('http://img41.xooimage.com/files/c/a/8/header_image-176c8db.gif') no-repeat 0px 0px;
position: relative;
top: -28px;
z-index: 1;
width: 136px;
height: 195px;
}
#header_container_left {
padding-left: 61px;
background: url('http://img45.xooimage.com/files/9/3/a/body_leftspeaker-176c8e6.gif') no-repeat 0px 5px;
}
#header_container_right {
margin-right: 8px;
padding-right: 53px;
background: url('http://img43.xooimage.com/files/9/e/8/body_rightspeaker-176c8ed.gif') no-repeat 100% 5px;
}
#header_container {
border: 1px solid #9d9898;
}
/* ADAPTADO POR HELP-4-PWG */
#page_header {
width: 595px;
height: 147px;
background: url('http://img41.xooimage.com/files/c/a/a/header_background-176c8d5.gif') no-repeat 0px 0px;
color: #fbc551;
overflow: hidden;
font-size: 10px;
font-family: tahoma, arial, sans-serif;
font-weight: bold;
text-align: left;
}
#page_header a {
color: #fbc551;
}
#page_header a:hover {
color: #fbfe00;
}
#header_hidden {
width: 145px;
height: 147px;
float: right;
overflow: hidden;
}
/* ADAPTADO POR HELP-4-PWG */
/* Page Header Punchline */
#header_punchline {
padding-top: 29px;
width: 310px;
float: right;
}
#header_punchline h3 {
width: 310px;
height: 13px;
background: url('http://img23.xooimage.com/files/f/2/2/website_punchline-1980e85.gif') no-repeat 0px 0px;
}
/* Header Navigation Menu */
#header_menu {
padding-top: 28px;
width: 140px;
float: left;
}
#header_menu ul {
margin-left: 19px;
width: 73px;
}
/* ADAPTADO POR HELP-4-PWG */
#header_menu li {
margin-bottom: 3px;
border: 1px solid #ea7711;
float: left;
}
#header_menu li a {
display: block;
width: 71px;
height: 15px;
text-decoration: none;
overflow: hidden;
}
#header_menu li a:hover {
background-image: none;
background-color: #6c0528;
}
#header_menu li a b {
display: block;
margin-top: 1px;
padding-left: 15px;
}
/* ADAPTADO POR HELP-4-PWG */
li#menu_1 a {
background: url('http://img49.xooimage.com/files/4/f/1/menu_1_bg-176c8de.gif') no-repeat 0px 0px;
}
li#menu_2 a {
background: url('http://img29.xooimage.com/files/f/6/3/menu_2_bg-176c8e1.gif') no-repeat 0px 0px;
}
li#menu_3 a {
background: url('http://img21.xooimage.com/files/9/c/7/menu_3_bg-176c8e3.gif') no-repeat 0px 0px;
}
li#menu_4 a {
background: url('http://img29.xooimage.com/files/1/e/4/menu_4_bg-176c8e4.gif') no-repeat 0px 0px;
}
li#menu_5 a {
background: url('http://img23.xooimage.com/files/0/8/b/menu_5_bg-176c8e5.gif') no-repeat 0px 0px;
}
/* ADAPTADO POR HELP-4-PWG */
/* Page Header Links */
#header_links {
padding-top: 25px;
width: 310px;
float: right;
}
#header_links ul {
padding-left: 2px;
}
#header_links li {
padding-bottom: 3px;
}
/* Main Content Area */
#maincontent_container {
margin: 1px 61px;
padding: 18px 20px 12px;
border: 1px solid #9d9898;
background-color: #6c0528;
}
#maincontent {
width: 555px;
}
#maincontent .divider {
width: 555px;
height: 1px;
background: url('http://img43.xooimage.com/files/e/c/1/body_divider-176c8cc.gif') repeat-x 0px 0px;
overflow: hidden;
}
/* Chartbusters */
#chartbusters {
margin: 0px 1px 12px;
width: 553px;
}
/* ADAPTADO POR HELP-4-PWG */
#chartbusters h2 {
width: 78px;
height: 20px;
background: url('http://img23.xooimage.com/files/f/4/e/chartbusters_title-1980ea6.gif') no-repeat 0px 0px;
}
.chartbusters_entry {
margin: 20px 0px 5px;
width: 553px;
}
.chartbusters_thumbnail {
margin-top: 2px;
float: left;
}
.chartbusters_thumbnail img {
border: 1px solid #978f8d;
}
.chartbusters_details {
float: right;
width: 450px;
}
.chartbusters_details p {
margin: 1px 0px 10px;
}
#chartbusters .link-more {
text-transform: lowercase;
}
/* ADAPTADO POR HELP-4-PWG */
#chartbusters .link-more a {
color: #ffa329;
}
#chartbusters .link-more a:hover {
color: #d88a23;
}
/* ADAPTADO POR HELP-4-PWG */
/* My Music Shop */
#musicshop {
margin: 10px 1px 2px;
width: 553px;
}
#musicshop h2 {
width: 116px;
height: 20px;
background: url('http://img43.xooimage.com/files/2/2/6/musicshop_title-1980eab.gif') no-repeat 0px 0px;
}
#musicshop .link-more {
text-transform: lowercase;
}
#musicshop .link-more a {
color: #a9c60f;
}
#musicshop .link-more a:hover {
color: #89a207;
}
/* Page Footer */
#page_footer {
margin: 10px 61px 10px;
color: #fff;
font-family: tahoma, arial, sans-serif;
font-size: 11px;
text-align: center;
}
#page_footer a {
color: #fff;
}
#page_footer a:hover {
color: #ceced0;
}
~Administrador de TFW~ 
