Foros del Web » Creando para Internet » CSS »

barras laterales

Estas en el tema de barras laterales en el foro de CSS en Foros del Web. Hola, He creado un sitio web con un editor que me daba el hosting contratado, cuando he publicado la web en mi server ha aparecido ...
  #1 (permalink)  
Antiguo 30/11/2009, 05:34
 
Fecha de Ingreso: noviembre-2009
Mensajes: 26
Antigüedad: 14 años, 4 meses
Puntos: 0
barras laterales

Hola,
He creado un sitio web con un editor que me daba el hosting contratado, cuando he publicado la web en mi server ha aparecido la carpeta de la web con su main.css, style.css, su html etc,la página esta centrada como un blog con los margenes izquierdos y derechos sin usar y malgastados, yo no tengo conocimientos css ni html pero creo comprender que es culpa de este 735:
#container {

position: relative;

padding: 0;

margin: 0 auto;

text-align: left;

width: 735px;

lo que quiero es añadir las dos barras a los lados sin tocar ese withd 735 porqué creo que si lo toco la web construida con el editor perderá o descuadrará los datos.
Buscando he encontrado esto:
HTML:
<div id="contenedor">
<div id="col_der"></div>
<iv id="col_izq"></div>
<iv id="col_cen"></div>
</div>

CSS:
#contenedor {height: 200px;margin:0;}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 200px;background-color: #f00;}
#col_izq {float: left; width: 200px;background-color: #f0f;}
#col_cen {background-color: #ccc;}

se que tengo que hacer algo así pero no lo tengo muy claro por lo dicho, mis conocimientos son nulos y sin el editor nunca habría hecho la web, llevo semanas de pruebas cuando tengo un rato y no consigo poner ese código en el sitio adecuado y quizá ni sea ese.
cualquier ayuda es bien recibida.
Muchas gracias
  #2 (permalink)  
Antiguo 30/11/2009, 12:58
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: barras laterales

Hola pacosorella todo bien? en realidad primero necesitaríamos ver el codigo html y css en cuestión para poder tener idea clara de la estructura que contamos y por otro lado necesitaríamos saber por ejemplo el ancho de las barras laterales (por ejemplo si van a tener ancho fijo).

Saludos,
Pablo
  #3 (permalink)  
Antiguo 01/12/2009, 03:12
 
Fecha de Ingreso: noviembre-2009
Mensajes: 26
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: barras laterales

Hola Pablo, gracias por responder tan pronto, te adjunto los archivos que me ha generado el editor web en el server, son style.css, main.css, index.h tml y otro css que es para el color de fondo etc y que supongo no necesitas, respecto al ancho de las barras laterales la verdad es que no tengo una medida fija, la página esta centrada y a los lados ese espacio muerto, me gustaría dar uso a ese espacio hasta el borde de la pantalla a ambos lados, y si eso es muy complicado solo uno, es para poner ahi imagenes,banner etc fuera de lo que seria el cuerpo principal, creo entender que dentro del container pero fuera del body ¿puede ser?.

Al adjuntarte el código me aparece esto: Por motivos anti-spam, solo es posible incluir enlaces o compartir direcciones web en sus mensajes, luego de que el usuario tenga más de 30 días de antigüedad y más de 30 mensajes publicados en el foro. Disculpe las molestias.

Te dejo mi mail, te puedo enviar por correo el código si te pones en contacto conmigo, muchas gracias por tu ayuda
[email protected]

un saludo
  #4 (permalink)  
Antiguo 01/12/2009, 04:28
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 8 meses
Puntos: 20
Respuesta: barras laterales

Pon las direcciones, pero quitales el http y el www, es decir, seria asi

forosdelweb.com/f53/

Asi no lo considera spam.

Saludos¡¡
  #5 (permalink)  
Antiguo 01/12/2009, 04:54
 
Fecha de Ingreso: noviembre-2009
Mensajes: 26
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: barras laterales

Gracias por la info impostor, a ver si con el código se puede solucionar, da gusto la ayuda que aquí se proporciona.

HTML:

