Foros del Web » Creando para Internet » CSS »

Ayuda con maquetacion

 Estas en el tema de Ayuda con maquetacion en el foro de CSS en Foros del Web. Hola, estoy intentando de maquetar pero como soy nuevo en esto, no puedo que el sitio se visualize igual en los navegadores IE 6 y ...
  #1 (permalink)  
Antiguo 13/02/2007, 16:46
 
Fecha de Ingreso: febrero-2002
Mensajes: 503
Antigüedad: 22 años, 2 meses
Puntos: 0
Ayuda con maquetacion
Hola, estoy intentando de maquetar pero como soy nuevo en esto, no puedo que el sitio se visualize igual en los navegadores IE 6 y Firefox 2

Este es el codigo html

Código PHP:
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    margin: 0;
    padding: 0;
}

#container {
    margin:0 auto 0 auto;
    text-align: left;
}

#logo {
    width:192px;
    height:33px;
    padding-top:8px;
    margin-left:15px;
    padding-bottom:5px;
}

#datos {
    font-family: "Verdana"; font-size:11px; font-weight:bold;
    vertical-align:middle;
    text-align:left;
    position: absolute;
}

#datos ul li {
    list-style-type: none;
    background: transparent url(../images/flecha-derecha-gris.gif) no-repeat 0% 0%;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:10px;
    font-size:11px;
    font-weight:normal;
    padding-right:72px;
}

#datos ul {
    margin: 0;
    padding: 0;
}
 
#datos li {
    float: left;
}

#datos a {
    color:#000;
    text-decoration: none;
    display: block;
    padding: 0px 14px;
    text-align: center;
    color:#3B3A36;
    font-weight:bold;
}

#datos a:hover {
    text-decoration: underline;
}

#sub {
    font-family: "Verdana"; font-size:11px; font-weight:bold;
    vertical-align:middle;
    text-align:left;
    position: absolute;
}

#sub ul li {
    list-style-type: none;
    background: transparent url(../images/flecha-derecha-gris.gif) no-repeat 0% 0%;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:10px;
    font-size:11px;
    font-weight:normal;
    padding-right:3px;
}

#sub ul {
    margin: 0;
    padding: 0;
}
 
#sub li {
    float: left;
}

#sub a {
    color:#000;
    text-decoration: none;
    display: block;
    padding: 0px 15px;
    text-align: center;
    color:#3B3A36;
    font-weight:bold;
}

#sub a:hover {
    text-decoration: underline;
}

.buttonover {
    width:150px;
    height:12px;
    font-family: "Verdana";
    font-size: 10px; 
    color: #000000; 
    background-color: #E6E6E6;
    border-top: 1px solid #B8B7B7;
    border-left: 1px solid #B8B7B7;
    border-bottom: 1px solid #B8B7B7;
    border-right: 1px solid #B8B7B7;
    cursor:pointer;
    vertical-align:middle;
    margin-top:3px
}

.enviar {  
    font-family: "Verdana";
    font-size: 10px; 
    color: #000000; 
    background-color: #E6E6E6;
    border-top: 1px solid #B8B7B7;
    border-left: 1px solid #B8B7B7;
    border-bottom: 1px solid #B8B7B7;
    border-right: 1px solid #B8B7B7;
    cursor:pointer;
    vertical-align:middle;
    margin-top:3px;
}

#buscar {
    float:left;
    margin-top:-60px;
    margin-left:315px;;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="logo">
</div>
<div id="datos">
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</div>
<br />
<div id="sub">
    <ul>
        <li><a href="#">Enviar Trabajos</a></li>
        <li><a href="#">Ayuda</a></li>
    </ul>
</div>
<br />
<div id="buscar"><form action="/nav/index_fil.php" method="post" target="frfil">
<input name="srch" type="text" class="buttonover"></td>
<input name="Submit" type="submit" class="enviar" value="Buscar" />
</form>
</div>
</div>
</body>
</html> 
Espero una ayudita pronta !
__________________
WwW.oasisforo.CoM.ar
  #2 (permalink)  
Antiguo 15/02/2007, 10:47
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 20 años, 4 meses
Puntos: 7
De acuerdo Re: Ayuda con maquetacion
Prueba con esto.
Código HTML:
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body {
    background-color: #00FF00;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

#container {
    background-color: #808080;
    /*width: 776px; para centrar y que no cresca si cambia de tamaño la ventana del explorador */
    width: 100%;
    margin: auto;
    text-align: left;
}

#logo {
    float: left;
    background-color: #00FFFF;
    height: 33px; /*margin-left: 15px;*/
    padding-bottom: 5px;
    padding-top: 8px;
    width: 192px;
}

#datos ul {
    margin: 0;
    padding: 0;
}

#datos {
    background-color: #008000;
    width: 192px;
    font-family: "Verdana";
    font-size: 11px;
    font-weight: bold; /*position: absolute;*/
    text-align: left; /*vertical-align: middle;*/
}

