Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Using flex box to make a grid

Hello I have used flex box before without problems, but with this new code I am using to show a hover when over text I am not sure how to make my body content and body content 1 to be in 2 rows at the top, instead of stacked on each other
CSS:
.bodycontent {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 1%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex; 1;
    
}

.bodycontent1 {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 50%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex: 2;
    z-index: 9;
}

.images{
    width: 33%;
    z-index: -9;
    padding-left: 10px;
}
HTML:
 <div class="bodycontent">
       <a href="index.html" id = "ryan" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Look At This Photograph</p></a>
        </div>
    <div class="bodycontent">
       <a href="index.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>1017 A L Y X 9SM</p></a>
        </div>
    <div class="bodycontent">
        <a href="index.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Tendencies</p></a>
    </div>
    
    <div class="bodycontent">
        <a href="index.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Bean Sans</p></a>
    </div>   
        
    <div class="bodycontent1">
        <a href="index.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Canyon Daze</p></a>
    </div>
        
                
    <div class="bodycontent1">
        <a href="index.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Mutiny</p></a>
    </div>
    
    <div class="bodycontent1">
        <a href="index.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Pill Poppers</p></a>
    </div>
        

        
    <div class="images">
                <img id="look" class="lookat" src="Images/lookat-this2.gif">
      
                <img id="alyx" class="alyx" src="Images/thumbalyx.png">
        
                <img id="tend" class="tend" src="Images/thumbtend.png">
        
                <img id="bean" class="bean" src="Images/thumbbean.png">
                
                <img id="daze" class="daze" src="Images/thumbdaze.png">
                
                <img id="mutiny" class="mutiny" src="Images/Mutiny_Ring.png">
        
                <img id="pill" class="pill" src="Images/thumbpp.png">
        
                
        </div>
    
    <script>
    
        function mouseOver() {
  document.getElementById("look").style.display = "block";
}

        function mouseOut() {
  document.getElementById("look").style.display = "none";
}

        function mouseOver1() {
  document.getElementById("alyx").style.display = "block";
}

        function mouseOut1() {
  document.getElementById("alyx").style.display = "none";
}

        function mouseOver2() {
  document.getElementById("tend").style.display = "block";
}

        function mouseOut2() {
  document.getElementById("tend").style.display = "none";
}
    
        function mouseOver3() {
  document.getElementById("bean").style.display = "block";
}

        function mouseOut3() {
  document.getElementById("bean").style.display = "none";
}
    
        function mouseOver4() {
  document.getElementById("daze").style.display = "block";
}

        function mouseOut4() {
  document.getElementById("daze").style.display = "none";
}
        function mouseOver5() {
  document.getElementById("mutiny").style.display = "block";
}

        function mouseOut5() {
  document.getElementById("mutiny").style.display = "none";
}       
      
        function mouseOver6() {
  document.getElementById("pill").style.display = "block";
}

        function mouseOut6() {
  document.getElementById("pill").style.display = "none";
}       
\       
    </script>
 
If I put change it so they are not all broken up by divs and just in 2 div classes, I still get the same thing
HTML:
<div class="firstcol">
       <div>
       <a href="index.html" id = "ryan" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Look At This Photograph<br></p></a>

       <a href="index.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>1017 A L Y X 9SM<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Tendencies<br></p></a>
 
        <a href="index.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Bean Sans<br></p></a>
       </div>
    </div>
    <div class="secondcol">
       <div>
        <a href="index.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Canyon Daze<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Mutiny<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Pill Poppers</p></a>
           </div>
    </div>
CSS:
.firstcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 1%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex: 0, 50%;
    
    
}

.secondcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 50%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 33%;
    padding-bottom: 3px;
    flex: 0, 50%;

}
 
Is this what you wanted?

HTML:
<div class="firstcol">

       <a href="index.html" id = "ryan" onmouseover="mouseOver()" onmouseout="mouseOut()"><p>Look At This Photograph<br></p></a>

       <a href="index.html" id = "ryan" onmouseover="mouseOver1()" onmouseout="mouseOut1()"><p>1017 A L Y X 9SM<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver2()" onmouseout="mouseOut2()"><p>Tendencies<br></p></a>
 
        <a href="index.html" id = "ryan" onmouseover="mouseOver3()" onmouseout="mouseOut3()"><p>Bean Sans<br></p></a>

    </div>
    <div class="secondcol">
        <a href="index.html" id = "ryan" onmouseover="mouseOver4()" onmouseout="mouseOut4()"><p>Canyon Daze<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver5()" onmouseout="mouseOut5()"><p>Mutiny<br></p></a>

        <a href="index.html" id = "ryan" onmouseover="mouseOver6()" onmouseout="mouseOut6()"><p>Pill Poppers</p></a>
 
    </div>
CSS:
.firstcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 1%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 100%;
    padding-bottom: 3px;
    flex: 0, 50%;
}

.firstcol a {
  margin: 5px;
}

.secondcol {
    display: flex;
    flex-wrap: wrap;
    font-size: 25px;
    padding-left: 50%;
    line-height: 20px;
    font-family: Sans;
    letter-spacing: 1px;
    width: 100%;
    padding-bottom: 3px;
    flex: 0, 50%;
}

.secondcol a{
  margin: 5px;
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom