Text bellow image

1

Okay this is my third post, and i guess i have to keep on making new ones, since noone knows the answer. :confused:

My picture:

lasttime
lasttime1357×614 67.7 KB

As you can see, ‘‘TEXT BELLOW IMAGE’’ should be bellow image (as written) but its still on the picture? how is this possible? ive closed the parent <div of my image.

AAAND this is my HTML & CSS:

HTML:

<head>
   <link href="https://fonts.googleapis.com/css?family=Ewert|Great+Vibes|Shojumaru|Julius+Sans+One|Doppio+one" rel="stylesheet">
</head>

<div id="slika1">

<ul>
  <li><a href="#s1">Domov</a></li>
  <li><a href="#s2">Zgodovina</a></li>
  <li><a href="#s3">Znamenitosti</a></li>
  <li><a href="#s4">Galerija</a></li>
  
</ul>

<h1 align="center"><big>PREKMURJE<big>

</h1>


<div id="s1">
  <h2 align="center">O prekmurju</h2>
  <p>Prekmurje je nižinska pokrajina na skrajnem severovzhodnem delu Slovenije, ob meji z Avstrijo in Madžarsko, na levem bregu reke Mure, po kateri je tudi dobila ime. Pokrajina je večinoma poljedelska, večji mesti pa sta Murska Sobota in Lendava. Prekmurje je bilo vedno in je še vedno gospodarsko in politično odmaknjeno od ostalih slovenskih pokrajin. Zaradi geografske lege in politike je bilo mnogo bolj podvrženo raznarodovalnim vplivom od konca 11. stoletja dalje. Prekmurje je pretežno ravninska pokrajina. Geografsko je razdeljeno na tri območja: hribovnato področje severno od Murske Sobote je Goričko; vzhodno proti Muri leži Ravensko, jugovzhodno od Murske Sobote pa leži Dolinsko. Okrog Lendave pa je manjše gričevnato področje Lendavske gorice.</p>
  </div>
  
</div>

<div>
  <p>TEXT-BELLOW-IMAGE</p>

CSS:

body {
margin: 0px;}

ul {
list-style-type: none;
background-color: grey;
margin: 0;
padding: 0;
overflow: hidden;
top: 0;
position: fixed;
width: 100%;
z-index: 1;}

li {
float: left;
border-left:1px solid #bbb;}

li a {
display:inline-block;
color: black;
padding: 8px;
font-family: julius sans one ;
text-decoration: none;
text-align: center; 
}

a:hover:not(.active) {
background-color: silver; }

.active {
    background-color: silver;
}

h1 {
font-family: Ewert;
color: green; 
font-size: 50px;
position: relative;
top: 10px;}

h2 {
position:relative;
bottom: 10px;
font-family: great vibes;
font-size: 60px;}

p {
position: relative;
bottom: 50px;
text-align: center;
text-shadow: white;}

#slika1 {
background: url("http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg");
background-repeat: no-repeeat;
background-size: auto; }
2

Hey @1ncontr0L could you post a link to your codepen? I think it would be helpful to get in there and look at the live code. Thanks!

3
4

Hi 1ncontr0L,

Depending which part you want to go bellow the image, you just have to close the #slika1 div before it, eg.:

<body>
  <div id="slika1">
    <ul>
      <li><a href="#s1">Domov</a></li>
      <li><a href="#s2">Zgodovina</a></li>
      <li><a href="#s3">Znamenitosti</a></li>
      <li><a href="#s4">Galerija</a></li>
    </ul>
    <h1 align="center"><big>PREKMURJE<big></h1>
  </div>
  <div id="s1">
    <h2 align="center">O prekmurju</h2>
    <p>Prekmurje...</p>
  </div>
</body>
5

i made a mistake now, but i did close it before, and text was still on the image

6

UPDATED:
https://codepen.io/Sebastijan/pen/mXxqPB
same problem…

7

and btw, this is the whole picture: http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg
but on codepen when i make it as background, u can clearly see that the bottom part is missing big… What is wrong?