Etiqueta DIV y CSS

salvadoresc · 28 Jul 2007

como estan aca vengo con una duda resulta que me encuentro rediseñando el sitio de la empresa para la que trabajo pero estoy teniendo problemas a la hora de hacerlo... la pagina ya la tenia hecha pero la hice maquetandola desde photoshop y exportandola a tablas.... lo cual no es muy eficiente aunque si fue muy rapido ahora me propuse a hacer practicamente el mismo diseño pero me encapriche que lo quiero hacer con divs y css...todo va bien pero tengo problemas en una seccion a ver si logro ser claro...

*tengo una div llamada main

*dentro de esta diferentes divs adicionales por ejemplo uno llamado topheader que va arriba del header, este tiene otros divs adentro para dividirse izquierda derecha (aqui todo bien excepto que en el internet explorer la altura de esta se hace mayor que en el firefox)

*luego tengo header la cual se encuentra dentro de main despues de topheader, aca va el logo y dentro tengo una div llamada nav... (esta div nav quiero que quede en la parte inferior de #header, pero no lo logro, lo habia hecho poniendole toppadding pero en el explorer me dio problemas y tampoco me gusto, quiero que se alinee verticalmente en la parte de abajo de #header... y la propiedad vertical-aligment="bottom" no hace nada =P )

*luego le sigue #banner este tiene un div dentro para colocar la imagen de fondo llamado #bannerimg alineado a la izquierda

y aqui viene mi mayor problema:
*posteriormente tengo unas div llamada #content

*content posee dos dentro de ella #leftcolumn y #rightcolumn ok en rightcolumn ira el contenido de la pagina y se extiende bien al agregarle el texto

pero en leftcolumn he puesto dos divs llamadas #leftColumnTop & #leftColumnBottom una arriba y la otra abajo la #leftColumnTop la dejo disponible para alguas imagenes pequeñas y a veces vinculo o solo texto, pero no siempre lleva algo y #leftColumnBottom lleva una imagen de una chica con una laptop.... esta imagen quiero que se mantenga en la parte de abajo de la pagina SIEMPRE y tiene una altura definida, mientras que #leftColumnTop quiero que se expanda a medida #rightcolumn lo haga

aca dejo el codigo que estoy utilizando

<div class='codetop'>CÓDIGO</div><div class='codemain'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles/etmain.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
  <div id="topheader">
    <div id="fecha">
      <script language="" languaje="JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<div class='fecha'> San Salvador. "+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</div>")

            
        
  </script>
    </div>
    <div id="linksTopRight"><a href="java script:;">HOME</a>-<a href="java script:;">CONTACT</a></div>
  </div>
  <div id="header">
    <div id="nav"> Content for  id "header" Goes Here</div>
  </div>
  <div id="banner">
    <div id="bannerimg"></div>
  </div>
  <div id="content">
    <div id="leftcolumn">
      <div id="leftColumnTop"> </div>
      <div id="leftColumnBottom"> </div>
    </div>
    <div id="rightcolumn">  </div>
  </div>
  <div id="footer"><span class="copy">Copyright © 2006 ExecuTrain El Salvador - All Rights Reserved </span></div>
  <div id="barragris"></div>
</div></body>
</html></div>

y este es el css

<div class='codetop'>CÓDIGO</div><div class='codemain'>body {
    text-align: left;
    background-color: #93B9C3;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    margin: 55px 0px 0px;
    background-image: url(../images/body_bg.gif);
    background-repeat: repeat-x;
}
#main {
    width: 80%;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 3em;
    margin-left: auto;
}

#topheader {
    height: 19px;
    background-color: #666666;
    vertical-align: middle;
}
#fecha {
    width: 50%;
    float: left;
    vertical-align: middle;
    text-align: left;
    height: 100%;
}
#linksTopRight {
    width: 50%;
    float: right;
    vertical-align: baseline;
    text-align: right;
    height: 100%;
}
#header {
    height: 100px;
    background-color: #FFFFFF;
    background-image: url(../images/etlogo.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
}
#nav {
    width: 70%;
    text-align: left;
    vertical-align: bottom;
}
#banner {
    background-color: #999999;
    height: 12em;
    background-image: url(../images/bggris.gif);
    background-repeat: repeat-x;
}
#bannerimg {
    background-image: url(../images/banner.jpg);
    height: 100%;
    width: 490px;
}

