Ayuda con el diseño de mi blog (xml) [Archivo] - ZonaDeVicio

cHukAs

22/10/2008, 10:15

Hola, me he hacido un blog y despues de bajar varios templates encontre uno que me gusta, lo que pasa que la columna de la izquierda esta bastante separada de la de la derecha y lo que quiero es ensancharla, no moverla, para que se queden pegadas las dos columnas. He editado la plantilla y cambiado valores para ver si daba con ello, pero no. Os dejo una captura de lo que quiero hacer y el codigo por si alguien puede echarme una mano.

http://img253.imageshack.us/img253/8193/dibujoff1.th.png (http://img253.imageshack.us/my.php?image=dibujoff1.png)http://img253.imageshack.us/images/thpix.gif (http://g.imageshack.us/thpix.php)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content='CygGnVW099XlsqGVRZq9zLLPAsP64ZmpH7cgGHSqL PI=' name='verify-v1'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Enlighten
Designer: Free Wordpress Layouts y Zona Cerebral
URL: www.freewordpresslayouts.com y www.zonacerebral.com
Date: 29 Nov 2007
Updated by: Iván
Distributed by: http://BTemplates.com
----------------------------------------------- */
* {
margin:0;
padding:0;
}

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

body {
color: #222222;
background-image: url(http://img440.imageshack.us/img440/8827/bgyj6.gif);
background-repeat: repeat-x;
background-color: #000000;
font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}

a:link { text-decoration: none; color: #34B5FF; }
a:visited { text-decoration: none; color: #34B5FF; }
a:hover, a:active { color: #2279D3; }
a img { border-width:0; }

h1, h2, h3, h4, h5, h6 { font-weight: normal;}
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4, h5, h6 { font-size: 20px; }

pre, blockquote {
overflow: auto;
padding: 0 10px;
margin: 20px 30px;
line-height: 1.8em;
background: #202020;
border: 1px solid #2B2B2B;
}

pre:hover, blockquote:hover {
background: #353535;
border: 1px solid #2B2B2B;
}

pre { padding-top: 10px; padding-bottom: 10px; }

code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }

ul, ol { line-height: 2.0em; }

ul { list-style-image: url(http://img440.imageshack.us/img440/6306/bulletfh8.gif); }

/* Header
-----------------------------------------------
*/

#header-wrapper {
float: left;
width: 768px;
height: 232px;
margin:0;
padding:0;
clear: right;
background: url(http://img440.imageshack.us/img440/7709/headerbghm9.gif) no-repeat top left;
position:relative;
left:-150px;
}

#header h1 {
font-size: 32px; margin:40px 0 0 420px; color:#fff;
}

#header h1 a {
color: #FFFFFF;
}

#header h1 a:hover {
color: #C8DDF0;
}

#header .description {
font-size: 13px;
color: #C6DDED;
text-transform: lowercase;
margin:0 0 2px 420px;
}

/* Menu
----------------------------------------------- */
#crosscol-wrapper {width: 768px;}
.crosscol {}

#navigation {
clear: both;
float: right;
width: 100%;
}

#navigation ul { list-style-type: none; list-style-image: none; float: right; padding: 0; margin:0 20px 0 0;}

#navigation li { float: left; }
#navigation li a:link,#navigation li a:visited {
float: left;
color: #999999;
display: block;
padding: 5px 10px;
margin:4px 3px 0 0;
border: 1px dashed transparent;
height: 24px;
font-size: 14px;
background: #202020;
border: 1px solid #303030;
}

#navigation li a:hover,#navigation li a:active {
color: #BEBEBE;
background: #343434;
border: 1px solid #404040;
background-repeat: repeat-x;
font-size: 14px;
margin: 4px 3px 0 0;
}

#navigation li.active a {
color: #C1C1C1;
background-color: #000000;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1024px;
margin:0 auto;
}

#main-wrapper {
width: 483px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
color: #C1C1C1;
background: #000000;
margin: 20px 0 0 17px;
}

#main-wrapper a:link { font-weight: bold; }
#main-wrapper a:visited { font-weight: bold; }
#main-wrapper a:hover, #wrapper a:active { }

