Ul lists are inline and not vertical

HTML-CSS
1

So my lists are inline/horizontal and not vertical as they should be. And I don’t understand why. Any idea why that is?

These are a few screenshots of the issue ,where the lists arise on the same row horizontally:

any idea
any idea2250×330 111 KB
any idea2 any idea3 gfgfd
any idea4
any idea42236×292 104 KB

Here is HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FROGIVERSE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});





</script> 

    <link rel="stylesheet" href="css/stylesheet.css">

</head>
<body>
<div id="header"></div>
    <h1 class="Froglegs"><a href="index.html" class="Frogiverse">FROGIVERSE</a></h1>
    
    <p>Frogs like to eat insects when they are hungry</p>
    <div class="container">
        <header>
        <img src="images/Frog.svg" alt="23andfour logo" class="logo" id="logo">

        <nav>
           <a href="#" class="hide-desktop">
               <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
           </a>
            <ul class="show-desktop hide-desktop" id="nav">
                <li id="exit" class="exit-btn hide-desktop"><img src="images/exit.svg" alt="exit menu"></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li> 
                <li><a href="#">Contact</a></li> 
            </ul>
        </nav>
    </header>
    <section class="Boxen">
        <h1>Frogs love to swim slowly during the day when the fish are less active</h1>
        <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="images/Frog.svg" alt="server graphic" width="100" height="100" class="Frog">

        <p class="subhead">Frogs also like to sleep. At least they close their eyes</p>
<button id="Frogbutton" type="button">Click for frog moves</button>    
</section>
    </div>

    <img src="images/FrogLogo.jpg" alt="server graphic" class="server">



    <div class="blue-container">
        <div class="container">
            <ul>
                <li>
                    <p>Frogs like to swim, larp water, kick their legs and hang beneath leaves</p>
                </li>
                <li>
                    <p>Frogs like to swim, larp water, kick their legs and hang beneath leaves</p>
                </li>
                <li><p>Frogs like to swim, larp water, kick their legs and hang beneath leaves</p></li>
            </ul>
        </div>
    </div>

    <div class="gray-container">
        <div class="container">
            <ul>
                <li>

                </li>
            </ul>
        </div>
    </div>

    <p id="demo">This site is mostly about frogs.</p>
<div>
    <br><br>
    <!--Here begins the popup form-->
    <div class="form-popup" id="myForm">
        <form method="POST" action="action-page.php" class="form-container">
      
          <input type="text" placeholder="name" name="name" required>
      
          <input type="password" placeholder="Password" name="password" required>
      
          <button type="submit" class="btn">Login</button>
          <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
        </form>
      </div>
      <!--Here ends the popup form-->
      <br><br>
    <button onclick="myFunction()" class="Frogs">What do frogs like?</button>
    <p id="Frog2"></p>
    </div>

    <div id="footer"></div>

    <script>
        function bigImg(x) {
  x.style.height = "100px";
  x.style.width = "100px";
}

function normalImg(x) {
  x.style.height = "160px";
  x.style.width = "160px";
}
function myFunction() {
  var str = "Frogs like to chill out";
  var result = str.fontcolor("darkgreen");
  document.getElementById("Frog2").innerHTML = result;
}
document.getElementById("demo").style.color= "green";


    </script>

</body>
</html>

Here is CSS:

@import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap’);
@import url(‘https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap’);

/* Custom Properties */

    {
    box-sizing: border-box;
    }

h1:hover, .Frogiverse:hover{
color:red;
text-shadow: red 2px 2px 10px;
}

