1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Как разместить текст сбоку от изображения

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем voronnn, 10 апр 2017.

  1. voronnn

    voronnn

    Регистрация:
    10 апр 2017
    Сообщения:
    2
    Симпатии:
    0
    как в этом примере сделать так чтоб при нажатии на превю картинки слева открывалась сама картинка(по центру) и текст к ней (с права)? https://cloud.mail.ru/public/3ahy/p8eJpsF3D[​IMG]
     
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    Зависит от верстки.
    Картинки - float:left; а тексту - float:right;
    Или и картинки и тексту - float:left;
     
  3. voronnn

    voronnn

    Регистрация:
    10 апр 2017
    Сообщения:
    2
    Симпатии:
    0
    мне нужно чтоб картинка и текст менялись при нажати на превю т.к. к каждой картинке присвоен свой текст описание

    вот код

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>test</title>

    <style type="text/css" media="screen">
    /* CSS Reset */
    * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    }

    body {
    font-family: Arial, "MS Trebuchet", sans-serif;
    background-color: #111;
    color:#888;
    }

    a{
    text-decoration:none;
    color:#8ac;
    }

    /* Setup Tabs */

    ul{
    background:#000;
    width:125px; /* Width of Tab Image */
    float: left;
    list-style: none;
    border-right:8px solid black;
    }



    ul li{
    height:75px; /* Height of Tab Image */
    }

    /* Setup Tab so normal opacity is 40 and rollover is 100 */
    ul li a img{
    /* for IE */
    -ms-filter:"progid:Biggrin:XImageTransform.Microsoft.Alpha(Opacity=40)";
    filter:alpha(opacity=40);

    /* CSS3 standard */
    opacity:0.4;

    }
    ul li a:hover img{

    /* for IE */
    -ms-filter:"progid:Biggrin:XImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);

    /* CSS3 standard */
    opacity:1.0;
    }


    #images{
    width:500px;
    height:300px;
    overflow:hidden;
    float:left;
    }
    #text {
    overflow: auto;
    float:right;
    width: 125px;
    height: 300px;
    margin-right: 2px;
    display: block;
    }
    .text {
    overflow:hidden;

    }


    #wrapper{
    width:777px;
    height:400px;
    border:8px solid black;
    margin:0px auto;
    }
    #credits{
    width:633px;
    margin: 0 auto;
    text-align: right;
    }
    p{
    margin-top:10px;
    font-size:9pt;
    }
    h1#header{
    width:633px;
    margin:15px auto 5px;
    font-size:14pt;
    }

    </style>
    </head>
    <body>

    <h1 id="header">CSS Image Viewer</h1>

    <div id="wrapper">
    <ul>
    <li><a href="#image1" id="tab1"><img src="tab1.jpg" alt="" title="" /></a></li>
    <li><a href="#image2" id="tab2"><img src="tab2.jpg" alt="" title="" /></a></li>
    <li><a href="#image3" id="tab3"><img src="tab3.jpg" alt="" title="" /></a></li>
    <li><a href="#image4" id="tab4"><img src="tab4.jpg" alt="" title="" /></a></li>
    </ul>
    <div id="images">
    <div><a name="image1"></a><img src="image1.jpg" alt="" title="" /></div>
    <div><a name="image2"></a><img src="image2.jpg" alt="" title="" /></div>
    <div><a name="image3"></a><img src="image3.jpg" alt="" title="" /></div>
    <div><a name="image4"></a><img src="image4.jpg" alt="" title="" /></div>
    </div>
    <div id="text">
    <div><a name="text1"></a>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
    <div><a name="text2"></a></div>
    <div><a name="text3"></a></div>
    <div><a name="text4"></a></div>
    </div>
    </div>
    <div id="credits">

    </div>

    </body>
    </html>
     
  4. Creamel

    Creamel

    Регистрация:
    11 май 2017
    Сообщения:
    5
    Симпатии:
    0
    чтобы это сделать, нужно отловить событие клика по превью, здесь без JS не обойтись