#sidebar-wrapper {
width: 210px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: url(http://img440.imageshack.us/img440/390/sidebarbgxp2.gif) no-repeat;
margin:20px 0 0 200px;
padding: 0 0 10px 0;
}

/* Fecha
----------------------------------------------- */

#fecha {
background: url(http://img440.imageshack.us/img440/6204/datesv4.gif) no-repeat;
height: 54px;
margin: 15px 0 0 10px;
width: 54px;
text-align: center;
float: left;
display:inline;
}

.fecha_mes {
display: block;
color: #707070;
padding: 2px 0px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
margin:2px 0 3px 0;
}

.fecha_anio {
display: none;
font-size: 10px;
}

.fecha_dia {
display: block;
color: #FFFFFF;
font: 15px Georgia;
padding-top:0;
text-align: center;
margin-top: -8px;
}

/* Posts
-----------------------------------------------
*/

.post {
background: url(http://img440.imageshack.us/img440/4539/postbgdn4.gif) no-repeat top;
padding: 0 0 10px 0;
margin: 0 0 20px 0;
}

.post h3 {
margin:25px 10px 15px 0;
padding:0 0 4px 0;
font-size:24px;
font-weight:normal;
float: right;
width: 390px;
clear: right;
display: inline;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
text-decoration:none;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
}

.post-body {
clear:both;
padding:0 10px 0 12px;
}

.post p {
margin:0 0 .75em;
line-height:20px;
}

.post ul {
margin: 0 0 0 30px;
}
.post li {
padding:0 0 .25em 0;
line-height:1.5em;
}

.post-footer {
margin: 10px 10px 0 10px;
}

.post-footer-line-1 {
width: 443px;
padding: 5px 5px 5px 15px;
font-size: 90%;
color: #888888;
background-repeat: none;
background-color: #202020;
border: 1px solid #2B2B2B;
}

.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin:25px 0 0 10px;
font-weight: bold;
}

#comments-block {
margin:1em 10px 1.5em 10px;
line-height:1.6em;
padding-bottom: 1em;
}
#comments-block .comment-author {
margin:.5em 0 0;
padding:5px 5px 5px 15px;
background-repeat: none;
background-color: #202020;
border: 1px solid #2B2B2B;
}
#comments-block .comment-body {
color:#202020;
padding: 5px 10px 20px 10px;
background-color: #686868;
border: 1px solid #2B2B2B;
margin: 10px 0 0 0;
}
#comments-block .comment-footer {
padding:5px 5px 5px 15px;
background-repeat: none;
background-color: #202020;
border: 1px solid #2B2B2B;
margin: 10px 0 30px 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar {
padding: 5px 10px;
margin-bottom: 20px;
color: #666;
}

.sidebar a:link { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none;}
.sidebar a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }
.sidebar a:hover, .sidebar a:active { border-bottom: none; text-decoration: none;}

.sidebar h2 {
margin-top: 5px;
font-size: 14px;
color: #686868;
font-weight: bold;
}

.sidebar ul {
list-style-image: url(http://img440.imageshack.us/img440/6306/bulletfh8.gif);
margin: 0 0 0 30px;
}
.sidebar li {
padding:0 0 .25em 0;
line-height:1.5em;
}

.sidebar .widget {
margin:0 0 5px;
padding:0 0 5px;
line-height: 1.8em;
}

.sidebar .widget-content {
margin:10px 0 0 0;
}

.main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid #000;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: arial;
color: #000;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: #000;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
width:748px;
clear:both;
margin:0 auto;
text-align: left;
background: #000000;
color: #34B5FF;
font-size: 11px;
}

.footext {
padding:0 0 10px 20px;
}

