Stop text from overlapping html and css-CodePudding

when I resize my window my text is overlapping. How do I stop this from happening? I want it to just resize if it colliding with the other text elements or, if not possible, that they just stack under each other? problem

I already tried

flex box
set min height

and can someone tell me what position I should use mainly?

html:

<body>
    <div >
       <div >
           <h1  title="Coffeesnakes">Coffeesnakes</h1>
           <button  onclick="func()">About us!</button>
           <div >
           <p  title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
           <p  title="Can code: html, python, js ">Timgb11</p>
        </div>
       </div>
    </div>
</body>

ccs:

.flex_container {
  display: flex;
  flex-wrap: wrap;
  min-width: 550px;
  flex-direction: column;
  position: relative;
}

.bar {
  position: relative;
  background-color: rgb(41, 80, 143);
  border: 5px solid rgb(46, 84, 149);
  height: 30px;
  width: auto;
  margin: 0;
}

.tekst {
  color: white;
  position: static;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.ccontroller {
  margin-top: -12px;
}

.creator1 {
  font-size: 25px;
  color: white;
  text-align: left;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.creator2 {
  color: white;
  font-size: 25px;
  text-align: right;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.aboutus {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white;
  background-color: #123456;
  height: 15px;
  width: auto;
}

body {
  background-color: #123456;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

CodePudding user response：

Your button has a .aboutus class which sets position:absolute;. This ignores the width of the other elements and absolute positions the element in the parent div.

Please provide an actual representation of what you are trying to achieve.

If you want a structured approach, you can do something like this with flexbox (resize the windows to see how it goes):

.flex_container {
  display: flex;
  flex-wrap: wrap;
  min-width: 550px;
  flex-direction: column;
  position: relative;
}

.bar {
  position: relative;
  background-color: rgb(41, 80, 143);
  border: 5px solid rgb(46, 84, 149);
  height: 30px;
  width: auto;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tekst {
  color: white;
  position: static;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  justify-content: center;
  vertical-align: middle;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.ccontroller {
  margin-top: -12px;
}

.creator1 {
  font-size: 25px;
  color: white;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.creator2 {
  color: white;
  font-size: 25px;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.aboutus {
  margin: 0;
  color: white;
  background-color: #123456;
  width: auto;
}

body {
  background-color: #123456;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: 100% 100%;
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

html,
body {
  min-width: 550px;
  position: relative;
  margin: 0;
  padding: 0;
}

<body>
  <div >
    <div >
      <p  title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
      <h1  title="Coffeesnakes">Coffeesnakes</h1>
      <p  title="Can code: html, python, js ">Timgb11</p>
      <button  onclick="func()">About us!</button>
    </div>
  </div>
</body>

CodePudding user response：

Add min-widthto you items. Like in the abstract working example below:

.flex-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

p {
  margin: 5px;
  min-width:200px;
}

<div >
  <p>foo</p>
  <p>bar</p>
  <p>baz</p>
</div>

CodePudding user response：

A way to fix your problem is using flex box, but this time add a part in the css where once the screen gets to a certain size, the flex-box goes from row, to column. Like this:

.bar-element {
    display: flex;
    flex-direction: row;
}

@media (max-width:700px){
    .bar-element {
        display: flex;
        flex-direction: column;
    }
}

SO once the screen gets to a curtain size it changes the layout.

Here is a demo:

.flex {
  display: flex;
  flex-direction: row;
}

p {
  margin: 5px;
}

@media (max-width:700px){
   .flex {
      display: flex;
      flex-direction: column;
    }

}

<div >
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</div>

You can also check out the link here, to learn more on how to change properties on different screen sizes.

Here is your code edited:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* .flex_container {
        display: flex;
        flex-wrap: wrap;
        min-width: 550px;
        flex-direction: column;
        position: relative;
    } */
    
    .bar {
        position: relative;
        background-color: rgb(41, 80, 143);
        border: 5px solid rgb(46, 84, 149);
        height: 30px;
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .tekst {
        color: white;
        text-transform: uppercase;
        text-align: center;
        margin: 0;
        vertical-align: middle;
        line-height: 30px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .ccontroller {
        display: flex;
        flex-direction: row;
        width: fit-content;
        flex-wrap: wrap;
        justify-content: flex-end;
        justify-self: flex-end;
    }
    
    .creator1 {
        display: block;
        font-size: 25px;
        color: white;
        text-align: left;
        margin: 0;
        line-height: auto;
        font-family: Arial, Helvetica, sans-serif;
        margin-right: 10px;
    }
    
    .creator2 {
        display: block;
        color: white;
        font-size: 25px;
        text-align: left;
        margin: 0;
        line-height: auto;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .aboutus {
        display: block;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        background-color: #123456;
        height: fit-content;
        width: auto;
        margin-top: 16px;
        margin-left: 50px;
        text-align: center;
    }
    
    body {
        background-color: #123456;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: 100% 100%;
        min-width: 550px;
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    @media (max-width:700px) {
        .bar {
            display: flex;
            flex-direction: column;
        }
        .ccontroller {
            display: flex;
            flex-direction: column;
        }
    }
</style>

<body>
    <div >
        <div >
            <h1  title="Coffeesnakes">Coffeesnakes</h1>
            <button  onclick="func()">About us!</button>
            <div >
                <p  title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
                <p  title="Can code: html, python, js ">Timgb11</p>
            </div>
        </div>
    </div>
</body>

</html>