<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" .w3.org/TR/html40/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="1&amp;1 Editor Web"><meta name="description" content="Un sitio web para la edición de sitios"><title>Página principal - Un sitio web para la edición de sitios</title><link rel="stylesheet" type="text/css" media="all" href="main.css"><link rel="stylesheet" type="text/css" media="all" href="colorschemes/colorscheme1/colorscheme.css"><link rel="stylesheet" type="text/css" media="all" href="style.css"><script type="text/javascript" src="live_tinc.js"></script></head><body id="main_body"><div id="container"><div id="header"><div xmlns:wal=schlund.de/webfix/assignmentLanguage" id="key_visual" wal:element="keyvisual">&nbsp;</div><div xmlns:wal=schlund.de/webfix/assignmentLanguage" id="text_caption" wal:element="caption"><div id="extra_div1">Tarot</div><div id="extra_div2"></div></div><div id="logo"><a href="index.html"></a></div></div><div id="main_container"><div id="left_column_container"><div id="main_nav_container"><ul id="main_nav_list"><li><a class="main_nav_active_item" href="index.html"><span class="main_nav_active_item_text">Página principal</span></a></li><li><a class="main_nav_item" href="2.html"><span class="main_nav_item_text">prueba 2</span></a></li><li><a class="main_nav_item" href="3.html"><span class="main_nav_item_text">prueba</span></a></li></ul></div><div id="sub_container1"><div id="extra_div4"></div></div></div><div id="sub_container2"><div xmlns:wal=schlund.de/webfix/assignmentLanguage" class="content" id="content_container" wal:element="content"><br>
<div class="content" id="content_container"><br><br>

</div>

</div></div></div><div id="footer"><div id="footer_text"></div></div></div><!-- wfxbuild / 1.0 / layout4-4 / 2009-12-01 09:45:39 CET--></body></html>

MAIN.CSS

styles for specific classes and ids

----------------------------------------------------------------------------*/





/*-- global container ------------------------------------------------------*/



#container {

position: relative;

padding: 0;

margin: 0 auto;

text-align: left;

width: 735px;

}



/*--- header ---------------------------------------------------------------*/



#header {

padding: 0;

margin: 0;

width: 735px;

height: 310px;

top: 0px;

left: 0px;

}



/*--- key visual -----------------------------------------------------------*/



#key_visual {

position: absolute;

top: 45px;

left: 2px;

width: 730px;

height: 272px;

}



/*--- caption (as text or background image) --------------------------------*/



#text_caption {

position: absolute;

top: 25px;

left: 0px;



}



#extra_div1 {

position: relative;

top: 5px;

left: 0px;

padding-left: 100px;

height: 20px;

}



#extra_div2 {

position: absolute;

top: 0px;

left: 2px;

width: 90px;

height: 34px;

}



/*--- logo -----------------------------------------------------------------*/



#logo {

width: 283px;

height: 56px;

position: absolute;

top: 265px;

left: 440px;

}



#left_column_container {

padding: 0;

margin-top: 25px;

float: left;

width: 190px;

}



#sub_container1 {

/*

height: 381px;

margin-top: 20px;

margin-left: 10px;

padding: 0;





border-width: thin;

border-style: solid;

border-color: #0000ff;

*/

width: 95px;

margin: 0 0 0 10px;

padding: 0;

}



#sub_container2 {

/*

border-width: thin;

border-style: solid;

border-color: #00ff00;

*/



/*width: 735px;*/



float: right;

/*margin-top: 50px;*/

margin: 15px 15px 15px 0;

padding: 0;

width: 510px;

}







#extra_div4 {

/*

border-width: thin;

border-style: solid;

border-color: #ff0000;

*/

height: 381px;

width: 95px;

margin: 0 0 0 10px;

padding: 0;



}



/*--- main navigation ------------------------------------------------------*/



#main_nav_container {

margin: 0 0 0 8px;

padding: 0;
}



#main_nav_list {

border: 0;

padding: 0;

margin: 0;

list-style-type: none;

}



#main_nav_list li {

margin: 3px 0 2px 0;

padding: 0;

}



/*--- main navigation items ------------------------------------------------*/



#main_nav_list a {



display: block;

text-align: left;

line-height: 24px;

height: 28px;

width: 165px;

padding-left: 12px;
overflow: hidden;
}



#main_nav_list a:hover {

text-decoration: none;

}







/*--- subnavigation --------------------------------------------------------*/



.sub_nav_container {

z-index: 1;

position: relative;

top: 5px;

left: 0px;

float: right;

width: 544px;

padding: 0;

margin: 0;

overflow: hidden;
min-height: 23px;

}



.sub_nav_list {

position: relative;

width: 530px;

margin: 0;

padding: 0;

top: -2px;

left: 26px;

list-style-type: none;

}



.sub_nav_list li {

text-decoration: none;

float: left;
margin: 0;

padding: 0;
}



/*--- subnavigation items --------------------------------------------------*/



.sub_nav_list a {

overflow: hidden;

width: 120px;
height: 23px;
line-height: 23px;

background: transparent;

padding: 0;

margin: 0;

text-align: center;
overflow: hidden;
float: left;
}