#datos ul li {
    background: transparent url(../images/flecha-derecha-gris.gif) no-repeat 0% 0%;
    font-size: 11px;
    font-weight: normal;
    list-style-type: none; /*margin-bottom: 5px;
margin-left: 10px;
margin-top: 5px;
padding-right: 72px;*/
}

#datos a {
    display: block;
    font-weight: bold;
    padding: 5px 0 2px 0; /*text-align: center;*/
    text-indent: 10px;
    text-decoration: none;
    height: 20px;
    color: #000000;
    color: #3B3A36;
}

#datos a:hover {
    text-decoration: underline;
}

#sub ul {
    margin: 0;
    padding: 0;
}

/* si necesitas que este a la derecha colocalo dentro de der */
#sub {
    background-color: #0000FF;
    width: 192px;
    font-family: "Verdana";
    font-size: 11px;
    font-weight: bold; /*position: absolute;*/
    text-align: left; /*vertical-align: bottom;*/
}

#sub ul li {
    background: transparent url(../images/flecha-derecha-gris.gif) no-repeat 0% 0%;
    font-size: 11px;
    font-weight: normal;
    list-style-type: none; /*margin-bottom: 5px;
margin-left: 10px;
margin-top: 5px;
padding-right: 3px;*/
}

#sub a {
    display: block;
    font-weight: bold;
    padding: 5px 0 2px 0; /*text-align: center;*/
    text-indent: 10px;
    text-decoration: none;
    height: 20px;
    color: #000000;
    color: #3B3A36;
}

#sub a:hover {
    text-decoration: underline;
}

.buttonover {
    background-color: #E6E6E6;
    border-bottom: 1px solid #B8B7B7;
    border-left: 1px solid #B8B7B7;
    border-right: 1px solid #B8B7B7;
    border-top: 1px solid #B8B7B7;
    color: #000000;
    cursor: pointer;
    font-family: "Verdana";
    font-size: 10px;
    height: 12px;
    margin-top: 3px;
    vertical-align: middle;
    width: 150px;
}

.enviar {
    background-color: #E6E6E6;
    border-bottom: 1px solid #B8B7B7;
    border-left: 1px solid #B8B7B7;
    border-right: 1px solid #B8B7B7;
    border-top: 1px solid #B8B7B7;
    color: #000000;
    cursor: pointer;
    font-family: "Verdana";
    font-size: 10px;
    margin-top: 3px;
    vertical-align: middle;
}

#buscar {
    float: right;
    padding: 5px 50px 0 0;
}

#izq{
    float: left;
    background-color: #FFFFFF;
    width: 192px;
    height: 180px;
}

/*
#der{
    float: right;
    background-color: #FFFFFF;
    width: 192px;
    height: 180px;
}
*/

#cont{
    /*width: 584px; solo si usa #container centrado*/ /* 392px; solo si usa #der */
    width: 100%;
    height: 200px; /* <-- crece solo sin colocar el height */
    margin: 0 0px 0 192px; /* 0 192px 0 192px solo si usa #der */
    background-color: #FFFF00;
}

#superior{
    /*width: 776px; para centrar y que no cresca si cambia de tamaño la ventana del explorador*/
    width: 100%;
    margin: auto;
    height: 46px;
    background-color: #FF00FF;
}

#inferior{
    background-color: #FF0000;
    height: 20px;
    width: 100%;
}
</style>
</head>

<body>
<div id="superior">
    <div id="logo">
    </div>
    <div id="buscar"><form action="/nav/index_fil.php" method="post" target="frfil">
    <input name="srch" type="text" class="buttonover"></td>
    <input name="Submit" type="submit" class="enviar" value="Buscar" />
    </form>
    </div>
</div>
<div id="container">
    <div id="izq">
        <div id="datos">
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </div>
        <div id="sub">
            <ul>
                <li><a href="#">Enviar Trabajos</a></li>
                <li><a href="#">Ayuda</a></li>
            </ul>
        </div>
    </div>
    <!--<div id="der">solo si usa #der</div>-->
    <div id="cont">Contenidos</div>
    <!--[if lte IE 7]> <style type="text/css">
#cont{
    margin-top: -180px; /* hack solo para IExplorer menores o igual a 7 centrado con div izq y der*/
}</style>
 <![endif]-->
    <div id="inferior"></div>
</div>
</body>
</html>
Puedes buscar también tutoriales de maquetacion o layouts en css.
revisa este link. http://www.dynamicdrive.com/style/layouts/
Espero que te sea útil.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #3 (permalink)  
Antiguo 15/02/2007, 13:22
 
Fecha de Ingreso: febrero-2002
Mensajes: 503
Antigüedad: 22 años, 2 meses
Puntos: 0
Re: Ayuda con maquetacion
muchas gracias, esta pagina me va a servir muchisimo!
__________________
WwW.oasisforo.CoM.ar
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:18.