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: 15 años, 9 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:VerdanaArialHelveticasans-serif;
    
font-size:12px;
    
font-weight:bold;
    
margin0;
    
padding0;
}

#container {
    
margin:0 auto 0 auto;
    
text-alignleft;
}

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

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

#datos ul li {
    
list-style-typenone;
    
backgroundtransparent url(../images/flecha-derecha-gris.gifno-repeat 00%;
    
margin-top:5px;
    
margin-bottom:5px;
    
margin-left:10px;
    
font-size:11px;
    
font-weight:normal;
    
padding-right:72px;
}

#datos ul {
    
margin0;
    
padding0;
}
 
#datos li {
    
floatleft;
}

#datos a {
    
color:#000;
    
text-decorationnone;
    
displayblock;
    
padding0px 14px;
    
text-aligncenter;
    
color:#3B3A36;
    
font-weight:bold;
}

#datos a:hover {
    
text-decorationunderline;
}

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

#sub ul li {
    
list-style-typenone;
    
backgroundtransparent url(../images/flecha-derecha-gris.gifno-repeat 00%;
    
margin-top:5px;
    
margin-bottom:5px;
    
margin-left:10px;
    
font-size:11px;
    
font-weight:normal;
    
padding-right:3px;
}

#sub ul {
    
margin0;
    
padding0;
}
 
#sub li {
    
floatleft;
}

#sub a {
    
color:#000;
    
text-decorationnone;
    
displayblock;
    
padding0px 15px;
    
text-aligncenter;
    
color:#3B3A36;
    
font-weight:bold;
}

#sub a:hover {
    
text-decorationunderline;
}

.
buttonover {
    
width:150px;
    
height:12px;
    
font-family"Verdana";
    
font-size10px
    
color#000000; 
    
background-color#E6E6E6;
    
border-top1px solid #B8B7B7;
    
border-left1px solid #B8B7B7;
    
border-bottom1px solid #B8B7B7;
    
border-right1px solid #B8B7B7;
    
cursor:pointer;
    
vertical-align:middle;
    
margin-top:3px
}

.
enviar {  
    
font-family"Verdana";
    
font-size10px
    
color#000000; 
    
background-color#E6E6E6;
    
border-top1px solid #B8B7B7;
    
border-left1px solid #B8B7B7;
    
border-bottom1px solid #B8B7B7;
    
border-right1px 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: 14 años
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: 15 años, 9 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




La zona horaria es GMT -6. Ahora son las 13:25.