Why can't I put my desired text next to the image, underneath the title? - Html

D00MA
March 9, 2023
263 views
1 vote
2 Answers

I just got into CSS and HTML, this is my first website I’m making and I’m having trouble positioning my text on the page. I want it to be in the middle, next to the image, but whatever I try it doesn’t let me move it any more upwards.
Here’s the CSS for the page.

here is what it looks like right now

a {
  text-transform: uppercase;
  display: inline-block;
  padding: 5px;
  margin: 35px 30px;
  text-decoration: none;
}

nav {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: 100px
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  list-style-type: none;
  color: #8D7B68;
  font-size: larger;
}

body {
  background-color: #ffffff;
  margin: 0 auto;
}

li:hover {
  color: #ed2323;
}

#banner {
  background-color: rgba(164, 144, 124, .8);
  background-size: cover;
  background-position: bottom center;
  height: 500px;
  width: 100%;
}

#banner .content h1 {
  border: 3px solid white;
  position: relative;
  top: 50px;
  width: 400px;
  margin: 0 auto;
}

h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  letter-spacing: 1px;
}

.milk {
  display: flex;
  margin: 0 0 0 150px;
  width: 350px;
  height: 350px;
  border: rgba(164, 144, 124, .9) 3px solid;
}

.milkp {
  margin: 0 675px 0 675px;
  text-align: center;
  max-width: 400px;
}

p {
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-weight: 300;
  padding: 10px;
  letter-spacing: 1px;
  line-height: 25px;
}

<nav class="navigation">
  <ul>
    <a href="./index.html">
      <li>početna stranica</li>
    </a>
    <a href="./proizvodi.html">
      <li>proizvodi</li>
    </a>
    <a href="./kontakt.html">
      <li>kontakt</li>
    </a>
  </ul>
</nav>
<div id="banner">
  <div class="content">
    <h1>mliječna čokolada</h1>
    <img src="https://i.pinimg.com/564x/47/99/71/47997186f6af47d86181766d78d55f47.jpg" alt="choco" class="milk">
    <p class="milkp">
      Prvi niz, upućen voljenom mladiću, bolje je uređen i sadrži nekoliko kraćih nizova koji se tiču njihova odnosa ili obrađuju pripadne ideje. Tako soneti 117 potiču mladića da nađe životnu družicu i dobije djecu; soneti 41 i 42 upozoravaju da je pjesnikova
      ljubavnica zavela mladića tijekom pjesnikova izbivanja; soneti 7886 opisuju pjesnikarivala koji je očevidno pokušao pridobiti mladića za sebe; u sonetima 8790 iskazana je zabrinutost da je mladić potpuno zaboravio pjesnika
    </p>
  </div>
</div>

I tried moving it using margins but it won’t let me move it upwards, just down right or left.
Tried setting the positioning to be different, display to something else but it doesn’t do anything.

Tags: css html

Answers

CSS grid is a great for layout. I’ve put explainers on each line of CSS to describe what it does. Here’s a good introduction on css tricks and a nice video from Kevin Powell to get you started. Good luck!

a {
  text-transform: uppercase;
  display: inline-block;
  padding: 5px;
  margin: 35px 30px;
  text-decoration: none;
}

nav {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: 100px
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  list-style-type: none;
  color: #8D7B68;
  font-size: larger;
}

body {
  background-color: #ffffff;
  margin: 0 auto;
}

li:hover {
  color: #ed2323;
}

#banner {
  background-color: rgba(164, 144, 124, .8);
  background-size: cover;
  background-position: bottom center;
  /* height: 500px; removed this as resizing your window may cause the text and/or image to overflow */
  /*width: 100%; not needed */
}

#banner .content h1 {
  border: 3px solid white;
  /*position: relative; got rid of this, we'll use the grid to position this */
  /*top: 50px; got rid of this, we'll use the margin below to position this */
  width: 400px;
  margin: 50px auto; /* changed this from margin: 0 auto; to add a bit of space between the title and the container */
}

.title {
  grid-area: header; /* added this to place it in the 'header' area. */
}
h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
  letter-spacing: 1px;

}

.milk {
  /* display: flex; removed this - not necessary */
  margin: auto 50px; /* changed this from margin: 0 0 0 150px; to put a nice border around your image*/
  width: 350px;
  height: 350px;
  border: rgba(164, 144, 124, .9) 3px solid;
  grid-area: img; /* put this in the image grid area (see .content below) */
  place-self: center; /* place the image in the center of the grid element */
}

.milkp {
  /*margin: 0 675px 0 675px; removed this - we'll use the grid to position this content */
  grid-area: milkp; /* put this in the milkp grid area (see .content below) */
  justify-self: center; /* put the text in the middle of the container */
  text-align: center;
  max-width: 400px;
}

