Как мне управлять позиционированием изображения в div / в CSS? - PullRequest
Новая
       39

Как мне управлять позиционированием изображения в div / в CSS?

0 голосов
/ 19 октября 2018

Я сейчас пытаюсь научить себя HTML.Прямо сейчас я создаю сайт только для эстетических целей, и у меня проблемы с CSS / div.На данный момент это выглядит как это .Без h1 он на самом деле остается прямо по тексту.Мой код выглядит так: 

<!Doctype html>
<html>


<title>Lovey Lovey</title>


<head>

<link rel="shortcut icon" href="https://www.emoji.co.uk/files/phantom-open-emojis/symbols-phantom/12944-sparkling-heart.png" />

    <link rel= "stylesheet" type="text/css" href="love.css">

<style type="text/css">


body {background: url("https://media.giphy.com/media/elf1s7iKPGXks/giphy.gif") #ffb3ff right repeat; }

</style>

</head>


<body> 

<center>

<img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > 

<br>
<br>


<div class = "header">
<img src= https://i.imgur.com/7Xjrk3X.gif alt= "Left" style= "height:75px; width:75px; float:left;"> 


 <h1>I love you!</h1>

<img src= https://i.imgur.com/CQl7GZu.gif alt= "Right" style= "float:right; height:75px; width:75px;">

</div>

<br>

<h2><i>Love you so much!</i></h2>

<br>
<br>
<br>

<img src = https://i.imgur.com/HCwaPsi.gif height="170" width="140"  />

<br>
<br>

<img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" >

И, наконец, мой CSS выглядит следующим образом: 

@charset "utf-8";
/* CSS Document */

.header Left {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header Right {
  float: right;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

По сути, я пытаюсь добавить крылья рядом с надписью «Я люблю».вы!"в то время как текст по-прежнему будет большим.Мне кажется, что я что-то упускаю в CSS, но я не совсем уверен.Я ценю любой вклад, который вы, ребята, могли бы иметь!

Ответы [ 5 ]

0 голосов
/ 19 октября 2018

Я удалил весь беспорядок в вашем HTML, как предложено в моем комментарии. 

body {
  background: url("https://media.giphy.com/media/elf1s7iKPGXks/giphy.gif") #ffb3ff right repeat;
  text-align: center;
}

.left, .right {
  float: left;
  width: 100px;
  height: 100px;
}

.right {
  float: right;
}

h1 {
  display: inline;
}

header,
footer {
  background-image: url('https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif');
  background-size: 75px 75px;
  background-repeat: repeat-x;
  height: 75px;
}
<!Doctype html>
<html>

  <head>
    <title>Lovey Lovey</title>

    <link rel="shortcut icon" href="https://www.emoji.co.uk/files/phantom-open-emojis/symbols-phantom/12944-sparkling-heart.png" />
  </head>


  <body>

    <header></header>

    <main>
      <img src=https://i.imgur.com/7Xjrk3X.gif alt="Left" class="left">

      <h1>I love you!</h1>

      <img src=https://i.imgur.com/CQl7GZu.gif alt="Right" class="right">

      <h2>Love you so much!</h2>

      <img src=https://i.imgur.com/HCwaPsi.gif height="170" width="140" />
    </main>

    <footer></footer>

  </body>

</html>

Я только не расположил нижний колонтитул в этом примере, так что это было бы то, что вы могли бы сделать для себя.Теперь это так же, как у вас в вопросе, но представьте, что вы хотели бы иметь его внизу окна просмотра.

0 голосов
/ 19 октября 2018

h1, являясь элементом уровня блока, занимает всю ширину области просмотра.Ниже CSS определенно поможет вам с наименьшим количеством правок: 

.header h1 {display:inline-block;}

Также удалите поплавки для крыльев left и right оба.

Другой способ добавить этот CSS: 

.header { display:table; }
.header *{ display:table-cell; }

Надеюсь, это поможет вам!

0 голосов
/ 19 октября 2018

Добавить ниже к Css 

  img#left {
    position: absolute;
    top: 45vh;
    left: 110vh;
           }
   img#right {
    position: absolute;
    top: 45vh;
    left: 60vh;
}

И добавить идентификаторы в HTML внутри 

<img id="right">
<img id="left">
0 голосов
/ 19 октября 2018

Пожалуйста, проверьте изображение прилагается ниже.Если вы хотите, чтобы ваша HTML-страница была такой, вам будут полезны следующие шаги:

image

Просто измените свой код следующим образом: 

<div class = "header">
<img src= https://i.imgur.com/7Xjrk3X.gif style= "height:75px; 
width:75px; float:left;"> 


<img src= https://i.imgur.com/CQl7GZu.gif  style= "float:right; 
height:75px; width:75px;">

</div>

<br>

<h1>I Love You</h1>

<br>
<br>
<br>

<h2><i>Love You So Much</i></h2>

Также удалите стиль 'header h1' из CSS-части

0 голосов
/ 19 октября 2018

Вы можете указать и imgs, и ID следующим образом: 

<img src="..." id="left-wing" />
<img src="..." id="right-wing" />

А для css: 

img#left-wing {
    position: absolute;
    top: 50vh;
    left: 40vh;
}

img#right-wing {
    position: absolute;
    top: 50vh;
    left: 60vh;
}

Я не уверен, что эти измерения будут работать, но поиграйте и выположу их туда, где они должны быть.

...