#content {
    background-color: #999999;
    height: 300px;
    width: 100%;
}

#leftcolumn {
    width: 20%;
    background-color: #999999;
    float: left;
    height: 100%;
    margin: 0px;
    background-image: url(../images/bglaptop.jpg);
    background-repeat: repeat-x;
    background-position: bottom;
}
#leftColumnTop {
    clear: both;
    height: 100%;
    width: 100%;
    background-image: url(../images/bggris.gif);
    background-repeat: repeat-x;
}
#leftColumnBottom {
    height: 132px;
    width: 100%;
    clear: both;
    text-align: left;
    vertical-align: bottom;
    background-image: url(../images/laptop.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#rightcolumn {
    text-align: left;
    float: right;
    background-color: #FFFFFF;
    width: 80%;
    height: inherit;
    margin: 0;
    background-image: url(../images/bgblanco.gif);
    background-repeat: repeat-x;
}
#footer {
    background-color: #666666;
    height: 30px;
    clear: both;
    width: 100%;
}
#barragris {
    background-color: #CCCCCC;
    height: 30px;
    clear: both;
}

.fecha {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.6em;
    color: #FFFFFF;
}
</div>

para que se hagan una mejor idea de lo que trato de hacer aca les dejo el link de la pagina actual... esta hecha con tablas... pero ahi me funciono todo solo que es un resto de codigo XD
<a href="http://www.executrain.com.sv/" target="_blank">asi quiero que me quede</a>

gracias me quedo esperando una respuesta

Anunciante

opinguino · 28 Jul 2007

has probado a darle un "display a las capas¿? deberia funcionar

salvadoresc · 8 Ago 2007 a las 00:35

fijate opinguino que no las estoy trabajando como capas...
y cuando lo mencionaste probe cambiar los parametros de display pero no consegui nada con ninguna de estas... no se si no he logrado ser claro con lo que necesito ??? =(

DragonX · 8 Ago 2007 a las 15:40

<div class='quotetop'>CITA</div><div class='quotemain'>
pero en leftcolumn he puesto dos divs llamadas #leftColumnTop & #leftColumnBottom una arriba y la otra abajo la #leftColumnTop la dejo disponible para alguas imagenes pequeñas y a veces vinculo o solo texto, pero no siempre lleva algo y #leftColumnBottom lleva una imagen de una chica con una laptop.... esta imagen quiero que se mantenga en la parte de abajo de la pagina SIEMPRE y tiene una altura definida, mientras que #leftColumnTop quiero que se expanda a medida #rightcolumn lo haga
</div>

probá con esto en tu CSS

<div class='quotetop'>CITA</div><div class='quotemain'>
#leftColumnBottom {
height: 132px;
width: 20px;
clear: both;
text-align: left;
position: absolute;
bottom:5px;
background-color: Aqua;
background-image: url(../images/laptop.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
</div>

fijate si te sirve. :adios:

salvadoresc · 9 Ago 2007 a las 00:25

fijate que probe, pero al ponerle
position: absolute;
me la deja flotando sobre todos los demas objetos y no era eso lo que quiero, ademas que me he encontrado que cuando agrego contenido en #rightcolumn, la div que esta alrededor de esta no se expande y este se sale dejando la div #content mas arriba... que problemon =P

crei que iba a ser mas facil con divs pero ya me empece a frustrar, el codigo si se ha reducido a mas de la mitad y la apariencia me gusta como va solo esto es lo que no logro controlar...

Accede o regístrate

Etiqueta DIV y CSS

salvadoresc Nuevo usuario

Anunciante

opinguino Espécimen en peligro de extinción

salvadoresc Nuevo usuario

DragonX Guest

salvadoresc Nuevo usuario

Accede o regístrate

Etiqueta DIV y CSS

salvadoresc Nuevo usuario

Anunciante

opinguino Espécimen en peligro de extinción

salvadoresc Nuevo usuario

DragonX Guest

salvadoresc Nuevo usuario

Búsquedas útiles