p {
  color: rgb(0, 0, 0);
  font-size: 15px;
  font-weight: 300;
  padding: 10px;
  letter-spacing: 1px;
  line-height: 25px;
}

/* added this to use css grid to position your elements */
.content {
  display: grid;
  grid-template-columns: fit-content(0) 1fr;
  grid-template-areas: "img header"
                       "img milkp";
}

<nav class="navigation">
  <ul>
    <a href="./index.html">
      <li>početna stranica</li>
    </a>
    <a href="./proizvodi.html">
      <li>proizvodi</li>
    </a>
    <a href="./kontakt.html">
      <li>kontakt</li>
    </a>
  </ul>
</nav>
<div id="banner">
  <div class="content">
    <div class='title'><!-- added this to act as a wrapper for your header -->
      <h1>mliječna čokolada</h1>
    </div>
    <img src="https://i.pinimg.com/564x/47/99/71/47997186f6af47d86181766d78d55f47.jpg" alt="choco" class="milk">
    <p class="milkp">
      Prvi niz, upućen voljenom mladiću, bolje je uređen i sadrži nekoliko kraćih nizova koji se tiču njihova odnosa ili obrađuju pripadne ideje. Tako soneti 117 potiču mladića da nađe životnu družicu i dobije djecu; soneti 41 i 42 upozoravaju da je pjesnikova
      ljubavnica zavela mladića tijekom pjesnikova izbivanja; soneti 7886 opisuju pjesnikarivala koji je očevidno pokušao pridobiti mladića za sebe; u sonetima 8790 iskazana je zabrinutost da je mladić potpuno zaboravio pjesnika
    </p>
  </div>
</div>

Please Try This types of code changes might be working for you.

Here is CSS

a {
        text-transform: uppercase;
        display: inline-block;
        padding: 5px;
        margin: 35px 30px;
        text-decoration: none;
    }

nav {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    width: 100%;
    height: 100px
}

.navigation ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

.navigation li {
    font-weight: 100;
    letter-spacing: 2px;
    list-style-type: none;
    color: #8D7B68;
    font-size: larger;
}

body {
    background-color: #ffffff;
    margin: 0 auto;
}

li:hover {
    color: #ed2323;
}

#banner {
    background-color: rgba(164, 144, 124, .8);
    background-size: cover;
    background-position: bottom center;
    height: 500px;
    width: 100%;
}

.content-title {
    display: inline-block;
    width: 100%;
}

.content-title h1 {
    color: white;
    font-size: 42px;
    font-weight: 600;
    text-align: center;
    padding: 10px;
    letter-spacing: 1px;

    border: 3px solid white;
    position: relative;
    width: 400px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 10px;
}

.milk {
    width: 350px;
    height: 350px;
    border: rgba(164, 144, 124, .9) 3px solid;
    margin-left: 150px;
    float: left;
}

.milkp {
    max-width: 400px;
    display: inline-block;
    width: auto;
    float: left;
    margin-top: 25px;
    margin-left: 25px;
}

p {
    color: rgb(0, 0, 0);
    font-size: 15px;
    font-weight: 300;
    padding: 10px;
    letter-spacing: 1px;
    line-height: 25px;
}

.content {
    display: inline-block;
    width: 100%;
}

Here is HTML

<body>
    <nav class="navigation">
        <ul>
            <a href="./index.html">
                <li>početna stranica</li>
            </a>
            <a href="./proizvodi.html">
                <li>proizvodi</li>
            </a>
            <a href="./kontakt.html">
                <li>kontakt</li>
            </a>
        </ul>
    </nav>
    <div id="banner">
        <div class="content">
            <div class="content-title">
                <h1>mliječna čokolada</h1>
            </div>
            <img src="https://i.pinimg.com/564x/47/99/71/47997186f6af47d86181766d78d55f47.jpg" alt="choco" class="milk">
            <p class="milkp">
                Prvi niz, upućen voljenom mladiću, bolje je uređen i sadrži nekoliko kraćih
                nizova koji se tiču njihova odnosa ili obrađuju pripadne ideje. Tako soneti 117
                potiču mladića da nađe životnu družicu i dobije djecu; soneti 41 i 42 upozoravaju
                da je pjesnikova ljubavnica zavela mladića tijekom pjesnikova izbivanja; soneti
                7886 opisuju pjesnikarivala koji je očevidno pokušao pridobiti mladića za
                sebe; u sonetima 8790 iskazana je zabrinutost da je mladić potpuno zaboravio
                pjesnika
            </p>
        </div>
    </div>
</body>

This works well for you.

Please signup or login to give your own answer.

Click here to cancel reply.

Why can't I put my desired text next to the image, underneath the title? – Html

Answers