Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje22-09-2012, 05:45 (UTC)    
Título del mensaje: Centrar cabezal | CSS [RESUELTO]

Hola a todos, mi problema es que quiero centrar mi cabezal, pero al momento de hacerlo se desordena parte del contenido de la pagina. Estoy usando el codigo para las box flotantes pero le saque la tabla.

Texto por encima de la pagina:
Código:
<div style="position:center;top:100px;">
<img src="http://img.webme.com/pic/m/moebiuscorp/moebiusbanner.png">
</div>
<div id="head">
<div id="topright">
<ul>
   <li><a href="URL">Link's 1</a></li>
   <li><a href="URL">Link's 2</a></li>
   <li><a href="URL">Link's 3</a></li>
   <li><a href="URL">Link's 4</a></li>
</ul>
</div>
<div class="cleared"></div>
</div><div id="catnav">
<div id="toprss"><div class="fb-like" data-href="https://www.facebook.com/pages/M%C3%B6ebius-Corp/416608491721431" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-colorscheme="dark" data-font="verdana"></div></div>
<ul id="nav">
   <li><a href="http://moebiuscorp.es.tl/">Portada</a></li>
     <li class="cat-item cat-item-5"><a href="http://moebiuscorp.es.tl/La empresa.htm">¿Quiénes Somos?</a>
      <ul class='children'>
      <li class="cat-item cat-item-6"><a href="http://moebiuscorp.es.tl/Vision.htm">Visión</a></li>
                <li class="cat-item cat-item-7"><a href="http://moebiuscorp.es.tl/Mision.htm">Misión</a></li>
                <li class="cat-item cat-item-8"><a href="http://moebiuscorp.es.tl/Contactos.htm">Contactos</a></li>
      </ul></li>
   <li class="cat-item cat-item-1"><a href="http://moebiuscorp.es.tl/Contactenos.htm">Contáctenos</a>
</li></ul></div>
<div class="cleared"></div>
<div id="main">
<div id="contentwrapper">


Texto por debajo de la pagina:
Código:
<div id="nextprevious">
<div class="alignleft"></div>
<div class="alignright"></div>
<div class="cleared"></div>
</div></div>
<div id="sidebars">
<div id="sidebar_full"><ul><li>
<div id="welcome" class="sidebarbox">
   <h2>Titulo box 1</h2><p>
Contenido
</p></div></li><li>
<div class="sidebarbox">
   <h2>Menu lateral 1</h2><ul>
     <li><a href='URL'>Link's 1</a></li>
     <li><a href='URL'>Link's 2</a></li>
     <li><a href='URL'>Link's 3</a></li>
     <li><a href='URL'>Link's 4</a></li>
     <li><a href='URL'>Link's 5</a></li>
     <li><a href='URL'>Link's 6</a></li>
     <li><a href='URL'>Link's 7</a></li>
</ul></div>
<div class="sidebarbox">
   <h2>Menu lateral 2</h2><ul>
     <li><a href='URL'>Link's 1</a></li>
     <li><a href='URL'>Link's 2</a></li>
     <li><a href='URL'>Link's 3</a></li>
     <li><a href='URL'>Link's 4</a></li>
     <li><a href='URL'>Link's 5</a></li>
     <li><a href='URL'>Link's 6</a></li>
     <li><a href='URL'>Link's 7</a></li>
</ul></div>
</li></ul></div>

<div class="cleared"></div>
</div><div class="cleared"></div></div>
<div id="morefoot">
<div class="col1">
<h3>Buscar?</h3>
<p> Búsqueda dentro de nuestro sitio:</p>
<form method="get" id="searchform" action=""><p>
<input type="text" value="Palabras a buscar" name="s" id="searchbox" onfocus="this.value=''"/>
<input type="submit" class="submitbutton" value="Buscar" /></p>
</form></div>

<div class="col2">
<h3>Enlaces</h3><p>
- Nuestras paginas recomendadas:
</p><ul>
   <li><a href="URL">Link's 1</a></li>
   <li><a href="URL">Link's 2</a></li>
   <li><a href="URL">Link's 3</a></li>
   <li><a href="URL">Link's 4</a></li>
   <li><a href="URL">Link's 5</a></li>
</ul></div>
<div class="col3">
<h3>Enlaces 2</h3><p>
- Nuestras paginas recomendadas:
</p><ul>
   <li><a href="URL">Link's 1</a></li>
   <li><a href="URL">Link's 2</a></li>
   <li><a href="URL">Link's 3</a></li>
   <li><a href="URL">Link's 4</a></li>
   <li><a href="URL">Link's 5</a></li>
</ul></div>
<div class="cleared"></div></div>
<div id="footer">
<div id="footerleft">
<p>Möebius Corp. |  Copyright © 2012 - 2018  |  Todos los derechos reservados.</p>
</div><div id="footerright"></div>
<div class="cleared"></div></div></div>