.sub_nav_list a:hover {

background: transparent;

text-decoration: none;

}



a.sub_nav_active_item {

text-decoration: none;

}



/*--- content --------------------------------------------------------------*/



#content_container {

overflow: hidden;

margin: 0;

padding: 0;

line-height: 1.2;

width: 510px;

}



#content_container table {

border-style: solid;

border-width: 1px;

border-spacing: 1px;

}



#content_container tr.odd {

font-size: 90%;

}



#content_container tr.even {

font-size: 90%;

}





/*--- footer ---------------------------------------------------------------*/



#footer {

margin: 0;

padding: 0;

width: 735px;

height: 79px;

clear: both;

}



#footer_text {

font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;

padding: 10px 0 0 0;

margin: 0 30px 0 30px;

text-align: center;

font-size: 80%;

}



/*----------------------------------------------------------------------------

default-styles for html-elements

----------------------------------------------------------------------------*/



/*--- body -----------------------------------------------------------------*/



body#main_body {

margin: 0;

padding: 0;

text-align: center;

}



/*--- paragraph ------------------------------------------------------------*/



#content_container p {

margin: 5px 0 20px 0;

padding: 0;

font-size: 90%;

line-height: 1.2;

}



/*--- headings -------------------------------------------------------------*/



#content_container h1 {

font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;

font-style: normal;

font-size: 140%;

font-weight: bold;

}



#content_container h2 {

font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;

font-style: normal;

font-size: 130%;

font-weight: bold;

}



#content_container h3 {

font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;

font-style: normal;

font-size: 100%;

font-weight: bold;

}



/*--- links ----------------------------------------------------------------*/



#content_container a:hover {

text-decoration : none;

}



/*--- tables ---------------------------------------------------------------*/



table {



}



th {

}



tr {

}



td {



}



/*--- forms ----------------------------------------------------------------*/



fieldset {

padding: 15px;

border-style: solid;

border-width: 1px;

}



input {

border-style: solid;

border-width: 1px;

}



textarea {

border-style: solid;

border-width: 1px;

}



button {

}



label {

}



select {

}



option {

}



/*--- lists ----------------------------------------------------------------*/



ul {

}



li {

}



/*--------------------------------------------------------------------------*/


También traia un style.css si hace falta lo posteo, no lo pongo por no hacer inmenso el post,
muchas gracias de nuevo por la ayuda,
Un saludo
  #6 (permalink)  
Antiguo 01/12/2009, 05:06
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 8 meses
Puntos: 20
Respuesta: barras laterales

Porque no pones la dirección de la web, es mucho mas fácil. Nos falta el HTML, y nos falatria ver esa hoja de estilos externa, ya que puede influir.

Saludos¡¡
  #7 (permalink)  
Antiguo 01/12/2009, 05:25
 
Fecha de Ingreso: noviembre-2009
Mensajes: 26
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: barras laterales

Hola impostor, el html es el que te he pegado arriba, encima del css, es muy poco, porque eso no es de la web, es un subdominio con el mismo estilo mismo css y mismo html que la principal, es decir, son idénticas pero esta no tiene contenido por eso el html son solo 10 lineas, esta sin contenido es con la que intento modificarlo sin dañar la que esta con todo el contenido pero al ser la misma plantilla los datos css y html son identicos.

Aqui puedes ver el aspecto de la web sin el h// ni el ww

.zodiacoyamor.tarotalma.com/

Y aquí te dejo la hoja de estilo


div#logo a {
display: block;
width: 100%;
height: 100%;
}
#footer_text a {
font-family: Verdana,sans-serif;
font-style: normal;
font-size: 10px;
font-weight: normal;
color: #686868;
text-decoration: underline; white-space: nowrap;
}


