CODEWITHSUNDEEP
htmlcss
In6ify
In6ify

Reputation: 147

Elements on my webpage moves around when minimizing the browser [CSS, HTML]

The title says it all. I have tried to wrap the whole html-body, but that didn't work. When I minimize my browser or drag the corners all the elements on my page moves. Suggestions? I'll add my code here, maybe someone can find the error. The page is not done btw!

h1 {
    font-family: Arial, Helvetica, sans-serif;
}

/* KATEGORIER*/

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f1f1f1;
}

li a {
    float:left;
    display: block;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    cursor:pointer;
}

li a:hover{
    background-color: none;
    color: #0095cc;

}

/* SØKEBAR*/

#searchbar {
    position: relative;
    top: 30%;
    right: 1000px;
}

/*LOGIN*/

form {
    float:right;
    width:35%;
    position:absolute;
    top:20px;
    right:10px;
    font-family: Arial, Helvetica, sans-serif;

}

.tftextinput{

}

/*BOKSER*/

.boxed{

  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid black 4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.boxed{
    position: relative;
    bottom:-70px;
    right:530px;
    background-color: white;

}
<!DOCTYPE html>
<html>
<head>

<title>Startside</title>
<meta charset="utf-8" />




</head>

<body>

<h1>Filmregister</h1>

<!-- KATEGORIER -->
<ul>
  <li><a href="startside.html">Startside</a></li>
  <li><a href="minliste.html">Min Liste</a></li>
  <li><a href="minelån.html">Mine lån</a></li>
</ul>


<!-- SØKEBAR -->

<div id="searchbar">
        <form id="tfnewsearch" method="get" action="">
                    <input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton">
        </form>
<div class="tfclear"></div>
</div>

<!-- LOGIN -->

<form>

  <label for="E-postadresse">E-postadresse</label>
  <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />

  <label for="Passord">Passord</label>
  <input type="password" placeholder="Passord" id="Passord" />

  <input type="submit" value="Logg inn" />

  </form>

  <!--BOKSER-->

<div class="boxed">
Dette er en test
</div>


</body>


</html>

Upvotes: 0

Views: 3495

Answers (2)

user7361089
user7361089

Reputation:

I could not leave you hanging :D I left the colours so you see what is going on. You can remove them afterwards. And this moving of the code inside the page on stackoverflow to display right is so annoying honestly. Probably there is a solution I do not know about as a new member. Btw the min-width:900px; on class header is to prevent the log in form from overlapping on top of Filmregister. Tested on Mozilla version I fave no clue :D What I am saying is it will most likely act different on different browsers.

<!DOCTYPE html>
<html>
<head>

<title>Startside</title>
<meta charset="utf-8" />

<style>

h1 {
font-family: Arial, Helvetica, sans-serif;
}

/* KATEGORIER*/

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f1f1f1;
}

li a {
float:left;
display: block;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
padding: 16px;
text-decoration: none;
cursor:pointer;
}

li a:hover{
background-color: none;
color: #0095cc;

}

/* SØKEBAR*/

#searchbar {
position: absolute;
left: 30px;
top: 200px;
}

/*LOGIN*/

form {
float:right;
width:35%;
position:absolute;
top:20px;
right:10px;
font-family: Arial, Helvetica, sans-serif;

}

.tftextinput{

}

/*BOKSER*/

.boxed{

width: 500px;
margin: 20px auto;
padding: 50px;
border: solid black 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.boxed{
position: absolute;
top: 300px;
left:20px;
background-color: white;

}

.header
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
min-width:900px;
background-color: red;
display: inline-block;
}

.menu
{
position: absolute;
top: 100px;
left: 0px;
width: 100%;
background-color: yellow;
display: inline-block;
}

.login
{
position: absolute;
top: 10px;
right: 0px;
width: 650px;
background-color: yellow;
display: inline-block;
}



</style>


</head>

<body>

<!-- KATEGORIER -->
<span class='menu'>
<ul>
<li><a href="startside.html">Startside</a></li>
<li><a href="minliste.html">Min Liste</a></li>
<li><a href="minelån.html">Mine lån</a></li>
</ul>
</span>

<!-- SØKEBAR -->

<div id="searchbar">
<pre><form id="tfnewsearch" method="get" action=""><input type="text" class="tftextinput" name="q" size="21" maxlength="120"><input type="submit" value="søk" class="tfbutton"></form></pre>
<div class="tfclear"></div>
</div>

<!-- LOGIN -->
<span class='header'>

<h1>Filmregister</h1>


<form>
<span class='login'>
 <label for="E-postadresse">E-postadresse</label>
 <input name="E-postadresse" placeholder="E-postadresse" id="E-postadresse" />

  <label for="Passord">Passord</label>
  <input type="password" placeholder="Passord" id="Passord" />

  <input type="submit" value="Logg inn" />
</span> 
  </form>

</span>
  <!--BOKSER-->

<div class="boxed">
Dette er en test
</div>


</body>


</html>

Upvotes: 0

raouaoul
raouaoul

Reputation: 881

There are many things wrong with the positioning. I would suggest to use some kind of grid framework for beginning, and look through that code and see how it is done (for example bootstrap). It makes making layout much easier. http://www.w3schools.com/bootstrap/ go through that tutorial and you will learn a lot about positioning and page layouts.

Upvotes: 1

Related Questions