CSS sin Tags:
Código:
#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#header {display: none;}
#title {display: none;}
#nav_container {display:none;}
table {margin-left:auto;margin-right:auto;}
{margin: 0;padding: 0;}
:focus {outline:0;}
h1, h2, h3, h4, h5, h6, p {margin: 0;padding: 10px 0;}
h1, h2, h3, h4, h5, h6 {font-family: Verdana;}
hr {color: #333;border: 1px solid #121212;}
pre {height: auto; overflow-x:scroll;}
fieldset {margin: 0;padding: 0; border: 0;}
dd {padding-left: 15px;}
p {font-size: 9pt;}
a {color: #6598b8;text-decoration: none;}
a:hover {color: #222;text-decoration: underline;}
a img {border: none;  }
blockquote {background: #070707;border: 1px solid #060606;padding: 5px 15px;
margin: 10px 10px 5px 15px;font-style: italic;color: #fff;}
code {color: #3366cc;font-style: italic;}
strong {font-size: 110%;}
body {text-align: center;margin: 0;padding: 0 0 15px 0;
font-family: trebuchet ms, arial, helvetica, sans-serif;
background: #000 url("http://img.webme.com/pic/m/moebiuscorp/ergdfgdf.png") top center no-repeat;
color: #eee;font-size:12px;}
#wrapper {margin: 0 auto;width: 960px;text-align: left;padding: 0;}
#head {padding: 0;margin: 0;height: 80px;text-shadow: 0 0 4px #555;}
#head #topright {text-align: right;float: right;width: 930px;margin: 3px 0 0 0;}
#head #topright ul {list-style: none;padding: 0;margin: 0;}
#head #topright li {display: inline;}
#head #topright li a {color: #fff;font-size: 9pt;padding: 10 0 0 25px;text-transform: lowercase;}
#head #topright li a:hover {color: #ccc;text-decoration: none;}
#head #logo {margin: 0;padding: 0;}
#head h1 {padding: 0;margin: 0;}
#head h1 a {color: #fff;font-size: 17pt;text-decoration: none;}
#head h1 a:hover {color: #eee;text-decoration: none;}
#head span {padding: 0;color: #eee;font-size: 10pt;}
#catnav {margin: 20px 0 0 0;padding: 0;clear: both;height: 44px;width: 960px;}
#nav {list-style: none;margin: 0;padding: 0;}
#nav ul {margin: 0;padding: 0;}
#nav li {float: left;margin: 0;padding: 0;}
#nav a {display: block;line-height: 44px;margin: 0;padding: 0 20px 0 15px;
font-size: 10pt;color: #fff;letter-spacing: -1px;}
#nav li a:hover {color: #6598b8;text-decoration: none;display: block;}
#nav li ul {list-style: none;position: absolute;width: 150px;left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;}
#nav li li {float: left;margin: 0;padding: 0;width: 150px;}   
#nav li li a {width: 150px;height: 24px;line-height: 24px;color: #fff;
border-top: 1px solid #131f27;background: #040404;margin: 0;padding: 5px 20px 5px 15px;}
#nav li li a:hover {border-top: 1px solid #131f27;background: #000;padding: 5px 20px 5px 15px;}
#nav li:hover, #nav li.sfhover {position: static;}
#toprss {float: right;margin: 10px 50px 0 0;display: inline;width: 65px;line-height: 41px;}
#main {margin: 5px 15px 0 15px;clear: both;width: 930px;padding-bottom: 5px;}
#contentwrapper {float:left;width: 560px;margin: 0 0 15px 0;padding: 0;}
#contentwrapper2 {float:left;width: 900px;  margin: 0 0 15px 0;padding: 0;}
#contentwrapper .pageTitle, #contentwrapper2 .pageTitle {margin: 15px 0 10px 0;font-size: 14pt;
letter-spacing: -1px;color: #fff;font-weight: normal;background:;padding: 5px;}
#nextprevious {margin: 10px 0 5px 0;}
#nextprevious a {color: #eee;text-transform: lowercase;border: 1px solid #111;
padding: 5px 8px;font-size: 10pt;line-height: 1.4em;}
#nextprevious a:hover {color: #fff;}
#main #welcome {margin: 0 0 20px 0;padding: 0 0 5px 0;background:;}
#main #welcome h2 {font-size: 14pt;font-weight: normal;color: #fff;letter-spacing: -2px;
margin: 0 10px;padding: 10px 0 3px 0;}
#main #welcome p {font-size: 9pt;color: #eee;  margin: 0 10px;padding: 6px 0;}
#main #welcome a {text-decoration: underline;color: #ff9933;}
#main #welcome a:hover {color: #6598b8;}
#main #welcome form {margin: -5px 0 0 0;background: transparent;}
#main #welcome #feedbox {border: 1px solid #ccc;padding: 2px 1px;width: 180px;}
.submitbutton {margin: -5px 0 0 5px;background: #010101;color: #fff;font-size: 8pt;
padding: 3px 6px;vertical-align: middle;border: 1px solid #111;}
.submitbutton:hover {cursor: pointer;background: #050505;}
#sidebars {margin: 15px 0 0 0;float: right;width: 340px;color: #eee;}
#sidebars .sidebarbox {background: url("http://img.webme.com/pic/w/webcp/pixel04.png") repeat;padding: 8px 15px;}
#sidebar_full {padding: 0;margin: 0;}
#sidebar_left {float: left;width: 160px;}
#sidebar_right {float: right;width: 160px;}
#sidebars h2 {margin: 0;padding: 0 0 8px 0;font-weight: normal;
font-size: 11pt;color: #fff;letter-spacing: -1px;}
#sidebars table {width: 130px;}
#sidebars ul {margin: 0;padding: 0 0 5px 0;}
#sidebars li {margin-bottom: 20px;list-style: none;font-size: 9pt;}
#sidebars li ul {padding: 0;}
#sidebars ul ul li {margin: 0;padding: 2px 2px 2px 16px;color: #eee;
background:;line-height: 17px;}
#sidebars a {display: inline;color: #eee;}
#sidebars a:hover {color: #6598b8;text-decoration: underline;}
#sidebars p {padding: 2px 0;font-size: 9pt;color: #00000;}
#tag_cloud a {display: inline;}
#sidebars ul.children li {border-bottom:none;}
#sidebars ul.children {margin-bottom:0;}
#morefoot {background: #FFFFFF;border: 1px solid #FFFFFF;
padding: 15px;color: #000000;margin: 0 0 10px 0;}
#morefoot p {margin: 5px 0;padding: 5px 0;}
#morefoot ul {list-style-type: none;margin-top: 5px;}
#morefoot ul li, #morefoot p {font-size: 9pt;}
#morefoot a {text-decoration: underline;color: #000000;}
#morefoot a:hover {text-decoration: underline;color: #000000;}
#morefoot h3 {font-size: 12pt;font-weight: normal;color: #000000;letter-spacing: -1px;
border-bottom: 1px dotted #FFFFFF;margin: 0;padding: 0 0 2px 0;}
#morefoot #searchbox {padding: 1px;width: 180px;}
#morefoot .col1 {float: left;width: 340px;}
#morefoot .col2 {margin: 0 25px;}
#morefoot .col2, #morefoot .col3 {float: left;width: 260px;}
#morefoot li {padding-left: 20px;margin-bottom: 5px;
background: url("http://img.webme.com/pic/m/moebiuscorp/sun.png") left 2px no-repeat;line-height: 17px;}
#footer {clear: both;background: #FFFFFF;
border: 1px solid #FFFFFF;padding: 15px 15px 10px 15px;}
#footer p {font-size: 9pt;color: #00000;padding: 0;}
#footer a {color: #FFFFFF;text-decoration:none;}
#footer a:hover {color: #FFFFFF;}
#footerleft {float: left;width: 500px;}
#footerright {float: right;width: 300px;text-align: right;}
.highlight {color: #FFFFFF;font-weight: bold;}
.cleared {margin: 0;padding: 0;clear: both;}
.alignleft {float: left;margin: 10px 15px 5px 0;}
.alignright {float: right;margin: 10px 0 5px 15px;}
.aligncenter,
div.aligncenter { margin: 10px auto;text-align: center;display: block;}
img.alignleft {float: left;margin: 10px 15px 5px 0;}
img.alignright {float: right;margin: 10px 0 5px 15px;}
img.aligncenter {margin: 10px auto;text-align: center;display: block;}


Perdonen por poner el codigo tan largo. El tema es que los links de arriba (esquina superior derecha) y los del menu horizontal y lateral se van para abajo cuando pongo ""position:center", si lo dejo en "absolute" queda pegado a la izquierda y tengo que definir por ejemplo cuando px desde el borde izquierdo quiero que se corra, es decir, si pongo ""position:center; left: ***px" se soluciona, pero se ve bien solo para mi resolucion de pantalla que es 1024x768. Como hago para dejarlo al centro para cualquier resolucion sin que se me baje el contenido de la pagina? Desde ya muchos saludos a todos, soy usuario antiguo de PWG, pero llevo tiempo sin hacer paginas y ya se me olvidaron varias cosas :/ Gracias


Ultima edición por moebiuscorp el Sab Sep 22, 2012 3:11 pm; editado 2 veces
Mensaje22-09-2012, 19:13 (UTC)    
Título del mensaje: SOLUCION

He puesto [RESUELTO] porque descubri lo que me estaba fallando, y es que me faltaba una parte del codigo:

Código:
<div id="logo">


Este codigo hace que quede la imagen donde corresponde y que no se desconfigure en resto de la pagina, ya que yo lo tenia puesto en Head, pero va en logo. Esto es por si alguien mas usa esta plantilla..

Bueno de todos modos gracias a los que se dieron el tiempo de leer el tema, un saludos a todos :D
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group