Entrar

Imagenes izquierda y texto derecha

tazmania · · Solicitar retirada
muy buenas, pues la duda que tengo es como hacer para que las imagenes aparezcan a la izquierda y los textos al lado no debajo.
aqui coloco como esta la esta la hoja de estilo:

* {margin:0px ; padding:0px ; border: 0px}
body {background-color: gray ; text-align: center}
img {border-style: none}
p {text-align: justify}
#global {width:800px ; margin: 4px auto }
#cabecera {background-image: url(objetos/carbono-azul.gif); height: 100px ;
border: orange 1px solid }
#logotipo {padding: 25px }
#navegar {background-color: LightSkyBlue ; background-image: url(objetos/valla.gif) ;
height: 120px ; border: orange 1px solid ; margin: 5px 0px}
#navegar ul {margin: auto 150px }
#navegar li {float:left ; list-style:none ; padding: 10px 20px}
#contenido {background-color: SteelBlue ; width: 800px }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px }
#menu1 {background-color: red ; width: 200px ; float: right ; border: orange 1px solid ;
margin: 5px 5px 0px 5px }
#menu1 li {list-style:none }
#pie {background-color: purple ; margin: 5px 0px }
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}

y esta seria la html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="plantilla.css" type="text/css" media="all">
<style type="text/css">
a img {border:0}
a span {display: none}
a:hover span {display: inline}
a:hover>img {display: none}
</style>
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
</div>
<div id="navegar">
<ul>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>

    </div>
    <div id="contenido">
    <div id="menu1">
    <ul>
  • enlace 1
  • enlace 2
  • enlace 3
  • enlace 4

    </div>


    [contenido no disponible]</p>


    [contenido no disponible]</p>


    [contenido no disponible]</p>


    jhlkjh kjlkj kjeri ijfg rihnrñikerjr irtjhkr rtiuouireh ujrhuiherue erujhiuriure eruhiuherhej eujrhgn ujhru ujr
    lijhoihtyh hjg ijhjg jkjrtkjrtkj jykjhy</p>

    </div>
    <div id="pie">Pie</div>
    </div>
    </body>
    </html>

    y nada decir que las imagenes salen a la izquierda, ya que estan entre las etiquetas de parrafo pero las letras que puse de muestra al estar entre las etiquetas tambien salen abajo a la izquierda y no se como ponerlas al lado de la imagen.
    un saludo y gracias
    • Yaneth · · Solicitar retirada
    hola

    para esto nada mejor que crear dos divs
    y los pones uno al lado de otro con float: left

    luego en uno metes la imagen, y en el otro el texto

    me explico???????

    si no te queda claro nos avisas

    saludos
    tazmania · · Solicitar retirada
    Bueno pues he hecho al final dos capas una para imagenes y otra para el texto, la cuestion es que la de texto varia mucho segun el buscador y descuadra todo, como puedo hacer para que la "fuente" es decir el texto,
    salga mas o menos del mismo tamaño que con html-kit, ya que las variaciones entre el programa y los buscadores es muy grande.
    estoy mirando en las preferencias del programa, pero no se que variar para cambiar el tamaño.
    un saludo y gracias
    Raulyure · · Solicitar retirada
    tazmania escribió:muy buenas, pues la duda que tengo es como hacer para que las imagenes aparezcan a la izquierda y los textos al lado no debajo.
    aqui coloco como esta la esta la hoja de estilo:

    * {margin:0px ; padding:0px ; border: 0px}
    body {background-color: gray ; text-align: center}
    img {border-style: none}
    p {text-align: justify}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-image: url(objetos/carbono-azul.gif); height: 100px ;
    border: orange 1px solid }
    #logotipo {padding: 25px }
    #navegar {background-color: LightSkyBlue ; background-image: url(objetos/valla.gif) ;
    height: 120px ; border: orange 1px solid ; margin: 5px 0px}
    #navegar ul {margin: auto 150px }
    #navegar li {float:left ; list-style:none ; padding: 10px 20px}
    #contenido {background-color: SteelBlue ; width: 800px }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px }
    #menu1 {background-color: red ; width: 200px ; float: right ; border: orange 1px solid ;
    margin: 5px 5px 0px 5px }
    #menu1 li {list-style:none }
    #pie {background-color: purple ; margin: 5px 0px }
    a {}
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}

    y esta seria la html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="plantilla.css" type="text/css" media="all">
    <style type="text/css">
    a img {border:0}
    a span {display: none}
    a:hover span {display: inline}
    a:hover>img {display: none}
    </style>
    </head>
    <body>
    <div id="global">
    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    </div>
    <div id="navegar">
    <ul>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>

    </div>
    <div id="contenido">
    <div id="menu1">
    <ul>
  • enlace 1
  • enlace 2
  • enlace 3
  • enlace 4

    </div>


    [contenido no disponible]</p>


    [contenido no disponible]</p>


    [contenido no disponible]</p>


    jhlkjh kjlkj kjeri ijfg rihnrñikerjr irtjhkr rtiuouireh ujrhuiherue erujhiuriure eruhiuherhej eujrhgn ujhru ujr
    lijhoihtyh hjg ijhjg jkjrtkjrtkj jykjhy</p>

    </div>
    <div id="pie">Pie</div>
    </div>
    </body>
    </html>

    y nada decir que las imagenes salen a la izquierda, ya que estan entre las etiquetas de parrafo pero las letras que puse de muestra al estar entre las etiquetas tambien salen abajo a la izquierda y no se como ponerlas al lado de la imagen.
    un saludo y gracias

    • Hola:

    Yo pensaba decirle que a las imagenes les pusiera al final un align="left" Así la imagen se quedaba a la izquierda y el texto a la derecha, y en el siguiente párrafo lo mismo

    Por ejemplo



    [contenido no disponible] Este es el texto a poner</p>




    [contenido no disponible]Este es el texto a poner</p>




    [contenido no disponible]Este es el texto a poner</p>

    Bueno, solo era una alternativa nada más

    Saludos
    Agradecido de los que aprenden enseñando
    tazmania · · Solicitar retirada
    gracias por el comentario, tambien probare haber como queda y asi comparo diferentes formas de hacerlo.
    Y referente al tamaño de las letras en html-kit en el previo, alguien me puede decir como cambiarles el tamaño y si se puede.
    un saludo