#key_visual {
background: url(images/dynamic/key_visual1.jpg) no-repeat;
}
#extra_div1 {
font-family: Verdana,sans-serif;
font-style: normal;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #4D6C7F;
}
#main_nav_list a.main_nav_active_item {
background: url(images/dynamic/buttonset1/n1activeitem.gif) no-repeat;
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
background-position: top left;
}
#main_nav_list a.main_nav_item {
background: url(images/dynamic/buttonset1/n1.gif) no-repeat;
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
background-position: top left;
}
#main_nav_list a.main_nav_item:hover {
background: url(images/dynamic/buttonset1/n1hover.gif) no-repeat;
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
background-position: top left;
}
.sub_nav_list a.sub_nav_active_item {
background: url(images/dynamic/buttonset1/subnav1active.gif) no-repeat;
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #0F3B48;
}
.sub_nav_list a.sub_nav_item {
background: url(images/dynamic/buttonset1/subnav1.gif) no-repeat;
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
.sub_nav_list a.sub_nav_item:hover {
background: url(images/dynamic/buttonset1/subnav1hover.gif) no-repeat;
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #0F3B48;
}
#content_container h1 {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 26px;
font-weight: bold;
text-decoration: none;
color: #4D6C7F;
}
#content_container h2 {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 20px;
font-weight: bold;
text-decoration: none;
color: #4D6C7F;
}
#content_container h3 {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 15px;
font-weight: bold;
text-decoration: none;
color: #4D6C7F;
}
#content_container p, #content_container {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #686868;
}
#content_container a:link {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: underline;
color: #4D6C7F;
}
#content_container a:visited {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: underline;
color: #4D6C7F;
}
#content_container a:hover {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #4D6C7F;
}
#content_container a:active {
font-family: Verdana,Arial,Trebuchet MS,Tahoma,sans-serif;
font-style: normal;
font-size: 12px;
font-weight: underline;
text-decoration: none;
color: #4D6C7F;
}
#footer_text {
font-family: Verdana,sans-serif;
font-style: normal;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #686868;
}

Muchas gracias por la colaboración,
un saludo
  #8 (permalink)  
Antiguo 01/12/2009, 07:29
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 15 años, 9 meses
Puntos: 0
Busqueda Respuesta: barras laterales

Hola pacosorella disculpas por no haber respondido antes pero tuve problemas con la internet y estuve desconectado.
Bueno, yo supuse segun lo que me pusiste que queres utilizar todo el espacio sobrante a la izuierda y derecha del container y te doy una solución para ello. Lo que te sugiero para este caso es una tabla con ancho 100% y tres columnas dos laterales y una central. La central mantiene la estructura y sería el actual "container" y las laterales son nuevos <td> llamados "left_column" y "right_column" los que van a tomar el espacio sobrante que tu querías utilizar. Si a alguna de estas dos columnas le dieras un ancho fijo, la otra tomaría el ancho restante de modo de ocupar todo el espacio de la ventana del browser.
Te paso lo que modifiqué en cada archivo

El en el html
Código HTML:
<table id="wrap_container" cellspacing="0">
	<tr>
		<td id="left_column">left</td>
		<td id="container">
                        <div id="header"></div>
                        <div id="main_container"></div>
                        <div id="footer"></div>
                 </td>
                 <td id="left_column">right</td>
	</tr>
</table> 

En main.css
Código:
/*-- global container ------------------------------------------------------*/

#wrap_container {
	width: 100%;
}
#wrap_container td {
	vertical-align: top;
}

/*-- center container ------------------------------------------------------*/

#container {
text-align:left;
width:735px;
}

/*--- header ---------------------------------------------------------------*/

#header {
padding: 0;
margin: 0;
width: 735px;
height: 310px;
position: relative;
}
En colorscheme.css
Código:
/*-- left column ------------------------------------------------------*/

#left_column {
	background:yellow;
}

/*-- right column ------------------------------------------------------*/

#right_column {
	background:yellow;
}

Fijate si era esto lo que buscabas y me decis.
Te adjunté tambien el material por mail para que lo puedas ver armado.

Saludos,
Pablo.
  #9 (permalink)  
Antiguo 01/12/2009, 07:31
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: barras laterales

Ah, me olvidé decirte que las columnas izquierda y derecha estan con color amarillo solo para que las diferencies del container. Vos ponele el color que quieras.

Saludos,
Pablo.
  #10 (permalink)  
Antiguo 01/12/2009, 08:30
 
Fecha de Ingreso: noviembre-2009
Mensajes: 26
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: barras laterales

Pablo, mil millones de gracias,:aplau so:
A la primera, es justo lo que necesitaba, y lo que andaba buscando, tiene el tamaño perfecto y lo editado no se pierde, ni se mueve al menos con el contenido mínimo, no sabes lo agradecido que te quedo por haberlo montado, casi seguro no habría sabido por donde empezar.
Muchas gracias por tomarte tiempo y molestias de forma desinteresada.
Te envio mail también,
Un saludo.
  #11 (permalink)  
Antiguo 01/12/2009, 08:38
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 15 años, 9 meses
Puntos: 0
De acuerdo Respuesta: barras laterales

Me alegro Paco que te haya podido ayudar. Cualquier cosita estamos a las órdenes

Saludos,
Pablo.
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 19:33.