body {
font-family: ‘Montserrat’, ‘sans-serif’;
background-image: linear-gradient(45deg, white, #e6e6ff,orange, green);
}

body p{
font-weight: bold;
}

p:first-child {
color:green;
text-shadow: blue 2px 2px 10px;
}

.text {
color: #3d9801;
text-shadow: orange 2px 2px 2px;}

h1, .Frogiverse {
color: #3d9801;
font-family: ‘Source Sans Pro’, sans-serif;
font-weight: bold;
margin-left: 5px;
font-size: 43px;
text-shadow: black 2px 2px 10px;
text-decoration: none;
}

h1 a, .Frogiverse a{
color: #196719;
font-family: ‘Montserrat’, ‘sans-serif’;
font-weight: bold;
margin-left: 5px;
font-size: 43px;
text-shadow: black 2px 2px 10px;
}

.boxen{
z-index: -4;
}

.boxen:first-child{
z-index: -1;
}

.server {
object-fit: cover;
position: absolute;
top: 340px;
right: 15px;
left: 250px;
width:24%;
height:29.3%;
border-radius: 2px;
z-index: -2;
margin-left:10px;
}

.topmenu {
overflow: hidden;
background-color: #3d9801;
padding-top: 5px;
padding-bottom: 0px;
height: 36px;
margin-top: 0px;
background-image: linear-gradient(to right, #3d9801 ,#3d9801, #3d9801, white);
}

.Froglegs {
position: absolute;
margin-right: 25px;
margin-left: 1000px;
margin-top: 65px;
font-size: 50px;
}

.topmenu a {
color: #f2f2f2;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
font-size: 18px;
position: relative;
margin-left: 90px;
margin-top: 10px;
margin-bottom: 0px;
bottom: 14px;
font-family: ‘Montserrat’;
}

.Frog{
position: absolute;
top:-100px;
margin-top:0px;
margin-bottom: 20px;
padding-top: 0px;
border: 0;
}

li {
float: left;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #196719;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 5px;
}

.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: left;
padding-bottom: 20px;
padding: 12px 16px;
z-index: 2;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

a:hover {
color: #0300ea;
text-shadow: 0px 0px 1px orangered;
}

.Frogiverse a:hover{
text-shadow: none;
}

.topmenu a:hover {
background-color: #ddd;
color: black;
text-shadow: none;
}

/.logo {
position: absolute;
left: 0px;
top: 110px;
bottom: 0px;
z-index: -3;
object-fit: cover;
}/

.logo {
object-fit: cover;
position: absolute;
top: 36px;
right: 150px;
left: 0px;
width:24%;
height:29.3%;
z-index: -3;
border-radius: 2px;
}

.butt {
width: 2px;
border: 2px solid green;
border-radius: 40%;
}

ul {
font-weight: normal;
display: block;
}

/* Here the footer begins */

,:before,*:after{
box-sizing: border-box;
}

body{
font-family: Montserrat;
margin: 0;
font-size: 14px;
display: grid;
}

main{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 3.8;
font-size:80px;
text-transform: uppercase;
font-weight: bold;
}

footer{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
flex-flow: row wrap;
padding: 50px;
color: #fff;
background-color: #3d9801;
display: flex;
flex-direction:row;
margin: auto;
}

.footer > *{
flex: 1 100%;
}

.footer-left{
margin-right: 1.25em;
margin-bottom: 2em;
}

.footer-left img{
width: 50%;
}

h2{
font-weight: 400;
font-size: 17px;
}

.footer ul{
list-style:none;
padding-left:0;
}
.footer li{
line-height:2em;
}
.footer a{
text-decoration: none;
}
.footer-right{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-flow: row wrap;
}
.footer-right > * {
flex:1 50%;
margin-right: 1.25em;
}
.box a{
color: #fff;;
}
.footer-bottom{
text-align:center;
color: #fff;
padding-top: 50px;
}
.footer-left p{
padding-right: 20%;
color: #fff;
}
.socials a{
background: #364a62;
width:40px;
height:40px;
display:inline-block;
margin-right:10px;
}
.socials a i{
color: #e7f2f4;
padding: 10px 12px;
font-size: 20px;
}

@media screen and (min-width: 600px){
.footer-right > *{
flex:1;
}
.footer-left{
flex:1 0px;
}
.footer-right{
flex:2 0px;
}
}
@media screen and (max-width: 600px){
.footer{
padding:15px;
}
main{
font-size:55px;
}
}

/Here begins the popup form/

#open-button {
background-color: green;;
color: orange;
padding: 16px 20px 28px 20px;
border: 2px solid orange;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 80px;
border-radius: 8px;
width: 240px;
z-index: 20;
font-size: 16px;
cursor: pointer;
transition: all 0.5s ease;
height: 40px;
z-index: 20;
}

/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
background: rgba(23, 195, 7, 0.8);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
font-family: ‘Montserrat’, sans-serif;

}

/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
font-family: ‘Montserrat’, sans-serif;
outline: 1px;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}

/* Full-width input fields */
.form-container input[type=name], .form-container input[type=password] {
width: 100%;
font-family: ‘Montserrat’, sans-serif;
outline: 1;
background: #f2f2f2;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
width: 100%;
font-family: ‘Montserrat’, sans-serif;
outline: 1px;
background: #f2f2f2;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}

/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
cursor: pointer;
margin-bottom:10px;
font-family: ‘Montserrat’, sans-serif;
text-transform: uppercase;
outline: 0;
background: #4caf50;
width: 100%;
border: 0;
padding: 15px;
color: #ffffff;
font-size: 14px;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: #4CAF50;
cursor: pointer;
margin-bottom:10px;
font-family: ‘Montserrat’, sans-serif;

text-transform: uppercase;
outline: 0;
background: #4caf50;
width: 100%;
border: 0;
padding: 15px;
color: #ffffff;
font-size: 14px;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {

opacity: 1;
}

/Here ends the Popup form/
2

Hi there,
Is this on Codepen, or somewhere so people can play with the code?

Just took a brief look at your CSS, and I wonder if this is the issue?

3

Pretty hard to say without the HTML, but you are floating all <li> elements.

li {
float: left;
}
4

Great man. When I removed that it worked. Any idea why that thing occurs on the right-margin of the entire page:

Weird
Weird458×936 26.3 KB

5

It is like a weird thing occuring. With a right-margin of the entire page

6

You have a pretty crazy margin-left on .Froglegs. Not really sure why you need it to have position absolute or why it has those margin values?

You also have invalid CSS. Run it through a validator.

7

Thanks that one worked.

Not sure why I need to use position:absolute. The positioning stuff is still a bit confusing to me :slight_smile:

I just try different positions and see if the thing is moving or not basically.

A weird thing that occurs when I zoom out pf the page is that the footer is not repsonsive(I think it is called?). And it then looks pretty weird like below. How can I make that responsive?

frog
frog2444×516 73.8 KB