Text bellow image

Text bellow image
0

#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:

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?


#8

If you want that image to be a full page background, then you will need to apply the following to the body tag instead of the div with id=“slika1”.

background: url("http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg") no-repeat center center fixed; 
background-size: cover; 

Also, you do not have a closing </big> tag, so all the text after the <big> is large. Since the big tag is deprecated, you should use a span tag and create a class to specify the font-size for it.

I see you have removed the whole Text Below part, so I can not comment about that.


#9

BTW - @PortableStick already answered this exact same question in the other thread you already started. You keep changing your questions and creating duplicate topics. Keep each thread focused, so others trying to help you don’t waste their time writing up a response when you already have the answer in a duplicate thread you started. This is the very reason we do not want duplicate threads.