I cant add text to my webpage anymore

1

wtf1
wtf11365×596 204 KB

this is the bottom of my picture. I want to add text bellow my background image, but this isnt possible… Even if i simply delete my background picture, and try to add text bellow youtube link, it simply isnt possible, like its limited…Im really losing my nerves here, can anyone simply explain what am i doing wrong? here is my HTML and CSS ->

HTML:

<link href='https://fonts.googleapis.com/css?family=Ewert' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Shojumaru' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Great Vibes' rel='stylesheet'>

<div class="container">
<div class="jumbotron">

<body>


<h1>PREKMURJE</h1> 

<div>
 <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>
  </div>

<header id="s1">

  <h3>O prekmurju</h3>

   <p><big>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.

Najvišji vrh Prekmurja - Kugla (418 mnm) leži v naselju Sotin.

  Površina Prekmurja je 948,48 km².<big></p>
     </body> </header>

<div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/jpaXuSi2Tmw"</iframe></div>
  </body>

  
  </div>
  </div>
</div>

<p>asdasdasd</p>

CSS:

h1 { margin: 0px}

h1 {
position:relative;
bottom: 15px;
text-align: center;
font-family: Ewert; 
color: #004d00;
font-size: 70px;}

h3 {
text-align: center;
padding-top: 30px;
font-size: 50px; }

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    background-color: #f1f11;
   font-family: Shojumaru;
   overflow: hidden;
   text-align: center; 
   border: 5px double;
   }

li  {
  display: inline-block;
}     

li a {
    display: inline-block;
    color: white;
     text-decoration: none;
    font-size: 20px;
    }

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

a {
margin: 10px;
}
   
h3{
float: middle;
font-family: Great Vibes;
position: relative;
bottom: 30px;}


div {
padding-top: 25px;}
p {
float: center;
padding-right: 100px;
  padding-left: 100px;
padding-bottom: 100px;
position: relative;
bottom: 55px;
text-shadow: white 0px 0px 10px;

    }
 
.container {
text-align: center;}


iframe {
position:relative;
bottom:50px;
}

body {
background-image: url("http://globalmedicalco.com/photos/globalmedicalco/26/126088.jpg");

}
2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

My picture wasnt uploaded before, now i did it again… Still dont know how to add text

4

It seems you are closing the <body> tag earlier than you might want to.

</body>
  </div>
  </div>
</div>

<p>asdasdasd</p>

Placing the HTML elements before closing <body> tag ought to fix the issue.

5

I also didn’t notice another issue at the top of the HTML structure. Formatting the code with better indentation might help you clarify the HTML elements and which elements are nested in which other elements.

Here some additional notes which might be helpful.

  1. wrap references to google fonts in between <head> tags
<head>
   <link href='https://fonts.googleapis.com/css?family=Ewert' rel='stylesheet'>
   <link href='https://fonts.googleapis.com/css?family=Shojumaru' rel='stylesheet'>
   <link href='https://fonts.googleapis.com/css?family=Great Vibes' rel='stylesheet'>
</head>

They can actually be merged together in a single call to the google API, so be aware of that.

<head>
   <link href="https://fonts.googleapis.com/css?family=Ewert|Great+Vibes|Shojumaru" rel="stylesheet">
</head>
  1. wrap all content you want to display in between body tags
<body>
  <!-- include content -->
</body>
  1. Indent HTML elements nesting children elements further away than the parents
<body>
   <!-- include content -->
   <div class="container">
     <div class="jumbotron">
        <h1>PREKMURJE</h1> 

     </div> <!-- close jumbotron div -->
   </div> <!-- close container div -->
</body>

As noted in the snippet, it might be beneficial to include some comments to signal which div elements are being closed, especially for long HTML structures.

Hope I helped you in some way, shape or form. :slight_smile:

6

yes you helped a lot.:slight_smile: but right now i have another problem… Anyone has a clue, why is my youtube link outside of my background picture?

here is link of my code:

7

Put the background on the body tag in CSS.