.footext a { color: #34B5FF; font-size: 11px; }
.footext a: visited { color: #34B5FF; }
.footext a:hover { color: #2279D3; border-bottom: 1px dashed #2279D3; }

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>

</head>
<script>
function remplaza_fecha(d){
var da = d.split(' ');
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(mes+dia+anio);
}
</script>
<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='.:: IdaDeBola (cabecera)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
</b:section>
</div>


<div class='clear'>*</div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
<div class='footext'>
Diseñado por:
<a href='http://freewordpresslayouts.com/'>FreeWordpressLayouts</a>
| Adaptado por:
<a href='http://zonacerebral.com/'>Zona Cerebral</a>
</div>
</div>

</div></div> 

</body>
</html>

lucha

22/10/2008, 10:40

tienes que alinear las dos columnas a la izquierda

cHukAs

22/10/2008, 10:42

tienes que alinear las dos columnas a la izquierda

El problema es que no se hacerlo. Queria ensanchar la columna de la izquierda no solo juntarlas.

lucha

22/10/2008, 10:47

Yo lo que hago es guardarme el blog y con el dreanweaver edito los estilos, pero no te fies de como se ve.

De todas maneras el tamaño lo cambias aquí, también lo de la alineación

#sidebar-wrapper {
width: 210px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: url(http://img440.imageshack.us/img440/390/sidebarbgxp2.gif) no-repeat;
margin:20px 0 0 200px;
padding: 0 0 10px 0;

cHukAs

22/10/2008, 10:59

Pues a mi no me cambia nada. Modifique los valores de width, que es ancho no?? y nada, sigue teniendo el mismo ancho y encima la columna de la derecha desaparece.
Es complicadillo esto.

lucha

22/10/2008, 11:12

Aprenderas a odiar las css.

Si tienes firefox buscate los pluginss "CSSViewer" y el "Web Developer Toolbar", te ayudarán bastante con los estilos.

otto_xd

22/10/2008, 11:13

Pues a mi no me cambia nada. Modifique los valores de width, que es ancho no?? y nada, sigue teniendo el mismo ancho y encima la columna de la derecha desaparece.
Es complicadillo esto.

Puede ser que al aumentar el tamaño en pixeles estes desplazando el hueco a la derecha, y por eso desaparece.

Lo "mejor" seria usar valores relativos en tantos por ciento, pero eso es una loteria, es dificil que todo cuadre asi.

Saludos

lucha

22/10/2008, 11:20

Puede ser que al hacer más grande la columna de la izquierda, la derecha no tenia hueco y se ha quedado por debajo de la otra.

cHukAs

22/10/2008, 11:38

Bueno consegui ensanchar la columna izquierda, pero lo que se ensancha es el texto y se sale del recuadro negro que tiene de fondo. Ahora como ensancho tambien ese recuadro de fondo??

< - >
A esto me refiero:

http://img205.imageshack.us/img205/2231/dibujord3.th.png (http://img205.imageshack.us/my.php?image=dibujord3.png)http://img205.imageshack.us/images/thpix.gif (http://g.imageshack.us/thpix.php)

lucha

22/10/2008, 12:09

Cambia estos dos:

#outer-wrapper {
width: 1024px;
margin:0 auto;
}

#main-wrapper {
width: 483px;

El outer es lo que contiene todo el blog, y el main es el cuadro q se te ha quedao chiquito

cHukAs

22/10/2008, 12:18

Cambia estos dos:

#outer-wrapper {
width: 1024px;
margin:0 auto;
}

#main-wrapper {
width: 483px;

El outer es lo que contiene todo el blog, y el main es el cuadro q se te ha quedao chiquito

Nada que no va. Cambio el width del main-wrapper y el cuadro sigue exactamente igual de tamaño, pero el texto es lo que cambia :S

lucha

22/10/2008, 12:21

si el texto cambia es que has hecho más grande el cuadro, lo más probable es que el cuadro que no cambia sea ina imagen de fondo

neostalker

22/10/2008, 12:40

Estoy de acuerdo con lucha, aprenderás a odiar las hojas de estilo (CSS)

Yo aprendí a usarlas en enero de este año en mi asignatura de diseño de contornos gráficos y a veces daba la sensación de que por mucho que cambiaras no ibas a conseguir nada. Qué mítico era cambiar de color el fondo y ver que seguía siendo gris xD

lucha

22/10/2008, 12:56

Yo aprendí sobre la marcha en el curro y en momentos pensé en suicidarme o matar a gente.

Consejo, prueba lo que estas haciendo en todos los navegadores que puedas, no sea que tengas una "sorpresa" y mirate esta dirección, el manual es muy bueno:

http://www.librosweb.es/

cHukAs

22/10/2008, 14:13

Por fin lo logre, era lo de la imagen de fondo. La edite con el photoshop y la hice mas ancha. Ahora ya esta como yo quería.
Graciasssss.