Foros del Web » Creando para Internet » CSS »

Consulta para template

Estas en el tema de Consulta para template en el foro de CSS en Foros del Web. Hola, quería consultarles que posiblemente sea sencillo pero la verdad es que escapa de mis conocimientos xD...quiero crear un template con la siguiente estructura: Como ...
  #1 (permalink)  
Antiguo 22/07/2008, 00:32
 
Fecha de Ingreso: julio-2008
Mensajes: 1
Antigüedad: 9 años, 4 meses
Puntos: 0
Consulta para template

Hola, quería consultarles que posiblemente sea sencillo pero la verdad es que escapa de mis conocimientos xD...quiero crear un template con la siguiente estructura:



Como verán el problema reside en los dos cuadros o divisiones de abajo, quiero lograr que uno este a la derecha y otro a la izquierda siendo ambos independientes de tal manera que el de la derecha tenga un scroll bar y no "afecte" a su par.
Cualquier ayuda es bienvenida, muchas gracias.
  #2 (permalink)  
Antiguo 22/07/2008, 01:58
Avatar de jacin  
Fecha de Ingreso: enero-2007
Ubicación: Alicante
Mensajes: 62
Antigüedad: 10 años, 10 meses
Puntos: 2
Respuesta: Consulta para template

www.librosweb.es
  #3 (permalink)  
Antiguo 22/07/2008, 09:04
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Respuesta: Consulta para template

Hola neomessiah, cómo vas?

Siendo un poco mas puntual, lee sobre el atributo float Es el que te permite flotar(de ahí su nombre), en tu caso.. un div a la izquierda o la derecha.

No se te olvide que los dos div's deben tener un ancho específico, ya sean px, %, em.. Tú verás la unidad de medida, pero que no se te olvide colocarlos

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #4 (permalink)  
Antiguo 22/07/2008, 09:30
Avatar de poison_mayer  
Fecha de Ingreso: julio-2008
Mensajes: 69
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: Consulta para template

revisando en Internet te encontre esto muy fácil solo hube de modificar la altura de #content y overflow: auto y ya tienes scroll

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>CSS TEMPLATE 02a</title>

<style type="text/css" media="screen"><!--
/* <![CDATA[ */

/*

<rdf:RDF xmlns="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="http://creativecommons.org/licenses/by/1.0/" />
</Work>

<License rdf:about="http://creativecommons.org/licenses/by/1.0/">
<permits rdf:resource="http://web.resource.org/cc/Reproduction" />
<permits rdf:resource="http://web.resource.org/cc/Distribution" />
<requires rdf:resource="http://web.resource.org/cc/Notice" />
<requires rdf:resource="http://web.resource.org/cc/Attribution" />
<permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
</License>

</rdf:RDF>

*/

/* body und schrift deffinitionen */
html {
padding:0px;
margin:0px;
}

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}

h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
padding:5px 15px;
margin:0px

}


h2 {
font-size:14px;
padding-top:10px;
color: #564b47;
background-color:transparent;
}

p,h2, pre {
padding:10px;
}

a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}

pre {
color: #564b47;
font-size: 11px;
background-color:transparent;
font-family: Courier, Monaco, Monospace;
}

/* positioning-layers dynamisch */
#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}
#content {
float: left;
width: 75%;
margin:0px 0px 50px 0px;
background-color: #fff;
overflow: auto;
height:100px;
}

/* ]]> */
--></style></head><body>
<p align="right">
<a href="http://www.intensivstation.ch/"><img src="temp02a_files/css_logo.gif" alt="" border="0" height="56" width="414"></a></p>
<h1>service for a better code</h1>

<div id="menu"><h2>right column</h2>
<pre>#menu {
float: left;
width: 25%;
background-color: #ff99CC;
overflow: auto;
}

</pre>
<p>
<img src="temp02a_files/xhtml10.gif" alt="" border="0" height="15" width="80"><br>
<img src="temp02a_files/css.gif" alt="css" border="0" height="15" width="80"><br>
<a href="http://www.monorom.to/"><img src="temp02a_files/monorom.gif" alt="monorom" border="0" height="15" width="80"></a><br>
<!-- Creative Commons License -->
<a rel="license" href="http://creativecommons.org/licenses/by/1.0/"><img src="temp02a_files/cc.gif" alt="Creative Commons License" border="0" height="15" width="80"></a><br>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/1.0/">Creative Commons License</a>.
<!-- /Creative Commons License -->
</p>
</div>

<div id="content">
<h2>content column</h2>
<p>All templates are XHTML 1.0 and CSS2/ tableless.</p>
<p><b>2 columns / menu and content dynamic</b><br>
2 column layout grid. The navigation column and content column are dynamic and adjust themselves to the browser window.<br>
This layout also works with an absolute height <a href="http://www.intensivstation.ch/files/en_templates/temp02a_100height.html">TEMPLATE 100% height</a><br>
<a href="http://www.intensivstation.ch/en/templates/">«= more TEMPLATES</a><br>
</p>
<pre>html {
padding:0px;
margin:0px;
}

body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0px 20px;
margin:0px;
}

#content {
float: left;
width: 75%;
background-color: #fff;
margin:0px 0px 50px 0px;
overflow: auto;
}
</pre>


</div>


</body></html>
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 15:02.