Foros del Web » Creando para Internet » CSS »

Ampliar en ancho de mi plantilla

Estas en el tema de Ampliar en ancho de mi plantilla en el foro de CSS en Foros del Web. Hola, Alguien me puede ayudar ampliar el ancho de esta plantilla Código HTML: .box_content a { color: #0000FF; } .box_content a:focus, a:hover { color: #00FF; ...
  #1 (permalink)  
Antiguo 08/01/2011, 16:41
(Desactivado)
 
Fecha de Ingreso: diciembre-2010
Ubicación: TR0LLA
Mensajes: 39
Antigüedad: 13 años, 3 meses
Puntos: 2
Ampliar en ancho de mi plantilla

Hola,

Alguien me puede ayudar ampliar el ancho de esta plantilla

Código HTML:
.box_content a {
	color: #0000FF;
}
.box_content a:focus, a:hover {
	color: #00FF;
	text-decoration: underline;
}
#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;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font: inherit inherit 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
table, td, th {
	vertical-align: middle;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: none;
}
html {
	height: 100%;
	padding-bottom: 1px;
}
body {
	background: #00005A url(" ");
	background-attachment: fixed;
	color: #444;
	font: normal 80% sans-serif;
	line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
	color: #555;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0.3em;
}
h4, h5, h6 {
	font-weight: bold;
}
h1 {
	font-size: 2.6em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-size: 1.25em;
}
h5 {
	font-size: 1.1em;
}
h6 {
	font-size: 1em;
}
p {
	margin-bottom: 1em;
}
a:focus, a:hover {
	color: #000;
}
a {
	color: #357;
	text-decoration: underline;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
}
address {
	margin-bottom: 1.5em;
}
blockquote {
	margin: 1.5em;
}
del, blockquote {
	color: #666;
}
em, dfn, blockquote, address {
	font-style: italic;
}
strong, dfn {
	font-weight: bold;
}
sup, sub {
	line-height: 0;
}
pre {
	margin: 1.5em 0;
	white-space: pre;
}
pre, code, tt {
	font: 1em monospace;
	line-height: 1.5;
}
li ul, li ol {
	margin-left: 1.5em;
}
ul, ol {
	margin: 0 1.5em 1.5em;
}
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
dl {
	margin: 0 0 1.5em;
}
dl dt {
	font-weight: bold;
}
dd {
	margin-left: 1.5em;
}
ul.tabbed {
	display: inline;
	margin: 0;
}
ul.tabbed li {
	float: left;
	list-style: none;
	margin: 0;
}
textarea {
	overflow: auto;
}
.text, textarea, select {
	background: #FCFCFC;
	border: 1px inset #AAA;
	padding: 4px 5px;
}
.text:focus, textarea:focus, select:focus {
	background: #FFFFF5;
}
.button {
	background: #F9F9F3;
	border: 1px outset #AAA;
	padding: 4px 5px;
}
.button:active {
	border-style: inset;
}
.form_property, .form_value {
	float: left;
}
.form_property {
	text-align: right;
	width: 110px;
}
.form_value {
	padding-left: 24px;
}
.form_row_submit .form_value {
	padding-left: 132px;
}
.center, .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.bordered, img.alignleft, img.alignright, img.aligncenter {
	border: 1px solid #DDD;
	padding: 3px;
	background: #FFF;
}
img.alignleft, img.left {
	margin: 0 1.5em 1em 0;
}
img.alignright, img.right {
	margin: 0 0 1em 1.5em;
}
.left, .alignleft {
	float: left;
}
.right, .alignright {
	float: right;
}
.clear, .clearer {
	clear: both;
}
.clearer {
	display: block;
	font-size: 0;
	line-height: 0;
}
.content_separator, .archive_separator {
	background: #D5D5D5;
	clear: both;
	color: #FFE;
	display: block;
	font-size: 0;
	height: 1px;
	line-height: 0;
	margin: 12px 0 24px;
}
.archive_separator {
	margin: 0 0 14px;
}
.post {
	margin-bottom: 24px;
}
.post_title a, .post_meta a, .post_date a {
	text-decoration: none;
}
.post_title a:hover, .post_meta a:hover, .post_date a:hover {
	text-decoration: underline;
}
.post_date {
	border-top: 1px solid #D5D5D5;
	color: #777;
	font-size: 0.9em;
	padding: 8px 0 12px;
}
.post_date a {
	color: #444;
}
.post_meta {
	background: #E7E7E7;
	border: 1px solid #D7D7D7;
	color: #777;
	font-size: 0.9em;
	padding: 6px 10px;
}
.post_meta a {
	color: #345;
}
.post_meta a:hover {
	color: #001;
}
.archive_pagination {
	margin-bottom: 1.6em;
}
.archive_post {
	margin-bottom: 14px;
}
.archive_post_title {
	padding-top: 3px;
}
.archive_post_date {
	background: #FAFAFA;
	border-bottom: 1px solid #C5C5C5;
	border-right: 1px solid #CFCFCF;
	float: left;
	margin-right: 12px;
	padding: 2px 0 5px;
	text-align: center;
	width: 46px;
}
.archive_post .post_date {
	border: none;
	padding: 3px 0 0;
}
.archive_post_day {
	font: normal 1.6em Georgia, serif;
}
.thumbnails {
	margin: 0 0 1em -8px;
}
.thumbnails a.thumb {
	background: #D5D5D5;
	display: block;
	float: left;
	margin: 0 0 8px 8px;
	padding: 3px;
}
.thumbnails a.thumb:hover {
	background: #C0C0C0;
}
.thumbnails .thumb img {
	display: block;
}
.box {
	margin-bottom: 0.6em;
}
.box_title {
	background: url("http://img.webme.com/pic/c/*********/menuazul.gif") repeat center top;
	border-bottom: 1px solid #C6C9CB;
	color: #e0e0e0;
	font: bold 1.3em sans-serif;
	padding: 7px 10px 6px;
}
.box_content {
	padding: 8px 0 8px;
}
.box li:first-child {
	border-top: none;
}
div.comment_list {
	border-top: 1px solid #D6D6D6;
	margin: 1em 0 2em;
}
.comment {
	border-bottom: 1px solid #D6D6D6;
	padding-top: 10px;
}
.comment_date {
	font-size: 0.9em;
}
.comment_date a {
	color: #567;
	text-decoration: none;
}
.comment_date a:hover {
	color: #001;
	text-decoration: underline;
}
.comment_body {
	padding-top: 4px;
}
.comment_gravatar {
	width: 48px;
}
.comment_gravatar img {
	background: #FFF;
	border: 1px solid #DDD;
	padding: 2px;
}
#layout_wrapper {
	background: url("") fixed;
	padding-bottom: 16px;
}
#layout_wrapper2 {
	background: url("") no-repeat center top;
	padding-top: 10px;
}
#layout_wrapper3 {
	background: #FFF;
	margin: 0 auto;
	width: 992px;
}
#layout_wrapper4 {
	padding: 6px;
}
#header_wrapper {
	height: 150px;
}
#head {
	padding: 48px 48px 0;
}
#site_title h1 {
	color: #A0C3D0;
	font-size: 2.5em;
}
#site_title h1 a {
	color: #A0C3D0;
	text-decoration: none;
}
#site_title h1 a:hover {
	color: #DDD;
}
#site_title h2 {
	color: #999;
	font-size: 1.3em;
}
#navigation {
	background: #fff url("http://img.webme.com/pic/c/*********/menunegro.png") repeat-x;
	margin-bottom: 3px;
	padding-top: 1px;
}
#navigation a {
	color: #fff;
	display: block;
	font-weight: bold;
	text-decoration: none;
}
#navigation a:hover {
	color: #fff;
}
#nav li {
	border-right: 1px solid #fff;
}
#nav a {
	font-size: 1.0em;
	padding: 3px 6px;
}
#nav a:hover {
	background: url("http://img.webme.com/pic/c/*********/menuazul.gif") repeat-x;
}
#nav li.current_page_item a {
	background: #fff;
	color: #000;
}
#subnav {
	border-top: 1px solid #cdcdcd;
	background: url("http://img.webme.com/pic/c/*********/menuazul.gif") repeat-x;
}
#subnav {
	color: #fff;
	display: block;
	font-weight: bold;
	text-decoration: none;
}
#subnav li {
	border-right: 1px solid #fff;
}
#subnav a {
	font-size: 1.0em;
	padding: 4px 7px;
}
#subnav a:hover {
	background: url("http://img.webme.com/pic/c/*********/menunegro.png") repeat-x;
}
#main_wrapper {
	background: url("http://img.webme.com/pic/c/cssplantillas/ngloom6.gif") repeat-y;
	border-bottom: 1px solid #C3C4C1;
	margin-bottom: 3px;
}
#main {
	background: url("http://img.webme.com/pic/c/cssplantillas/ngloom7.gif") no-repeat;
	padding: 24px 0;
}
#content_wrapper {
	width: 690px;
}
#content {
	padding: 0 20px;
}
#sidebar_wrapper {
	width: 290px;
}
#sidebar {
	padding: 0 18px;
}
#dashboard {
	background: #C9CDCF url("http://img.webme.com/pic/c/cssplantillas/ngloom8.gif") repeat-x;
	border: 1px solid #ACAFB0;
	color: #404448;
	margin-bottom: 3px;
	padding: 16px;
}
#dashboard .col3 {
	width: 288px;
}
#dashboard .col3mid {
	width: 370px;
}
#dashboard .col3mid .col3_content {
	border-left: 1px solid #B0B4B8;
	border-right: 1px solid #B0B4B8;
	margin: 0 20px;
	padding: 0 20px;
}
#dashboard .col_title {
	color: #606669;
	font-size: 1.5em;
}
#dashboard ul {
	margin: 0;
}
#dashboard li {
	border-bottom: 1px solid #BABEBF;
	list-style: none;
	padding: 5px 0;
}
#dashboard li a {
	color: #404448;
	text-decoration: none;
}
#dashboard li a:hover {
	color: #202428;
	text-decoration: underline;
}
#footer {
	background: #DDD;
	border: 1px solid #CCC;
	padding: 8px 12px;
}
#footer .right, #footer .right a {
	color: #777;
	text-decoration: none;
}
#footer .right a:hover {
	color: #223;
	text-decoration: underline;
}
* html #main, * html #dashboard {
	height: 0.01%;
	min-height: 0.01%;
}
input {
	background: url(http://img.webme.com/pic/c/cssplantillas/inputimg.gif);
	border: solid #999 1px;
}
input {
	background: url(http://img.webme.com/pic/c/cssplantillas/inputimg.gif) repeat-x #fff;
	border: solid #999 1px;
}
textarea {
	background: url(http://img.webme.com/pic/c/cssplantillas/inputimg.gif) repeat-x #fff;
	border: solid #999 1px;
	margin-bottom: 10px;
}


#leftcontent {
float: left;
width: 1000px;
}
  #2 (permalink)  
Antiguo 08/01/2011, 16:48
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 13 años, 7 meses
Puntos: 64
Respuesta: Ampliar en ancho de mi plantilla

deja el html tmbien.
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 08/01/2011, 17:10
(Desactivado)
 
Fecha de Ingreso: diciembre-2010
Ubicación: TR0LLA
Mensajes: 39
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Ampliar en ancho de mi plantilla

Aqui esta

Código HTML:
<style>
#header_wrapper
{background: Url("URL DE TU CABEZAL") repeat-x;} /* ANCHO 992PX ALTO: 150PX */
</style>
<div id="layout_wrapper"><div id="layout_wrapper2">
<div id="layout_wrapper3"><div id="layout_wrapper4">
<div id="header_wrapper"><div id="head">      
<div id="site_title">
   <!-- Cabecera -->
   <h1><a href="http://*********.es.tl/">*********</a></h1>
   <h2>Recursos web!</h2>
   <!-- Fin Cabecera -->
</div></div></div>
<div id="navigation"><div id="nav"><ul class="tabbed">
<!-- menu 1 -->
<li class="current_page_item"><a href="URL">Inicio</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>
<!-- Fin menu 1 -->
</ul><div class="clearer"></div>
</div><div id="subnav">
<ul class="tabbed">
   <li class="current_page_item"><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 class="clearer"></div>
</div></div>
<div id="main_wrapper"><div id="main">
<div class="left" id="content_wrapper"> 
Código HTML:
</div><div class="right" id="sidebar_wrapper">
<div id="sidebar"><div class="box">
<div class="box_title">Nuestra web</div>
<div class="box_content"><p>
<!-- Escribe aqui lo que quieras! -->
Aenean sit amet dui at felis lobortis dignissim. Pellentesque risus nibh, feugiat in, convallis id, congue ac, sem. Sed tempor neque in quam.
<!-- Fin -->
</p></div></div>
<div class="box"><div class="box_title">Categorias</div>
<div class="box_content"><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><div class="box">
<div class="box_title">Recursos</div>
<div class="box_content"><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></div></div>
<div class="clearer"></div>
</div></div>

<div id="dashboard_outer"><div id="dashboard">
<div class="col3 left"><div class="col3_content">
<div class="col_title">Link's final 1</div><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>
<div class="col3mid left"><div class="col3_content">
<div class="col_title">Link's final 2</div><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>
<div class="col3 right"><div class="col3_content">
<div class="col_title">Link's final 3</div><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>
<div class="clearer"></div></div></div>
<div id="footer"><div class="left">
<!-- Copyright -->
&copy; 2009 Website.com - tusitioweb
<!-- Fin Copyright -->
</div><div class="right">
<a href="http://templates.arcsin.se">Website template</a> Adapter by: <a href="http://*********.es.tl/">Chat orbe</a>
</div>
<div class="clearer"></div>
</div></div></div></div></div> 
  #4 (permalink)  
Antiguo 08/01/2011, 17:32
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 13 años, 7 meses
Puntos: 64
Respuesta: Ampliar en ancho de mi plantilla

<div id="layout_wrapper"> ese es el contenedor.. si amplias el ancho de esa se amplia todo, pero recorda que tambien tenes que ampliar el ancho de los que estan dentro si no se va a ver mal
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #5 (permalink)  
Antiguo 08/01/2011, 17:44
(Desactivado)
 
Fecha de Ingreso: diciembre-2010
Ubicación: TR0LLA
Mensajes: 39
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Ampliar en ancho de mi plantilla

Hola es que soy nuevo en esto como edito esa parte del codigo para dejarlo mas ancho??

Código HTML:
<div id="layout_wrapper"> 
  #6 (permalink)  
Antiguo 08/01/2011, 17:58
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 14 años, 4 meses
Puntos: 17
Respuesta: Ampliar en ancho de mi plantilla

Demasiados códigos innecesarios diría yo, pero sería un lió ponerse a modificar y mejorarte el código, poco a poco usted podrá ir mejorándolo.

lo que veo a simple vista del CSS:

Cita:
#layout_wrapper3 {
background: #FFF;
margin: 0 auto;
width: 992px;
}
Width: 992px. Los pixeles son valores absolutos prueba con valores relativos, Porcentajes (%).

No utilices el width como 100%, se acostumbra a utilizarse el 96 ó 98%, dejando un espacio para ver el background de la web y el corte del contenedor al background.

Ya dependiendo de eso es realizar dentro de este div contenedor una suma perfecta a las columnas que tengas, es decir:

Tienes un sitio de 2 columnas, columna izquierda "pequeña" y columna derecha "grande" donde irá el contenido.

yo haría esto:

a la columna izquierda le pondría un: 30% de ancho y a la columna derecha le daría lo restante al porcentaje que pusiste al contenedor, recuerda también dejar un margin entre columna izquierda y derecha, es decir:

Columna izquierda: 30%
Columna derecha: 65%
margin-left de columna derecha: 3%

De esta forma haría una suma del 98% del contenedor, si modificas el valor del contenedor tienes que modificar el valor de estas variables para tener un sitio perfecto. Esta clase de diseños web son llamados "Diseños elásticos" pero hay que ser perfeccionista o muy avanzado en el tema para lograr un sitio bien al 100%, de lo contrario te recomiendo que uses valores absolutos como los pixeles y recuerda no pasarte de 960px de ancho del contenedor que es el valor estándar más usado en la web.

Cordial saludo.

Etiquetas: ancho, plantillas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:52.