Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje06-10-2014, 03:24 (UTC)    
Título del mensaje: ajustar diseño

hola tengo un diseño que me gusta para mi pagina pero estoy teniendo problemas a la hora de adaptarlo ya que soy algo nuevo en esto, el tema de las imágenes y las paginas se trabajarlas.
les dejo el código fuente y el style.css para ver si esta bien o si tiene algún fallo aver si me pueden ayudar.
un saludo a todos
CODIGO FUENTE:
<!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>Bike Rider Club</title>
<link href="style.css" media="screen" rel="stylesheet"/>
</head>
<body>
<div id="top-background">
<div id="top-wrapper">
<!-- menu -->
<div id="menu">
<ul>
<li class="menu-btn"><a href="#" id="selected">HOME</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">ABOUT US</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">MEMBERS</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">EVENTS</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">GALLERY</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">LINKS</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">CONTACTS</a></li>
</ul>
<div style="clear:both;"></div>
</div>
<!-- banner -->
<div id="banner">
<div id="banner-content">
<div id="logo"><img alt="" src="images/logo.png"/></div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui nulla, ultricies et, ultrices at, rhoncus sodales, eros.
</div>
<div class="more-btn"><a href="#"><img alt="" src="images/more-btn1.png" border="0"/></a></div>
</div>
</div>
</div>
</div>
<!-- content -->
<div id="wrapper">
<div id="top-box"></div>
<div id="middle-box">
<!-- welcome -->
<div id="welcome"><div class="inner_copy"></div>
<div class="title">WELCOME TO OUR CLUB!</div>
<div>
<p>
This is a free and fully standards compliant css template designed by <a href="#">MyTemplateBox</a>. You can use it for your personal and commercial projects without any restrictions. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!
</p>
</div>
<div class="more-btn"><a href="#"><img alt="" src="images/more-btn.png" border="0"/></a></div>
<div id="content-divider"></div>
<!-- newsletter signup -->
<div id="newsletter">
<form action="">
<div id="newsletter-top">NEWSLETTER SIGN UP</div>
<div id="signup-box"><input type="text" value=""/></div>
<div id="subcribe-btn"><input type="image" src="images/subcribe-btn.png"/></div>
<div style="clear:both;"></div>
<div id="unsubcribe"><a href="#">Unsubcribe here</a></div>
</form>
</div>
</div>
<!-- events -->
<div id="events">
<div style="margin-bottom:10px;"><img alt="" src="images/photo1.jpg"/></div>
<div class="title">LATEST EVENT</div>
<div>
Donec dignissim, lacus eu ultricies sollicitudin, nibh nisi dictum ante, eget accumsan ipsum tellus vel neque. Vivamus leo pede, cursus eu, bibendum ac, viverra id, nisl. Nullam at urna. Curabitur ac tortor. Curabitur dui sem, vulputate id, dapibus id, lobortis at, urna. Sed felis dui, pretium vel, lobortis eget, pharetra ut, urna. Curabitur in lacus..
</div>
<div class="more-btn"><a href="#"><img alt="" src="images/more-btn.png" border="0"/></a></div>
</div>
<!-- news -->
<div id="news">
<div id="news-top">NEWS &amp; EVENTS</div>
<div id="news-blue">
<div class="sub-title">DONEC DIGNISSIM</div>
<div>
ultricies sollicitudin, nibh nisi dictum ante, eget accumsan ipsum tellus vel neque. Vivamus leo pede, cursus euvbn mkljuo.
</div>
</div>
<div id="more-news1"><a href="#">MORE</a></div>
<div id="news-gery">
<div class="sub-title">DONEC DIGNISSIM</div>
<div>
ultricies sollicitudin, nibh nisi dictum ante, eget accumsan ipsum tellus vel neque. Vivamus leo pede, ipsum tellus cursus euvbn mkljuo nmbhgyumj.
</div>
</div>
<div id="more-news2"><a href="#">MORE</a></div>
</div>
<div style="clear:both;"></div>
</div>
<div id="bottom-box"></div>
</div>
<!-- footer -->
<div id="footer">
<div class="fleft"><p>Copyright statement.</p></div>
<div class="fright"><p>Plantillas web populares gratis <a href="http://www.websitetemplatesonline.com" target="_blank">en www.MejoresPlantillasGratis.es</a>.</p></div><div class="fclear"></div>
<div class="fcenter"><p>Template Designed By: <a href="http://www.mytemplatebox.com/">Free Website Templates</a></p></div>
</div>
</body>
</html>

STYLE:

