Премини към съдържанието
Форумът в приложение

По-лесно сърфиране. Научи повече.
Kaldata.com - Форуми

Приложение на форума на цял екран с push известия, значки и други.

За да инсталирате това приложение на iOS и iPadOS
  1. Докоснете Иконата за споделяне в Safari
  2. Превъртете менюто и докоснете Добавяне към началния екран.
  3. Докоснете Добавяне в горния десен ъгъл.
За да инсталирате това приложение на Android
  1. Докоснете менюто с 3 точки (⋮) в горния десен ъгъл на браузъра.
  2. Докоснете Добавяне към началния екран или Инсталиране на приложение.
  3. Потвърдете, като докоснете Инсталиране.
Добави Kaldata.com в предпочитани източници в Google

Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

 

CSS проблем

izvladov
в Програмиране

Featured Replies

Здравейте. Имам малък проблем с един сайт и се надявам някой от Вас да може да ми помогне понеже не разбирам много.

Сайта е правен на HTML и CSS, няма нещо като PHP или JavaScript. Това което искам да направя и не мога е следното:

Трябва да направя нещо като div, в който от лявата страна да има текст, който е подравнен от дясно на ляво и от дясната страна на div-a да има картинка.

Прилагам снимка да уточня какво точно имам предвид с малко подробности.

1 трябва да е Header 1

2 трябва да е Header 2

3 Трябва да е текст

4 Трябва да е иконка до текста

5 Отново иконка до текста

6 Трябва да е картинката

Цялото това нещо трябва да изглежда както на картинката и да е центрирано на страницата. Пробвах всичко, но не се получава, моля за съдействие, благодаря предварително.

Untitled.png

  • Цитирай

    Кво си пробвал , че не става ? Правиш 1 див който е парент на всички елементи в него и му даваш display: flex. Оттам добавяш 2 дива които ти държат текстовете и картинките. И долу горе това е.

  • Цитирай
    • Автор

    Да разбирам, че трябва да представлява нещо от сорта на :

    HTML: 

    <div class="container"

    <div class="img1">source</div>

    <div class="img2">source</div>
    <div class="img3">source</div>

    <div class="text">The text</div>

    </div>

     

    CSS:

    .container {

    display:flex;

    }

    .text {

    text-align:right;

    float:left;

    }

    .img1 {

    float:right;

    }

    .img2 {

    float:right;

    }

    .img3 {

    float:right;

    }

  • Цитирай

    Флоатовете са за предпочитане за избягване. Виж как изглежда с тоя код и кажи къде куцат нещата и ще се наглася. Трудно е така , без да се вижда резултата след кода.

  • Цитирай
    • Автор

    Успях да направя всичко с едно последно дребно нещо, което не успях.

    В момента текста излиза отстрани на картинката заедно с другите малки иконки, но отива най-отгоре на картинката а не по средата. Получава се само ако сложа на картинката margin-top: -65px; но по този начин не е точно в средата, а приблизително.

    Прилагам и кодовете, които съм писал:

    HTML:

    <!DOCTYPE html>
    <html>
    <head>

    <link rel="stylesheet" href="style.css">

    </head>
    <body>


    <center><div class="container">
    <img class="img" src="images/image.png"><p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. <img class="img2" src="images/2.png"> Fusce luctus vestibulum augue ut aliquet.Mauris ante ligula,facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus <img class="img3" src="images/2.png">interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
    </div></center>

    </body>
    </html>

     

    CSS:

     

    body {
    background-color:white;
    color:gray;
    }

    .text {
    font-size:20px;
    text-align:right;
    font-family:"Franklin Gothic Medium";
    }


    .img2 {
    float:right;
    margin-top:3px;
    }

    .img3 {
    float:right;
    margin-top:3px;
    }

    .img {
      float: right;
      margin-left: 25px;
    }

    .container {
    width:800px;
    height:500px;
    margin-top:270px;
    }

    1.png

  • Цитирай
    • 1 месец по-късно...

    Архивирана тема

    Темата е твърде стара и е архивирана. Не можете да добавяте нови отговори в нея, но винаги можете да публикувате нова тема, в която да продължи дискусията. Регистрирайте се или влезте във вашия профил за да публикувате нова тема.

    Назад

    Разглеждащи това в момента 0

    • Няма регистрирани потребители разглеждащи тази страница.

    Дарение

    • Подкрепи съществуването на форума - направи дарение
      25%
      Дарени 252.69 EUR от нужните 1,000.00 EUR

    Бюлетин

    Получавайте известие, когато има важна промяна или новина свързана с форума.
    Абонирайте се

    Профил

    Навигация

    Търсене

    Търсене

    Конфигуриране на push известия в браузъра
    Chrome (Android)
    1. Докоснете иконата на катинар до адресната лента.
    2. Докоснете Разрешения → Известия.
    3. Променете предпочитанията си.
    Chrome (Desktop)
    1. Кликнете върху иконата на катинар в адресната лента.
    2. Изберете Настройки на сайта.
    3. Намерете Известия и коригирайте предпочитанията си.