Премини към съдържанието
  • Добре дошли!

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

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

     

Препоръчан отговор


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

Сайта е правен на 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


Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Не виждам никъде да казваш на
.container {
display:flex;
}
 

Сподели този отговор


Линк към този отговор
Сподели в други сайтове

Добавете отговор

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

Гост
Напишете отговор в тази тема...

×   Вмъкнахте текст, който съдържа форматиране.   Премахни форматирането на текста

  Разрешени са само 75 емотикони.

×   Съдържанието от линка беше вградено автоматично.   Премахни съдържанието и покажи само линк

×   Съдържанието, което сте написали преди беше възстановено..   Изтрий всичко

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Добави ново...