.fleft {float:left}
.fright {float:right}
.fclear {clear:both}
.fcenter {float:none;text-align:center}
a {color:#3cb0f2}
body {background-color:#d3d2d2;margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000}
#top-background {background-color:#ececec}
#top-wrapper {width:960px;margin:0 auto}
#menu {background:url(images/menu.png) top center no-repeat;width:965px;height:45px}
#menu ul {margin:0;padding:0}
#menu ul li {float:left;clear:none;list-style:none}
.menu-btn {width:135px;height:30px;padding-top:10px}
ul li a {color:#3cb0f2}
#menu ul li a {display:block;text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;width:135px;height:16px;text-align:center;margin-top:3px}
#menu ul li a:hover, #selected {background:url(images/menu-selected.png) top center no-repeat;color:#fff}
#banner {background:url(images/banner-img.jpg) top center no-repeat;width:963px;height:255px}
#banner-content {width:350px;padding-top:50px;padding-left:60px;font-size:16px;color:#fff}
#logo {margin-bottom:10px}
.more-btn {text-align:right;margin-top:10px;margin-right:10px}
#wrapper {width:960px;margin:0 auto;background:#fff;margin-top:20px}
#top-box {background:url(images/top-box.png) top center no-repeat;width:960px;height:18px}
#bottom-box {background:url(images/bottom-box.png) top center no-repeat;width:960px;height:18px}
#middle-box {padding:0 20px 0px 20px}
#welcome {float:left;clear:none;width:300px}
#events {float:left;clear:none;width:300px;margin-left:45px;margin-right:40px}
#news {float:left;clear:none;width:232px}
.title {font-size:20px;color:#3cb0f2;font-weight:bold;margin-bottom:10px}
.inner_copy {border:0;color:#f00;float:left;width:50% !important;margin:-100% 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:11px}
#content-divider {border-top:1px solid #3cb0f2;margin-top:20px;margin-bottom:20px}
#newsletter {background:#e8e8e8 url(images/newsletter-bg.png) bottom center no-repeat;;width:302px;padding-bottom:20px}
#newsletter-top {background:url(images/newsletter-top.png) top left no-repeat;width:302px;height:30px;padding-left:15px;font-size:13px;padding-top:3px;color:#3cb0f2;font-weight:bold}
#signup-box input {margin-left:15px;margin-top:10px;width:180px;height:16px;float:left;clear:none}
#subcribe-btn {float:right;clear:none;margin-right:15px;margin-top:10px;margin-bottom:5px}
#unsubcribe {margin-left:15px}
#unsubcribe a {color:#3cb0f2;font-weight:bold;font-size:13px}
#news-top {background:url(images/top-news.png) top left no-repeat;width:232px;height:27px;padding-left:15px;font-size:13px;padding-top:3px;color:#3cb0f2;font-weight:bold}
#news-blue {background:#3cb0f2;width:212px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:20px}
.sub-title {font-weight:bold;margin-bottom:5px}
#more-news1 {background:url(images/more-news1.png) top left no-repeat;text-align:right;padding-right:10px}
#more-news1 a {color:#fff;font-weight:bold;text-decoration:none;font-size:13px}
#news-gery {background:#e8e8e8;width:212px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:20px}
#more-news2 {background:url(images/more-news2.png) top left no-repeat;text-align:right;padding-right:10px}
#more-news2 a {color:#3cb0f2;font-weight:bold;text-decoration:none;font-size:13px}
#footer {width:915px;margin:0 auto;font-size:12px;color:#585858;padding:10px}
#footer div {padding:0 15px}
Mensaje06-10-2014, 03:27 (UTC)    
Título del mensaje: SE ME OLVIDABA

también quiero saber si debo de colocar algo sobre tecoto por debajo de la pagina

creo que en ajustes de diseño donde pone esto "Texto sobre el diseño
(también se puede utilizar para, por ejemplo, código CSS)" va el código que les di arriba el de código fuente y en "CSS-Code
sin Style Tags" el segundo código pero en "texto por debajo de la pagina" que debo poner?


Ultima edición por adcfs el Dom Oct 05, 2014 11:28 pm; editado 1 vez
Mensaje09-10-2014, 07:08 (UTC)    
Título del mensaje: Re: SE ME OLVIDABA

hola si lo pones todo en la misma caja no pasa nada, funciona igual... es solo que despues tu plantilla no interactua con el kit de herramientas de pwg...

debes localizar y cambiar que partes quieres usar en el codigo css, esto es del codigo css de pwg:

#content = seria la parte donde pongas informacion de cada pagina indivudual
#nav_container = es el menu
#sidebar_content = es la caja lateral, solo hay una por defecto, aunque con codigos puedes crear mas.
las partes que no quieras mostrar ponlo como display none, por ejemplo el menu original:
#nav_container {display: none}
------------

lo principal es ver el codigo, estudiarlo y comprenderlo, ya que estaria horas explicandote como adaptarlo :D
intentalo y si no ya buscaremos implementartelo
______________

10 años ayudando a la comunidad!!
>las cuestiones de problemas con webs se atienden en el foro.
>Ticket a: ayuda@paginawebgratis.es -- Reportes a: support-es@webme.com
Mensaje09-10-2014, 23:29 (UTC)    
Título del mensaje: ajustar diseño

hola javidj lo primero gracias por contestarme, mira te explico yo lo que se hacer es cambiar los links las fotos crear noticias ettc etc, el problema esque no se adaptar ese diseño que tengo en mi web si te fijas cuando entras a la pagina le das para abajo y sale el titulo de la web y pagina de prueba yo quiero que el diseño se el de arriba las noticias las fotos los links los adapto yo y algunas cositas mas también pero por eso entre a este foro por que no se hacerlo y si alguien me pudiera ayudar se lo agradecería
un saludo a todos
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group